@tecsinapse/react-native-kit 1.15.5 → 1.16.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/components/molecules/Select/Select.d.ts +2 -1
  3. package/dist/components/molecules/Select/Select.js +2 -1
  4. package/dist/components/molecules/Select/Select.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/molecules/Select/Select.tsx +38 -28
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.16.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.15.7...@tecsinapse/react-native-kit@1.16.0) (2022-03-07)
7
+
8
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.15.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.15.6...@tecsinapse/react-native-kit@1.15.7) (2022-02-16)
15
+
16
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
17
+
18
+
19
+
20
+
21
+
22
+ ## [1.15.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.15.5...@tecsinapse/react-native-kit@1.15.6) (2022-02-16)
23
+
24
+ **Note:** Version bump only for package @tecsinapse/react-native-kit
25
+
26
+
27
+
28
+
29
+
6
30
  ## [1.15.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.15.4...@tecsinapse/react-native-kit@1.15.5) (2022-02-16)
7
31
 
8
32
  **Note:** Version bump only for package @tecsinapse/react-native-kit
package/dist/components/molecules/Select/Select.d.ts CHANGED
@@ -17,6 +17,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
17
17
  selectModalTitle?: string;
18
18
  selectModalTitleComponent?: JSX.Element;
19
19
  closeOnPick?: boolean;
20
+ controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
20
21
  }
21
- 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, 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, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
22
23
  export default Select;
