@tecsinapse/react-native-kit 1.18.6 → 1.21.0

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

@@ -31,7 +31,6 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   options,
   keyExtractor,
   labelExtractor,
-  groupKeyExtractor,
   hideSearchBar,
   searchBarPlaceholder,
   focused,
@@ -63,39 +62,49 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     );
   }, [value, focused, setSelectedValues]);
 
-  const getData = React.useCallback((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),
-    }));
-  }, [keyExtractor, selectedValues, type])
-
-  const data = React.useMemo(() => typeof options !== 'function' ? getData(options) : [], [options, getData]);
-
-  const handlePressItem = React.useCallback((option: Data) => {
-    setSelectedValues(selectedValues => {
-      if (type === 'multi') {
-        const newArr: Data[] = [];
-        let found = false;
-        for (const value of selectedValues) {
-          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);
-          else found = true;
+  const getData = React.useCallback(
+    (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),
+      }));
+    },
+    [keyExtractor, selectedValues, type]
+  );
+
+  const data = React.useMemo(
+    () => (typeof options !== 'function' ? getData(options) : []),
+    [options, getData]
+  );
+
+  const handlePressItem = React.useCallback(
+    (option: Data) => {
+      setSelectedValues(selectedValues => {
+        if (type === 'multi') {
+          const newArr: Data[] = [];
+          let found = false;
+          for (const value of selectedValues) {
+            if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);
+            else found = true;
+          }
+          if (!found) newArr.push(option);
+          return newArr;
         }
-        if (!found) newArr.push(option);
-        return newArr;
-      }
-      return keyExtractor((selectedValues[0] || {}) as Data) ===
-        keyExtractor(option)
-        ? []
-        : [option];
-    });
-  }, [selectedValues, setSelectedValues, keyExtractor, type])
+        return keyExtractor((selectedValues[0] || {}) as Data) ===
+          keyExtractor(option)
+          ? []
+          : [option];
+      });
+    },
+    [selectedValues, setSelectedValues, keyExtractor, type]
+  );
 
   React.useEffect(() => {
     if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
@@ -109,29 +118,35 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     onSelect(
       (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg
     );
-    close?.()
+    close?.();
   }, [selectedValues]);
 
-  const optionBuilder = React.useCallback(({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
-    <MemoizedOption
-      item={item}
-      type={type}
-      handlePressItem={handlePressItem}
-      labelExtractor={labelExtractor}
-    />
-  ), [])
-
-  const anyChecked = data.filter(item => item._checked).length
-  const dataLengthChanged = data.length
-
-  const memoizedFlatlist = React.useMemo(() => (
-    <FlatList
-      data={data}
-      keyExtractor={keyExtractor}
-      fadingEdgeLength={200}
-      renderItem={optionBuilder}
-    />
-  ), [selectedValues, anyChecked, dataLengthChanged])
+  const optionBuilder = React.useCallback(
+    ({ item }: ListRenderItemInfo<Data & { _checked: boolean }>) => (
+      <MemoizedOption
+        item={item}
+        type={type}
+        handlePressItem={handlePressItem}
+        labelExtractor={labelExtractor}
+      />
+    ),
+    []
+  );
+
+  const anyChecked = data.filter(item => item._checked).length;
+  const dataLengthChanged = data.length;
+
+  const memoizedFlatlist = React.useMemo(
+    () => (
+      <FlatList
+        data={data}
+        keyExtractor={keyExtractor}
+        fadingEdgeLength={200}
+        renderItem={optionBuilder}
+      />
+    ),
+    [selectedValues, anyChecked, dataLengthChanged]
+  );
 
   const titleTextModal = selectModalTitle ? (
     <TextTitleModal
@@ -180,9 +195,10 @@ const Component = <Data, Type extends 'single' | 'multi'>({
         <FetchIndicator animating={true} color={'grey'} size={'large'} />
       )}
 
-        {memoizedFlatlist}
+      {memoizedFlatlist}
 
-        { !_closeOnPick && <ModalFooter>
+      {!_closeOnPick && (
+        <ModalFooter>
           <Button
             variant={'filled'}
             color={'primary'}
@@ -193,21 +209,27 @@ const Component = <Data, Type extends 'single' | 'multi'>({
               {confirmButtonText}
             </Text>
           </Button>
-        </ModalFooter>}
+        </ModalFooter>
+      )}
     </ModalView>
   );
 };
 
 interface IOption<T> {
-  item: T & { _checked: boolean }
-  type: 'single' | 'multi'
-  labelExtractor: (option: T) => string
-  handlePressItem: (option: T) => void
+  item: T & { _checked: boolean };
+  type: 'single' | 'multi';
+  labelExtractor: (option: T) => string;
+  handlePressItem: (option: T) => void;
 }
 
-const MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtractor, item, type }) => {
+const MemoizedOption = <T,>({
+  handlePressItem,
+  labelExtractor,
+  item,
+  type,
+}: IOption<T>): JSX.Element => {
   return React.useMemo(() => {
-    const label = labelExtractor(item)
+    const label = labelExtractor(item);
     return (
       <ListItem onPress={() => handlePressItem(item)}>
         <View pointerEvents={'none'}>
@@ -234,8 +256,8 @@ const MemoizedOption: React.FC<IOption<any>> = ({ handlePressItem, labelExtracto
           )}
         </View>
       </ListItem>
-    )
-  }, [item._checked])
-}
+    );
+  }, [item._checked]);
+};
 
 export const Modal = Component;

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

