@impulse-ui-native/select 2.6.0 → 2.8.0
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/dist/components/multi-select.js +19 -6
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/select.flyout.js +20 -5
- package/dist/components/select.flyout.js.map +1 -1
- package/dist/hooks/use-multi-select.hook.js +10 -7
- package/dist/hooks/use-multi-select.hook.js.map +1 -1
- package/dist/hooks/use-select.hook.js +10 -7
- package/dist/hooks/use-select.hook.js.map +1 -1
- package/package.json +10 -10
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useId } from "react";
|
|
3
|
-
import { useIsOpen } from "@impulse-ui-native/core";
|
|
3
|
+
import { useEventCallback, useIsOpen } from "@impulse-ui-native/core";
|
|
4
4
|
import { Control, Tag, View } from "@impulse-ui-native/primitives";
|
|
5
5
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
6
6
|
import { useMultiSelect } from "../hooks/use-multi-select.hook";
|
|
7
7
|
import { SelectControl } from "./select-control";
|
|
8
8
|
import { SelectFlyout } from "./select.flyout";
|
|
9
|
+
function SelectedTagComponent(props) {
|
|
10
|
+
const handleClose = useEventCallback(() => props.onSelect(props.value));
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
Tag,
|
|
13
|
+
{
|
|
14
|
+
variant: "filled",
|
|
15
|
+
size: props.size,
|
|
16
|
+
closable: true,
|
|
17
|
+
onClose: handleClose,
|
|
18
|
+
label: props.label
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
const SelectedTag = memo(SelectedTagComponent);
|
|
9
23
|
function MultiSelectComponent(props) {
|
|
10
24
|
const { options, value, defaultValue, onChange, placeholder, ...rest } = props;
|
|
11
25
|
const tokens = useComponentsTokens();
|
|
@@ -29,13 +43,12 @@ function MultiSelectComponent(props) {
|
|
|
29
43
|
marginHorizontal: selectTokens.multiValueMarginHorizontal,
|
|
30
44
|
overflow: "hidden",
|
|
31
45
|
children: selected ? selected.map((value2) => /* @__PURE__ */ jsx(
|
|
32
|
-
|
|
46
|
+
SelectedTag,
|
|
33
47
|
{
|
|
34
|
-
variant: "filled",
|
|
35
48
|
size: props.size,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
49
|
+
label: String(getLabel(value2)),
|
|
50
|
+
value: value2,
|
|
51
|
+
onSelect: select
|
|
39
52
|
},
|
|
40
53
|
value2
|
|
41
54
|
)) : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { memo, ReactElement, useId } from \"react\";\n\nimport { useIsOpen } from \"@impulse-ui-native/core\";\nimport { Control, Tag, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { useMultiSelect } from \"../hooks/use-multi-select.hook\";\nimport { MultiSelectProps, PrimitiveValue } from \"../types\";\nimport { SelectControl } from \"./select-control\";\nimport { SelectFlyout } from \"./select.flyout\";\n\nfunction MultiSelectComponent<Value extends PrimitiveValue>(\n props: MultiSelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...rest } =\n props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n const id = useId();\n const { isOpen, open, close } = useIsOpen();\n\n const { selected, hasSelected, select, isSelected, getLabel } =\n useMultiSelect({\n options,\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {hasSelected ? (\n <View\n flex={1}\n flexDirection=\"row\"\n gap={selectTokens.multiValueGap}\n marginHorizontal={selectTokens.multiValueMarginHorizontal}\n overflow=\"hidden\"\n >\n {selected\n ? selected.map((value) => (\n <
|
|
1
|
+
{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { memo, ReactElement, useId } from \"react\";\n\nimport { useEventCallback, useIsOpen } from \"@impulse-ui-native/core\";\nimport { Control, Tag, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { useMultiSelect } from \"../hooks/use-multi-select.hook\";\nimport { MultiSelectProps, PrimitiveValue } from \"../types\";\nimport { SelectControl } from \"./select-control\";\nimport { SelectFlyout } from \"./select.flyout\";\n\ninterface SelectedTagProps<Value extends PrimitiveValue> {\n value: Value;\n label: string;\n size: MultiSelectProps<Value>[\"size\"];\n onSelect: (value: Value) => void;\n}\n\nfunction SelectedTagComponent<Value extends PrimitiveValue>(\n props: SelectedTagProps<Value>,\n) {\n const handleClose = useEventCallback(() => props.onSelect(props.value));\n\n return (\n <Tag\n variant=\"filled\"\n size={props.size}\n closable\n onClose={handleClose}\n label={props.label}\n />\n );\n}\n\nconst SelectedTag = memo(SelectedTagComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectedTagProps<Value>,\n) => ReactElement | null;\n\nfunction MultiSelectComponent<Value extends PrimitiveValue>(\n props: MultiSelectProps<Value>,\n) {\n const { options, value, defaultValue, onChange, placeholder, ...rest } =\n props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n const id = useId();\n const { isOpen, open, close } = useIsOpen();\n\n const { selected, hasSelected, select, isSelected, getLabel } =\n useMultiSelect({\n options,\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <SelectControl {...rest} onPress={open}>\n {!hasSelected ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n {hasSelected ? (\n <View\n flex={1}\n flexDirection=\"row\"\n gap={selectTokens.multiValueGap}\n marginHorizontal={selectTokens.multiValueMarginHorizontal}\n overflow=\"hidden\"\n >\n {selected\n ? selected.map((value) => (\n <SelectedTag\n size={props.size}\n key={value}\n label={String(getLabel(value))}\n value={value}\n onSelect={select}\n />\n ))\n : null}\n </View>\n ) : null}\n <SelectFlyout\n id={id}\n title=\"Options\"\n open={isOpen}\n options={options}\n isSelected={isSelected}\n onCloseFinished={close}\n onSelect={select}\n />\n </SelectControl>\n );\n}\n\nexport const MultiSelect = memo(MultiSelectComponent) as <\n Value extends PrimitiveValue,\n>(\n props: MultiSelectProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AAwBI,cAmCA,YAnCA;AAxBJ,SAAS,MAAoB,aAAa;AAE1C,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,KAAK,YAAY;AACnC,SAAS,2BAA2B;AAEpC,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAS7B,SAAS,qBACP,OACA;AACA,QAAM,cAAc,iBAAiB,MAAM,MAAM,SAAS,MAAM,KAAK,CAAC;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,MAAM;AAAA,MACZ,UAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO,MAAM;AAAA;AAAA,EACf;AAEJ;AAEA,MAAM,cAAc,KAAK,oBAAoB;AAM7C,SAAS,qBACP,OACA;AACA,QAAM,EAAE,SAAS,OAAO,cAAc,UAAU,aAAa,GAAG,KAAK,IACnE;AACF,QAAM,SAAS,oBAAoB;AACnC,QAAM,eAAe,OAAO;AAC5B,QAAM,KAAK,MAAM;AACjB,QAAM,EAAE,QAAQ,MAAM,MAAM,IAAI,UAAU;AAE1C,QAAM,EAAE,UAAU,aAAa,QAAQ,YAAY,SAAS,IAC1D,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,SACE,qBAAC,iBAAe,GAAG,MAAM,SAAS,MAC/B;AAAA,KAAC,cACA,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IACH,cACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,eAAc;AAAA,QACd,KAAK,aAAa;AAAA,QAClB,kBAAkB,aAAa;AAAA,QAC/B,UAAS;AAAA,QAER,qBACG,SAAS,IAAI,CAACA,WACZ;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YAEZ,OAAO,OAAO,SAASA,MAAK,CAAC;AAAA,YAC7B,OAAOA;AAAA,YACP,UAAU;AAAA;AAAA,UAHLA;AAAA,QAIP,CACD,IACD;AAAA;AAAA,IACN,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEO,MAAM,cAAc,KAAK,oBAAoB;","names":["value"]}
|
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback } from "react";
|
|
3
3
|
import { FlatList } from "react-native";
|
|
4
|
+
import { useEventCallback } from "@impulse-ui-native/core";
|
|
4
5
|
import { Flyout } from "@impulse-ui-native/flyout";
|
|
5
6
|
import { Portal } from "@impulse-ui-native/portal";
|
|
6
7
|
import { View } from "@impulse-ui-native/primitives";
|
|
7
8
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
8
9
|
import { getOptionId } from "../utils";
|
|
9
10
|
import { Option } from "./option";
|
|
11
|
+
function SelectFlyoutOptionComponent(props) {
|
|
12
|
+
const handlePress = useEventCallback(
|
|
13
|
+
() => props.onSelect(props.option.value)
|
|
14
|
+
);
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
Option,
|
|
17
|
+
{
|
|
18
|
+
label: props.option.label,
|
|
19
|
+
onPress: handlePress,
|
|
20
|
+
disabled: props.option.disabled,
|
|
21
|
+
selected: props.selected
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
const SelectFlyoutOption = memo(SelectFlyoutOptionComponent);
|
|
10
26
|
const SelectFlyoutComponent = function SelectFlyoutContent(props) {
|
|
11
27
|
const { options, isSelected, onSelect, ...rest } = props;
|
|
12
28
|
const tokens = useComponentsTokens();
|
|
@@ -14,12 +30,11 @@ const SelectFlyoutComponent = function SelectFlyoutContent(props) {
|
|
|
14
30
|
const renderItem = useCallback(
|
|
15
31
|
({ item }) => {
|
|
16
32
|
return /* @__PURE__ */ jsx(
|
|
17
|
-
|
|
33
|
+
SelectFlyoutOption,
|
|
18
34
|
{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
selected: isSelected(item.value)
|
|
35
|
+
option: item,
|
|
36
|
+
selected: isSelected(item.value),
|
|
37
|
+
onSelect
|
|
23
38
|
}
|
|
24
39
|
);
|
|
25
40
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback } from \"react\";\nimport { FlatList, ListRenderItemInfo } from \"react-native\";\n\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { PrimitiveValue, SelectFlyoutProps, SelectOption } from \"../types\";\nimport { getOptionId } from \"../utils\";\nimport { Option } from \"./option\";\n\nconst SelectFlyoutComponent = function SelectFlyoutContent<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutProps<Value>) {\n const { options, isSelected, onSelect, ...rest } = props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\n return (\n <
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.flyout.tsx"],"sourcesContent":["import { memo, ReactElement, useCallback } from \"react\";\nimport { FlatList, ListRenderItemInfo } from \"react-native\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { PrimitiveValue, SelectFlyoutProps, SelectOption } from \"../types\";\nimport { getOptionId } from \"../utils\";\nimport { Option } from \"./option\";\n\ninterface SelectFlyoutOptionProps<Value extends PrimitiveValue> {\n option: SelectOption<Value>;\n selected: boolean;\n onSelect: (value: Value) => void;\n}\n\nfunction SelectFlyoutOptionComponent<Value extends PrimitiveValue>(\n props: SelectFlyoutOptionProps<Value>,\n) {\n const handlePress = useEventCallback(() =>\n props.onSelect(props.option.value),\n );\n\n return (\n <Option\n label={props.option.label}\n onPress={handlePress}\n disabled={props.option.disabled}\n selected={props.selected}\n />\n );\n}\n\nconst SelectFlyoutOption = memo(SelectFlyoutOptionComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutOptionProps<Value>,\n) => ReactElement | null;\n\nconst SelectFlyoutComponent = function SelectFlyoutContent<\n Value extends PrimitiveValue,\n>(props: SelectFlyoutProps<Value>) {\n const { options, isSelected, onSelect, ...rest } = props;\n const tokens = useComponentsTokens();\n const selectTokens = tokens.select;\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<SelectOption<Value>>) => {\n return (\n <SelectFlyoutOption\n option={item}\n selected={isSelected(item.value)}\n onSelect={onSelect}\n />\n );\n },\n [isSelected, onSelect],\n );\n\n return (\n <Portal>\n <Flyout {...rest}>\n <View height={selectTokens.flyoutHeight}>\n <FlatList\n data={options}\n renderItem={renderItem}\n keyExtractor={getOptionId}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardShouldPersistTaps=\"handled\"\n removeClippedSubviews\n windowSize={5}\n initialNumToRender={12}\n maxToRenderPerBatch={12}\n updateCellsBatchingPeriod={32}\n />\n </View>\n </Flyout>\n </Portal>\n );\n};\n\nexport const SelectFlyout = memo(SelectFlyoutComponent) as <\n Value extends PrimitiveValue,\n>(\n props: SelectFlyoutProps<Value>,\n) => ReactElement | null;\n"],"mappings":"AA2BI;AA3BJ,SAAS,MAAoB,mBAAmB;AAChD,SAAS,gBAAoC;AAE7C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAQvB,SAAS,4BACP,OACA;AACA,QAAM,cAAc;AAAA,IAAiB,MACnC,MAAM,SAAS,MAAM,OAAO,KAAK;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,MACT,UAAU,MAAM,OAAO;AAAA,MACvB,UAAU,MAAM;AAAA;AAAA,EAClB;AAEJ;AAEA,MAAM,qBAAqB,KAAK,2BAA2B;AAM3D,MAAM,wBAAwB,SAAS,oBAErC,OAAiC;AACjC,QAAM,EAAE,SAAS,YAAY,UAAU,GAAG,KAAK,IAAI;AACnD,QAAM,SAAS,oBAAoB;AACnC,QAAM,eAAe,OAAO;AAE5B,QAAM,aAAa;AAAA,IACjB,CAAC,EAAE,KAAK,MAA+C;AACrD,aACE;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU,WAAW,KAAK,KAAK;AAAA,UAC/B;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,SACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MACV,8BAAC,QAAK,QAAQ,aAAa,cACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA,cAAc;AAAA,MACd,gCAAgC;AAAA,MAChC,8BAA8B;AAAA,MAC9B,2BAA0B;AAAA,MAC1B,uBAAqB;AAAA,MACrB,YAAY;AAAA,MACZ,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB,2BAA2B;AAAA;AAAA,EAC7B,GACF,GACF,GACF;AAEJ;AAEO,MAAM,eAAe,KAAK,qBAAqB;","names":[]}
|
|
@@ -36,13 +36,16 @@ function useMultiSelect(props) {
|
|
|
36
36
|
(value2) => selectedValuesSet.has(value2),
|
|
37
37
|
[selectedValuesSet]
|
|
38
38
|
);
|
|
39
|
-
return
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
return useMemo(
|
|
40
|
+
() => ({
|
|
41
|
+
selected,
|
|
42
|
+
hasSelected: selected && selected.length > 0,
|
|
43
|
+
select,
|
|
44
|
+
isSelected,
|
|
45
|
+
getLabel
|
|
46
|
+
}),
|
|
47
|
+
[getLabel, isSelected, select, selected]
|
|
48
|
+
);
|
|
46
49
|
}
|
|
47
50
|
export {
|
|
48
51
|
useMultiSelect
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-multi-select.hook.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\nimport { buildLabelMap } from \"../utils/option.utils\";\n\nexport function useMultiSelect<Value extends PrimitiveValue>(\n props: UseSelectProps<Value[]>,\n) {\n const { value, defaultValue, onChange } = props;\n\n const [selected, setSelected] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n });\n\n const selectedValuesSet = useMemo(() => new Set(selected), [selected]);\n\n const labelsMap = useMemo(\n () => buildLabelMap(props.options),\n [props.options],\n );\n\n const getLabel = useCallback(\n (value: Value) => labelsMap[String(value)],\n [labelsMap],\n );\n\n const select = useCallback(\n (value: Value) => {\n setSelected((prev) => {\n if (!prev) {\n return [value];\n }\n\n const exists = prev.includes(value);\n\n if (exists) {\n return prev.filter((prevValue) => prevValue !== value);\n }\n\n return [...prev, value];\n });\n },\n [setSelected],\n );\n\n const isSelected = useCallback(\n (value: Value) => selectedValuesSet.has(value),\n [selectedValuesSet],\n );\n\n return {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-multi-select.hook.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\nimport { buildLabelMap } from \"../utils/option.utils\";\n\nexport function useMultiSelect<Value extends PrimitiveValue>(\n props: UseSelectProps<Value[]>,\n) {\n const { value, defaultValue, onChange } = props;\n\n const [selected, setSelected] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n });\n\n const selectedValuesSet = useMemo(() => new Set(selected), [selected]);\n\n const labelsMap = useMemo(\n () => buildLabelMap(props.options),\n [props.options],\n );\n\n const getLabel = useCallback(\n (value: Value) => labelsMap[String(value)],\n [labelsMap],\n );\n\n const select = useCallback(\n (value: Value) => {\n setSelected((prev) => {\n if (!prev) {\n return [value];\n }\n\n const exists = prev.includes(value);\n\n if (exists) {\n return prev.filter((prevValue) => prevValue !== value);\n }\n\n return [...prev, value];\n });\n },\n [setSelected],\n );\n\n const isSelected = useCallback(\n (value: Value) => selectedValuesSet.has(value),\n [selectedValuesSet],\n );\n\n return useMemo(\n () => ({\n selected,\n hasSelected: selected && selected.length > 0,\n select,\n isSelected,\n getLabel,\n }),\n [getLabel, isSelected, select, selected],\n );\n}\n"],"mappings":"AAAA,SAAS,aAAa,eAAe;AAErC,SAAS,4BAA4B;AAGrC,SAAS,qBAAqB;AAEvB,SAAS,eACd,OACA;AACA,QAAM,EAAE,OAAO,cAAc,SAAS,IAAI;AAE1C,QAAM,CAAC,UAAU,WAAW,IAAI,qBAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,QAAQ,MAAM,IAAI,IAAI,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErE,QAAM,YAAY;AAAA,IAChB,MAAM,cAAc,MAAM,OAAO;AAAA,IACjC,CAAC,MAAM,OAAO;AAAA,EAChB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,WAAiB,UAAU,OAAOA,MAAK,CAAC;AAAA,IACzC,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,SAAS;AAAA,IACb,CAACA,WAAiB;AAChB,kBAAY,CAAC,SAAS;AACpB,YAAI,CAAC,MAAM;AACT,iBAAO,CAACA,MAAK;AAAA,QACf;AAEA,cAAM,SAAS,KAAK,SAASA,MAAK;AAElC,YAAI,QAAQ;AACV,iBAAO,KAAK,OAAO,CAAC,cAAc,cAAcA,MAAK;AAAA,QACvD;AAEA,eAAO,CAAC,GAAG,MAAMA,MAAK;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,aAAa;AAAA,IACjB,CAACA,WAAiB,kBAAkB,IAAIA,MAAK;AAAA,IAC7C,CAAC,iBAAiB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,aAAa,YAAY,SAAS,SAAS;AAAA,MAC3C;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,YAAY,QAAQ,QAAQ;AAAA,EACzC;AACF;","names":["value"]}
|
|
@@ -31,13 +31,16 @@ function useSelect(props) {
|
|
|
31
31
|
(value2) => value2 === selected,
|
|
32
32
|
[selected]
|
|
33
33
|
);
|
|
34
|
-
return
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
return useMemo(
|
|
35
|
+
() => ({
|
|
36
|
+
selected,
|
|
37
|
+
hasSelected: selected !== null && selected !== void 0,
|
|
38
|
+
select,
|
|
39
|
+
getLabel,
|
|
40
|
+
isSelected
|
|
41
|
+
}),
|
|
42
|
+
[getLabel, isSelected, select, selected]
|
|
43
|
+
);
|
|
41
44
|
}
|
|
42
45
|
export {
|
|
43
46
|
useSelect
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-select.hook.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\nimport { buildLabelMap } from \"../utils/option.utils\";\n\nexport function useSelect<Value extends PrimitiveValue>(\n props: UseSelectProps<Value>,\n) {\n const { value, defaultValue, onChange } = props;\n\n const [selected, setSelected] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n });\n\n const labelsMap = useMemo(\n () => buildLabelMap(props.options),\n [props.options],\n );\n\n const getLabel = useCallback(\n (value: Value) => labelsMap[String(value)],\n [labelsMap],\n );\n\n const select = useCallback(\n (value: Value) => {\n setSelected((prev) => {\n if (prev === value) {\n return null as Value;\n }\n\n return value;\n });\n },\n [setSelected],\n );\n\n const isSelected = useCallback(\n (value: Value) => value === selected,\n [selected],\n );\n\n return {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-select.hook.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport { PrimitiveValue, UseSelectProps } from \"../types\";\nimport { buildLabelMap } from \"../utils/option.utils\";\n\nexport function useSelect<Value extends PrimitiveValue>(\n props: UseSelectProps<Value>,\n) {\n const { value, defaultValue, onChange } = props;\n\n const [selected, setSelected] = useControllableState({\n prop: value,\n defaultProp: defaultValue,\n onChange,\n });\n\n const labelsMap = useMemo(\n () => buildLabelMap(props.options),\n [props.options],\n );\n\n const getLabel = useCallback(\n (value: Value) => labelsMap[String(value)],\n [labelsMap],\n );\n\n const select = useCallback(\n (value: Value) => {\n setSelected((prev) => {\n if (prev === value) {\n return null as Value;\n }\n\n return value;\n });\n },\n [setSelected],\n );\n\n const isSelected = useCallback(\n (value: Value) => value === selected,\n [selected],\n );\n\n return useMemo(\n () => ({\n selected,\n hasSelected: selected !== null && selected !== undefined,\n select,\n getLabel,\n isSelected,\n }),\n [getLabel, isSelected, select, selected],\n );\n}\n"],"mappings":"AAAA,SAAS,aAAa,eAAe;AAErC,SAAS,4BAA4B;AAGrC,SAAS,qBAAqB;AAEvB,SAAS,UACd,OACA;AACA,QAAM,EAAE,OAAO,cAAc,SAAS,IAAI;AAE1C,QAAM,CAAC,UAAU,WAAW,IAAI,qBAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa;AAAA,IACb;AAAA,EACF,CAAC;AAED,QAAM,YAAY;AAAA,IAChB,MAAM,cAAc,MAAM,OAAO;AAAA,IACjC,CAAC,MAAM,OAAO;AAAA,EAChB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,WAAiB,UAAU,OAAOA,MAAK,CAAC;AAAA,IACzC,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,SAAS;AAAA,IACb,CAACA,WAAiB;AAChB,kBAAY,CAAC,SAAS;AACpB,YAAI,SAASA,QAAO;AAClB,iBAAO;AAAA,QACT;AAEA,eAAOA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,aAAa;AAAA,IACjB,CAACA,WAAiBA,WAAU;AAAA,IAC5B,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,aAAa,aAAa,QAAQ,aAAa;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,YAAY,QAAQ,QAAQ;AAAA,EACzC;AACF;","names":["value"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/select",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "Accessible select and option picker components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/input": "2.
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
35
|
-
"@impulse-ui-native/
|
|
36
|
-
"@impulse-ui-native/
|
|
37
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/input": "2.8.0",
|
|
32
|
+
"@impulse-ui-native/icon": "2.8.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "2.8.0",
|
|
34
|
+
"@impulse-ui-native/flyout": "2.8.0",
|
|
35
|
+
"@impulse-ui-native/portal": "2.8.0",
|
|
36
|
+
"@impulse-ui-native/core": "2.8.0",
|
|
37
|
+
"@impulse-ui-native/theme": "2.8.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@shopify/flash-list": "2.0.2",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"react": "19.2.3",
|
|
45
45
|
"react-native": "0.86.2",
|
|
46
46
|
"typescript": "~6.0.3",
|
|
47
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
47
48
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
48
|
-
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
49
|
-
"@impulse-ui-native/prettier-config": "1.0.0"
|
|
49
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=18",
|