@tecsinapse/react-core 1.21.1-beta.8 → 1.21.2

package/src/components/atoms/Icon/helpers.ts

@@ -0,0 +1,120 @@
+import { lazy } from 'react';
+import {
+  ColorGradationType,
+  ColorType,
+  FontColorType,
+  IconSizeType,
+  IconType,
+  ThemeProp,
+} from '@tecsinapse/react-core';
+import styled from '@emotion/native';
+
+/* eslint-disable */
+const customIcons: any = {};
+
+export const registerCustomIconType = (id: string, customIcon: any) => {
+  customIcons[id] = customIcon;
+};
+
+const getStyledIcon = (Component, size) => styled(Component)`
+  font-size: ${({ theme }) => theme.iconSize[size]};
+  text-align: center;
+`;
+
+export const getIconComponent = (type: IconType, size: IconSizeType): any => {
+  switch (type) {
+    case 'zocial':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Zocial')),
+        size
+      );
+    case 'octicon':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Octicons')),
+        size
+      );
+    case 'material':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
+        size
+      );
+    case 'material-community':
+      return getStyledIcon(
+        lazy(
+          () => import('react-native-vector-icons/dist/MaterialCommunityIcons')
+        ),
+        size
+      );
+    case 'ionicon':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Ionicons')),
+        size
+      );
+    case 'foundation':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Foundation')),
+        size
+      );
+    case 'evilicon':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/EvilIcons')),
+        size
+      );
+    case 'entypo':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Entypo')),
+        size
+      );
+    case 'font-awesome':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome')),
+        size
+      );
+    case 'font-awesome-5':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/FontAwesome5')),
+        size
+      );
+    case 'simple-line-icon':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/SimpleLineIcons')),
+        size
+      );
+    case 'feather':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Feather')),
+        size
+      );
+    case 'antdesign':
+    case 'ant-design':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/AntDesign')),
+        size
+      );
+    case 'fontisto':
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/Fontisto')),
+        size
+      );
+    default:
+      if (Object.prototype.hasOwnProperty.call(customIcons, type)) {
+        return getStyledIcon(customIcons[type], size);
+      }
+      return getStyledIcon(
+        lazy(() => import('react-native-vector-icons/dist/MaterialIcons')),
+        size
+      );
+  }
+};
+/* eslint-enable */
+export const getIconColor = (
+  colorVariant: ColorType | undefined,
+  colorGradation: ColorGradationType | undefined,
+  fontColor: FontColorType,
+  theme: ThemeProp
+): string => {
+  if (colorVariant && colorGradation) {
+    return theme.color[colorVariant][colorGradation];
+  }
+  return theme.font.color[fontColor];
+};

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

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

package/src/components/atoms/Input/Hint.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { ColorType } from '../../../types/defaults';
+import { InputVariantType } from '../Input';
+import { Text, TextProps } from '../Text';
+import { StyledHintContainer, StyledHintIcon } from './styled';
+
+interface HintProps {
+  text?: string;
+  variant: InputVariantType;
+  TextComponent?: FC<TextProps>;
+}
+
+const Hint: FC<HintProps> = ({ variant, text, TextComponent = Text }) => {
+  let color: ColorType;
+  let icon;
+
+  switch (variant) {
+    case 'default':
+      color = 'secondary';
+      break;
+    case 'error':
+      color = 'error';
+      icon = 'close-circle-outline';
+      break;
+    case 'success':
+      color = 'success';
+      icon = 'checkmark-circle-outline';
+      break;
+  }
+
+  return (
+    <StyledHintContainer>
+      {icon && (
+        <StyledHintIcon
+          name={icon}
+          type="ionicon"
+          size="centi"
+          colorVariant={color}
+        />
+      )}
+      <TextComponent typography="label" colorVariant={color}>
+        {text}
+      </TextComponent>
+    </StyledHintContainer>
+  );
+};
+
+export default Hint;

package/src/components/atoms/Input/InputContainer/InputContainer.tsx

