@tecsinapse/react-native-kit 1.22.0 → 1.22.1-beta.2

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

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

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

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

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

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

@@ -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,
-      }}
-    />
-  );
-};