1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import React from 'react';
import { func, array, number } from 'prop-types';
import cx from 'clsx';
import s from './Selection.module.css';
export default function Selection({
OptionComponent,
optionPropsList,
selectedIndex,
onChange,
}) {
return (
// TODO a11y
// tabIndex="0"
<div className={s.root}>
{optionPropsList.map((props, idx) => {
const className = cx(s.item, { [s.itemActive]: idx === selectedIndex });
return (
<div
key={idx}
className={className}
onClick={(ev) => {
ev.preventDefault();
if (idx !== selectedIndex) {
onChange(idx);
}
}}
>
<OptionComponent {...props} />
</div>
);
})}
</div>
);
}
Selection.propTypes = {
OptionComponent: func,
optionPropsList: array,
selectedIndex: number,
onChange: func,
};
// for test
export function Option({ title }) {
// eslint-disable-next-line no-undef
if (__DEV__) {
return (
<div
style={{
width: 100,
height: 60,
backgroundColor: '#eee',
}}
>
{title}
</div>
);
}
}
|
