36 lines
965 B
TypeScript
36 lines
965 B
TypeScript
import React from 'react';
|
|
import $ from 'jquery';
|
|
import 'select2';
|
|
import { useSelector } from 'settings/store/hooks';
|
|
|
|
type Props = {
|
|
id: string
|
|
value: string[]
|
|
placeholder?: string
|
|
setValue: (x: string[]) => any
|
|
}
|
|
|
|
export default (props: Props) => {
|
|
const id = props.id;
|
|
const setValue = React.useCallback(props.setValue, []);
|
|
const segments = useSelector('getSegments')();
|
|
React.useLayoutEffect(() => {
|
|
const idSelector = `#${id}`;
|
|
$(idSelector).select2();
|
|
$(idSelector).on('change', (e) => {
|
|
setValue(Array.from(e.target.selectedOptions).map((x: any) => x.value));
|
|
});
|
|
return () => $(idSelector).select2('destroy');
|
|
}, [id, setValue]);
|
|
|
|
return (
|
|
<select id={id} data-placeholder={props.placeholder} defaultValue={props.value} multiple>
|
|
{segments.map((seg) => (
|
|
<option key={seg.id} value={seg.id}>
|
|
{`${seg.name} (${seg.subscribers})`}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
};
|