@tecsinapse/react-native-kit 1.18.6 → 1.21.0

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

@@ -6,10 +6,10 @@ import {
   InputContainerProps,
   InputElementProps,
   RFValue,
-  useInputFocus
+  useInputFocus,
 } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, TextInput, View, ViewStyle } from 'react-native';
 import { Text } from '../Text';
 import { StyledNativeInput } from './styled';
 
@@ -20,7 +20,7 @@ export interface InputNativeProps
   inputFontWeight?: FontWeightType;
 }
 
-const Input: FC<InputNativeProps> = React.forwardRef(
+const Input = React.forwardRef<TextInput, InputNativeProps>(
   (
     {
       label,
@@ -33,7 +33,6 @@ const Input: FC<InputNativeProps> = React.forwardRef(
       leftComponent,
       rightComponent,
       disabled,
-      style,
       borderColor,
       borderColorGradation,
       inputFontStack = 'default',
@@ -59,7 +58,10 @@ const Input: FC<InputNativeProps> = React.forwardRef(
       !disabled
     );
 
-    const internalStyle: StyleProp<ViewStyle> = { minHeight: RFValue(50), ...{ inputContainerStyle }}
+    const internalStyle: StyleProp<ViewStyle> = {
+      minHeight: RFValue(50),
+      ...{ inputContainerStyle },
+    };
     const onlyLabel = label && !placeholder;
 
     return (

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

@@ -1,7 +1,5 @@
 import styled from '@emotion/native';
-import {
-  InputElement, StyleProps
-} from '@tecsinapse/react-core';
+import { InputElement, StyleProps } from '@tecsinapse/react-core';
 import { Font, fontStyles } from '../Text/styled';
 import { InputNativeProps } from './Input';
 

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

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

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

@@ -1,154 +1,167 @@
-import React, { Dispatch, ReactElement } from "react"
-import { IBaseModal } from "./ui/types"
+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>
+  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
+  nodeGroup: Map<string, ModalNode>;
+  state:
+    | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]
+    | undefined;
 
-    constructor() {
-        this.nodeGroup = new Map()
-        this.state = 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
-    }
+  /**
+   * 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) => {
-                    let modalElement = node.modal()
-                    let { 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)
-        })
-    }
+  /**
+   * 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?.();
+            },
+          });
+        });
 
-    /**
-     * Renders all selected modals.
-     * 
-     * @returns 
-     */
-    public render = (): ReactElement<IBaseModal>[] => {
-        const [ modals ] = this.state || []
-        return modals || []
-    }
+      const [, updateState] = this.state || [];
+      updateState?.(nodes);
+    });
+  };
 
-    /**
-     * 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 })
-    }
+  /**
+   * Renders all selected modals.
+   *
+   * @returns
+   */
+  public render = (): ReactElement<IBaseModal>[] => {
+    const [modals] = this.state || [];
+    return modals || [];
+  };
 
-    /**
-     * Destroy a modal from the lifecycle handler.
-     * 
-     * @param id 
-     */
-    public destroy = (id: string) => {
-        this.nodeGroup.delete(id)
-        this.update()
+  /**
+   * 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 });
+  };
 
-    /**
-     * 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()
-    }
+  /**
+   * Destroy a modal from the lifecycle handler.
+   *
+   * @param id
+   */
+  public destroy = (id: string) => {
+    this.nodeGroup.delete(id);
+    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
-    }
+  /**
+   * 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();
+  };
 
-    /**
-     * 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()
-    }
+  /**
+   * 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 disappears.
-     * 
-     * @param id 
-     */
-    public close = (id: string) => {
-        const savedNode = this.findNode(id)
-        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
-        this.update()
-    }
+  /**
+   * 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 
+ *
+ * @returns
  */
 export const createModalLifecycleHandler = () => {
-    return new ModalLifecycleHandler()
-}
+  return new ModalLifecycleHandler();
+};

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

@@ -1,7 +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'
+export * from './ModalGroupManager';
+export * from './ModalLifecycleHandler';
+export * from './ui/BaseModalView';
+export * from './ui/types';
+export * from './useModalManager';
+export * from './useLazyModalManager';
+export * from './useModalRemoteControl';