package/dist/components/molecules/Select/Select.js CHANGED
@@ -46,6 +46,7 @@ function Select({
46
46
  hintComponent,
47
47
  hint,
48
48
  style,
49
+ controlComponent,
49
50
  closeOnPick = type === 'single',
50
51
  ...rest
51
52
  }) {
@@ -154,7 +155,7 @@ function Select({
154
155
  await handleLazyFocus();
155
156
  };
156
157
 
157
- return React.createElement(React.Fragment, null, React.createElement(_reactCore.HintInputContainer, _extends({
158
+ return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() || '') : React.createElement(_reactCore.HintInputContainer, _extends({
158
159
  viewStyle: style,
159
160
  onPress: handlePressInput,
160
161
  focused: focused,
package/dist/components/molecules/Select/Select.js.map CHANGED
@@ -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","closeOnPick","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","result","find","v","e","handleOnSearch","React","useCallback","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, 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 | 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}\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 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 useEffect(() => {\n if (typeof options === 'function') {\n if (value) {\n if (type === 'single') setSelectOptions([value as Data]);\n else setSelectOptions([...(value as Data[])]);\n } else setSelectOptions([]);\n }\n }, [value]);\n\n const handleLazyFocus = 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 };\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 = () => {\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 };\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 <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\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","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","result","find","v","e","handleOnSearch","React","useCallback","searchInput","undefined","length","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAkCA,SAASA,MAAT,CAAuD;AAErDC,EAAAA,KAFqD;AAGrDC,EAAAA,OAHqD;AAIrDC,EAAAA,YAJqD;AAKrDC,EAAAA,iBALqD;AAMrDC,EAAAA,QANqD;AAOrDC,EAAAA,IAPqD;AAQrDC,EAAAA,cARqD;AASrDC,EAAAA,WATqD;AAUrDC,EAAAA,OAVqD;AAWrDC,EAAAA,MAXqD;AAYrDC,EAAAA,QAZqD;AAarDC,EAAAA,QAbqD;AAcrDC,EAAAA,gBAdqD;AAerDC,EAAAA,yBAfqD;AAgBrDC,EAAAA,oBAhBqD;AAiBrDC,EAAAA,aAjBqD;AAkBrDC,EAAAA,iBAlBqD;AAmBrDC,EAAAA,cAnBqD;AAoBrDC,EAAAA,OAAO,GAAG,SApB2C;AAqBrDC,EAAAA,aArBqD;AAsBrDC,EAAAA,IAtBqD;AAuBrDC,EAAAA,KAvBqD;AAwBrDC,EAAAA,gBAxBqD;AAyBrDC,EAAAA,WAAW,GAAGlB,IAAI,KAAK,QAzB8B;AA0BrD,KAAGmB;AA1BkD,CAAvD,EA2B+C;AAC7C,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CnB,OAD2C,EAE3CC,MAF2C,EAG3C,CAACC,QAH0C,CAA7C;AAMA,QAAM,CAACkB,aAAD,EAAgBC,gBAAhB,IAAoC,oBAAiB,EAAjB,CAA1C;AACA,QAAMC,KAAK,GAAG,iCAAd;AAGA,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,oBAAkB,KAAlB,CAA9B;AAEA,uBAAU,MAAM;AACd,QAAI,OAAO/B,OAAP,KAAmB,UAAvB,EAAmC;AACjC4B,MAAAA,gBAAgB,CAAC5B,OAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,OAAD,CAJH;AAMA,uBAAU,MAAM;AACd,QAAI,OAAOA,OAAP,KAAmB,UAAvB,EAAmC;AACjC,UAAID,KAAJ,EAAW;AACT,YAAIK,IAAI,KAAK,QAAb,EAAuBwB,gBAAgB,CAAC,CAAC7B,KAAD,CAAD,CAAhB,CAAvB,KACK6B,gBAAgB,CAAC,CAAC,GAAI7B,KAAL,CAAD,CAAhB;AACN,OAHD,MAGO6B,gBAAgB,CAAC,EAAD,CAAhB;AACR;AACF,GAPD,EAOG,CAAC7B,KAAD,CAPH;;AASA,QAAMiC,eAAe,GAAG,YAAY;AAClC,QAAI,OAAOhC,OAAP,KAAmB,UAAvB,EAAmC;AACjC+B,MAAAA,UAAU,CAAC,IAAD,CAAV;;AACA,UAAI;AACF,cAAME,MAAM,GAAG,MAAMjC,OAAO,EAA5B;;AACA,YAAIiC,MAAJ,EAAY;AACV,cACElC,KAAK,IACL,CAACkC,MAAM,CAACC,IAAP,CAAYC,CAAC,IAAIlC,YAAY,CAACF,KAAD,CAAZ,KAAgCE,YAAY,CAACkC,CAAD,CAA7D,CAFH,EAGE;AACAP,YAAAA,gBAAgB,CAAC,CAAC7B,KAAD,EAAgB,GAAGkC,MAAnB,CAAD,CAAhB;AACD,WALD,MAKOL,gBAAgB,CAACK,MAAD,CAAhB;AACR;AACF,OAVD,CAUE,OAAOG,CAAP,EAAU,CAEX,CAZD,SAYU;AACRL,QAAAA,UAAU,CAAC,KAAD,CAAV;AACD;AACF;AACF,GAnBD;;AAqBA,QAAMM,cAAc,GAAGC,KAAK,CAACC,WAAN,CACrB,MAAOC,WAAP,IAA2C;AACzC,QAAIA,WAAW,KAAKC,SAAhB,IAA6B/B,QAAjC,EAA2C;AACzCqB,MAAAA,UAAU,CAAC,IAAD,CAAV;;AACA,UAAI;AACF,cAAME,MAAM,GAAG,MAAMvB,QAAQ,CAAC8B,WAAD,CAA7B;;AACA,YAAIP,MAAJ,EAAY;AACV,cAAI7B,IAAI,KAAK,QAAb,EAAuB;AACrB,gBACEL,KAAK,IACL,CAACkC,MAAM,CAACC,IAAP,CACCC,CAAC,IAAIlC,YAAY,CAACF,KAAD,CAAZ,KAAgCE,YAAY,CAACkC,CAAD,CADlD,CAFH,EAKE;AACAP,cAAAA,gBAAgB,CAAC,CAAC7B,KAAD,EAAgB,GAAGkC,MAAnB,CAAD,CAAhB;AACD,aAPD,MAOOL,gBAAgB,CAACK,MAAD,CAAhB;AACR,WATD,MASO;AACL,gBAAKlC,KAAD,CAAkB2C,MAAlB,GAA2B,CAA/B,EAAkC;AAChC,oBAAMC,cAAc,GACjB5C,KAAD,CAAkB6C,MAAlB,CACET,CAAC,IACC,CAACF,MAAM,CAACC,IAAP,CACCW,OAAO,IACL5C,YAAY,CAACkC,CAAD,CAAZ,KAA4BlC,YAAY,CAAC4C,OAAD,CAF3C,CAFL,KAMK,EAPP;AAQAjB,cAAAA,gBAAgB,CAAC,CAAC,GAAGe,cAAJ,EAAoB,GAAGV,MAAvB,CAAD,CAAhB;AACD,aAVD,MAUO;AACLL,cAAAA,gBAAgB,CAACK,MAAD,CAAhB;AACD;AACF;AACF;AACF,OA5BD,CA4BE,OAAOG,CAAP,EAAU,CAEX,CA9BD,SA8BU;AACRP,QAAAA,KAAK,CAACiB,aAAN;AACAf,QAAAA,UAAU,CAAC,KAAD,CAAV;AACD;AACF;AACF,GAvCoB,EAwCrB,CAAC/B,OAAD,EAAUD,KAAV,EAAiBE,YAAjB,CAxCqB,CAAvB;;AA2CA,QAAM8C,eAAe,GAAG,MAAM;AAC5B,QAAIC,KAAK,CAACC,OAAN,CAAclD,KAAd,CAAJ,EAA0B;AACxB,UAAIA,KAAK,CAAC2C,MAAN,KAAiB,CAArB,EAAwB,OAAOpC,WAAP,CAAxB,KACK;AACH,eAAOqB,aAAP,aAAOA,aAAP,uBAAOA,aAAa,CAChBuB,MADG,CAEH,CAACC,GAAD,EAAMC,MAAN,EAAcC,KAAd,KACEtD,KAAK,CAACmC,IAAN,CACEoB,GAAG,IAAIrD,YAAY,CAACmD,MAAD,EAASC,KAAT,CAAZ,IAA+BpD,YAAY,CAACqD,GAAD,EAAMD,KAAN,CADpD,IAGIF,GAAG,GAAG9C,cAAc,CAAC+C,MAAD,CAApB,GAA+B,IAHnC,GAIID,GAPH,EAQH,EARG,EAUJI,KAVI,CAUE,CAVF,EAUK,CAAC,CAVN,CAAP;AAWD;AACF,KAfD,MAeO;AACL,UAAIxD,KAAK,KAAK0C,SAAd,EAAyB,OAAOnC,WAAP;AACzB,YAAMkD,cAAc,GAAG7B,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAEO,IAAf,CACrB,CAACkB,MAAD,EAASC,KAAT,KACEpD,YAAY,CAACmD,MAAD,EAASC,KAAT,CAAZ,IAA+BpD,YAAY,CAACF,KAAD,EAAgBsD,KAAhB,CAFxB,CAAvB;AAIA,aAAOG,cAAc,GAAGnD,cAAc,CAACmD,cAAD,CAAjB,GAAoClD,WAAzD;AACD;AACF,GAxBD;;AA0BAuB,EAAAA,KAAK,CAAC4B,IAAN,CACE,oBAAC,aAAD;AACE,IAAA,OAAO,EAAE9B,aAAa,IAAI,EAD5B;AAEE,IAAA,OAAO,EAAE,IAFX;AAGE,IAAA,YAAY,EAAE1B,YAHhB;AAIE,IAAA,cAAc,EAAEI,cAJlB;AAKE,IAAA,iBAAiB,EAAEH,iBALrB;AAME,IAAA,oBAAoB,EAAEW,oBANxB;AAOE,IAAA,IAAI,EAAET,IAPR;AAQE,IAAA,QAAQ,EAAED,QARZ;AASE,IAAA,KAAK,EAAEJ,KATT;AAUE,IAAA,aAAa,EAAEe,aAVjB;AAWE,IAAA,QAAQ,EAAEuB,cAXZ;AAYE,IAAA,gBAAgB,EAAE1B,gBAZpB;AAaE,IAAA,yBAAyB,EAAEC,yBAb7B;AAcE,IAAA,iBAAiB,EAAEG,iBAdrB;AAeE,IAAA,OAAO,EAAEe,OAfX;AAgBE,IAAA,OAAO,EAAEL,UAhBX;AAiBE,IAAA,WAAW,EAAEH;AAjBf,IADF;;AAsBA,QAAMoC,gBAAgB,GAAG,YAAY;AACnC7B,IAAAA,KAAK,CAAC8B,IAAN;AACAjC,IAAAA,WAAW;AACX,UAAMM,eAAe,EAArB;AACD,GAJD;;AAMA,SACE,0CACGX,gBAAgB,GACfA,gBAAgB,CAACqC,gBAAD,EAAmBX,eAAe,MAAM,EAAxC,CADD,GAGf,oBAAC,6BAAD;AACE,IAAA,SAAS,EAAE3B,KADb;AAEE,IAAA,OAAO,EAAEsC,gBAFX;AAGE,IAAA,OAAO,EAAElC,OAHX;AAIE,IAAA,QAAQ,EAAEf,QAJZ;AAKE,IAAA,cAAc,EAAEmD,UALlB;AAME,IAAA,OAAO,EAAE3C,OANX;AAOE,IAAA,IAAI,EAAEE,IAPR;AAQE,IAAA,aAAa,EAAED,aARjB;AASE,IAAA,cAAc,EACZ,0CACE,oBAAC,kBAAD;AAAY,MAAA,IAAI,EAAC,cAAjB;AAAgC,MAAA,IAAI,EAAC,SAArC;AAA+C,MAAA,IAAI,EAAC;AAApD,MADF,EAEGF,cAFH;AAVJ,KAeMO,IAfN,GAiBE,oBAAC,2BAAD;AAAqB,IAAA,UAAU,EAAC,MAAhC;AAAuC,IAAA,QAAQ,EAAEd;AAAjD,KACGsC,eAAe,MAAM,GADxB,CAjBF,CAJJ,CADF;AA6BD;;eAEcjD,M","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 | 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 useEffect(() => {\n if (typeof options === 'function') {\n if (value) {\n if (type === 'single') setSelectOptions([value as Data]);\n else setSelectOptions([...(value as Data[])]);\n } else setSelectOptions([]);\n }\n }, [value]);\n\n const handleLazyFocus = 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 };\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 = () => {\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 };\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"}
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.15.5",
4
+ "version": "1.16.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "license": "MIT",
@@ -13,7 +13,7 @@
13
13
  "dependencies": {
14
14
  "@emotion/native": "^11.0.0",
15
15
  "@emotion/react": "^11.4.1",
16
- "@tecsinapse/react-core": "^1.14.5",
16
+ "@tecsinapse/react-core": "^1.15.0",
17
17
  "react-native-linear-gradient": "^2.5.6"
18
18
  },
19
19
  "repository": {
@@ -36,5 +36,5 @@
36
36
  "devDependencies": {
37
37
  "@types/uuid": "^8.3.3"
38
38
  },
39
- "gitHead": "e97e9699151c6d0634f7aabab189533494be14cf"
39
+ "gitHead": "e7dd208b02a6728b47f77ab2d6a5970b09c70970"
40
40
  }
package/src/components/molecules/Select/Select.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
- HintInputContainer, InputContainerProps,
3
- useInputFocus
2
+ HintInputContainer,
3
+ InputContainerProps,
4
+ useInputFocus,
4
5
  } from '@tecsinapse/react-core';
5
6
  import * as React from 'react';
6
7
  import { useEffect, useState } from 'react';
@@ -35,6 +36,10 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
35
36
  selectModalTitle?: string;
36
37
  selectModalTitleComponent?: JSX.Element;
37
38
  closeOnPick?: boolean;
39
+ controlComponent?: (
40
+ onPress: () => void,
41
+ displayValue?: string
42
+ ) => JSX.Element;
38
43
  }
39
44
 
40
45
  function Select<Data, Type extends 'single' | 'multi'>({
@@ -61,6 +66,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
61
66
  hintComponent,
62
67
  hint,
63
68
  style,
69
+ controlComponent,
64
70
  closeOnPick = type === 'single',
65
71
  ...rest
66
72
  }: SelectNativeProps<Data, Type>): JSX.Element {
@@ -71,7 +77,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
71
77
  );
72
78
 
73
79
  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
74
- const modal = useLazyModalManager()
80
+ const modal = useLazyModalManager();
75
81
 
76
82
  // TODO: Add Skeleton to modal height when loading is true
77
83
  const [loading, setLoading] = useState<boolean>(false);
@@ -147,7 +153,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
147
153
  } catch (e) {
148
154
  // TODO: Catch error
149
155
  } finally {
150
- modal.requestUpdate()
156
+ modal.requestUpdate();
151
157
  setLoading(false);
152
158
  }
153
159
  }
@@ -201,37 +207,41 @@ function Select<Data, Type extends 'single' | 'multi'>({
201
207
  onClose={handleBlur}
202
208
  closeOnPick={closeOnPick}
203
209
  />
204
- )
205
-
210
+ );
211
+
206
212
  const handlePressInput = async () => {
207
- modal.show()
213
+ modal.show();
208
214
  handleFocus();
209
215
  await handleLazyFocus();
210
216
  };
211
217
 
212
218
  return (
213
219
  <>
214
- <HintInputContainer
215
- viewStyle={style}
216
- onPress={handlePressInput}
217
- focused={focused}
218
- disabled={disabled}
219
- LabelComponent={Text}
220
- variant={variant}
221
- hint={hint}
222
- hintComponent={hintComponent}
223
- rightComponent={
224
- <>
225
- <SelectIcon name="chevron-down" type="ionicon" size="centi" />
226
- {rightComponent}
227
- </>
228
- }
229
- {...rest}
230
- >
231
- <StyledSelectionText fontWeight="bold" disabled={disabled}>
232
- {getDisplayValue() || ' '}
233
- </StyledSelectionText>
234
- </HintInputContainer>
220
+ {controlComponent ? (
221
+ controlComponent(handlePressInput, getDisplayValue() || '')
222
+ ) : (
223
+ <HintInputContainer
224
+ viewStyle={style}
225
+ onPress={handlePressInput}
226
+ focused={focused}
227
+ disabled={disabled}
228
+ LabelComponent={Text}
229
+ variant={variant}
230
+ hint={hint}
231
+ hintComponent={hintComponent}
232
+ rightComponent={
233
+ <>
234
+ <SelectIcon name="chevron-down" type="ionicon" size="centi" />
235
+ {rightComponent}
236
+ </>
237
+ }
238
+ {...rest}
239
+ >
240
+ <StyledSelectionText fontWeight="bold" disabled={disabled}>
241
+ {getDisplayValue() || ' '}
242
+ </StyledSelectionText>
243
+ </HintInputContainer>
244
+ )}
235
245
  </>
236
246
  );
237
247
  }