@@ -0,0 +1,109 @@
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { InputElementProps } from '..';
+import {
+  ColorGradationType,
+  ColorType,
+  FontColorType,
+  FontStackType,
+  FontWeightType,
+  TypographyVariationType,
+} from '@tecsinapse/react-core';
+import { Text, TextProps } from '../../Text';
+import {
+  StyledBorderKeeper,
+  StyledIconContent,
+  StyledInputContainer,
+  StyledLabelContainer,
+} from '../styled';
+
+export type InputVariantType = 'default' | 'error' | 'success';
+
+export interface InputContainerProps {
+  label?: string;
+  labelColor?: FontColorType;
+  labelColorVariant?: ColorType;
+  labelColorTone?: ColorGradationType;
+  labelTypography?: TypographyVariationType;
+  labelStack?: FontStackType;
+  LabelComponent?: FC<TextProps>;
+  labelWeight?: FontWeightType;
+  leftComponent?: JSX.Element;
+  rightComponent?: JSX.Element;
+  borderColor?: ColorType;
+  borderColorGradation?: ColorGradationType;
+  style?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  focused?: boolean;
+  disabled?: boolean;
+  variant?: InputVariantType;
+  hint?: string;
+  hintComponent?: JSX.Element;
+}
+
+const InputContainer: FC<InputContainerProps & Partial<InputElementProps>> = ({
+  label,
+  labelColor = 'medium',
+  labelColorTone,
+  labelColorVariant,
+  labelTypography = 'label',
+  labelStack = 'default',
+  labelWeight = 'bold',
+  LabelComponent = Text,
+  leftComponent,
+  rightComponent,
+  inputContainerStyle,
+  disabled,
+  focused,
+  variant,
+  children,
+  ...rest
+}): JSX.Element => {
+  let _defaultLabelColor = labelColorVariant;
+  if (variant === 'error') _defaultLabelColor = 'error';
+  if (variant === 'success') _defaultLabelColor = 'success';
+  const _labelColorVariant = disabled ? 'secondary' : _defaultLabelColor;
+  const _labelColorTone = disabled ? 'light' : labelColorTone;
+
+  return (
+    <StyledInputContainer
+      {...rest}
+      style={inputContainerStyle}
+      focused={focused}
+      disabled={disabled}
+    >
+      <StyledBorderKeeper
+        focused={focused}
+        disabled={disabled}
+        borderColor={_defaultLabelColor}
+      />
+
+      {leftComponent && <StyledIconContent>{leftComponent}</StyledIconContent>}
+
+      <StyledLabelContainer
+        leftComponent={leftComponent}
+        rightComponent={rightComponent}
+      >
+        {label && (
+          <LabelComponent
+            fontColor={labelColor}
+            colorTone={_labelColorTone}
+            colorVariant={_labelColorVariant}
+            typography={labelTypography}
+            fontWeight={labelWeight}
+            fontStack={labelStack}
+          >
+            {label}
+          </LabelComponent>
+        )}
+        {children}
+      </StyledLabelContainer>
+
+      {rightComponent && (
+        <StyledIconContent>{rightComponent}</StyledIconContent>
+      )}
+    </StyledInputContainer>
+  );
+};
+
+export default InputContainer;

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -0,0 +1,50 @@
+import { useTheme } from '@emotion/react';
+import { ThemeProp } from '@tecsinapse/react-core';
+import React from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
+import { StyledInputElement } from '../styled';
+
+export interface InputElementProps
+  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
+  style?: StyleProp<TextStyle>;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const InputElement = React.forwardRef<TextInput, InputElementProps>(
+  (
+    {
+      onChange,
+      placeholder,
+      value,
+      disabled = false,
+      placeholderTextColor,
+      ...rest
+    },
+    ref
+  ): JSX.Element => {
+    const theme = useTheme() as ThemeProp;
+    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
+
+    return (
+      <StyledInputElement
+        {...rest}
+        ref={ref}
+        onChangeText={onChange}
+        value={value}
+        placeholder={placeholder}
+        placeholderTextColor={_placeholderColor}
+        disabled={disabled}
+        editable={!disabled}
+      />
+    );
+  }
+);
+
+InputElement.displayName = 'InputElement';
+
+export default InputElement;

