@tecsinapse/react-native-kit 1.17.10 → 1.18.1
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.18.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.0...@tecsinapse/react-native-kit@1.18.1) (2022-08-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.18.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.11...@tecsinapse/react-native-kit@1.18.0) (2022-07-27)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.17.11](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.10...@tecsinapse/react-native-kit@1.17.11) (2022-07-14)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [1.17.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.17.9...@tecsinapse/react-native-kit@1.17.10) (2022-07-14)
|
|
7
31
|
|
|
8
32
|
**Note:** Version bump only for package @tecsinapse/react-native-kit
|
|
@@ -19,5 +19,5 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
|
|
|
19
19
|
closeOnPick?: boolean;
|
|
20
20
|
controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
|
|
21
21
|
}
|
|
22
|
-
declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
|
|
22
|
+
declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, label, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
|
|
23
23
|
export default Select;
|
|
@@ -46,6 +46,7 @@ function Select({
|
|
|
46
46
|
style,
|
|
47
47
|
controlComponent,
|
|
48
48
|
closeOnPick = type === 'single',
|
|
49
|
+
label,
|
|
49
50
|
...rest
|
|
50
51
|
}) {
|
|
51
52
|
const {
|
|
@@ -56,6 +57,13 @@ function Select({
|
|
|
56
57
|
const [selectOptions, setSelectOptions] = (0, React.useState)([]);
|
|
57
58
|
const modal = (0, _Modal.useLazyModalManager)();
|
|
58
59
|
const [loading, setLoading] = (0, React.useState)(false);
|
|
60
|
+
const onlyLabel = label && !placeholder;
|
|
61
|
+
const hasValue = type === 'single' ? !!value : (value || []).length > 0;
|
|
62
|
+
|
|
63
|
+
const _placeholder = onlyLabel ? label : placeholder;
|
|
64
|
+
|
|
65
|
+
const _label = hasValue ? label : undefined;
|
|
66
|
+
|
|
59
67
|
(0, React.useEffect)(() => {
|
|
60
68
|
if (typeof options !== 'function') {
|
|
61
69
|
setSelectOptions(options);
|
|
@@ -107,15 +115,16 @@ function Select({
|
|
|
107
115
|
}, [options, value, keyExtractor]);
|
|
108
116
|
const getDisplayValue = React.useCallback(() => {
|
|
109
117
|
if (Array.isArray(value)) {
|
|
110
|
-
if (value.length === 0) return
|
|
111
|
-
|
|
118
|
+
if (value.length === 0) return _placeholder;else {
|
|
119
|
+
let options = selectOptions.length > 0 ? selectOptions : value;
|
|
120
|
+
return options == null ? void 0 : options.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
|
|
112
121
|
}
|
|
113
122
|
} else {
|
|
114
|
-
if (value === undefined) return
|
|
123
|
+
if (value === undefined) return _placeholder;
|
|
115
124
|
const selectedOption = selectOptions == null ? void 0 : selectOptions.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
|
|
116
|
-
return
|
|
125
|
+
return labelExtractor(selectedOption ?? value);
|
|
117
126
|
}
|
|
118
|
-
}, [
|
|
127
|
+
}, [_placeholder, value, selectOptions]);
|
|
119
128
|
modal.sync(React.createElement(_Modal2.Modal, {
|
|
120
129
|
options: selectOptions || [],
|
|
121
130
|
focused: true,
|
|
@@ -151,6 +160,7 @@ function Select({
|
|
|
151
160
|
variant: variant,
|
|
152
161
|
hint: hint,
|
|
153
162
|
hintComponent: hintComponent,
|
|
163
|
+
label: _label,
|
|
154
164
|
rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.SelectIcon, {
|
|
155
165
|
name: "chevron-down",
|
|
156
166
|
type: "ionicon",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","undefined","length","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n HintInputContainer,\n InputContainerProps,\n useInputFocus\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | null | undefined : Data[];\n type: Type;\n\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n groupKeyExtractor?: (t: Data) => string;\n\n hideSearchBar?: boolean;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n confirmButtonText?: string;\n selectModalTitle?: string;\n selectModalTitleComponent?: JSX.Element;\n closeOnPick?: boolean;\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n /** Select props */\n value,\n options,\n keyExtractor,\n groupKeyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onFocus,\n onBlur,\n disabled,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n searchBarPlaceholder,\n hideSearchBar,\n confirmButtonText,\n rightComponent,\n variant = 'default',\n hintComponent,\n hint,\n style,\n controlComponent,\n closeOnPick = type === 'single',\n ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const modal = useLazyModalManager();\n\n // TODO: Add Skeleton to modal height when loading is true\n const [loading, setLoading] = useState<boolean>(false);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (typeof options === 'function') {\n setLoading(true);\n try {\n const result = await options();\n if (result) {\n if (\n value &&\n !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n setLoading(false);\n }\n }\n }, [options, value, setSelectOptions])\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n setLoading(true);\n try {\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n modal.requestUpdate();\n setLoading(false);\n }\n }\n },\n [options, value, keyExtractor]\n );\n\n const getDisplayValue = React.useCallback(() => {\n if (Array.isArray(value)) {\n if (value.length === 0) return placeholder;\n else {\n return selectOptions\n ?.reduce(\n (acc, option, index) =>\n value.find(\n key => keyExtractor(option, index) == keyExtractor(key, index)\n )\n ? acc + labelExtractor(option) + ', '\n : acc,\n ''\n )\n .slice(0, -2);\n }\n } else {\n if (value === undefined) return placeholder;\n const selectedOption = selectOptions?.find(\n (option, index) =>\n keyExtractor(option, index) == keyExtractor(value as Data, index)\n );\n return selectedOption ? labelExtractor(selectedOption) : placeholder;\n }\n }, [placeholder, value, selectOptions]);\n\n modal.sync(\n <Modal\n options={selectOptions || []}\n focused={true}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n groupKeyExtractor={groupKeyExtractor}\n searchBarPlaceholder={searchBarPlaceholder}\n type={type}\n onSelect={onSelect}\n value={value}\n hideSearchBar={hideSearchBar}\n onSearch={handleOnSearch}\n selectModalTitle={selectModalTitle}\n selectModalTitleComponent={selectModalTitleComponent}\n confirmButtonText={confirmButtonText}\n loading={loading}\n onClose={handleBlur}\n closeOnPick={closeOnPick}\n />\n );\n\n const handlePressInput = async () => {\n modal.show();\n handleFocus();\n await handleLazyFocus();\n };\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handlePressInput, getDisplayValue() || '')\n ) : (\n <HintInputContainer\n viewStyle={style}\n onPress={handlePressInput}\n focused={focused}\n disabled={disabled}\n LabelComponent={Text}\n variant={variant}\n hint={hint}\n hintComponent={hintComponent}\n rightComponent={\n <>\n <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledSelectionText>\n </HintInputContainer>\n )}\n </>\n );\n}\n\nexport default Select;\n"],"file":"Select.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","controlComponent","closeOnPick","label","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","onlyLabel","hasValue","length","_placeholder","_label","undefined","handleLazyFocus","React","useCallback","result","find","v","e","handleOnSearch","searchInput","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n HintInputContainer,\n InputContainerProps,\n useInputFocus\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | null | undefined : Data[];\n type: Type;\n\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n groupKeyExtractor?: (t: Data) => string;\n\n hideSearchBar?: boolean;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n confirmButtonText?: string;\n selectModalTitle?: string;\n selectModalTitleComponent?: JSX.Element;\n closeOnPick?: boolean;\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n /** Select props */\n value,\n options,\n keyExtractor,\n groupKeyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onFocus,\n onBlur,\n disabled,\n onSearch,\n selectModalTitle,\n selectModalTitleComponent,\n searchBarPlaceholder,\n hideSearchBar,\n confirmButtonText,\n rightComponent,\n variant = 'default',\n hintComponent,\n hint,\n style,\n controlComponent,\n closeOnPick = type === 'single',\n label,\n ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const modal = useLazyModalManager();\n\n // TODO: Add Skeleton to modal height when loading is true\n const [loading, setLoading] = useState<boolean>(false);\n \n const onlyLabel = label && !placeholder;\n const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0\n const _placeholder = onlyLabel ? label : placeholder\n const _label = hasValue ? label : undefined\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (typeof options === 'function') {\n setLoading(true);\n try {\n const result = await options();\n if (result) {\n if (\n value &&\n !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n setLoading(false);\n }\n }\n }, [options, value, setSelectOptions])\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n setLoading(true);\n try {\n const result = await onSearch(searchInput);\n if (result) {\n if (type === 'single') {\n if (\n value &&\n !result.find(\n v => keyExtractor(value as Data) === keyExtractor(v)\n )\n ) {\n setSelectOptions([value as Data, ...result]);\n } else setSelectOptions(result);\n } else {\n if ((value as Data[]).length > 0) {\n const selectedValues =\n (value as Data[]).filter(\n v =>\n !result.find(\n current =>\n keyExtractor(v as Data) === keyExtractor(current)\n )\n ) || [];\n setSelectOptions([...selectedValues, ...result]);\n } else {\n setSelectOptions(result);\n }\n }\n }\n } catch (e) {\n // TODO: Catch error\n } finally {\n modal.requestUpdate();\n setLoading(false);\n }\n }\n },\n [options, value, keyExtractor]\n );\n\n const getDisplayValue = React.useCallback(() => {\n if (Array.isArray(value)) {\n if (value.length === 0) return _placeholder;\n else {\n let options = selectOptions.length > 0 ? selectOptions : value as Data[]\n return options\n ?.reduce(\n (acc, option, index) =>\n value.find(\n key => keyExtractor(option, index) == keyExtractor(key, index)\n )\n ? acc + labelExtractor(option) + ', '\n : acc,\n ''\n )\n .slice(0, -2);\n }\n } else {\n if (value === undefined) return _placeholder;\n const selectedOption = selectOptions?.find(\n (option, index) =>\n keyExtractor(option, index) == keyExtractor(value as Data, index)\n );\n return labelExtractor(selectedOption ?? value as Data)\n }\n }, [_placeholder, value, selectOptions]);\n\n modal.sync(\n <Modal\n options={selectOptions || []}\n focused={true}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n groupKeyExtractor={groupKeyExtractor}\n searchBarPlaceholder={searchBarPlaceholder}\n type={type}\n onSelect={onSelect}\n value={value}\n hideSearchBar={hideSearchBar}\n onSearch={handleOnSearch}\n selectModalTitle={selectModalTitle}\n selectModalTitleComponent={selectModalTitleComponent}\n confirmButtonText={confirmButtonText}\n loading={loading}\n onClose={handleBlur}\n closeOnPick={closeOnPick}\n />\n );\n\n const handlePressInput = async () => {\n modal.show();\n handleFocus();\n await handleLazyFocus();\n };\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handlePressInput, getDisplayValue() || '')\n ) : (\n <HintInputContainer\n viewStyle={style}\n onPress={handlePressInput}\n focused={focused}\n disabled={disabled}\n LabelComponent={Text}\n variant={variant}\n hint={hint}\n hintComponent={hintComponent}\n label={_label}\n rightComponent={\n <>\n <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledSelectionText>\n </HintInputContainer>\n )}\n </>\n );\n}\n\nexport default Select;\n"],"file":"Select.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-native-kit",
|
|
3
3
|
"description": "TecSinapse React Native components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.18.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@emotion/native": "^11.0.0",
|
|
18
18
|
"@emotion/react": "^11.4.1",
|
|
19
|
-
"@tecsinapse/react-core": "^1.
|
|
19
|
+
"@tecsinapse/react-core": "^1.17.1",
|
|
20
20
|
"react-native-linear-gradient": "^2.5.6"
|
|
21
21
|
},
|
|
22
22
|
"repository": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://tecsinapse.github.io/design-system/",
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"react": "^16.8.0 || ^17.0.0",
|
|
32
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
33
33
|
"react-native": "^0.64.0",
|
|
34
34
|
"react-native-linear-gradient": "^2.5.6",
|
|
35
35
|
"react-native-safe-area-context": "^3.1.9",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/uuid": "^8.3.3"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "6069c1a1ecf9d39272e727d323c3afa7ffc52aad"
|
|
43
43
|
}
|
|
@@ -68,6 +68,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
|
|
|
68
68
|
style,
|
|
69
69
|
controlComponent,
|
|
70
70
|
closeOnPick = type === 'single',
|
|
71
|
+
label,
|
|
71
72
|
...rest
|
|
72
73
|
}: SelectNativeProps<Data, Type>): JSX.Element {
|
|
73
74
|
const { focused, handleBlur, handleFocus } = useInputFocus(
|
|
@@ -81,6 +82,11 @@ function Select<Data, Type extends 'single' | 'multi'>({
|
|
|
81
82
|
|
|
82
83
|
// TODO: Add Skeleton to modal height when loading is true
|
|
83
84
|
const [loading, setLoading] = useState<boolean>(false);
|
|
85
|
+
|
|
86
|
+
const onlyLabel = label && !placeholder;
|
|
87
|
+
const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0
|
|
88
|
+
const _placeholder = onlyLabel ? label : placeholder
|
|
89
|
+
const _label = hasValue ? label : undefined
|
|
84
90
|
|
|
85
91
|
useEffect(() => {
|
|
86
92
|
if (typeof options !== 'function') {
|
|
@@ -154,9 +160,10 @@ function Select<Data, Type extends 'single' | 'multi'>({
|
|
|
154
160
|
|
|
155
161
|
const getDisplayValue = React.useCallback(() => {
|
|
156
162
|
if (Array.isArray(value)) {
|
|
157
|
-
if (value.length === 0) return
|
|
163
|
+
if (value.length === 0) return _placeholder;
|
|
158
164
|
else {
|
|
159
|
-
|
|
165
|
+
let options = selectOptions.length > 0 ? selectOptions : value as Data[]
|
|
166
|
+
return options
|
|
160
167
|
?.reduce(
|
|
161
168
|
(acc, option, index) =>
|
|
162
169
|
value.find(
|
|
@@ -169,14 +176,14 @@ function Select<Data, Type extends 'single' | 'multi'>({
|
|
|
169
176
|
.slice(0, -2);
|
|
170
177
|
}
|
|
171
178
|
} else {
|
|
172
|
-
if (value === undefined) return
|
|
179
|
+
if (value === undefined) return _placeholder;
|
|
173
180
|
const selectedOption = selectOptions?.find(
|
|
174
181
|
(option, index) =>
|
|
175
182
|
keyExtractor(option, index) == keyExtractor(value as Data, index)
|
|
176
183
|
);
|
|
177
|
-
return
|
|
184
|
+
return labelExtractor(selectedOption ?? value as Data)
|
|
178
185
|
}
|
|
179
|
-
}, [
|
|
186
|
+
}, [_placeholder, value, selectOptions]);
|
|
180
187
|
|
|
181
188
|
modal.sync(
|
|
182
189
|
<Modal
|
|
@@ -220,6 +227,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
|
|
|
220
227
|
variant={variant}
|
|
221
228
|
hint={hint}
|
|
222
229
|
hintComponent={hintComponent}
|
|
230
|
+
label={_label}
|
|
223
231
|
rightComponent={
|
|
224
232
|
<>
|
|
225
233
|
<SelectIcon name="chevron-down" type="ionicon" size="centi" />
|