@tecsinapse/react-native-kit 1.18.6 → 1.21.0

package/src/components/atoms/Modal/ui/BaseModalView.tsx

@@ -1,141 +1,164 @@
-import { BoxContent } from "@tecsinapse/react-core";
-import React, { FC, useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Dimensions, Easing, Keyboard, LayoutChangeEvent, Pressable, StatusBar } from "react-native";
+import { BoxContent } from '@tecsinapse/react-core';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Keyboard,
+  LayoutChangeEvent,
+  Pressable,
+  StatusBar,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BackDropView, CloseBar, StyledPressableBackDrop } from "./styled";
-import { IBaseModal } from "./types";
+import { BackDropView, CloseBar, StyledPressableBackDrop } from './styled';
+import { IBaseModal } from './types';
 
-const BACKDROP_ALPHA = .65
-const INTERPOLATION_STEPS = 10
-const INTERPOLATION_DURATION = 195 //ms
-const OPACITY_DURATION = 25 //ms
+const BACKDROP_ALPHA = 0.65;
+const INTERPOLATION_STEPS = 10;
+const INTERPOLATION_DURATION = 195; //ms
+const OPACITY_DURATION = 25; //ms
 
 export const ModalView: FC<IBaseModal> = ({
-    children,
-    visible,
-    BoxComponent = BoxContent,
-    frozen,
-    isLastShown,
-    showCloseBar = true,
-    close,
-    onClose
+  children,
+  visible,
+  BoxComponent = BoxContent,
+  frozen,
+  isLastShown,
+  showCloseBar = true,
+  close,
+  onClose,
 }) => {
-    
-    const { bottom } = useSafeAreaInsets()
-    const [ ready, setReady ] = useState(false)
-    const [ keyboardOpened, setKeyboardOpened ] = useState(0)
-    const [ boxHeight, setBoxHeight ] = useState(0)
-    const backgroundCarrier = useRef(new Animated.Value(0)).current
-    const translationCarrier = useRef(new Animated.Value(0)).current
-    const opacityCarrier = useRef(new Animated.Value(0)).current
-    const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom
+  const { bottom } = useSafeAreaInsets();
+  const [ready, setReady] = useState(false);
+  const [keyboardOpened, setKeyboardOpened] = useState(0);
+  const [boxHeight, setBoxHeight] = useState(0);
+  const backgroundCarrier = useRef(new Animated.Value(0)).current;
+  const translationCarrier = useRef(new Animated.Value(0)).current;
+  const opacityCarrier = useRef(new Animated.Value(0)).current;
+  const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
 
-    const getKeyboardHeight = (keyboard: number) => {
-        if (keyboard === 0) return 0
-        
-        let wHeight = Math.ceil(Dimensions.get('window').height)
-        let sHeight = Math.ceil(Dimensions.get('screen').height)
-        if (wHeight !== sHeight) {
-            return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0))
-        }
-        return keyboard
+  const getKeyboardHeight = (keyboard: number) => {
+    if (keyboard === 0) return 0;
+
+    const wHeight = Math.ceil(Dimensions.get('window').height);
+    const sHeight = Math.ceil(Dimensions.get('screen').height);
+    if (wHeight !== sHeight) {
+      return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));
     }
