@tecsinapse/react-native-kit 1.10.5 → 1.12.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.12.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.11.2...@tecsinapse/react-native-kit@1.12.0) (2021-12-21)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.11.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.11.1...@tecsinapse/react-native-kit@1.11.2) (2021-12-20)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* [163127] Modais de picker do DS estão em inglês ([a95b0b2](https://github.com/tecsinapse/design-system/commit/a95b0b283f3535af20a23ac6a9a5e5633127d5b0))
+
+
+
+
+
 ## [1.10.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.10.4...@tecsinapse/react-native-kit@1.10.5) (2021-12-07)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/Select/Modal.d.ts

@@ -1,3 +1,7 @@
 import { ModalProps } from 'react-native';
 import { SelectNativeProps } from './Select';
-export declare const Modal: <Data, Type extends "single" | "multi">({ options, keyExtractor, labelExtractor, groupKeyExtractor, hideSearchBar, searchBarPlaceholder, focused, type, value, onSelect, onSearch, onRequestClose, selectModalTitle, selectModalTitleComponent, confirmButtonText, ...modalProps }: SelectNativeProps<Data, Type> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps) => JSX.Element;
+interface LoadingProps {
+    loading?: boolean;
+}
+export declare const Modal: <Data, Type extends "single" | "multi">({ options, keyExtractor, labelExtractor, groupKeyExtractor, hideSearchBar, searchBarPlaceholder, focused, type, value, onSelect, onSearch, onRequestClose, selectModalTitle, selectModalTitleComponent, confirmButtonText, loading, ...modalProps }: SelectNativeProps<Data, Type> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & LoadingProps) => JSX.Element;
+export {};

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

@@ -41,6 +41,7 @@ const Component = ({
   selectModalTitle,
   selectModalTitleComponent,
   confirmButtonText,
+  loading,
   ...modalProps
 }) => {
   const [selectedValues, setSelectedValues] = React.useState([]);
@@ -48,9 +49,14 @@ const Component = ({
   React.useEffect(() => {
     setSelectedValues(value ? type === 'multi' ? value : [value] : []);
   }, [value, focused, setSelectedValues]);
-  const data = options.map((option, index) => ({ ...option,
-    _checked: type === 'multi' ? !!selectedValues.find(value => keyExtractor(option, index) == keyExtractor(value, index)) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
-  }));
+
+  const getData = options => {
+    return options === null || options === void 0 ? void 0 : options.map((option, index) => ({ ...option,
+      _checked: type === 'multi' ? !!selectedValues.find(value => keyExtractor(option, index) == keyExtractor(value, index)) : keyExtractor(selectedValues[0] || {}, index) == keyExtractor(option, index)
+    }));
+  };
+
+  const data = typeof options !== 'function' ? getData(options) : [];
 
   const handlePressItem = option => () => {
     setSelectedValues(selectedValues => {
@@ -102,10 +108,14 @@ const Component = ({
       type: "ionicon",
       size: "centi"
     })
-  })), React.createElement(_reactNative.FlatList, {
+  })), loading && React.createElement(_styled.FetchIndicator, {
+    animating: true,
+    color: 'grey',
+    size: 'large'
+  }), React.createElement(_reactNative.FlatList, {
     data: data,
     keyExtractor: keyExtractor,
-    ListFooterComponent: React.createElement(_styled.ListFooter, null),
+    fadingEdgeLength: 200,
     renderItem: ({
       item
     }) => React.createElement(_styled.ListItem, {
@@ -125,14 +135,15 @@ const Component = ({
     }, React.createElement(_Text.Text, {
       fontWeight: item._checked ? 'bold' : 'regular'
     }, labelExtractor(item)))))
-  }), React.createElement(_styled.FloatingButton, {
+  }), React.createElement(_styled.ModalFooter, null, React.createElement(_reactCore.Button, {
     variant: 'filled',
     color: 'primary',
-    onPress: handleConfirm
+    onPress: handleConfirm,
+    disabled: loading
   }, React.createElement(_Text.Text, {
     fontColor: 'light',
     fontWeight: "bold"
-  }, confirmButtonText))));
+  }, confirmButtonText)))));
 };
 
 const Modal = Component;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Select/Modal.tsx"],"names":["Component","options","keyExtractor","labelExtractor","groupKeyExtractor","hideSearchBar","searchBarPlaceholder","focused","type","value","onSelect","onSearch","onRequestClose","selectModalTitle","selectModalTitleComponent","confirmButtonText","modalProps","selectedValues","setSelectedValues","React","useState","searchArg","setSearchArg","useEffect","data","map","option","index","_checked","find","handlePressItem","newArr","found","push","handleConfirm","headerContent","onPress","icon","name","fontColor","text","item","Modal"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  FloatingButton,\n  ListFooter,\n  ListItem,\n  SearchBarContainer,\n  SelectIcon,\n  StyledModal,\n} from './styled';\nimport { FlatList, Modal as RNModal, ModalProps, View } from 'react-native';\nimport { SelectNativeProps } from './Select';\nimport { Text } from '../Text';\nimport {\n  Checkbox,\n  RadioButton,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Input } from '../Input';\nimport { Header } from '../Header';\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  groupKeyExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  onRequestClose,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  ...modalProps\n}: SelectNativeProps<Data, Type> & ModalProps): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const data = options.map((option, index) => ({\n    ...option,\n    _checked:\n      type === 'multi'\n        ? !!selectedValues.find(\n            value => keyExtractor(option, index) == keyExtractor(value, index)\n          )\n        : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n          keyExtractor(option, index),\n  }));\n\n  const handlePressItem = (option: Data) => () => {\n    setSelectedValues(selectedValues => {\n      if (type === 'multi') {\n        const newArr: Data[] = [];\n        let found = false;\n        for (const value of selectedValues) {\n          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n          else found = true;\n        }\n        if (!found) newArr.push(option);\n        return newArr;\n      }\n      return keyExtractor((selectedValues[0] || {}) as Data) ===\n        keyExtractor(option)\n        ? []\n        : [option];\n    });\n  };\n\n  const handleConfirm = () => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    onRequestClose && onRequestClose();\n  };\n\n  const headerContent = selectModalTitleComponent ? (\n    selectModalTitleComponent\n  ) : selectModalTitle ? (\n    <Text typography=\"h4\" fontWeight=\"bold\">\n      {selectModalTitle}\n    </Text>\n  ) : null;\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <StyledModal>\n        <Header\n          rightButton={{\n            onPress: onRequestClose,\n            icon: {\n              name: 'close',\n              type: 'material-community',\n              fontColor: 'light',\n            },\n          }}\n        >\n          {headerContent}\n        </Header>\n        {!hideSearchBar && (\n          <SearchBarContainer>\n            <Input\n              placeholder={searchBarPlaceholder}\n              value={searchArg}\n              onChange={text => setSearchArg(text)}\n              leftComponent={\n                <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n              }\n            />\n          </SearchBarContainer>\n        )}\n        <FlatList\n          data={data}\n          keyExtractor={keyExtractor}\n          ListFooterComponent={<ListFooter />}\n          renderItem={({ item }) => (\n            <ListItem onPress={handlePressItem(item)}>\n              <View pointerEvents={'none'}>\n                {type === 'multi' ? (\n                  <Checkbox\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </Checkbox>\n                ) : (\n                  <RadioButton\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </RadioButton>\n                )}\n              </View>\n            </ListItem>\n          )}\n        />\n        <FloatingButton\n          variant={'filled'}\n          color={'primary'}\n          onPress={handleConfirm}\n        >\n          <Text fontColor={'light'} fontWeight=\"bold\">\n            {confirmButtonText}\n          </Text>\n        </FloatingButton>\n      </StyledModal>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Select/Modal.tsx"],"names":["Component","options","keyExtractor","labelExtractor","groupKeyExtractor","hideSearchBar","searchBarPlaceholder","focused","type","value","onSelect","onSearch","onRequestClose","selectModalTitle","selectModalTitleComponent","confirmButtonText","loading","modalProps","selectedValues","setSelectedValues","React","useState","searchArg","setSearchArg","useEffect","getData","map","option","index","_checked","find","data","handlePressItem","newArr","found","push","handleConfirm","headerContent","onPress","icon","name","fontColor","text","item","Modal"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  FetchIndicator,\n  ModalFooter,\n  ListItem,\n  SearchBarContainer,\n  SelectIcon,\n  StyledModal,\n} from './styled';\nimport { FlatList, Modal as RNModal, ModalProps, View } from 'react-native';\nimport { SelectNativeProps } from './Select';\nimport { Text } from '../Text';\nimport {\n  Button,\n  Checkbox,\n  RadioButton,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Input } from '../Input';\nimport { Header } from '../Header';\n\ninterface LoadingProps {\n  loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  groupKeyExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  onRequestClose,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  loading,\n  ...modalProps\n}: SelectNativeProps<Data, Type> & ModalProps & LoadingProps): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const getData = (options: Data[]) => {\n    return options?.map((option, index) => ({\n      ...option,\n      _checked:\n        type === 'multi'\n          ? !!selectedValues.find(\n              value => keyExtractor(option, index) == keyExtractor(value, index)\n            )\n          : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n            keyExtractor(option, index),\n    }));\n  };\n\n  const data = typeof options !== 'function' ? getData(options) : [];\n\n  const handlePressItem = (option: Data) => () => {\n    setSelectedValues(selectedValues => {\n      if (type === 'multi') {\n        const newArr: Data[] = [];\n        let found = false;\n        for (const value of selectedValues) {\n          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n          else found = true;\n        }\n        if (!found) newArr.push(option);\n        return newArr;\n      }\n      return keyExtractor((selectedValues[0] || {}) as Data) ===\n        keyExtractor(option)\n        ? []\n        : [option];\n    });\n  };\n\n  const handleConfirm = () => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    onRequestClose && onRequestClose();\n  };\n\n  const headerContent = selectModalTitleComponent ? (\n    selectModalTitleComponent\n  ) : selectModalTitle ? (\n    <Text typography=\"h4\" fontWeight=\"bold\">\n      {selectModalTitle}\n    </Text>\n  ) : null;\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <StyledModal>\n        <Header\n          rightButton={{\n            onPress: onRequestClose,\n            icon: {\n              name: 'close',\n              type: 'material-community',\n              fontColor: 'light',\n            },\n          }}\n        >\n          {headerContent}\n        </Header>\n        {!hideSearchBar && (\n          <SearchBarContainer>\n            <Input\n              placeholder={searchBarPlaceholder}\n              value={searchArg}\n              onChange={text => setSearchArg(text)}\n              leftComponent={\n                <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n              }\n            />\n          </SearchBarContainer>\n        )}\n        {loading && (\n          <FetchIndicator animating={true} color={'grey'} size={'large'} />\n        )}\n        <FlatList\n          data={data}\n          keyExtractor={keyExtractor}\n          fadingEdgeLength={200}\n          renderItem={({ item }) => (\n            <ListItem onPress={handlePressItem(item)}>\n              <View pointerEvents={'none'}>\n                {type === 'multi' ? (\n                  <Checkbox\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </Checkbox>\n                ) : (\n                  <RadioButton\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </RadioButton>\n                )}\n              </View>\n            </ListItem>\n          )}\n        />\n        <ModalFooter>\n          <Button\n            variant={'filled'}\n            color={'primary'}\n            onPress={handleConfirm}\n            disabled={loading}\n          >\n            <Text fontColor={'light'} fontWeight=\"bold\">\n              {confirmButtonText}\n            </Text>\n          </Button>\n        </ModalFooter>\n      </StyledModal>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

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

@@ -1,6 +1,6 @@
 import { InputContainerProps } from '@tecsinapse/react-core';
 export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
-    options: Data[];
+    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
     onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
     value: Type extends 'single' ? Data | undefined : Data[];
     type: Type;
@@ -11,7 +11,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
     placeholder?: string;
     onFocus?: () => void | never;
     onBlur?: () => void | never;
-    onSearch?: (searchArg: string) => void | never;
+    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
     searchBarPlaceholder?: string;
     confirmButtonText?: string;
     selectModalTitle?: string;

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

@@ -52,10 +52,70 @@ function Select({
     handleFocus
   } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
   const [modalVisible, setModalVisible] = React.useState(false);
+  const [selectOptions, setSelectOptions] = (0, React.useState)([]);
+  const [loading, setLoading] = (0, React.useState)(false);
+  (0, React.useEffect)(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+  (0, React.useEffect)(() => {
+    if (typeof options === 'function') {
+      if (value) {
+        if (type === 'single') setSelectOptions([value]);else setSelectOptions([...value]);
+      } else setSelectOptions([]);
+    }
+  }, [value]);
+
+  const handleLazyFocus = async () => {
+    if (typeof options === 'function') {
+      setLoading(true);
+
+      try {
+        const result = await options();
+
+        if (result) {
+          if (value && !result.find(v => keyExtractor(value) === keyExtractor(v))) {
+            setSelectOptions([value, ...result]);
+          } else setSelectOptions(result);
+        }
+      } catch (e) {} finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleOnSearch = React.useCallback(async searchInput => {
+    if (searchInput !== undefined && onSearch) {
+      setLoading(true);
+
+      try {
+        const result = await onSearch(searchInput);
+
+        if (result) {
+          if (type === 'single') {
+            if (value && !result.find(v => keyExtractor(value) === keyExtractor(v))) {
+              setSelectOptions([value, ...result]);
+            } else setSelectOptions(result);
+          } else {
+            if (value.length > 0) {
+              const selectedValues = value.filter(v => !result.find(current => keyExtractor(v) === keyExtractor(current))) || [];
+              setSelectOptions([...selectedValues, ...result]);
+            } else {
+              setSelectOptions(result);
+            }
+          }
+        }
+      } catch (e) {} finally {
+        setLoading(false);
+      }
+    }
+  }, [options, value, keyExtractor]);
 
-  const handlePressInput = () => {
+  const handlePressInput = async () => {
     setModalVisible(true);
     handleFocus();
+    await handleLazyFocus();
   };
 
   const handleCloseModal = () => {
@@ -66,11 +126,11 @@ function Select({
   const getDisplayValue = () => {
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;else {
-        return options.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
+        return selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.reduce((acc, option, index) => value.find(key => keyExtractor(option, index) == keyExtractor(key, index)) ? acc + labelExtractor(option) + ', ' : acc, '').slice(0, -2);
       }
     } else {
       if (value === undefined) return placeholder;
-      const selectedOption = options.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
+      const selectedOption = selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.find((option, index) => keyExtractor(option, index) == keyExtractor(value, index));
       return selectedOption ? labelExtractor(selectedOption) : placeholder;
     }
   };
@@ -94,7 +154,7 @@ function Select({
     disabled: disabled
   }, getDisplayValue() || ' ')), React.createElement(_Modal.Modal, {
     visible: modalVisible,
-    options: options,
+    options: selectOptions || [],
     focused: modalVisible,
     keyExtractor: keyExtractor,
     labelExtractor: labelExtractor,
@@ -107,10 +167,11 @@ function Select({
     onRequestClose: handleCloseModal,
     animated: true,
     animationType: 'slide',
-    onSearch: onSearch,
+    onSearch: handleOnSearch,
     selectModalTitle: selectModalTitle,
     selectModalTitleComponent: selectModalTitleComponent,
-    confirmButtonText: confirmButtonText
+    confirmButtonText: confirmButtonText,
+    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","handlePressInput","handleCloseModal","getDisplayValue","Array","isArray","length","reduce","acc","option","index","find","key","slice","undefined","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';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: 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?: (searchArg: string) => void | 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\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 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 = options.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={options}\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={onSearch}\n        selectModalTitle={selectModalTitle}\n        selectModalTitleComponent={selectModalTitleComponent}\n        confirmButtonText={confirmButtonText}\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/dist/components/atoms/Select/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { View, ViewProps } from 'react-native';
+import { ActivityIndicator, View, ViewProps } from 'react-native';
 export declare const StyledModal: import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -26,12 +26,15 @@ export declare const SearchBar: import("@emotion/native").StyledComponent<any, {
 export declare const ListItem: import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<any> | undefined;
 }>;
-export declare const ListFooter: import("@emotion/native").StyledComponent<any, {}, {
+export declare const ModalFooter: import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const FloatingButton: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
 export declare const SelectIcon: import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<any> | undefined;
 }>;
+export declare const FetchIndicator: import("@emotion/native").StyledComponent<import("react-native").ActivityIndicatorProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<ActivityIndicator> | undefined;
+}>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectIcon = exports.FloatingButton = exports.ListFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.StyledModal = void 0;
+exports.FetchIndicator = exports.SelectIcon = exports.ModalFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.StyledModal = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
@@ -68,6 +68,7 @@ const SearchBarContainer = (0, _native.default)(_reactNative.View)`
   padding: ${({
   theme
 }) => theme.spacing.deca};
+  position: relative;
 `;
 exports.SearchBarContainer = SearchBarContainer;
 const SearchBar = (0, _native.default)(_Input.Input)`
@@ -89,27 +90,18 @@ const ListItem = (0, _native.default)(_reactCore.PressableSurface)`
 }) => theme.spacing.deca};
 `;
 exports.ListItem = ListItem;
-const ListFooter = _native.default.View`
+const ModalFooter = (0, _native.default)(_reactNative.View)`
   width: 100%;
-  min-height: 44px;
-  margin-vertical: ${({
-  theme
-}) => theme.spacing.deca};
-`;
-exports.ListFooter = ListFooter;
-const FloatingButton = (0, _native.default)(_reactCore.Button)`
-  position: absolute;
-  bottom: ${({
-  theme
-}) => theme.spacing.deca};
-  left: ${({
+  height: auto;
+  bottom: 0;
+  background-color: ${({
   theme
-}) => theme.spacing.deca};
-  right: ${({
+}) => theme.miscellaneous.bodyColor};
+  padding: ${({
   theme
 }) => theme.spacing.deca};
 `;
-exports.FloatingButton = FloatingButton;
+exports.ModalFooter = ModalFooter;
 const SelectIcon = (0, _native.default)(_reactCore.Icon)`
   padding: ${({
   theme
@@ -119,4 +111,8 @@ const SelectIcon = (0, _native.default)(_reactCore.Icon)`
 }) => theme.color.secondary.medium};
 `;
 exports.SelectIcon = SelectIcon;
+const FetchIndicator = (0, _native.default)(_reactNative.ActivityIndicator)`
+  align-self: center;
+`;
+exports.FetchIndicator = FetchIndicator;
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Select/styled.ts"],"names":["StyledModal","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ListFooter","styled","FloatingButton","SelectIcon","Icon","centi","medium"],"mappings":";;;;;;;AAAA;;AACA;;AAUA;;AACA;;AACA;;;;;;AAEO,MAAMA,WAAW,GAAG,qBAAOC,iBAAP,CAA+C;AAC1E;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE;AACA;AACA,CALO;;AAOA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,iDACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CAFO;;AAIA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF;AACA,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,UAAU,GAAGC,gBAAO3B,IAA0B;AAC3D;AACA;AACA,qBAAqB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACvD,CAJO;;AAMA,MAAMa,cAAc,GAAG,qBAAOX,iBAAP,CAAkD;AAChF;AACA,YAAY,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC9C,UAAU,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC5C,WAAW,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC7C,CALO;;AAOA,MAAMc,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE7B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAciB,KAAM;AAChD,WAAW,CAAC;AAAE9B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBS,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../Input';\nimport { Text } from '../Text';\n\nexport const StyledModal = styled(View)<ModalProps & Partial<StyleProps>>`\n  position: relative;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: 75px;\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: 1px;\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListFooter = styled.View<Partial<StyleProps>>`\n  width: 100%;\n  min-height: 44px;\n  margin-vertical: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  position: absolute;\n  bottom: ${({ theme }) => theme.spacing.deca};\n  left: ${({ theme }) => theme.spacing.deca};\n  right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Select/styled.ts"],"names":["StyledModal","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator"],"mappings":";;;;;;;AAAA;;AACA;;AAUA;;AACA;;AACA;;;;;;AAEO,MAAMA,WAAW,GAAG,qBAAOC,iBAAP,CAA+C;AAC1E;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE;AACA;AACA,CALO;;AAOA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,iDACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF;AACA,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../Input';\nimport { Text } from '../Text';\n\nexport const StyledModal = styled(View)<ModalProps & Partial<StyleProps>>`\n  position: relative;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: 75px;\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: 1px;\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n"],"file":"styled.js"}

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

@@ -1 +1,4 @@
-export declare const Calendar: <T extends any>(props: any) => JSX.Element;
+export declare const Calendar: <T extends any>({ locale, ...rest }: {
+    [x: string]: any;
+    locale: any;
+}) => JSX.Element;

package/dist/components/molecules/Calendar/Calendar.js

@@ -11,13 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Text = require("../../atoms/Text");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const Calendar = props => {
-  return _react.default.createElement(_reactCore.Calendar, _extends({}, props, {
-    TextComponent: _Text.Text
+const Calendar = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.Calendar, _extends({}, rest, {
+    TextComponent: _Text.Text,
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","props","Text"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GACnBC,KADsB,IAEN;AAChB,SAAO,6BAAC,mBAAD,eAAkBA,KAAlB;AAAyB,IAAA,aAAa,EAAEC;AAAxC,KAAP;AACD,CAJM","sourcesContent":["import {\n  Calendar as CalendarCore,\n  CalendarProps,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\n\nexport const Calendar = <T extends SelectionType>(\n  props: CalendarProps<T>\n): JSX.Element => {\n  return <CalendarCore {...props} TextComponent={Text} />;\n};\n"],"file":"Calendar.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/Calendar.tsx"],"names":["Calendar","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;;;;;AAEO,MAAMA,QAAQ,GAAG,CAA0B;AAChDC,EAAAA,MADgD;AAEhD,KAAGC;AAF6C,CAA1B,KAGL;AACjB,SACE,6BAAC,mBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CAXM","sourcesContent":["import {\n  Calendar as CalendarCore,\n  CalendarProps,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\nimport { getLocale } from '../../../utils/date';\n\nexport const Calendar = <T extends SelectionType>({\n  locale,\n  ...rest\n}): JSX.Element => {\n  return (\n    <CalendarCore\n      {...rest}\n      TextComponent={Text}\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"Calendar.js"}

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

@@ -1 +1,4 @@
-export declare const DatePicker: <T extends any>(props: any) => JSX.Element;
+export declare const DatePicker: <T extends any>({ locale, ...rest }: {
+    [x: string]: any;
+    locale: any;
+}) => JSX.Element;

package/dist/components/molecules/DatePicker/DatePicker.js

@@ -13,15 +13,21 @@ var _Text = require("../../atoms/Text");
 
 var _Calendar = require("../Calendar");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const DatePicker = props => {
-  return _react.default.createElement(_reactCore.DatePicker, _extends({}, props, {
+const DatePicker = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.DatePicker, _extends({}, rest, {
     TextComponent: _Text.Text,
     CalendarComponent: _Calendar.Calendar,
-    animationType: "slide"
+    animationType: "slide",
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","props","Text","Calendar"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;;;;;AAEO,MAAMA,UAAU,GACrBC,KADwB,IAER;AAChB,SACE,6BAAC,qBAAD,eACMA,KADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,aAAa,EAAC;AAJhB,KADF;AAQD,CAXM","sourcesContent":["import {\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\n\nexport const DatePicker = <T extends SelectionType>(\n  props: DatePickerProps<T>\n): JSX.Element => {\n  return (\n    <DatePickerCore\n      {...props}\n      TextComponent={Text}\n      CalendarComponent={Calendar}\n      animationType=\"slide\"\n    />\n  );\n};\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","locale","rest","Text","Calendar"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B;AAClDC,EAAAA,MADkD;AAElD,KAAGC;AAF+C,CAA1B,KAGP;AACjB,SACE,6BAAC,qBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,iBAAiB,EAAEC,kBAHrB;AAIE,IAAA,aAAa,EAAC,OAJhB;AAKE,IAAA,MAAM,EAAEH,MAAM,IAAI;AALpB,KADF;AASD,CAbM","sourcesContent":["import {\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React from 'react';\nimport { Text } from '../../atoms/Text';\nimport { Calendar } from '../Calendar';\nimport { getLocale } from '../../../utils/date';\n\nexport const DatePicker = <T extends SelectionType>({\n  locale,\n  ...rest\n}): JSX.Element => {\n  return (\n    <DatePickerCore\n      {...rest}\n      TextComponent={Text}\n      CalendarComponent={Calendar}\n      animationType=\"slide\"\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"DatePicker.js"}

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -13,15 +13,21 @@ var _Text = require("../../atoms/Text");
 
 var _DateTimeSelector = require("../DateTimeSelector");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const DateTimePicker = props => {
-  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, props, {
+const DateTimePicker = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
     TextComponent: _Text.Text,
     DateTimeSelectorComponent: _DateTimeSelector.DateTimeSelector,
-    animationType: "slide"
+    animationType: "slide",
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","props","Text","DateTimeSelector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAuC,GAAGC,KAAK,IAAI;AAC9D,SACE,6BAAC,yBAAD,eACMA,KADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,aAAa,EAAC;AAJhB,KADF;AAQD,CATM","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = props => {\n  return (\n    <DateTimePickerCore\n      {...props}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      animationType=\"slide\"\n    />\n  );\n};\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","Text","DateTimeSelector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAuC,GAAG,CAAC;AACtDC,EAAAA,MADsD;AAEtD,KAAGC;AAFmD,CAAD,KAGjD;AACJ,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,aAAa,EAAC,OAJhB;AAKE,IAAA,MAAM,EAAEH,MAAM,IAAI;AALpB,KADF;AASD,CAbM","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\nimport { getLocale } from '../../../utils/date';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = ({\n  locale,\n  ...rest\n}) => {\n  return (\n    <DateTimePickerCore\n      {...rest}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      animationType=\"slide\"\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js

@@ -11,13 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Text = require("../../atoms/Text");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const DateTimeSelector = props => {
-  return _react.default.createElement(_reactCore.DateTimeSelector, _extends({}, props, {
-    TextComponent: _Text.Text
+const DateTimeSelector = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.DateTimeSelector, _extends({}, rest, {
+    TextComponent: _Text.Text,
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["DateTimeSelector","props","Text"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;AAEO,MAAMA,gBAA2C,GAAGC,KAAK,IAAI;AAClE,SAAO,6BAAC,2BAAD,eAA0BA,KAA1B;AAAiC,IAAA,aAAa,EAAEC;AAAhD,KAAP;AACD,CAFM","sourcesContent":["import {\n  DateTimeSelector as DateTimeSelectorCore,\n  DateTimeSelectorProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\n\nexport const DateTimeSelector: FC<DateTimeSelectorProps> = props => {\n  return <DateTimeSelectorCore {...props} TextComponent={Text} />;\n};\n"],"file":"DateTimeSelector.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["DateTimeSelector","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;;;;;AAEO,MAAMA,gBAA2C,GAAG,CAAC;AAACC,EAAAA,MAAD;AAAS,KAAGC;AAAZ,CAAD,KAAuB;AAChF,SACE,6BAAC,2BAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CARM","sourcesContent":["import {\n  DateTimeSelector as DateTimeSelectorCore,\n  DateTimeSelectorProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { getLocale } from '../../../utils/date';\n\nexport const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {\n  return (\n    <DateTimeSelectorCore\n      {...rest}\n      TextComponent={Text}\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"DateTimeSelector.js"}

package/dist/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const getLocale: () => Locale;

package/dist/utils/date.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLocale = void 0;
+
+var _reactNative = require("react-native");
+
+var dateFnsLocales = _interopRequireWildcard(require("date-fns/locale"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getLocale = () => {
+  let locale;
+
+  if (_reactNative.Platform.OS === 'ios') {
+    locale = _reactNative.NativeModules.SettingsManager.settings.AppleLocale || _reactNative.NativeModules.SettingsManager.settings.AppleLanguages[0];
+  } else {
+    locale = _reactNative.NativeModules.I18nManager.localeIdentifier;
+  }
+
+  const code = locale.replace('_', '');
+  return dateFnsLocales[code];
+};
+
+exports.getLocale = getLocale;
+//# sourceMappingURL=date.js.map

package/dist/utils/date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/date.ts"],"names":["getLocale","locale","Platform","OS","NativeModules","SettingsManager","settings","AppleLocale","AppleLanguages","I18nManager","localeIdentifier","code","replace","dateFnsLocales"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,MAAMA,SAAS,GAAG,MAAc;AACrC,MAAIC,MAAJ;;AACA,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzBF,IAAAA,MAAM,GACJG,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCC,WAAvC,IACAH,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCE,cAAvC,CAAsD,CAAtD,CAFF;AAGD,GAJD,MAIO;AACLP,IAAAA,MAAM,GAAGG,2BAAcK,WAAd,CAA0BC,gBAAnC;AACD;;AAED,QAAMC,IAAI,GAAGV,MAAM,CAACW,OAAP,CAAe,GAAf,EAAoB,EAApB,CAAb;AAEA,SAAOC,cAAc,CAACF,IAAD,CAArB;AACD,CAbM","sourcesContent":["import { NativeModules, Platform } from 'react-native';\nimport * as dateFnsLocales from 'date-fns/locale';\n\nexport const getLocale = (): Locale => {\n  let locale: string;\n  if (Platform.OS === 'ios') {\n    locale =\n      NativeModules.SettingsManager.settings.AppleLocale ||\n      NativeModules.SettingsManager.settings.AppleLanguages[0];\n  } else {\n    locale = NativeModules.I18nManager.localeIdentifier;\n  }\n\n  const code = locale.replace('_', '');\n\n  return dateFnsLocales[code];\n};\n"],"file":"date.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.10.5",
+  "version": "1.12.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.10.4"
+    "@tecsinapse/react-core": "^1.12.0"
   },
   "repository": {
     "type": "git",
@@ -29,5 +29,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "a0f4ed0567683273692e4336ca4f05a9ee98a881"
+  "gitHead": "33520278e4683586a9a4338cc3e1aea57773bdfd"
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  FloatingButton,
-  ListFooter,
+  FetchIndicator,
+  ModalFooter,
   ListItem,
   SearchBarContainer,
   SelectIcon,
@@ -11,6 +11,7 @@ import { FlatList, Modal as RNModal, ModalProps, View } from 'react-native';
 import { SelectNativeProps } from './Select';
 import { Text } from '../Text';
 import {
+  Button,
   Checkbox,
   RadioButton,
   useDebouncedState,
@@ -18,6 +19,10 @@ import {
 import { Input } from '../Input';
 import { Header } from '../Header';
 
+interface LoadingProps {
+  loading?: boolean;
+}
+
 const Component = <Data, Type extends 'single' | 'multi'>({
   options,
   keyExtractor,
@@ -34,8 +39,9 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   selectModalTitle,
   selectModalTitleComponent,
   confirmButtonText,
+  loading,
   ...modalProps
-}: SelectNativeProps<Data, Type> & ModalProps): JSX.Element => {
+}: SelectNativeProps<Data, Type> & ModalProps & LoadingProps): JSX.Element => {
   const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
 
@@ -47,16 +53,20 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     );
   }, [value, focused, setSelectedValues]);
 
-  const data = options.map((option, index) => ({
-    ...option,
-    _checked:
-      type === 'multi'
-        ? !!selectedValues.find(
-            value => keyExtractor(option, index) == keyExtractor(value, index)
-          )
-        : keyExtractor((selectedValues[0] || {}) as Data, index) ==
-          keyExtractor(option, index),
-  }));
+  const getData = (options: Data[]) => {
+    return options?.map((option, index) => ({
+      ...option,
+      _checked:
+        type === 'multi'
+          ? !!selectedValues.find(
+              value => keyExtractor(option, index) == keyExtractor(value, index)
+            )
+          : keyExtractor((selectedValues[0] || {}) as Data, index) ==
+            keyExtractor(option, index),
+    }));
+  };
+
+  const data = typeof options !== 'function' ? getData(options) : [];
 
   const handlePressItem = (option: Data) => () => {
     setSelectedValues(selectedValues => {
@@ -126,10 +136,13 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             />
           </SearchBarContainer>
         )}
+        {loading && (
+          <FetchIndicator animating={true} color={'grey'} size={'large'} />
+        )}
         <FlatList
           data={data}
           keyExtractor={keyExtractor}
-          ListFooterComponent={<ListFooter />}
+          fadingEdgeLength={200}
           renderItem={({ item }) => (
             <ListItem onPress={handlePressItem(item)}>
               <View pointerEvents={'none'}>
@@ -158,15 +171,18 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             </ListItem>
           )}
         />
-        <FloatingButton
-          variant={'filled'}
-          color={'primary'}
-          onPress={handleConfirm}
-        >
-          <Text fontColor={'light'} fontWeight="bold">
-            {confirmButtonText}
-          </Text>
-        </FloatingButton>
+        <ModalFooter>
+          <Button
+            variant={'filled'}
+            color={'primary'}
+            onPress={handleConfirm}
+            disabled={loading}
+          >
+            <Text fontColor={'light'} fontWeight="bold">
+              {confirmButtonText}
+            </Text>
+          </Button>
+        </ModalFooter>
       </StyledModal>
     </RNModal>
   );

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

@@ -7,10 +7,11 @@ import {
 import { Text } from '../Text';
 import { Modal } from './Modal';
 import { SelectIcon, StyledSelectionText } from './styled';
+import { useEffect, useState } from 'react';
 
 export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
-  options: Data[];
+  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
   ) => never | void;
@@ -25,7 +26,10 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
-  onSearch?: (searchArg: string) => void | never;
+  onSearch?:
+    | ((searchArg: string) => void)
+    | ((searchInput?: string) => Promise<Data[]>)
+    | never;
   searchBarPlaceholder?: string;
   confirmButtonText?: string;
   selectModalTitle?: string;
@@ -65,10 +69,93 @@ function Select<Data, Type extends 'single' | 'multi'>({
   );
 
   const [modalVisible, setModalVisible] = React.useState(false);
+  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
 
-  const handlePressInput = () => {
+  // TODO: Add Skeleton to modal height when loading is true
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (typeof options === 'function') {
+      if (value) {
+        if (type === 'single') setSelectOptions([value as Data]);
+        else setSelectOptions([...(value as Data[])]);
+      } else setSelectOptions([]);
+    }
+  }, [value]);
+
+  const handleLazyFocus = async () => {
+    if (typeof options === 'function') {
+      setLoading(true);
+      try {
+        const result = await options();
+        if (result) {
+          if (
+            value &&
+            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))
+          ) {
+            setSelectOptions([value as Data, ...result]);
+          } else setSelectOptions(result);
+        }
+      } catch (e) {
+        // TODO: Catch error
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleOnSearch = React.useCallback(
+    async (searchInput: string | undefined) => {
+      if (searchInput !== undefined && onSearch) {
+        setLoading(true);
+        try {
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === 'single') {
+              if (
+                value &&
+                !result.find(
+                  v => keyExtractor(value as Data) === keyExtractor(v)
+                )
+              ) {
+                setSelectOptions([value as Data, ...result]);
+              } else setSelectOptions(result);
+            } else {
+              if ((value as Data[]).length > 0) {
+                const selectedValues =
+                  (value as Data[]).filter(
+                    v =>
+                      !result.find(
+                        current =>
+                          keyExtractor(v as Data) === keyExtractor(current)
+                      )
+                  ) || [];
+                setSelectOptions([...selectedValues, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+          // TODO: Catch error
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
+
+  const handlePressInput = async () => {
     setModalVisible(true);
     handleFocus();
+    await handleLazyFocus();
   };
 
   const handleCloseModal = () => {
@@ -80,8 +167,8 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;
       else {
-        return options
-          .reduce(
+        return selectOptions
+          ?.reduce(
             (acc, option, index) =>
               value.find(
                 key => keyExtractor(option, index) == keyExtractor(key, index)
@@ -94,7 +181,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
       }
     } else {
       if (value === undefined) return placeholder;
-      const selectedOption = options.find(
+      const selectedOption = selectOptions?.find(
         (option, index) =>
           keyExtractor(option, index) == keyExtractor(value as Data, index)
       );
@@ -127,7 +214,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
       </HintInputContainer>
       <Modal
         visible={modalVisible}
-        options={options}
+        options={selectOptions || []}
         focused={modalVisible}
         keyExtractor={keyExtractor}
         labelExtractor={labelExtractor}
@@ -140,10 +227,11 @@ function Select<Data, Type extends 'single' | 'multi'>({
         onRequestClose={handleCloseModal}
         animated
         animationType={'slide'}
-        onSearch={onSearch}
+        onSearch={handleOnSearch}
         selectModalTitle={selectModalTitle}
         selectModalTitleComponent={selectModalTitleComponent}
         confirmButtonText={confirmButtonText}
+        loading={loading}
       />
     </>
   );

package/src/components/atoms/Select/styled.ts

@@ -9,7 +9,7 @@ import {
   PressableSurfaceProps,
   StyleProps,
 } from '@tecsinapse/react-core';
-import { ModalProps, View, ViewProps } from 'react-native';
+import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
 import { Input, InputNativeProps } from '../Input';
 import { Text } from '../Text';
 
@@ -56,6 +56,7 @@ export const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
 
 export const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`
   padding: ${({ theme }) => theme.spacing.deca};
+  position: relative;
 `;
 
 export const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`
@@ -71,20 +72,19 @@ export const ListItem = styled(PressableSurface)<
   padding-horizontal: ${({ theme }) => theme.spacing.deca};
 `;
 
-export const ListFooter = styled.View<Partial<StyleProps>>`
+export const ModalFooter = styled(View)<Partial<StyleProps>>`
   width: 100%;
-  min-height: 44px;
-  margin-vertical: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
-  position: absolute;
-  bottom: ${({ theme }) => theme.spacing.deca};
-  left: ${({ theme }) => theme.spacing.deca};
-  right: ${({ theme }) => theme.spacing.deca};
+  height: auto;
+  bottom: 0;
+  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
+  padding: ${({ theme }) => theme.spacing.deca};
 `;
 
 export const SelectIcon = styled(Icon)<Partial<StyleProps>>`
   padding: ${({ theme }) => theme.spacing.centi};
   color: ${({ theme }) => theme.color.secondary.medium};
 `;
+
+export const FetchIndicator = styled(ActivityIndicator)`
+  align-self: center;
+`;

package/src/components/molecules/Calendar/Calendar.tsx

@@ -5,9 +5,17 @@ import {
 } from '@tecsinapse/react-core';
 import React from 'react';
 import { Text } from '../../atoms/Text';
+import { getLocale } from '../../../utils/date';
 
-export const Calendar = <T extends SelectionType>(
-  props: CalendarProps<T>
-): JSX.Element => {
-  return <CalendarCore {...props} TextComponent={Text} />;
+export const Calendar = <T extends SelectionType>({
+  locale,
+  ...rest
+}): JSX.Element => {
+  return (
+    <CalendarCore
+      {...rest}
+      TextComponent={Text}
+      locale={locale ?? getLocale()}
+    />
+  );
 };

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -6,16 +6,19 @@ import {
 import React from 'react';
 import { Text } from '../../atoms/Text';
 import { Calendar } from '../Calendar';
+import { getLocale } from '../../../utils/date';
 
-export const DatePicker = <T extends SelectionType>(
-  props: DatePickerProps<T>
-): JSX.Element => {
+export const DatePicker = <T extends SelectionType>({
+  locale,
+  ...rest
+}): JSX.Element => {
   return (
     <DatePickerCore
-      {...props}
+      {...rest}
       TextComponent={Text}
       CalendarComponent={Calendar}
       animationType="slide"
+      locale={locale ?? getLocale()}
     />
   );
 };

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -5,14 +5,19 @@ import {
 import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
 import { DateTimeSelector } from '../DateTimeSelector';
+import { getLocale } from '../../../utils/date';
 
-export const DateTimePicker: FC<DateTimePickerProps> = props => {
+export const DateTimePicker: FC<DateTimePickerProps> = ({
+  locale,
+  ...rest
+}) => {
   return (
     <DateTimePickerCore
-      {...props}
+      {...rest}
       TextComponent={Text}
       DateTimeSelectorComponent={DateTimeSelector}
       animationType="slide"
+      locale={locale ?? getLocale()}
     />
   );
 };

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -4,7 +4,14 @@ import {
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
+import { getLocale } from '../../../utils/date';
 
-export const DateTimeSelector: FC<DateTimeSelectorProps> = props => {
-  return <DateTimeSelectorCore {...props} TextComponent={Text} />;
+export const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {
+  return (
+    <DateTimeSelectorCore
+      {...rest}
+      TextComponent={Text}
+      locale={locale ?? getLocale()}
+    />
+  );
 };

package/src/utils/date.ts

@@ -0,0 +1,17 @@
+import { NativeModules, Platform } from 'react-native';
+import * as dateFnsLocales from 'date-fns/locale';
+
+export const getLocale = (): Locale => {
+  let locale: string;
+  if (Platform.OS === 'ios') {
+    locale =
+      NativeModules.SettingsManager.settings.AppleLocale ||
+      NativeModules.SettingsManager.settings.AppleLanguages[0];
+  } else {
+    locale = NativeModules.I18nManager.localeIdentifier;
+  }
+
+  const code = locale.replace('_', '');
+
+  return dateFnsLocales[code];
+};