-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
CustomMenuPlacer.tsx
44 lines (39 loc) · 955 Bytes
/
CustomMenuPlacer.tsx
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
import React, { RefCallback } from 'react';
import Select, { MenuPlacerProps, PlacerProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
GroupedOption,
groupedOptions,
} from '../data';
const MenuPlacer = (
props: MenuPlacerProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
const { children } = props;
const getCustomPlacement: RefCallback<HTMLDivElement> = (ref) => {
if (!ref) return;
// custom implementation of getPlacement
};
const getUpdatedProps: () => PlacerProps = () => {
return {
placement: 'top',
maxHeight: 200,
};
};
return (
<>
{children({
ref: getCustomPlacement,
placerProps: getUpdatedProps(),
})}
</>
);
};
export default () => (
<Select<ColourOption | FlavourOption, false, GroupedOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
components={{ MenuPlacer }}
/>
);