@tecsinapse/react-native-kit 1.12.11 → 1.12.12

package/src/components/atoms/Modal/useLazyModalManager.ts

@@ -0,0 +1,43 @@
+import { ReactElement, useCallback, useEffect, useState } from "react"
+import { v4 as uuidv4 } from 'uuid'
+import { modalLifecycle } from "./ModalGroupManager"
+import { IBaseModal } from "./ui/types"
+
+/**
+ * Use this hook to tell the modal lifecycle handler that you want to add
+ * a new modal component. 
+ * 
+ * @param id 
+ * @param modal 
+ * @returns
+ */
+export const useLazyModalManager = () => {
+
+    const [id] = useState(uuidv4())
+
+    const requestUpdate = useCallback(() => modalLifecycle.update(), [])
+
+    const sync = useCallback((modal: ReactElement<IBaseModal>) => {
+        modalLifecycle.sync(id, () => modal)
+        return null
+    }, [id])
+
+    const show = useCallback(() => {
+        modalLifecycle.show(id)
+    }, [id])
+
+    const close = useCallback(() => {
+        modalLifecycle.close(id)
+    }, [id])
+    
+    useEffect(() => {
+        return () => modalLifecycle.destroy(id)
+    }, [])
+
+    return {
+        requestUpdate,
+        sync,
+        show,
+        close
+    }
+}

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

@@ -1,11 +1,7 @@
-import {
-  Calendar as CalendarCore,
-  CalendarProps,
-  SelectionType,
-} from '@tecsinapse/react-core';
+import { Calendar as CalendarCore, SelectionType } from '@tecsinapse/react-core';
 import React from 'react';
-import { Text } from '../../atoms/Text';
 import { getLocale } from '../../../utils/date';
+import { Text } from '../../atoms/Text';
 
 export const Calendar = <T extends SelectionType>({
   locale,

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

@@ -1,24 +1,45 @@
 import {
-  DatePicker as DatePickerCore,
-  DatePickerProps,
-  SelectionType,
+  DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value
 } from '@tecsinapse/react-core';
-import React from 'react';
+import React, { FC } from 'react';
+import { getLocale } from '../../../utils/date';
+import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
 import { Text } from '../../atoms/Text';
 import { Calendar } from '../Calendar';
-import { getLocale } from '../../../utils/date';
+import { CalendarBoxContent } from './styled';
+
+export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {
 
-export const DatePicker = <T extends SelectionType>({
-  locale,
-  ...rest
-}): JSX.Element => {
+  const modal = useLazyModalManager()
+  
+  const handleChange = (value?: Value<T>) => {
+    onChange?.(value)
+    modal.requestUpdate()
+  }
+  
   return (
     <DatePickerCore
       {...rest}
       TextComponent={Text}
       CalendarComponent={Calendar}
-      animationType="slide"
       locale={locale ?? getLocale()}
+      onChange={handleChange}
+      requestShowCalendar={() => modal.show()}
+      requestCloseCalendar={() => modal.close()}
+      renderCalendar={(calendar, blur) => modal.sync(
+        <NativeModal onClose={blur}>
+          {calendar}
+        </NativeModal>
+      )}
     />
   );
+
 };
+
+const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
+  return (
+    <ModalView BoxComponent={CalendarBoxContent} {...others}>
+      {children}
+    </ModalView>
+  )
+}

package/src/components/molecules/DatePicker/styled.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/native";
+import { BoxContent, StyleProps } from "@tecsinapse/react-core";
+
+export const CalendarBoxContent = styled(BoxContent)<Partial<StyleProps>>`
+    background-color: ${({ theme }) => theme.color.secondary.xlight};
+`

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

@@ -1,23 +1,38 @@
 import {
   DateTimePicker as DateTimePickerCore,
-  DateTimePickerProps,
+  DateTimePickerProps
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
+import { getLocale } from '../../../utils/date';
+import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
 import { Text } from '../../atoms/Text';
 import { DateTimeSelector } from '../DateTimeSelector';
-import { getLocale } from '../../../utils/date';
 
-export const DateTimePicker: FC<DateTimePickerProps> = ({
-  locale,
-  ...rest
-}) => {
+export const DateTimePicker: FC<Omit<DateTimePickerProps, 'DateTimeSelectorComponent' | 'renderSelector' | 'requestCloseSelector' | 'requestShowSelector'>> = ({ locale, ...rest }) => {
+
+  const modal = useLazyModalManager()
+
   return (
     <DateTimePickerCore
       {...rest}
       TextComponent={Text}
       DateTimeSelectorComponent={DateTimeSelector}
-      animationType="slide"
       locale={locale ?? getLocale()}
+      requestShowSelector={() => modal.show()}
+      requestCloseSelector={() => modal.close()}
+      renderSelector={(selector, blur) => modal.sync(
+        <NativeModal onClose={blur}>
+          {selector}
+        </NativeModal>
+      )}
     />
   );
 };
+
+const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
+  return (
+    <ModalView {...others}>
+      {children}
+    </ModalView>
+  )
+}

package/src/components/{atoms → molecules}/Select/Modal.tsx

@@ -1,23 +1,16 @@
+import { Checkbox, RadioButton, useDebouncedState } from '@tecsinapse/react-core';
 import * as React from 'react';
-import {
-  FetchIndicator,
-  ModalFooter,
-  ListItem,
-  SearchBarContainer,
-  SelectIcon,
-  StyledModal,
-} from './styled';
-import { FlatList, Modal as RNModal, ModalProps, View } from 'react-native';
+import { FlatList, StatusBar, View } from 'react-native';
+import { Button } from '../../atoms/Button';
+import { Header } from '../../atoms/Header';
+import { Input } from '../../atoms/Input';
+import { IBaseModal, ModalView } from '../../atoms/Modal';
+import { Text } from '../../atoms/Text';
 import { SelectNativeProps } from './Select';
-import { Text } from '../Text';
 import {
-  Button,
-  Checkbox,
-  RadioButton,
-  useDebouncedState,
-} from '@tecsinapse/react-core';
-import { Input } from '../Input';
-import { Header } from '../Header';
+  FetchIndicator, getStyledModal, ListItem, ModalFooter, SearchBarContainer,
+  SelectIcon
+} from './styled';
 
 interface LoadingProps {
   loading?: boolean;
@@ -35,15 +28,18 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   value,
   onSelect,
   onSearch,
-  onRequestClose,
   selectModalTitle,
   selectModalTitleComponent,
   confirmButtonText,
   loading,
-  ...modalProps
-}: SelectNativeProps<Data, Type> & ModalProps & LoadingProps): JSX.Element => {
+  close,
+  closeOnPick,
+  ...others
+}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {
   const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
+  const ModalComponent = React.useMemo(() => getStyledModal(StatusBar.currentHeight), [])
+  const _closeOnPick = closeOnPick && type === 'single'
 
   // Resets the temporary state to the initial state whenever the
   // modal is reopened or the value changes
@@ -87,13 +83,19 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     });
   };
 
