@tecsinapse/react-web-kit 1.21.2 → 1.21.3

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/molecules/Select/Select.js +4 -9
  3. package/dist/components/molecules/Select/Select.js.map +1 -1
  4. package/esm/components/molecules/Select/Select.js +4 -9
  5. package/esm/components/molecules/Select/Select.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/molecules/Select/Select.tsx +4 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.21.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.21.2...@tecsinapse/react-web-kit@1.21.3) (2022-09-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * dependencies and verification lazy select ([3cb68af](https://github.com/tecsinapse/design-system/commit/3cb68af91d8df6b487c6cab8f707b2604fb9e55e))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [1.21.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.21.1...@tecsinapse/react-web-kit@1.21.2) (2022-09-16)
7
18
 
8
19
 
package/dist/components/molecules/Select/Select.js CHANGED
@@ -67,11 +67,6 @@ const Select = _ref => {
67
67
  const _label = hasValue ? label : undefined;
68
68
 
69
69
  const displayValue = (0, _functions.getDisplayValue)(type, value, selectOptions, _placeholder, keyExtractor, labelExtractor);
70
- (0, _react.useEffect)(() => {
71
- if (typeof options !== 'function') {
72
- setSelectOptions(options);
73
- }
74
- }, [options]);
75
70
 
76
71
  const handleLazyFocus = _react.default.useCallback(async () => {
77
72
  if (!dropDownVisible && typeof options === 'function') {
@@ -79,14 +74,14 @@ const Select = _ref => {
79
74
  const result = await options();
80
75
 
81
76
  if (result) {
82
- setSelectOptions(result);
77
+ setSelectOptions(result !== null && result !== void 0 ? result : []);
83
78
  }
84
79
  } catch (e) {}
85
80
  }
86
- }, [options, value, setSelectOptions, dropDownVisible]);
81
+ }, [options, setSelectOptions, dropDownVisible]);
87
82
 
88
83
  const handleOnSearch = _react.default.useCallback(async searchInput => {
89
- if (searchInput !== undefined && onSearch) {
84
+ if (searchInput !== undefined && onSearch && dropDownVisible) {
90
85
  try {
91
86
  const result = await onSearch(searchInput);
92
87
 
@@ -106,7 +101,7 @@ const Select = _ref => {
106
101
  }
107
102
  } catch (e) {}
108
103
  }
109
- }, [options, value, keyExtractor]);
104
+ }, [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]);
110
105
 
111
106
  const handlePressInput = async () => {
112
107
  await handleLazyFocus();
package/dist/components/molecules/Select/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","React","useState","selectOptions","setSelectOptions","refDropDown","useRef","useClickAwayListener","useEffect","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","getDisplayValue","handleLazyFocus","useCallback","result","e","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","RightComponent","state","defaultStyles","transition"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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 | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, value, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\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 }\n }\n },\n [options, value, keyExtractor]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text\n {...displayTextProps}\n ellipsizeMode=\"tail\"\n numberOfLines={1}\n fontWeight={'bold'}\n >\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","React","useState","selectOptions","setSelectOptions","refDropDown","useRef","useClickAwayListener","useEffect","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","getDisplayValue","handleLazyFocus","useCallback","result","e","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","RightComponent","state","defaultStyles","transition"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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 | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\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 }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text\n {...displayTextProps}\n ellipsizeMode=\"tail\"\n numberOfLines={1}\n fontWeight={'bold'}\n >\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"mappings":"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"}
package/esm/components/molecules/Select/Select.js CHANGED
@@ -96,11 +96,6 @@ export var Select = function Select(_ref) {
96
96
  var _label = hasValue ? label : undefined;
97
97
 
98
98
  var displayValue = getDisplayValue(type, value, selectOptions, _placeholder, keyExtractor, labelExtractor);
99
- useEffect(function () {
100
- if (typeof options !== 'function') {
101
- setSelectOptions(options);
102
- }
103
- }, [options]);
104
99
  var handleLazyFocus = React.useCallback(_asyncToGenerator(_regeneratorRuntime().mark(function _callee() {
105
100
  var result;
106
101
  return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -120,7 +115,7 @@ export var Select = function Select(_ref) {
120
115
  result = _context.sent;
121
116
 
122
117
  if (result) {
123
- setSelectOptions(result);
118
+ setSelectOptions(result !== null && result !== void 0 ? result : []);
124
119
  }
125
120
 
126
121
  _context.next = 10;
@@ -136,7 +131,7 @@ export var Select = function Select(_ref) {
136
131
  }
137
132
  }
138
133
  }, _callee, null, [[1, 8]]);
139
- })), [options, value, setSelectOptions, dropDownVisible]);
134
+ })), [options, setSelectOptions, dropDownVisible]);
140
135
  var handleOnSearch = React.useCallback(function () {
141
136
  var _ref3 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee2(searchInput) {
142
137
  var result, selectedValues;
@@ -144,7 +139,7 @@ export var Select = function Select(_ref) {
144
139
  while (1) {
145
140
  switch (_context2.prev = _context2.next) {
146
141
  case 0:
147
- if (!(searchInput !== undefined && onSearch)) {
142
+ if (!(searchInput !== undefined && onSearch && dropDownVisible)) {
148
143
  _context2.next = 10;
149
144
  break;
150
145
  }
@@ -195,7 +190,7 @@ export var Select = function Select(_ref) {
195
190
  return function (_x) {
196
191
  return _ref3.apply(this, arguments);
197
192
  };
198
- }(), [options, value, keyExtractor]);
193
+ }(), [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]);
199
194
 
200
195
  var handlePressInput = function () {
201
196
  var _ref4 = _asyncToGenerator(_regeneratorRuntime().mark(function _callee3() {
package/esm/components/molecules/Select/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["PressableInputContainer","Text","React","useEffect","useState","Transition","useClickAwayListener","defaultStyles","transition","Dropdown","getDisplayValue","RightComponent","StyledContainer","StyledInputContainer","Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","selectOptions","setSelectOptions","refDropDown","useRef","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","handleLazyFocus","useCallback","result","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","state"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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 | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, value, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\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 }\n }\n },\n [options, value, keyExtractor]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text\n {...displayTextProps}\n ellipsizeMode=\"tail\"\n numberOfLines={1}\n fontWeight={'bold'}\n >\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","names":["PressableInputContainer","Text","React","useEffect","useState","Transition","useClickAwayListener","defaultStyles","transition","Dropdown","getDisplayValue","RightComponent","StyledContainer","StyledInputContainer","Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","selectAllLabel","rest","dropDownVisible","setDropDownVisible","selectOptions","setSelectOptions","refDropDown","useRef","onlyLabel","hasValue","length","_placeholder","_label","undefined","displayValue","handleLazyFocus","useCallback","result","handleOnSearch","searchInput","find","v","selectedValues","filter","current","handlePressInput","onPress","prev","state"],"sources":["../../../../src/components/molecules/Select/Select.tsx"],"sourcesContent":["import {\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport React, { useEffect, useState } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { useClickAwayListener } from '../../../hooks';\nimport { defaultStyles, transition } from './animations';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport {\n RightComponent,\n StyledContainer,\n StyledInputContainer,\n} from './styled';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\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 | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?:\n | ((searchArg: string) => void)\n | ((searchInput?: string) => Promise<Data[]>)\n | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n selectAllLabel?: string;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\n/** NOTE: For better performance, you should memoize options and handlers */\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder = 'Busque a opção desejada',\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n selectAllLabel = 'Selecionar todos',\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n useEffect(() => {\n if (typeof options !== 'function') {\n setSelectOptions(options);\n }\n }, [options]);\n\n // TODO: Add Skeleton to modal height when loading is true\n\n const onlyLabel = label && !placeholder;\n const hasValue =\n type === 'single' ? !!value : ((value || []) as []).length > 0;\n const _placeholder = onlyLabel ? label : placeholder;\n const _label = hasValue ? label : undefined;\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n selectOptions,\n _placeholder,\n keyExtractor,\n labelExtractor\n );\n\n const handleLazyFocus = React.useCallback(async () => {\n if (!dropDownVisible && typeof options === 'function') {\n try {\n const result = await options();\n if (result) {\n setSelectOptions(result ?? []);\n }\n } catch (e) {\n // TODO: Catch error\n }\n }\n }, [options, setSelectOptions, dropDownVisible]);\n\n const handleOnSearch = React.useCallback(\n async (searchInput: string | undefined) => {\n if (searchInput !== undefined && onSearch && dropDownVisible) {\n try {\n //TODO: Remove code duplicated below (Select in react-native-kit)\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 }\n }\n },\n [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]\n );\n\n const handlePressInput = async () => {\n await handleLazyFocus();\n };\n\n const onPress = React.useCallback(\n () => setDropDownVisible(prev => !prev),\n [setDropDownVisible]\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer onFocus={handlePressInput}>\n <PressableInputContainer\n label={_label}\n onPress={onPress}\n disabled={disabled}\n rightComponent={RightComponent}\n >\n <Text\n {...displayTextProps}\n ellipsizeMode=\"tail\"\n numberOfLines={1}\n fontWeight={'bold'}\n >\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={selectOptions ?? []}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={handleOnSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n selectAllLabel={selectAllLabel}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tecsinapse/react-web-kit",
3
3
  "description": "TecSinapse React components",
4
- "version": "1.21.2",
4
+ "version": "1.21.3",
5
5
  "main": "dist/index.js",
6
6
  "module": "esm/index.js",
7
7
  "types": "dist/index.d.ts",
@@ -41,5 +41,5 @@
41
41
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
42
42
  "react-native-web": "^0.17.1 || ^0.18.0"
43
43
  },
44
- "gitHead": "fc41b0bbabd900145562a1b741dd3d0afb5dd8e8"
44
+ "gitHead": "73b880b17f2fbd116fa873b579f8dfcb22cc2ddd"
45
45
  }
package/src/components/molecules/Select/Select.tsx CHANGED
@@ -86,28 +86,22 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
86
86
  labelExtractor
87
87
  );
88
88
 
89
- useEffect(() => {
90
- if (typeof options !== 'function') {
91
- setSelectOptions(options);
92
- }
93
- }, [options]);
94
-
95
89
  const handleLazyFocus = React.useCallback(async () => {
96
90
  if (!dropDownVisible && typeof options === 'function') {
97
91
  try {
98
92
  const result = await options();
99
93
  if (result) {
100
- setSelectOptions(result);
94
+ setSelectOptions(result ?? []);
101
95
  }
102
96
  } catch (e) {
103
97
  // TODO: Catch error
104
98
  }
105
99
  }
106
- }, [options, value, setSelectOptions, dropDownVisible]);
100
+ }, [options, setSelectOptions, dropDownVisible]);
107
101
 
108
102
  const handleOnSearch = React.useCallback(
109
103
  async (searchInput: string | undefined) => {
110
- if (searchInput !== undefined && onSearch) {
104
+ if (searchInput !== undefined && onSearch && dropDownVisible) {
111
105
  try {
112
106
  //TODO: Remove code duplicated below (Select in react-native-kit)
113
107
  const result = await onSearch(searchInput);
@@ -142,7 +136,7 @@ export const Select = <Data, Type extends 'single' | 'multi'>({
142
136
  }
143
137
  }
144
138
  },
145
- [options, value, keyExtractor]
139
+ [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]
146
140
  );
147
141
 
148
142
  const handlePressInput = async () => {