+    return keyboard;
+  };
+
+  const show = useCallback(() => {
+    Animated.sequence([
+      Animated.timing(backgroundCarrier, {
+        toValue: INTERPOLATION_STEPS,
+        duration: INTERPOLATION_DURATION,
+        easing: Easing.out(Easing.circle),
+        useNativeDriver: false,
+      }),
+      Animated.timing(opacityCarrier, {
+        toValue: 1,
+        duration: OPACITY_DURATION,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translationCarrier, {
+        toValue: 0,
+        duration: INTERPOLATION_DURATION,
+        easing: Easing.out(Easing.circle),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
 
-    const show = useCallback(() => {
-        Animated.sequence([
-            Animated.timing(backgroundCarrier, {
-                toValue: INTERPOLATION_STEPS,
-                duration: INTERPOLATION_DURATION,
-                easing: Easing.out(Easing.circle),
-                useNativeDriver: false
-            }),
-            Animated.timing(opacityCarrier, {
-                toValue: 1,
-                duration: OPACITY_DURATION,
-                useNativeDriver: true
-            }),
-            Animated.timing(translationCarrier, {
-                toValue: 0,
-                duration: INTERPOLATION_DURATION,
-                easing: Easing.out(Easing.circle),
-                useNativeDriver: true
-            })
-        ]).start()
-    }, [])
+  const hide = useCallback(
+    (to: number) => {
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(translationCarrier, {
+            toValue: to,
+            duration: INTERPOLATION_DURATION,
+            easing: Easing.out(Easing.circle),
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacityCarrier, {
+            toValue: 0,
+            duration: INTERPOLATION_DURATION,
+            useNativeDriver: true,
+          }),
+        ]),
+        Animated.timing(backgroundCarrier, {
+          toValue: 0,
+          duration: INTERPOLATION_DURATION,
+          easing: Easing.out(Easing.circle),
+          useNativeDriver: false,
+        }),
+      ]).start(onClose);
+    },
+    [onClose]
+  );
 
-    const hide = useCallback((to: number) => {
-        Animated.sequence([
-            Animated.parallel([
-                Animated.timing(translationCarrier, {
-                    toValue: to,
-                    duration: INTERPOLATION_DURATION,
-                    easing: Easing.out(Easing.circle),
-                    useNativeDriver: true
-                }),
-                Animated.timing(opacityCarrier, {
-                    toValue: 0,
-                    duration: INTERPOLATION_DURATION,
-                    useNativeDriver: true
-                })    
-            ]),
-            Animated.timing(backgroundCarrier, {
-                toValue: 0,
-                duration: INTERPOLATION_DURATION,
-                easing: Easing.out(Easing.circle),
-                useNativeDriver: false
-            }),
-        ]).start(onClose)
-    }, [onClose])
+  const backgroundInterpolation = backgroundCarrier.interpolate({
+    inputRange: [0, INTERPOLATION_STEPS],
+    outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`],
+  });
 
-    const backgroundInterpolation = backgroundCarrier.interpolate({
-        inputRange: [0, INTERPOLATION_STEPS],
-        outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
-    })
+  const handleBoxLayoutChanges = useCallback(
+    (lce: LayoutChangeEvent) => {
+      const boxHeightEvent = lce.nativeEvent.layout.height;
+      setBoxHeight(boxHeightEvent);
 
-    const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
-        let boxHeightEvent = lce.nativeEvent.layout.height
-        setBoxHeight(boxHeightEvent)
-        
-        if (visible && !ready) {
-            translationCarrier.setValue(boxHeightEvent)
-            setReady(true)
-        }
-    }, [show, ready, visible, setReady])
+      if (visible && !ready) {
+        translationCarrier.setValue(boxHeightEvent);
+        setReady(true);
+      }
+    },
+    [show, ready, visible, setReady]
+  );
 
-    useEffect(() => {
-        if (visible && ready) requestAnimationFrame(() => show())
-        if (!visible && !ready) {
-            Keyboard.dismiss()
-            requestAnimationFrame(() => hide(boxHeight))
-        }
-        if (!visible && ready) setReady(false)
-    }, [ready, visible])
+  useEffect(() => {
+    if (visible && ready) requestAnimationFrame(() => show());
+    if (!visible && !ready) {
+      Keyboard.dismiss();
+      requestAnimationFrame(() => hide(boxHeight));
+    }
+    if (!visible && ready) setReady(false);
+  }, [ready, visible]);
 
-    useEffect(() => {
-        const showEvent = Keyboard.addListener('keyboardDidShow', (e) => setKeyboardOpened(e.endCoordinates.height))
-        const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(0))
-        return () => {
-            showEvent.remove()
-            hideEvent.remove()
-        }
-    }, [])
+  useEffect(() => {
+    const showEvent = Keyboard.addListener('keyboardDidShow', e =>
+      setKeyboardOpened(e.endCoordinates.height)
+    );
+    const hideEvent = Keyboard.addListener('keyboardDidHide', () =>
+      setKeyboardOpened(0)
+    );
+    return () => {
+      showEvent.remove();
+      hideEvent.remove();
+    };
+  }, []);
 
-    return (
-        <StyledPressableBackDrop onPress={!frozen ? close : undefined}>
-            <BackDropView style={{ backgroundColor: backgroundInterpolation }}>
-                <Animated.View style={{ 
-                        paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0, 
-                        opacity: opacityCarrier, 
-                        transform: [{ translateY: translationCarrier }]
-                    }}>
-                    <Pressable>
-                        <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant="bottom">
-                            {showCloseBar && <CloseBar/>}
-                            {children}
-                        </BoxComponent>
-                    </Pressable>
-                </Animated.View>
-            </BackDropView>
-        </StyledPressableBackDrop>
-    )
-}
+  return (
+    <StyledPressableBackDrop onPress={!frozen ? close : undefined}>
+      <BackDropView style={{ backgroundColor: backgroundInterpolation }}>
+        <Animated.View
+          style={{
+            paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,
+            opacity: opacityCarrier,
+            transform: [{ translateY: translationCarrier }],
+          }}
+        >
+          <Pressable>
+            <BoxComponent
+              onLayout={handleBoxLayoutChanges}
+              style={{ paddingBottom: offset }}
+              variant="bottom"
+            >
+              {showCloseBar && <CloseBar />}
+              {children}
+            </BoxComponent>
+          </Pressable>
+        </Animated.View>
+      </BackDropView>
+    </StyledPressableBackDrop>
+  );
+};

package/src/components/atoms/Modal/ui/styled.ts

@@ -1,23 +1,23 @@
-import styled from "@emotion/native";
-import { RFValueStr, StyleProps } from "@tecsinapse/react-core";
-import { Animated } from "react-native";
+import styled from '@emotion/native';
+import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
+import { Animated } from 'react-native';
 
 export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
-    flex: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-`
+  flex: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
 
 export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
-    justify-content: flex-end;
-    flex: 1;
-`
+  justify-content: flex-end;
+  flex: 1;
+`;
 
 export const CloseBar = styled.View<Partial<StyleProps>>`
-    background-color: ${({ theme }) => theme.color.secondary.light};
-    border-radius: ${RFValueStr('10px')};
-    margin: ${`${RFValueStr('5px')} auto`};
-    width: ${RFValueStr('42px')};
-    height: ${RFValueStr('5px')};
-`
+  background-color: ${({ theme }) => theme.color.secondary.light};
+  border-radius: ${RFValueStr('10px')};
+  margin: ${`${RFValueStr('5px')} auto`};
+  width: ${RFValueStr('42px')};
+  height: ${RFValueStr('5px')};
+`;

package/src/components/atoms/Modal/ui/types.ts

@@ -1,13 +1,14 @@
-
 /**
  * Defines a modal interface and allows you implement your own modal component.
  */
+import React from 'react';
+
 export interface IBaseModal {
-    visible?: boolean
-    BoxComponent?: React.FC<any>
-    frozen?: boolean
-    isLastShown?: boolean
-    showCloseBar?: boolean
-    close?: () => void
-    onClose?: () => void
+  visible?: boolean;
+  BoxComponent?: React.FC<any>;
+  frozen?: boolean;
+  isLastShown?: boolean;
+  showCloseBar?: boolean;
+  close?: () => void;
+  onClose?: () => void;
 }

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

@@ -1,43 +1,44 @@
-import { ReactElement, useCallback, useEffect, useState } from "react"
-import { v4 as uuidv4 } from 'uuid'
-import { modalLifecycle } from "./ModalGroupManager"
-import { IBaseModal } from "./ui/types"
+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 
+ * a new modal component.
+ *
  * @returns
+ * @param modalId
  */
 export const useLazyModalManager = (modalId?: string) => {
+  const [id] = useState(modalId ?? uuidv4());
 
-    const [id] = useState(modalId ?? uuidv4())
+  const requestUpdate = useCallback(() => modalLifecycle.update(), []);
 
-    const requestUpdate = useCallback(() => modalLifecycle.update(), [])
+  const sync = useCallback(
+    (modal: ReactElement<IBaseModal>) => {
+      modalLifecycle.sync(id, () => modal);
+      return null;
+    },
+    [id]
+  );
 
-    const sync = useCallback((modal: ReactElement<IBaseModal>) => {
-        modalLifecycle.sync(id, () => modal)
-        return null
-    }, [id])
+  const show = useCallback(() => {
+    modalLifecycle.show(id);
+  }, [id]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(id)
-    }, [id])
+  const close = useCallback(() => {
+    modalLifecycle.close(id);
+  }, [id]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(id)
-    }, [id])
-    
-    useEffect(() => {
-        return () => modalLifecycle.destroy(id)
-    }, [])
+  useEffect(() => {
+    return () => modalLifecycle.destroy(id);
+  }, []);
 
-    return {
-        requestUpdate,
-        sync,
-        show,
-        close
-    }
-}
+  return {
+    requestUpdate,
+    sync,
+    show,
+    close,
+  };
+};

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

@@ -1,35 +1,37 @@
-import { ReactElement, useCallback, useEffect, useState } from "react"
-import { v4 as uuidv4 } from 'uuid'
-import { modalLifecycle } from "./ModalGroupManager"
-import { IBaseModal } from "./ui/types"
+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 
+ * a new modal component.
+ *
+ * @param id
+ * @param modal
  * @returns
  */
-export const useModalManager = (modal: () => ReactElement<IBaseModal>, modalId?: string) => {
+export const useModalManager = (
+  modal: () => ReactElement<IBaseModal>,
+  modalId?: string
+) => {
+  const [id] = useState(modalId ?? uuidv4());
+  modalLifecycle.sync(id, modal);
 
-    const [id] = useState(modalId ?? uuidv4())
-    modalLifecycle.sync(id, modal)
+  const show = useCallback(() => {
+    modalLifecycle.show(id);
+  }, [id]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(id)
-    }, [id])
+  const close = useCallback(() => {
+    modalLifecycle.close(id);
+  }, [id]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(id)
-    }, [id])
-    
-    useEffect(() => {
-        return () => modalLifecycle.destroy(id)
-    }, [])
+  useEffect(() => {
+    return () => modalLifecycle.destroy(id);
+  }, []);
 
-    return {
-        show,
-        close
-    }
-}
+  return {
+    show,
+    close,
+  };
+};

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

@@ -1,26 +1,24 @@
-import { useCallback } from "react"
-import { modalLifecycle } from "./ModalGroupManager"
+import { useCallback } from 'react';
+import { modalLifecycle } from './ModalGroupManager';
 
 /**
  * Use it to control a specific modal wherever it's.
  * Just provide an id of a specific instance.
- * 
- * @param modalId 
- * @returns 
+ *
+ * @param modalId
+ * @returns
  */
 export const useModalRemoteControl = (modalId: string) => {
+  const show = useCallback(() => {
+    modalLifecycle.show(modalId);
+  }, [modalId]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(modalId)
-    }, [modalId])
+  const close = useCallback(() => {
+    modalLifecycle.close(modalId);
+  }, [modalId]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(modalId)
-    }, [modalId])
-
-    return {
-        show,
-        close
-    }
-
-}
+  return {
+    show,
+    close,
+  };
+};

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

@@ -1,4 +1,8 @@
-import { Calendar as CalendarCore, CalendarProps, SelectionType } from '@tecsinapse/react-core';
+import {
+  Calendar as CalendarCore,
+  CalendarProps,
+  SelectionType,
+} from '@tecsinapse/react-core';
 import React from 'react';
 import { getLocale } from '../../../utils/date';
 import { Text } from '../../atoms/Text';

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

@@ -1,5 +1,8 @@
 import {
-  DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value
+  DatePicker as DatePickerCore,
+  DatePickerProps,
+  SelectionType,
+  Value,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { getLocale } from '../../../utils/date';
@@ -8,17 +11,26 @@ import { Text } from '../../atoms/Text';
 import { Calendar } from '../Calendar';
 import { CalendarBoxContent } from './styled';
 
-export type NativeDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>
+export type NativeDatePickerProps<T extends SelectionType> = Omit<
+  DatePickerProps<T>,
+  | 'CalendarComponent'
+  | 'renderCalendar'
+  | 'requestCloseCalendar'
+  | 'requestShowCalendar'
+>;
 
-export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest }: NativeDatePickerProps<T>): JSX.Element => {
+export const DatePicker = <T extends SelectionType>({
+  locale,
+  onChange,
+  ...rest
+}: NativeDatePickerProps<T>): JSX.Element => {
+  const modal = useLazyModalManager();
 
-  const modal = useLazyModalManager()
-  
   const handleChange = (value?: Value<T>) => {
-    onChange?.(value)
-    modal.requestUpdate()
-  }
-  
+    onChange?.(value);
+    modal.requestUpdate();
+  };
+
   return (
     <DatePickerCore
       {...rest}
@@ -28,14 +40,11 @@ export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest
       onChange={handleChange}
       requestShowCalendar={() => modal.show()}
       requestCloseCalendar={() => modal.close()}
-      renderCalendar={(calendar, blur) => modal.sync(
-        <NativeModal onClose={blur}>
-          {calendar}
-        </NativeModal>
-      )}
+      renderCalendar={(calendar, blur) =>
+        modal.sync(<NativeModal onClose={blur}>{calendar}</NativeModal>)
+      }
     />
   );
-
 };
 
 const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
@@ -43,5 +52,5 @@ const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
     <ModalView BoxComponent={CalendarBoxContent} {...others}>
       {children}
     </ModalView>
-  )
-}
+  );
+};

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

@@ -1,6 +1,6 @@
-import styled from "@emotion/native";
-import { BoxContent, StyleProps } from "@tecsinapse/react-core";
+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};
-`
+  background-color: ${({ theme }) => theme.color.secondary.xlight};
+`;