@tecsinapse/react-native-kit 1.16.1 → 1.17.1

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

@@ -42,6 +42,8 @@ const Input: FC<InputNativeProps> = React.forwardRef(
       hint,
       onFocus,
       onBlur,
+      value,
+      placeholder,
       ...rest
     },
     ref
@@ -55,10 +57,12 @@ const Input: FC<InputNativeProps> = React.forwardRef(
       !disabled
     );
 
+    const onlyLabel = label && !placeholder;
+
     return (
       <View style={style}>
         <StyledInputContainer
-          label={label}
+          label={value && label}
           labelColor={labelColor}
           labelColorVariant={labelColorVariant}
           labelColorTone={labelColorTone}
@@ -77,6 +81,8 @@ const Input: FC<InputNativeProps> = React.forwardRef(
         >
           <StyledNativeInput
             {...rest}
+            placeholder={onlyLabel ? label : placeholder}
+            value={value}
             ref={ref}
             fontStack={inputFontStack}
             fontWeight={inputFontWeight}

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}
+          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 @@
+export { default as InputMask, 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/ModalLifecycleHandler.ts

@@ -81,7 +81,7 @@ export class ModalLifecycleHandler {
      */
     public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
         if (this.nodeGroup.has(id)) {
-            const savedNode = this.nodeGroup.get(id)
+            const savedNode = this.findNode(id)
             savedNode && this.nodeGroup.set(id, { ...savedNode, modal })
             return
         }
@@ -105,18 +105,29 @@ export class ModalLifecycleHandler {
      * @param id 
      */
     private remove = (id: string) => {
-        const savedNode = this.nodeGroup.get(id)
+        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.nodeGroup.get(id)
+        const savedNode = this.findNode(id)
         savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })
         this.update()
     }
@@ -127,7 +138,7 @@ export class ModalLifecycleHandler {
      * @param id 
      */
     public close = (id: string) => {
-        const savedNode = this.nodeGroup.get(id)
+        const savedNode = this.findNode(id)
         savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
         this.update()
     }

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

@@ -3,4 +3,5 @@ export * from './ModalLifecycleHandler'
 export * from './ui/BaseModalView'
 export * from './ui/types'
 export * from './useModalManager'
-export * from './useLazyModalManager'
+export * from './useLazyModalManager'
+export * from './useModalRemoteControl'

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

@@ -11,9 +11,9 @@ import { IBaseModal } from "./ui/types"
  * @param modal 
  * @returns
  */
-export const useLazyModalManager = () => {
+export const useLazyModalManager = (modalId?: string) => {
 
-    const [id] = useState(uuidv4())
+    const [id] = useState(modalId ?? uuidv4())
 
     const requestUpdate = useCallback(() => modalLifecycle.update(), [])
 

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

@@ -11,9 +11,9 @@ import { IBaseModal } from "./ui/types"
  * @param modal 
  * @returns
  */
-export const useModalManager = (modal: () => ReactElement<IBaseModal>) => {
+export const useModalManager = (modal: () => ReactElement<IBaseModal>, modalId?: string) => {
 
-    const [id] = useState(uuidv4())
+    const [id] = useState(modalId ?? uuidv4())
     modalLifecycle.sync(id, modal)
 
     const show = useCallback(() => {

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

@@ -0,0 +1,26 @@
+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/Skeleton.tsx

@@ -50,12 +50,18 @@ const Skeleton: React.FC<SkeletonProps> = ({
           childrenLayout={childrenLayout}
         />
       ) : (
+        <></>
+      )}
+
+      {active && animation === 'pulse' ? (
         <Pulse
           active={active}
           width={width}
           height={height}
           childrenLayout={childrenLayout}
         />
+      ) : (
+        <></>
       )}
       <View
         onLayout={event => getChildrenLayout(event)}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tecsinapse/react-core';
 export { Header, HeaderProps } from './components/atoms/Header';
 export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
+export { InputMask, InputMaskNativeProps } from './components/atoms/InputMask';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
 export {
@@ -44,6 +45,7 @@ export {
   ModalLifecycleHandler,
   useLazyModalManager,
   useModalManager,
+  useModalRemoteControl,
   IBaseModal,
 } from './components/atoms/Modal';
 export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';