package/src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx

@@ -0,0 +1,119 @@
+import { useTheme } from '@emotion/react';
+import { ThemeProp } from '@tecsinapse/react-core';
+import React, { useCallback, useEffect } from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
+import { StyledInputElement } from '../styled';
+import { MaskType, useStringMask } from '../hooks/useStringMask';
+import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
+
+export interface InputMaskElementProps
+  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
+  style?: StyleProp<TextStyle>;
+  value?: string | number;
+  placeholder?: string;
+  disabled?: boolean;
+  onChange?: (value: any) => void;
+  /**
+   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])
+   A MaskType can be a string, RegExp, or Array<RegExp>.
+   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.
+   For example a phone mask can be represented as ['(99) \\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.
+   To use mask for numbers you have to pass a CurrencyOptions object
+   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.
+   **/
+  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(
+  (
+    {
+      onChange,
+      placeholder,
+      value,
+      disabled = false,
+      placeholderTextColor,
+      mask,
+      ...rest
+    },
+    ref
+  ): JSX.Element => {
+    const theme = useTheme() as ThemeProp;
+
+    const _placeholderColor = placeholderTextColor || theme.font.color.dark;
+
+    const getInputHook = (value: string | number) => {
+      if (mask !== undefined) {
+        if (Array.isArray(mask) || typeof mask === 'function') {
+          return useStringMask(mask, value);
+        } else {
+          return useNumberMask(mask, value);
+        }
+      } else {
+        return [undefined, undefined];
+      }
+    };
+
+    const [maskValue, setMaskValue] = getInputHook(value ?? '');
+
+    const _value =
+      maskValue === undefined
+        ? value?.toString()
+        : maskValue.formatted
+        ? maskValue.formatted
+        : '';
+
+    useEffect(() => {
+      if (onChange) {
+        onChange(maskValue?.raw);
+      }
+    }, [maskValue]);
+
+    const onChangeValue = useCallback(
+      (value: string | number) => {
+        if (maskValue !== undefined && setMaskValue !== undefined) {
+          setMaskValue(value);
+        } else onChange && onChange(value);
+      },
+      [value]
+    );
+
+    useEffect(() => {
+      /** Used to reinitialize maskValue when the value is updated in the parent component **/
+      if (
+        maskValue !== undefined &&
+        setMaskValue !== undefined &&
+        value !== undefined &&
+        typeof maskValue === 'object'
+      ) {
+        /** Case there is a mask **/
+        if (
+          maskValue.raw !== undefined &&
+          maskValue.raw.toString() !== value.toString()
+        ) {
+          onChangeValue(value);
+        }
+      } else if (maskValue === undefined && value !== undefined) {
+        onChangeValue(value);
+      }
+    }, [value]);
+
+    return (
+      <StyledInputElement
+        {...rest}
+        ref={ref}
+        onChangeText={onChangeValue}
+        value={_value}
+        placeholder={placeholder}
+        placeholderTextColor={_placeholderColor}
+        disabled={disabled}
+        editable={!disabled}
+      />
+    );
+  }
+);
+
+InputMaskElement.displayName = 'InputMaskElement';
+
+export default InputMaskElement;

package/src/components/atoms/Input/PressableInputContainer/PressableInputContainer.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+import InputContainer, {
+  InputContainerProps,
+} from '../InputContainer/InputContainer';
+import { StyledPressableSurface } from './styled';
+
+export interface PressableInputContainerProps
+  extends Omit<
+    InputContainerProps,
+    'value' | 'onChange' | 'onChangeText' | 'disabled' | 'style'
+  > {
+  onPress?: () => void | never;
+  disabled?: boolean;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+}
+
+const PressableInputContainer: React.FC<PressableInputContainerProps> = ({
+  onPress,
+  disabled,
+  style,
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledPressableSurface onPress={onPress} disabled={disabled} style={style}>
+      <InputContainer disabled={disabled} {...rest}>
+        {children}
+      </InputContainer>
+    </StyledPressableSurface>
+  );
+};
+
+export default PressableInputContainer;

