@tecsinapse/react-core 1.15.1 → 1.16.2

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

@@ -0,0 +1,120 @@
+import { useTheme } from '@emotion/react';
+import { ThemeProp } from '@tecsinapse/react-core';
+import React, { FC, useCallback, useEffect } from 'react';
+import { StyleProp, 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;
+  ref?: React.Ref<any>;
+}
+
+const InputMaskElement: FC<InputMaskElementProps> = React.forwardRef(
+  (
+    {
+      onChange,
+      placeholder,
+      value,
+      disabled = false,
+      placeholderTextColor,
+      mask,
+      ...rest
+    },
+    ref: React.Ref<any>
+  ): 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/hooks/useNumberMask.ts

@@ -1,6 +1,6 @@
 import currency from 'currency.js';
 import { useCallback, useState } from 'react';
-import { extractNumbersFromString } from '../../../../utils';
+import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';
 import { MaskValue } from './useStringMask';
 
 export type CurrencyOptions = currency.Options;

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

@@ -11,6 +11,10 @@ export {
   default as InputElement,
   InputElementProps,
 } from './InputElement/InputElement';
+export {
+  default as InputMaskElement,
+  InputMaskElementProps,
+} from './InputMaskElement/InputMaskElement';
 export {
   PressableInputContainer,
   PressableInputContainerProps,

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

@@ -2,7 +2,7 @@ import styled, { css } from '@emotion/native';
 import { TextInput } from 'react-native';
 import { InputElementProps } from '.';
 import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
+import { RFValueStr } from '../../../utils/ResponsiveFontSize';
 import { Icon } from '../Icon';
 import { InputContainerProps } from './InputContainer/InputContainer';
 

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -40,6 +40,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   ...rest
 }) => {
   const theme = useTheme() as ThemeProp;
+  const animationValue = React.useRef(new Animated.Value(0)).current;
 
   const valueNow =
     typeof _valueNow === 'string'
@@ -53,7 +54,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   const items = [...Array(segments).keys()];
 
   const segmentsRender = items.map(index => {
-    const animationValue = React.useRef(new Animated.Value(0)).current;
+    
 
     const max = segmentWidth * (index + 1);
     const min = segmentWidth * index;

package/src/components/atoms/Text/Text.tsx

@@ -9,6 +9,7 @@ import {
 } from '@tecsinapse/react-core';
 import { StyleProp, TextStyle } from 'react-native';
 import { StyledColoredText } from './styled';
+import { getLabel } from './functions';
 
 export interface TextProps {
   /** Font theme text color */
@@ -25,6 +26,8 @@ export interface TextProps {
   colorTone?: ColorGradationType;
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+  capitalFirst?: boolean;
   style?: StyleProp<TextStyle>;
 }
 
@@ -39,6 +42,8 @@ const Text: FC<TextProps> = ({
   typography = 'base',
   numberOfLines,
   ellipsizeMode,
+  textTransform = 'none',
+  capitalFirst = false,
   ...rest
 }): JSX.Element => {
   return (
@@ -52,8 +57,9 @@ const Text: FC<TextProps> = ({
       typography={typography}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}
+      textTransform={textTransform}
     >
-      {children}
+      {getLabel(children, capitalFirst)}
     </StyledColoredText>
   );
 };

package/src/components/atoms/Text/functions.ts

@@ -0,0 +1,8 @@
+export const getFirstCapitalCharacter = (value: string): string =>
+  value.charAt(0).toUpperCase().concat(value.slice(1));
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const getLabel = (children, capitalFirst: boolean) =>
+  typeof children === 'string' && capitalFirst
+    ? getFirstCapitalCharacter(children)
+    : children;

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

@@ -12,6 +12,7 @@ export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
     theme.typography[typography].lineHeight};
   font-family: ${({ theme, fontStack = 'default' }) =>
     `'${theme.font.stack[fontStack]}'`};
+  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
 `;
 
 const colorStyles = ({

package/src/index.ts

@@ -30,6 +30,8 @@ export {
   InputContainerProps,
   InputElement,
   InputElementProps,
+  InputMaskElement,
+  InputMaskElementProps,
   InputVariantType,
   PressableInputContainer,
   PressableInputContainerProps,

package/src/types/defaults.ts

@@ -125,6 +125,7 @@ export type ThemeProp = {
 };
 
 export interface ThemeProviderProps {
+  children?: React.ReactNode;
   theme: ThemeProp;
 }