@tecsinapse/react-native-kit 1.11.0 → 1.11.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.11.0...@tecsinapse/react-native-kit@1.11.1) (2021-12-17)
+
+
+### Bug Fixes
+
+* handleLazySelect ([1102499](https://github.com/tecsinapse/design-system/commit/11024996571866d542d4d112baf7b183b8b146e1))
+
+
+
+
+
 # [1.11.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.10.5...@tecsinapse/react-native-kit@1.11.0) (2021-12-17)
 
 

package/dist/components/atoms/Select/Select.js

@@ -67,7 +67,7 @@ function Select({
     }
   }, [value]);
 
-  const handleOnFocus = async () => {
+  const handleLazyFocus = async () => {
     if (typeof options === 'function') {
       setLoading(true);
 
@@ -112,9 +112,10 @@ function Select({
     }
   }, [options, value, keyExtractor]);
 
-  const handlePressInput = () => {
+  const handlePressInput = async () => {
     setModalVisible(true);
     handleFocus();
+    await handleLazyFocus();
   };
 
   const handleCloseModal = () => {
@@ -170,7 +171,6 @@ function Select({
     selectModalTitle: selectModalTitle,
     selectModalTitleComponent: selectModalTitleComponent,
     confirmButtonText: confirmButtonText,
-    onFocus: typeof options === 'function' ? handleOnFocus : undefined,
     loading: loading
   }));
 }

package/dist/components/atoms/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/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","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","selectOptions","setSelectOptions","loading","setLoading","handleOnFocus","result","find","v","e","handleOnSearch","useCallback","searchInput","undefined","length","selectedValues","filter","current","handlePressInput","handleCloseModal","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","Text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  InputContainerProps,\n  useInputFocus,\n  HintInputContainer,\n} from '@tecsinapse/react-core';\nimport { Text } from '../Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\nimport { useEffect, useState } from 'react';\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}\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  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\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 handleOnFocus = 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          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\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  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      <Modal\n        visible={modalVisible}\n        options={selectOptions || []}\n        focused={modalVisible}\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        onRequestClose={handleCloseModal}\n        animated\n        animationType={'slide'}\n        onSearch={handleOnSearch}\n        selectModalTitle={selectModalTitle}\n        selectModalTitleComponent={selectModalTitleComponent}\n        confirmButtonText={confirmButtonText}\n        onFocus={typeof options === 'function' ? handleOnFocus : undefined}\n        loading={loading}\n      />\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}
+{"version":3,"sources":["../../../../src/components/atoms/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","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","selectOptions","setSelectOptions","loading","setLoading","handleLazyFocus","result","find","v","e","handleOnSearch","useCallback","searchInput","undefined","length","selectedValues","filter","current","handlePressInput","handleCloseModal","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","Text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  InputContainerProps,\n  useInputFocus,\n  HintInputContainer,\n} from '@tecsinapse/react-core';\nimport { Text } from '../Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\nimport { useEffect, useState } from 'react';\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}\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  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\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          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const handlePressInput = async () => {\n    setModalVisible(true);\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\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  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      <Modal\n        visible={modalVisible}\n        options={selectOptions || []}\n        focused={modalVisible}\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        onRequestClose={handleCloseModal}\n        animated\n        animationType={'slide'}\n        onSearch={handleOnSearch}\n        selectModalTitle={selectModalTitle}\n        selectModalTitleComponent={selectModalTitleComponent}\n        confirmButtonText={confirmButtonText}\n        loading={loading}\n      />\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -29,5 +29,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "27a01035cee1b709734bd4b6b6f518c4320814f6"
+  "gitHead": "d931661ac2696f9bda012f8255f520c75f4620c0"
 }

package/src/components/atoms/Select/Select.tsx

@@ -89,7 +89,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     }
   }, [value]);
 
-  const handleOnFocus = async () => {
+  const handleLazyFocus = async () => {
     if (typeof options === 'function') {
       setLoading(true);
       try {
@@ -152,9 +152,10 @@ function Select<Data, Type extends 'single' | 'multi'>({
     [options, value, keyExtractor]
   );
 
-  const handlePressInput = () => {
+  const handlePressInput = async () => {
     setModalVisible(true);
     handleFocus();
+    await handleLazyFocus();
   };
 
   const handleCloseModal = () => {
@@ -230,7 +231,6 @@ function Select<Data, Type extends 'single' | 'multi'>({
         selectModalTitle={selectModalTitle}
         selectModalTitleComponent={selectModalTitleComponent}
         confirmButtonText={confirmButtonText}
-        onFocus={typeof options === 'function' ? handleOnFocus : undefined}
         loading={loading}
       />
     </>