ag-common 0.0.142 → 0.0.143
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, }: {
|
|
2
|
+
export declare function DropdownList<T>({ options, value, onChange, placeholder, className, renderF, children, shadow, maxHeight, }: {
|
|
3
3
|
options: T[];
|
|
4
4
|
value?: T;
|
|
5
5
|
onChange: (v: T, index: number) => void;
|
|
@@ -11,4 +11,8 @@ export declare function DropdownList<T>({ options, value, onChange, placeholder,
|
|
|
11
11
|
* colour of dropdown shadow. default #555
|
|
12
12
|
*/
|
|
13
13
|
shadow?: string;
|
|
14
|
+
/**
|
|
15
|
+
* max height of items list. default 50vh
|
|
16
|
+
*/
|
|
17
|
+
maxHeight?: string;
|
|
14
18
|
}): JSX.Element;
|
|
@@ -45,6 +45,12 @@ const SItems = styled_components_1.default.div `
|
|
|
45
45
|
cursor: default;
|
|
46
46
|
width: 100%;
|
|
47
47
|
max-width: 95vw;
|
|
48
|
+
${({ maxHeight }) => maxHeight &&
|
|
49
|
+
(0, styled_components_1.css) `
|
|
50
|
+
max-height: ${maxHeight};
|
|
51
|
+
`}
|
|
52
|
+
|
|
53
|
+
overflow-y: scroll;
|
|
48
54
|
${({ open }) => open &&
|
|
49
55
|
(0, styled_components_1.css) `
|
|
50
56
|
display: flex;
|
|
@@ -82,7 +88,7 @@ const SItem = styled_components_1.default.div `
|
|
|
82
88
|
background-color: rgba(0, 0, 0, 0.2);
|
|
83
89
|
}
|
|
84
90
|
`;
|
|
85
|
-
function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', }) {
|
|
91
|
+
function DropdownList({ options, value, onChange, placeholder, className, renderF, children, shadow = '#555', maxHeight = '50vh', }) {
|
|
86
92
|
var _a, _b;
|
|
87
93
|
const ref = (0, react_1.useRef)(null);
|
|
88
94
|
const [state, setState] = (0, react_1.useState)(value);
|
|
@@ -124,7 +130,7 @@ function DropdownList({ options, value, onChange, placeholder, className, render
|
|
|
124
130
|
e.preventDefault();
|
|
125
131
|
setOpen(!open);
|
|
126
132
|
} },
|
|
127
|
-
react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow }, open &&
|
|
133
|
+
react_1.default.createElement(SItems, { open: open, style: style, shadow: shadow, maxHeight: maxHeight }, open &&
|
|
128
134
|
options.map((s, i) => (react_1.default.createElement(SItem, { key: renderF(s), selected: s === state, onClick: (e) => {
|
|
129
135
|
if (s !== state) {
|
|
130
136
|
onChange(s, i);
|