@@ -165,7 +165,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return _placeholder;
       else {
-        let options =
+        const options =
           selectOptions.length > 0 ? selectOptions : (value as Data[]);
         return options
           ?.reduce(

package/src/index.ts

@@ -1,33 +1,39 @@
 export * from '@tecsinapse/react-core';
-export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/molecules/Select';
-export { Input, InputNativeProps } from './components/atoms/Input';
-export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
-export { TextArea, TextAreaProps } from './components/atoms/TextArea';
-export { Text, TextNativeProps } from './components/atoms/Text';
+export { Avatar } from './components/atoms/Avatar';
+export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export {
+  BottomNavigator,
+  BottomNavigatorProps,
+} from './components/atoms/BottomNavigator';
+export {
+  Button,
+  ButtonNativeProps,
   Error,
   Loading,
   Success,
-  Button,
-  ButtonNativeProps,
 } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
+export { Header, HeaderProps } from './components/atoms/Header';
+export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export {
-  InputPassword,
-  InputPasswordNativeProps,
-} from './components/molecules/InputPassword';
-export {
-  BottomNavigator,
-  BottomNavigatorProps,
-} from './components/atoms/BottomNavigator';
-export { Tag, TagProps } from './components/atoms/Tag';
+  IBaseModal,
+  ModalGroupManager,
+  ModalLifecycleHandler,
+  ModalView,
+  useLazyModalManager,
+  useModalManager,
+  useModalRemoteControl,
+} from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
 export {
   SnappingSlider,
   SnappingSliderProps,
 } from './components/atoms/SnappingSlider';
-export { Badge, BadgeNativeProps } from './components/atoms/Badge';
-export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Tag, TagProps } from './components/atoms/Tag';
+export { Text, TextNativeProps } from './components/atoms/Text';
+export { TextArea, TextAreaProps } from './components/atoms/TextArea';
+export { Calendar } from './components/molecules/Calendar';
 export {
   DatePicker,
   NativeDatePickerProps,
@@ -36,16 +42,19 @@ export {
   DateTimePicker,
   NativeDateTimePickerProps,
 } 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,
-  useLazyModalManager,
-  useModalManager,
-  useModalRemoteControl,
-  IBaseModal,
-} from './components/atoms/Modal';
-export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+  IconTextButton,
+  NativeIconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export {
+  InputPassword,
+  InputPasswordNativeProps,
+} from './components/molecules/InputPassword';
+export {
+  LabeledSwitch,
+  LabeledSwitchNativeProps,
+} from './components/molecules/LabeledSwitch';
+export { Select, SelectNativeProps } from './components/molecules/Select';
+export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
+export { Grid, GridItem } from './components/molecules/Grid';