@tecsinapse/react-native-kit 1.18.5 → 1.20.0

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

@@ -1,154 +1,167 @@
-import React, { Dispatch, ReactElement } from "react"
-import { IBaseModal } from "./ui/types"
+import React, { Dispatch, ReactElement } from 'react';
+import { IBaseModal } from './ui/types';
 
 /**
  * It Represents a node (usually a modal component) in the modal's lifecycle handler.
  */
 interface ModalNode {
-    id: string
-    visible?: boolean
-    lastVisualization?: Date
-    modal: () => ReactElement<IBaseModal>
+  id: string;
+  visible?: boolean;
+  lastVisualization?: Date;
+  modal: () => ReactElement<IBaseModal>;
 }
 
 /**
  * Manage all modal's lifecycle.
  */
 export class ModalLifecycleHandler {
-    
-    nodeGroup: Map<string, ModalNode>
-    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined
+  nodeGroup: Map<string, ModalNode>;
+  state:
+    | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]
+    | undefined;
 
-    constructor() {
-        this.nodeGroup = new Map()
-        this.state = undefined
-    }
+  constructor() {
+    this.nodeGroup = new Map();
+    this.state = undefined;
+  }
 
-    /**
-     * Holds the ModalGroupManager state.
-     * 
-     * @param state 
-     */
-    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {
-        this.state = state
-    }
+  /**
+   * Holds the ModalGroupManager state.
+   *
+   * @param state
+   */
+  public attach = (
+    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]
+  ) => {
+    this.state = state;
+  };
 
-    /**
-     * Updates all the modal components.
-     */
-    public update = () => {
-        requestAnimationFrame(() => {
-            const nodes = Array.from(this.nodeGroup.values())
-                .filter(node => node.visible || !!node.lastVisualization)
-                .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))
-                .map((node, index, filteredNodes) => {
-                    let modalElement = node.modal()
-                    let { props } = modalElement
-                    return React.cloneElement(modalElement, {
-                        ...props,
-                        key: node.id,
-                        visible: node.visible,
-                        isLastShown: filteredNodes.length - 1 === index,
-                        close: () => this.close(node.id),
-                        onClose: () => {
-                            this.remove(node.id)
-                            props.onClose?.()
-                        }
-                    })
-                })
-                
-            const [, updateState ] = this.state || []
-            updateState?.(nodes)
-        })
-    }
+  /**
+   * Updates all the modal components.
+   */
+  public update = () => {
+    requestAnimationFrame(() => {
+      const nodes = Array.from(this.nodeGroup.values())
+        .filter(node => node.visible || !!node.lastVisualization)
+        .sort(
+          (nodeA, nodeB) =>
+            (nodeA.lastVisualization?.getTime() || 0) -
+            (nodeB.lastVisualization?.getTime() || 0)
+        )
+        .map((node, index, filteredNodes) => {
+          const modalElement = node.modal();
+          const { props } = modalElement;
+          return React.cloneElement(modalElement, {
+            ...props,
+            key: node.id,
+            visible: node.visible,
+            isLastShown: filteredNodes.length - 1 === index,
+            close: () => this.close(node.id),
+            onClose: () => {
+              this.remove(node.id);
+              props.onClose?.();
+            },
+          });
+        });
 
-    /**
-     * Renders all selected modals.
-     * 
-     * @returns 
-     */
-    public render = (): ReactElement<IBaseModal>[] => {
-        const [ modals ] = this.state || []
-        return modals || []
-    }
+      const [, updateState] = this.state || [];
+      updateState?.(nodes);
+    });
+  };
 
-    /**
-     * Tells to the lifecycle handler that a modal component needs to be handled.
-     * 
-     * @param id 
-     * @param modal 
-     * @returns 
-     */
-    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
-        if (this.nodeGroup.has(id)) {
-            const savedNode = this.findNode(id)
-            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })
-            return
-        }
-        this.nodeGroup.set(id, { id, modal })
-    }
+  /**
+   * Renders all selected modals.
+   *
+   * @returns
+   */
+  public render = (): ReactElement<IBaseModal>[] => {
+    const [modals] = this.state || [];
+    return modals || [];
+  };
 
