armtek-uikit-react 1.0.145 → 1.0.146
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.
- package/package.json +1 -1
- package/ui/Form/Select/Select.d.ts +6 -2
- package/ui/Form/Select/Select.js +20 -20
- package/ui/Form/Select/SelectOptionList.d.ts +13 -0
- package/ui/Form/Select/SelectOptionList.js +31 -0
- package/ui/Form/Select/SelectOptionsContainer.d.ts +7 -0
- package/ui/Form/Select/SelectOptionsContainer.js +15 -0
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"armtek-uikit-react","version":"1.0.
|
|
1
|
+
{"name":"armtek-uikit-react","version":"1.0.146","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OptionType } from '../../../types/theme';
|
|
2
2
|
import { TextFieldProps } from '../TextField/TextField';
|
|
3
|
-
import { MouseEvent } from 'react';
|
|
3
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
4
4
|
type SelectBaseProps = {
|
|
5
5
|
options: OptionType[];
|
|
6
6
|
inline?: boolean;
|
|
@@ -15,6 +15,8 @@ type SelectBaseProps = {
|
|
|
15
15
|
defaultQuery?: string;
|
|
16
16
|
query?: string;
|
|
17
17
|
optionControls?: boolean;
|
|
18
|
+
afterList?: string | ReactNode;
|
|
19
|
+
beforeList?: string | ReactNode;
|
|
18
20
|
};
|
|
19
21
|
type MultipleType<M extends boolean = false> = {
|
|
20
22
|
multiple?: M;
|
|
@@ -42,7 +44,9 @@ export type SelectOptionsType<T extends boolean> = {
|
|
|
42
44
|
onSubmit?: () => void;
|
|
43
45
|
disabled?: boolean;
|
|
44
46
|
optionControls?: boolean;
|
|
47
|
+
afterList?: string | ReactNode;
|
|
48
|
+
beforeList?: string | ReactNode;
|
|
45
49
|
};
|
|
46
50
|
export declare const SelectOptions: import("react").ForwardRefExoticComponent<SelectOptionsType<boolean> & import("react").RefAttributes<unknown>>;
|
|
47
|
-
declare const _default: <M extends boolean = false>(props: SelectBaseProps & MultipleType<M> & Omit<TextFieldProps, keyof SelectBaseProps | keyof MultipleType<M_1>> & import("react").RefAttributes<HTMLInputElement>) =>
|
|
51
|
+
declare const _default: <M extends boolean = false>(props: SelectBaseProps & MultipleType<M> & Omit<TextFieldProps, keyof SelectBaseProps | keyof MultipleType<M_1>> & import("react").RefAttributes<HTMLInputElement>) => ReactNode;
|
|
48
52
|
export default _default;
|
package/ui/Form/Select/Select.js
CHANGED
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
import TextField from "../TextField/TextField";
|
|
4
4
|
import { forwardRef, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
-
import ListItem from "../../List/ListItem";
|
|
7
6
|
import useClickOutside from "../../../lib/hooks/useClickOutside";
|
|
8
7
|
import ButtonIcon from "../../ButtonIcon";
|
|
9
8
|
import Adornment from "../../Adornment";
|
|
10
9
|
import { SelectSummary, SelectSummaryChips } from "./SelectSummary";
|
|
11
10
|
import Popover from "../../Popover/Popover";
|
|
12
11
|
import { fixedForwardRef } from "../../../lib/helpers";
|
|
12
|
+
import { SelectOptionsContainer } from "./SelectOptionsContainer";
|
|
13
|
+
import { SelectOptionList } from "./SelectOptionList";
|
|
13
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
15
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -38,6 +39,8 @@ function Select(props, ref) {
|
|
|
38
39
|
clear,
|
|
39
40
|
onSelectAll,
|
|
40
41
|
defaultQuery,
|
|
42
|
+
afterList,
|
|
43
|
+
beforeList,
|
|
41
44
|
query,
|
|
42
45
|
...inputProps
|
|
43
46
|
} = props;
|
|
@@ -203,6 +206,8 @@ function Select(props, ref) {
|
|
|
203
206
|
multiple: multiple,
|
|
204
207
|
value: realValue,
|
|
205
208
|
inline: inline,
|
|
209
|
+
afterList: afterList,
|
|
210
|
+
beforeList: beforeList,
|
|
206
211
|
listStyle: listStyle,
|
|
207
212
|
onClick: handleSelect,
|
|
208
213
|
onClear: handleResetAll,
|
|
@@ -217,6 +222,8 @@ function Select(props, ref) {
|
|
|
217
222
|
multiple: multiple,
|
|
218
223
|
value: realValue,
|
|
219
224
|
inline: inline,
|
|
225
|
+
afterList: afterList,
|
|
226
|
+
beforeList: beforeList,
|
|
220
227
|
listStyle: listStyle,
|
|
221
228
|
onClick: handleSelect,
|
|
222
229
|
onClear: handleResetAll,
|
|
@@ -237,30 +244,23 @@ export const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
237
244
|
listStyle,
|
|
238
245
|
disabled,
|
|
239
246
|
optionControls,
|
|
247
|
+
beforeList,
|
|
248
|
+
afterList,
|
|
240
249
|
...callbacks
|
|
241
250
|
} = props;
|
|
242
251
|
if (multiple && optionControls === undefined) optionControls = true;
|
|
243
252
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
244
|
-
children: /*#__PURE__*/_jsxs(
|
|
253
|
+
children: /*#__PURE__*/_jsxs(SelectOptionsContainer, {
|
|
245
254
|
ref: ref,
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
return /*#__PURE__*/_jsx(ListItem, {
|
|
256
|
-
disabled: disabled || !!item.disabled,
|
|
257
|
-
checked: checked,
|
|
258
|
-
active: active,
|
|
259
|
-
onClick: e => onClick(e, item),
|
|
260
|
-
children: item.text
|
|
261
|
-
}, index);
|
|
262
|
-
})
|
|
263
|
-
}), !!optionControls && !!multiple && /*#__PURE__*/_jsx("div", {
|
|
255
|
+
inline: !!inline,
|
|
256
|
+
children: [beforeList, /*#__PURE__*/_jsx(SelectOptionList, {
|
|
257
|
+
options: options,
|
|
258
|
+
multiple: multiple,
|
|
259
|
+
value: value,
|
|
260
|
+
listStyle: listStyle,
|
|
261
|
+
disabled: disabled,
|
|
262
|
+
onChange: onClick
|
|
263
|
+
}), afterList, !!optionControls && !!multiple && /*#__PURE__*/_jsx("div", {
|
|
264
264
|
className: 'arm-selectSummary__wrapper',
|
|
265
265
|
children: /*#__PURE__*/_jsx(SelectSummary, {
|
|
266
266
|
options: options,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, MouseEvent } from 'react';
|
|
2
|
+
import { OptionType } from '../../../types/theme';
|
|
3
|
+
type OwnProps = {
|
|
4
|
+
options: OptionType[];
|
|
5
|
+
multiple?: boolean;
|
|
6
|
+
value?: string | string[];
|
|
7
|
+
listStyle?: 'checkbox' | 'default';
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
onChange: (e: MouseEvent<HTMLButtonElement>, option: OptionType) => void;
|
|
10
|
+
};
|
|
11
|
+
export type SelectOptionListProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
|
|
12
|
+
export declare const SelectOptionList: (props: OwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof OwnProps> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import ListItem from "../../List";
|
|
2
|
+
import { getOptionValue } from "./Select";
|
|
3
|
+
import { fixedForwardRef } from "../../../lib/helpers";
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
function SelectOptionListBase(props, ref) {
|
|
6
|
+
const {
|
|
7
|
+
options,
|
|
8
|
+
multiple,
|
|
9
|
+
value,
|
|
10
|
+
listStyle,
|
|
11
|
+
disabled,
|
|
12
|
+
onChange
|
|
13
|
+
} = props;
|
|
14
|
+
return /*#__PURE__*/_jsx("div", {
|
|
15
|
+
ref: ref,
|
|
16
|
+
className: "arm-options__list",
|
|
17
|
+
children: options.map((item, index) => {
|
|
18
|
+
let optValue = getOptionValue(item);
|
|
19
|
+
let active = multiple === true && value ? value.includes(optValue) : optValue === value;
|
|
20
|
+
let checked = listStyle === 'checkbox' && !!multiple ? active : undefined;
|
|
21
|
+
return /*#__PURE__*/_jsx(ListItem, {
|
|
22
|
+
disabled: disabled || !!item.disabled,
|
|
23
|
+
checked: checked,
|
|
24
|
+
active: active,
|
|
25
|
+
onClick: e => onChange(e, item),
|
|
26
|
+
children: item.text
|
|
27
|
+
}, index);
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
export const SelectOptionList = fixedForwardRef(SelectOptionListBase);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
type OwnProps = {
|
|
3
|
+
inline?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export type SelectOptionsContainerProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
|
|
6
|
+
export declare const SelectOptionsContainer: import("react").ForwardRefExoticComponent<OwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "inline"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import clsx from 'clsx/clsx';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
export const SelectOptionsContainer = /*#__PURE__*/forwardRef(({
|
|
5
|
+
inline,
|
|
6
|
+
children
|
|
7
|
+
}, ref) => {
|
|
8
|
+
return /*#__PURE__*/_jsx("div", {
|
|
9
|
+
ref: ref,
|
|
10
|
+
className: clsx('arm-options', {
|
|
11
|
+
'arm-options_inline': !!inline
|
|
12
|
+
}),
|
|
13
|
+
children: children
|
|
14
|
+
});
|
|
15
|
+
});
|