@tecsinapse/react-native-kit 1.22.1-beta.8 → 1.22.2

package/src/components/atoms/InputMask/InputMask.tsx

@@ -0,0 +1,102 @@
+import {
+  FontStackType,
+  FontWeightType,
+  Hint,
+  InputContainerProps,
+  InputMaskElementProps,
+  useInputFocus,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { StyledInputContainer, StyledNativeInputMask } from './styled';
+import { Text } from '../Text';
+
+export interface InputMaskNativeProps
+  extends Omit<InputMaskElementProps, 'style'>,
+    InputContainerProps {
+  inputFontStack?: FontStackType;
+  inputFontWeight?: FontWeightType;
+}
+
+const InputMask: FC<InputMaskNativeProps> = React.forwardRef(
+  (
+    {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      style,
+      borderColor,
+      borderColorGradation,
+      inputFontStack = 'default',
+      inputFontWeight = 'bold',
+      inputContainerStyle,
+      variant = 'default',
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      value,
+      placeholder,
+      ...rest
+    },
+    ref
+  ) => {
+    const _hint = hintComponent || (
+      <Hint TextComponent={Text} text={hint} variant={variant} />
+    );
+    const { focused, handleBlur, handleFocus } = useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+
+    const onlyLabel = label && !placeholder;
+
+    return (
+      <View style={style}>
+        <StyledInputContainer
+          label={String(value) ? label : undefined}
+          labelColor={labelColor}
+          labelColorVariant={labelColorVariant}
+          labelColorTone={labelColorTone}
+          labelTypography={labelTypography}
+          labelStack={labelStack}
+          labelWeight={labelWeight}
+          LabelComponent={Text}
+          leftComponent={leftComponent}
+          rightComponent={rightComponent}
+          borderColor={borderColor}
+          borderColorGradation={borderColorGradation}
+          inputContainerStyle={inputContainerStyle}
+          focused={focused}
+          disabled={disabled}
+          variant={variant}
+        >
+          <StyledNativeInputMask
+            {...rest}
+            placeholder={onlyLabel ? label : placeholder}
+            value={value}
+            ref={ref}
+            fontStack={inputFontStack}
+            fontWeight={inputFontWeight}
+            disabled={disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </StyledInputContainer>
+        {hint && _hint}
+      </View>
+    );
+  }
+);
+
+InputMask.displayName = 'InputMask';
+
+export default InputMask;

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

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

package/src/components/atoms/InputMask/styled.ts

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import {
+  InputContainer,
+  InputMaskElement,
+  RFValueStr,
+  StyleProps,
+} from '@tecsinapse/react-core';
+import { Font, fontStyles } from '../Text/styled';
+import { InputMaskNativeProps } from './InputMask';
+
+export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
+  min-height: ${RFValueStr('50px')};
+`;
+
+const StyledNativeInputMaskBase = styled(InputMaskElement)<
+  Partial<InputMaskNativeProps> & Partial<StyleProps>
+>`
+  height: ${({ theme }) => theme.typography.h5.lineHeight};
+  width: 100%;
+  padding: 0;
+`;
+
+export const StyledNativeInputMask = styled(StyledNativeInputMaskBase)<
+  Font & Partial<InputMaskNativeProps> & Partial<StyleProps>
+>(fontStyles);

package/src/components/atoms/Modal/ModalGroupManager.tsx

@@ -0,0 +1,33 @@
+import React, { FC, ReactElement, useState } from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { createModalLifecycleHandler } from './ModalLifecycleHandler';
+import { IBaseModal } from './ui/types';
+
+export const modalLifecycle = createModalLifecycleHandler();
+
+/**
+ * It's responsable for rendering all the modal components.
+ *
+ * @param param0
+ * @returns
+ */
+export const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {
+  modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));
+  const _render = modalLifecycle.render();
+  const hasModals = _render.length > 0;
+
+  return (
+    <>
+      {children}
+      <RNModal
+        transparent
+        statusBarTranslucent
+        animationType="none"
+        visible={hasModals}
+        {...others}
+      >
+        {_render}
+      </RNModal>
+    </>
+  );
+};

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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +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';

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

@@ -0,0 +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 { 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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,24 @@
+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

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