package/src/components/atoms/Input/PressableInputContainer/index.ts

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

package/src/components/atoms/Input/PressableInputContainer/styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/native';
+
+export const StyledPressableSurface = styled.Pressable`
+  width: 100%;
+`;

package/src/components/atoms/Input/hooks/useInputFocus.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+
+export const useInputFocus = (
+  onFocus?: () => void,
+  onBlur?: () => void,
+  focusEnabled = true
+) => {
+  const [focused, setFocused] = useState<boolean>(false);
+
+  const handleFocus = useCallback(() => {
+    if (focusEnabled) {
+      setFocused(true);
+      onFocus && onFocus();
+    }
+  }, [focusEnabled, setFocused, onFocus]);
+
+  const handleBlur = useCallback(() => {
+    if (focusEnabled) {
+      setFocused(false);
+      onBlur && onBlur();
+    }
+  }, [focusEnabled, setFocused, onBlur]);
+
+  return {
+    focused,
+    handleBlur,
+    handleFocus,
+  };
+};

package/src/components/atoms/Input/hooks/useNumberMask.ts

@@ -0,0 +1,99 @@
+import currency from 'currency.js';
+import { useCallback, useState } from 'react';
+import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';
+import { MaskValue } from './useStringMask';
+
+export type CurrencyOptions = currency.Options;
+
+const DEFAULT_OPTIONS: CurrencyOptions = {
+  symbol: 'R$ ',
+  separator: '.',
+  decimal: ',',
+  precision: 2,
+};
+
+const getRegex = (precision: number) =>
+  new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
+
+export const getInternalNumberAndMask = (
+  value: string | number,
+  options?: CurrencyOptions
+): { internalNumber: number; mergedOptions: CurrencyOptions } => {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const { precision = -1 } = mergedOptions;
+
+  let internalNumber;
+
+  if (typeof value === 'number') {
+    if (precision) {
+      let stringValue = String(value);
+      const decimalIndex = stringValue.indexOf('.');
+      const currentPrecision = decimalIndex + precision;
+      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
+        const zeros = stringValue.length + 1 - currentPrecision;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
+      }
+      internalNumber = Number(stringValue);
+    } else {
+      internalNumber = value;
+    }
+  } else {
+    const onlyNumbers = String(extractNumbersFromString(value));
+    const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
+    internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
+  }
+
+  if (internalNumber > Number.MAX_SAFE_INTEGER) {
+    internalNumber = Number.MAX_SAFE_INTEGER;
+  }
+
+  if (internalNumber < Number.MIN_SAFE_INTEGER) {
+    internalNumber = Number.MIN_SAFE_INTEGER;
+  }
+
+  return {
+    internalNumber,
+    mergedOptions,
+  };
+};
+
+/**
+ * TODO:
+ * @param options
+ * @param defaultValue
+ * @returns
+ */
+export const useNumberMask = (
+  options?: CurrencyOptions,
+  defaultValue?: string | number
+): [MaskValue, (value: string | number) => void] => {
+  const applyMask = useCallback(
+    (value: string | number = 0): MaskValue => {
+      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+        value,
+        options
+      );
+
+      return {
+        raw: internalNumber,
+        formatted: currency(internalNumber).format(mergedOptions),
+      };
+    },
+    [options, getRegex]
+  );
+
+  const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));
+
+  const handleChangeValue = useCallback(
+    (formattedValue: string | number) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted,
+      });
+    },
+    [applyMask, setValue]
+  );
+
+  return [value, handleChangeValue];
+};