+  React.useEffect(() => {
+    if (_closeOnPick && selectedValues[0] && (selectedValues[0] !== value)) {
+      handleConfirm()
+    }
+  }, [selectedValues[0], value, closeOnPick])
+
   const handleConfirm = () => {
     // TS Workaround since TS won't infer the ternary operator's result type correctly
     type OnSelectArg = Parameters<typeof onSelect>[0];
     onSelect(
       (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
     );
-    onRequestClose && onRequestClose();
+    close?.()
   };
 
   const headerContent = selectModalTitleComponent ? (
@@ -105,16 +107,10 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   ) : null;
 
   return (
-    <RNModal
-      transparent
-      hardwareAccelerated
-      {...modalProps}
-      onRequestClose={onRequestClose}
-    >
-      <StyledModal>
+    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>
         <Header
           rightButton={{
-            onPress: onRequestClose,
+            onPress: close,
             icon: {
               name: 'close',
               type: 'material-community',
@@ -124,6 +120,7 @@ const Component = <Data, Type extends 'single' | 'multi'>({
         >
           {headerContent}
         </Header>
+
         {!hideSearchBar && (
           <SearchBarContainer>
             <Input
@@ -136,9 +133,11 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             />
           </SearchBarContainer>
         )}
+
         {loading && (
           <FetchIndicator animating={true} color={'grey'} size={'large'} />
         )}
+
         <FlatList
           data={data}
           keyExtractor={keyExtractor}
@@ -171,7 +170,8 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             </ListItem>
           )}
         />
-        <ModalFooter>
+        
+        { !_closeOnPick && <ModalFooter>
           <Button
             variant={'filled'}
             color={'primary'}
@@ -182,9 +182,8 @@ const Component = <Data, Type extends 'single' | 'multi'>({
               {confirmButtonText}
             </Text>
           </Button>
-        </ModalFooter>
-      </StyledModal>
-    </RNModal>
+        </ModalFooter>}
+    </ModalView>
   );
 };
 

package/src/components/{atoms → molecules}/Select/Select.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
 import {
-  InputContainerProps,
-  useInputFocus,
-  HintInputContainer,
+  HintInputContainer, InputContainerProps,
+  useInputFocus
 } from '@tecsinapse/react-core';
-import { Text } from '../Text';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useLazyModalManager } from '../../atoms/Modal';
+import { Text } from '../../atoms/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'> {
@@ -34,6 +34,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   confirmButtonText?: string;
   selectModalTitle?: string;
   selectModalTitleComponent?: JSX.Element;
+  closeOnPick?: boolean;
 }
 
 function Select<Data, Type extends 'single' | 'multi'>({
@@ -60,6 +61,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
   hintComponent,
   hint,
   style,
+  closeOnPick = type === 'single',
   ...rest
 }: SelectNativeProps<Data, Type>): JSX.Element {
   const { focused, handleBlur, handleFocus } = useInputFocus(
@@ -68,8 +70,8 @@ function Select<Data, Type extends 'single' | 'multi'>({
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
   const [selectOptions, setSelectOptions] = useState<Data[]>([]);
+  const modal = useLazyModalManager()
 
   // TODO: Add Skeleton to modal height when loading is true
   const [loading, setLoading] = useState<boolean>(false);
@@ -145,6 +147,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
         } catch (e) {
           // TODO: Catch error
         } finally {
+          modal.requestUpdate()
           setLoading(false);
         }
       }
@@ -152,17 +155,6 @@ function Select<Data, Type extends 'single' | 'multi'>({
     [options, value, keyExtractor]
   );
 
-  const handlePressInput = async () => {
-    setModalVisible(true);
-    handleFocus();
-    await handleLazyFocus();
-  };
-
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
-  };
-
   const getDisplayValue = () => {
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;
@@ -189,6 +181,34 @@ function Select<Data, Type extends 'single' | 'multi'>({
     }
   };
 
+  modal.sync(
+    <Modal
+      options={selectOptions || []}
+      focused={true}
+      keyExtractor={keyExtractor}
+      labelExtractor={labelExtractor}
+      groupKeyExtractor={groupKeyExtractor}
+      searchBarPlaceholder={searchBarPlaceholder}
+      type={type}
+      onSelect={onSelect}
+      value={value}
+      hideSearchBar={hideSearchBar}
+      onSearch={handleOnSearch}
+      selectModalTitle={selectModalTitle}
+      selectModalTitleComponent={selectModalTitleComponent}
+      confirmButtonText={confirmButtonText}
+      loading={loading}
+      onClose={handleBlur}
+      closeOnPick={closeOnPick}
+    />
+  )
+  
+  const handlePressInput = async () => {
+    modal.show()
+    handleFocus();
+    await handleLazyFocus();
+  };
+
   return (
     <>
       <HintInputContainer
@@ -212,27 +232,6 @@ function Select<Data, Type extends 'single' | 'multi'>({
           {getDisplayValue() || ' '}
         </StyledSelectionText>
       </HintInputContainer>
-      <Modal
-        visible={modalVisible}
-        options={selectOptions || []}
-        focused={modalVisible}
-        keyExtractor={keyExtractor}
-        labelExtractor={labelExtractor}
-        groupKeyExtractor={groupKeyExtractor}
-        searchBarPlaceholder={searchBarPlaceholder}
-        type={type}
-        onSelect={onSelect}
-        value={value}
-        hideSearchBar={hideSearchBar}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={'slide'}
-        onSearch={handleOnSearch}
-        selectModalTitle={selectModalTitle}
-        selectModalTitleComponent={selectModalTitleComponent}
-        confirmButtonText={confirmButtonText}
-        loading={loading}
-      />
     </>
   );
 }

package/src/components/{atoms → molecules}/Select/styled.ts

@@ -11,15 +11,16 @@ import {
   StyleProps
 } from '@tecsinapse/react-core';
 import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
-import { Input, InputNativeProps } from '../Input';
-import { Text } from '../Text';
+import { Input, InputNativeProps } from '../../atoms/Input';
+import { Text } from '../../atoms/Text';
 
-export const StyledModal = styled(View)<ModalProps & Partial<StyleProps>>`
-  position: relative;
-  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
-  height: 100%;
-  width: 100%;
-`;
+export const getStyledModal = (safeTop: number = 0) => {
+  return styled(View)<ModalProps & Partial<StyleProps>>`
+    padding-top: ${`${safeTop}px`};
+    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
+    height: 100%;
+  `
+}
 
 export const StyledSelectionText = styled(Text)(
   (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from '@tecsinapse/react-core';
 export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/atoms/Select';
+export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
@@ -26,4 +26,4 @@ export { DateTimePicker } from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useModalManager, IBaseModal } from './components/atoms/Modal';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';

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

@@ -1,7 +0,0 @@
-import { ModalProps } from 'react-native';
-import { SelectNativeProps } from './Select';
-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.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/atoms/Select/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Select, SelectNativeProps } from './Select';\n"],"file":"index.js"}

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

@@ -1 +0,0 @@
-{"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;;AAWA;;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,YAAY,2BAAW,MAAX,CAAmB;AAC/B,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,yBAAyB,2BAAW,KAAX,CAAkB;AAC3C,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  RFValueStr,\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: ${RFValueStr('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: ${RFValueStr('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"}