-    /**
-     * Destroy a modal from the lifecycle handler.
-     * 
-     * @param id 
-     */
-    public destroy = (id: string) => {
-        this.nodeGroup.delete(id)
-        this.update()
+  /**
+   * Tells to the lifecycle handler that a modal component needs to be handled.
+   *
+   * @param id
+   * @param modal
+   * @returns
+   */
+  public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
+    if (this.nodeGroup.has(id)) {
+      const savedNode = this.findNode(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode, modal });
+      return;
     }
+    this.nodeGroup.set(id, { id, modal });
+  };
 
-    /**
-     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal 
-     * component is no longer used by the application.
-     * 
-     * @param id 
-     */
-    private remove = (id: string) => {
-        const savedNode = this.findNode(id)
-        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })
-        this.update()
-    }
+  /**
+   * Destroy a modal from the lifecycle handler.
+   *
+   * @param id
+   */
+  public destroy = (id: string) => {
+    this.nodeGroup.delete(id);
+    this.update();
+  };
 
-    /**
-     * Find a modal node by id.
-     * 
-     * @param id 
-     */
-    private findNode = (id: string) => {
-        const node = this.nodeGroup.get(id)
-        !node && console.warn(`No modal was found with the id "${id}"`)
-        return node
-    }
+  /**
+   * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal
+   * component is no longer used by the application.
+   *
+   * @param id
+   */
+  private remove = (id: string) => {
+    const savedNode = this.findNode(id);
+    savedNode &&
+      this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined });
+    this.update();
+  };
 
-    /**
-     * Makes a modal appears.
-     * 
-     * @param id 
-     */
-    public show = (id: string) => {
-        const savedNode = this.findNode(id)
-        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })
-        this.update()
-    }
+  /**
+   * Find a modal node by id.
+   *
+   * @param id
+   */
+  private findNode = (id: string) => {
+    const node = this.nodeGroup.get(id);
+    !node && console.warn(`No modal was found with the id "${id}"`);
+    return node;
+  };
 
-    /**
-     * Makes a modal disappears.
-     * 
-     * @param id 
-     */
-    public close = (id: string) => {
-        const savedNode = this.findNode(id)
-        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
-        this.update()
-    }
+  /**
+   * Makes a modal appears.
+   *
+   * @param id
+   */
+  public show = (id: string) => {
+    const savedNode = this.findNode(id);
+    savedNode &&
+      this.nodeGroup.set(id, {
+        ...savedNode,
+        visible: true,
+        lastVisualization: new Date(),
+      });
+    this.update();
+  };
+
+  /**
+   * Makes a modal disappears.
+   *
+   * @param id
+   */
+  public close = (id: string) => {
+    const savedNode = this.findNode(id);
+    savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });
+    this.update();
+  };
 }
 
 /**
  * Creates a new ModalLifecycleHandlere instance.
- * 
- * @returns 
+ *
+ * @returns
  */
 export const createModalLifecycleHandler = () => {
-    return new ModalLifecycleHandler()
-}
+  return new ModalLifecycleHandler();
+};

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

@@ -1,7 +1,7 @@
-export * from './ModalGroupManager'
-export * from './ModalLifecycleHandler'
-export * from './ui/BaseModalView'
-export * from './ui/types'
-export * from './useModalManager'
-export * from './useLazyModalManager'
-export * from './useModalRemoteControl'
+export * from './ModalGroupManager';
+export * from './ModalLifecycleHandler';
+export * from './ui/BaseModalView';
+export * from './ui/types';
+export * from './useModalManager';
+export * from './useLazyModalManager';
+export * from './useModalRemoteControl';

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')};
+`;