@tecsinapse/react-native-kit 1.22.1 → 1.22.3

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

@@ -1,167 +0,0 @@
-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>;
-}
-
-/**
- * Manage all modal's lifecycle.
- */
-export class ModalLifecycleHandler {
-  nodeGroup: Map<string, ModalNode>;
-  state:
-    | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]
-    | 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;
-  };
-
-  /**
-   * 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?.();
-            },
-          });
-        });
-
-      const [, updateState] = this.state || [];
-      updateState?.(nodes);
-    });
-  };
-
-  /**
-   * Renders all selected modals.
-   *
-   * @returns
-   */
-  public render = (): ReactElement<IBaseModal>[] => {
-    const [modals] = this.state || [];
-    return modals || [];
-  };
-
-  /**
-   * 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 });
-  };
-
-  /**
-   * Destroy a modal from the lifecycle handler.
-   *
-   * @param id
-   */
-  public destroy = (id: string) => {
-    this.nodeGroup.delete(id);
-    this.update();
-  };
-
-  /**
-   * 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();
-  };
-
-  /**
-   * 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 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
- */
-export const createModalLifecycleHandler = () => {
-  return new ModalLifecycleHandler();
-};

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

@@ -1,7 +0,0 @@
-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,164 +0,0 @@
-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';
-
-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,
-}) => {
-  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;
-
-    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 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 handleBoxLayoutChanges = useCallback(
-    (lce: LayoutChangeEvent) => {
-      const boxHeightEvent = lce.nativeEvent.layout.height;
-      setBoxHeight(boxHeightEvent);
-
-      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(() => {
-    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>
-  );
-};

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

@@ -1,23 +0,0 @@
-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%;
-`;
-
-export const BackDropView = styled(Animated.View)<Partial<StyleProps>>`
-  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')};
-`;

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

@@ -1,14 +0,0 @@
-/**
- * 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;
-}

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

@@ -1,44 +0,0 @@
-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.
- *
- * @returns
- * @param modalId
- */
-export const useLazyModalManager = (modalId?: string) => {
-  const [id] = useState(modalId ?? 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/atoms/Modal/useModalManager.ts

@@ -1,37 +0,0 @@
-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 useModalManager = (
-  modal: () => ReactElement<IBaseModal>,
-  modalId?: string
-) => {
-  const [id] = useState(modalId ?? uuidv4());
-  modalLifecycle.sync(id, modal);
-
-  const show = useCallback(() => {
-    modalLifecycle.show(id);
-  }, [id]);
-
-  const close = useCallback(() => {
-    modalLifecycle.close(id);
-  }, [id]);
-
-  useEffect(() => {
-    return () => modalLifecycle.destroy(id);
-  }, []);
-
-  return {
-    show,
-    close,
-  };
-};

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

@@ -1,24 +0,0 @@
-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
- */
-export const useModalRemoteControl = (modalId: string) => {
-  const show = useCallback(() => {
-    modalLifecycle.show(modalId);
-  }, [modalId]);
-
-  const close = useCallback(() => {
-    modalLifecycle.close(modalId);
-  }, [modalId]);
-
-  return {
-    show,
-    close,
-  };
-};

package/src/components/atoms/Skeleton/Pulse.tsx

@@ -1,33 +0,0 @@
-import { Animated } from 'react-native';
-import React, { useEffect, useRef } from 'react';
-import { pulseAnimation } from './animation';
-import { IAnimationComponent } from './types';
-
-export const Pulse = ({
-  active = true,
-  width,
-  height,
-  childrenLayout,
-}: IAnimationComponent) => {
-  const animatedValue = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    pulseAnimation(active, animatedValue);
-  }, [active]);
-
-  return (
-    <Animated.View
-      style={{
-        width: width ?? childrenLayout.width,
-        height: height ?? childrenLayout.height,
-        backgroundColor: 'rgba(0,0,0,0.05)',
-        position: 'absolute',
-        top: childrenLayout.x ?? 0,
-        left: childrenLayout.y ?? 0,
-        zIndex: 2,
-        overflow: 'hidden',
-        opacity: animatedValue,
-      }}
-    />
-  );
-};

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import { BorderRadiusType } from '@tecsinapse/react-core';
-import { LayoutChangeEvent, View, ViewProps } from 'react-native';
-import { Wrapper } from './styled';
-import { Wave } from './Wave';
-import { Pulse } from './Pulse';
-import { ChildrenLayout } from './types';
-
-export interface SkeletonProps extends ViewProps {
-  width?: number;
-  height?: number;
-  radius?: BorderRadiusType;
-  active?: boolean;
-  animation?: 'wave' | 'pulse';
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-  children,
-  width,
-  height,
-  radius,
-  active = true,
-  animation = 'wave',
-  ...rest
-}) => {
-  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({
-    width: 0,
-    height: 0,
-    y: 0,
-    x: 0,
-  });
-
-  if (!width && !height && !children) {
-    throw new Error(
-      '[Skeleton] You should provide children or specify width and height'
-    );
-  }
-
-  const getChildrenLayout = (event: LayoutChangeEvent) => {
-    setChildrenLayout(event.nativeEvent.layout);
-  };
-
-  return (
-    <Wrapper width={width} height={height} radius={radius} {...rest}>
-      {active && animation === 'wave' ? (
-        <Wave
-          active={active}
-          width={width}
-          height={height}
-          childrenLayout={childrenLayout}
-        />
-      ) : (
-        <></>
-      )}
-
-      {active && animation === 'pulse' ? (
-        <Pulse
-          active={active}
-          width={width}
-          height={height}
-          childrenLayout={childrenLayout}
-        />
-      ) : (
-        <></>
-      )}
-      <View
-        onLayout={event => getChildrenLayout(event)}
-        style={{ opacity: active ? 0 : 1 }}
-        pointerEvents={active ? 'none' : 'auto'}
-      >
-        {children}
-      </View>
-    </Wrapper>
-  );
-};
-
-export default Skeleton;

package/src/components/atoms/Skeleton/Wave.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { waveAnimation } from './animation';
-import { IAnimationComponent } from './types';
-
-const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-
-export const Wave = ({
-  active = true,
-  width,
-  height,
-  childrenLayout,
-}: IAnimationComponent) => {
-  const range = width ?? childrenLayout.width;
-  const animatedValue = useRef(new Animated.Value(0)).current;
-
-  const translateX = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-range, range],
-  });
-
-  useEffect(() => {
-    waveAnimation(active, animatedValue);
-  }, [active]);
-
-  return (
-    <AnimatedLinearGradient
-      colors={[
-        'transparent',
-        'rgba(0,0,0,0.05)',
-        'rgba(0,0,0,0.1)',
-        'transparent',
-      ]}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 1, y: 0 }}
-      style={{
-        width: width ?? childrenLayout.width,
-        height: height ?? childrenLayout.height,
-        position: 'absolute',
-        top: childrenLayout.y ?? 0,
-        left: childrenLayout.x ?? 0,
-        zIndex: 2,
-        overflow: 'hidden',
-        transform: [
-          {
-            translateX: translateX,
-          },
-        ],
-      }}
-    />
-  );
-};

package/src/components/atoms/Skeleton/animation.ts

@@ -1,49 +0,0 @@
-import { Animated, Easing } from 'react-native';
-
-export const waveAnimation = (
-  active: boolean,
-  animatedValue: Animated.Value
-): void => {
-  if (active) {
-    Animated.loop(
-      Animated.timing(animatedValue, {
-        toValue: 1,
-        duration: 1600,
-        easing: Easing.inOut(Easing.linear),
-        useNativeDriver: true,
-      })
-    ).start();
-    return;
-  }
-  Animated.timing(animatedValue, {
-    toValue: 0,
-    useNativeDriver: true,
-  }).start();
-};
-
-export const pulseAnimation = (
-  active: boolean,
-  animatedValue: Animated.Value
-): void => {
-  if (active) {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(animatedValue, {
-          toValue: 1,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-        Animated.timing(animatedValue, {
-          toValue: 0,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-      ])
-    ).start();
-    return;
-  }
-  Animated.timing(animatedValue, {
-    toValue: 0,
-    useNativeDriver: true,
-  }).start();
-};

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

@@ -1,2 +0,0 @@
-export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';