@tecsinapse/react-native-kit 1.18.1 → 1.18.4

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.18.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.3...@tecsinapse/react-native-kit@1.18.4) (2022-08-12)
+
+
+### Bug Fixes
+
+* add numberOfLines into react-native-kit Select component as an optional prop ([a9b7b85](https://github.com/tecsinapse/design-system/commit/a9b7b8575a60f73020b394f8afb03901fe62efb1))
+
+
+
+
+
+## [1.18.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.2...@tecsinapse/react-native-kit@1.18.3) (2022-08-03)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.18.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.18.1...@tecsinapse/react-native-kit@1.18.2) (2022-08-02)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [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)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/molecules/Select/Select.d.ts

@@ -18,6 +18,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
     selectModalTitleComponent?: JSX.Element;
     closeOnPick?: boolean;
     controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
+    numberOfLines?: number;
 }
-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;
+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, numberOfLines, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
 export default Select;

package/dist/components/molecules/Select/Select.js

@@ -47,6 +47,7 @@ function Select({
   controlComponent,
   closeOnPick = type === 'single',
   label,
+  numberOfLines,
   ...rest
 }) {
   const {
@@ -167,6 +168,7 @@ function Select({
       size: "centi"
     }), rightComponent)
   }, rest), React.createElement(_styled.StyledSelectionText, {
+    numberOfLines: numberOfLines,
     fontWeight: "bold",
     disabled: disabled
   }, getDisplayValue() || ' ')));

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

@@ -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","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"}
+{"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","numberOfLines","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  numberOfLines?: number;\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  numberOfLines,\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 =\n    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 =\n          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\n            numberOfLines={numberOfLines}\n            fontWeight=\"bold\"\n            disabled={disabled}\n          >\n            {getDisplayValue() || ' '}\n          </StyledSelectionText>\n        </HintInputContainer>\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.18.1",
+  "version": "1.18.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.17.1",
+    "@tecsinapse/react-core": "^1.17.3",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -39,5 +39,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "6069c1a1ecf9d39272e727d323c3afa7ffc52aad"
+  "gitHead": "941e9b8aca99e29d87c1cc309e60d099c13be116"
 }

package/src/components/molecules/Select/Select.tsx

@@ -1,7 +1,7 @@
 import {
   HintInputContainer,
   InputContainerProps,
-  useInputFocus
+  useInputFocus,
 } from '@tecsinapse/react-core';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -40,6 +40,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
+  numberOfLines?: number;
 }
 
 function Select<Data, Type extends 'single' | 'multi'>({
@@ -69,6 +70,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
   controlComponent,
   closeOnPick = type === 'single',
   label,
+  numberOfLines,
   ...rest
 }: SelectNativeProps<Data, Type>): JSX.Element {
   const { focused, handleBlur, handleFocus } = useInputFocus(
@@ -82,11 +84,12 @@ function Select<Data, Type extends 'single' | 'multi'>({
 
   // TODO: Add Skeleton to modal height when loading is true
   const [loading, setLoading] = useState<boolean>(false);
-  
+
   const onlyLabel = label && !placeholder;
-  const hasValue = type === 'single' ? !!value : ((value || []) as []).length > 0
-  const _placeholder = onlyLabel ? label : placeholder
-  const _label = hasValue ? label : undefined
+  const hasValue =
+    type === 'single' ? !!value : ((value || []) as []).length > 0;
+  const _placeholder = onlyLabel ? label : placeholder;
+  const _label = hasValue ? label : undefined;
 
   useEffect(() => {
     if (typeof options !== 'function') {
@@ -113,7 +116,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
         setLoading(false);
       }
     }
-  }, [options, value, setSelectOptions])
+  }, [options, value, setSelectOptions]);
 
   const handleOnSearch = React.useCallback(
     async (searchInput: string | undefined) => {
@@ -162,7 +165,8 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return _placeholder;
       else {
-        let options = selectOptions.length > 0 ? selectOptions : value as Data[]
+        let options =
+          selectOptions.length > 0 ? selectOptions : (value as Data[]);
         return options
           ?.reduce(
             (acc, option, index) =>
@@ -181,7 +185,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
         (option, index) =>
           keyExtractor(option, index) == keyExtractor(value as Data, index)
       );
-      return labelExtractor(selectedOption ?? value as Data)
+      return labelExtractor(selectedOption ?? (value as Data));
     }
   }, [_placeholder, value, selectOptions]);
 
@@ -236,7 +240,11 @@ function Select<Data, Type extends 'single' | 'multi'>({
           }
           {...rest}
         >
-          <StyledSelectionText fontWeight="bold" disabled={disabled}>
+          <StyledSelectionText
+            numberOfLines={numberOfLines}
+            fontWeight="bold"
+            disabled={disabled}
+          >
             {getDisplayValue() || ' '}
           </StyledSelectionText>
         </HintInputContainer>