feat(react-login-page): Add index/tagName props to Block.

jaywcjlove · jaywcjlove · commit 61b146ee7fc0 · 2023-04-20T02:47:38.000+08:00
diff --git a/core/README.md b/core/README.md
@@ -17,11 +17,11 @@
 Getting Started
 ===
 
-Some `react` login pages, which can be used quickly after installation.
+Encapsulated login page components based on `react-login-page` basic components are provided for quick installation and use. These components help streamline the process of creating login pages and offer flexible APIs for modifying and packaging these components.
 
 ## React Login Page
 
-Current components are used to quickly develop more `login` pages
+This component is designed to facilitate the development of additional login pages and offers a highly flexible API for modifying packaged login page components.
 
 ### Install
 
@@ -53,8 +53,8 @@ const Demo = () => {
           );
         }}
       </Render>
-      <Login.Block name="logo">⚛️</Login.Block>
-      <Login.Block name="title">Login</Login.Block>
+      <Login.Block name="logo" tagName="span">⚛️</Login.Block>
+      <Login.Block name="title" tagName="span">Login</Login.Block>
       <Login.Input name="username" placeholder="Please input Username" />
       <Login.Input name="password" placeholder="please enter password" />
       <Login.Button name="submit" type="submit">Submit</Login.Button>
@@ -65,49 +65,105 @@ const Demo = () => {
 export default Demo;
 ```
 
+Change the control order by using `index`, Provide more flexible API encapsulation.
+
+```jsx mdx:preview
+import React from 'react';
+import Login, { Render } from 'react-login-page';
+
+const Demo = () => {
+  return (
+    <Login>
+      <Render>
+        {({ blocks }, { fields, buttons }) => {
+          return (
+            <div>
+              <header>{blocks.logo} {blocks.title}</header>
+              {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
+                return <label key={item.name + idx}>{item.children}</label>
+              })}
+              <div>
+                {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
+                  return React.cloneElement(item.children, {
+                    ...item.props,
+                    key: item.name + idx,
+                  })
+                })}
+              </div>
+            </div>
+          );
+        }}
+      </Render>
+      <Login.Block name="logo" tagName="span">⚛️</Login.Block>
+      <Login.Block name="title" tagName="span">Login</Login.Block>
+      <Login.Input name="username" index={1} placeholder="Please input Username" />
+      <Login.Input name="password" index={0} placeholder="please enter password" />
+      <Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
+      <Login.Button name="reset" index={0} type="reset">Reset</Login.Button>
+    </Login>
+  );
+}
+export default Demo;
+```
+
 ### `Login.Block`
 
 ```jsx
 <Login.Block name="title">Login</Login.Block>
 ```
 
 ```jsx
-import { FC, PropsWithChildren } from "react";
-export interface BlockProps extends React.HTMLAttributes<HTMLDivElement> {
+import { PropsWithChildren } from 'react';
+import { BlockTagType } from 'react-login-page';
+export interface BlockProps<Tag extends BlockTagType = 'div'> extends React.ReactElement<Tag> {
   name?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
+  /** custom created element */
+  tagName?: Tag;
 }
-export declare const Block: FC<PropsWithChildren<BlockProps>>;
+export declare const Block: {
+  <Tag extends keyof JSX.IntrinsicElements = "div">(props: PropsWithChildren<Partial<BlockProps<Tag>>>): null;
+  displayName: string;
+};
 ```
 
 ### `Login.Input`
 
 ```jsx
-<Login.Block name="title">Login</Login.Block>
+<Login.Input type="password" placeholder="Password" />
 ```
 
 ```tsx
-import React, { FC, PropsWithChildren } from "react";
+import React, { FC, PropsWithChildren } from 'react';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   name?: string;
   /** Used to define the name of form controls */
   rename?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
 }
 export declare const Input: FC<PropsWithChildren<InputProps>>;
 ```
 
 ### `Login.Button`
 
 ```jsx
-<Login.Block name="title">Login</Login.Block>
+<Login.Button name="submit" type="submit" />
 ```
 
 ```jsx
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from 'react';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   name?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
 }
 export declare const Button: FC<PropsWithChildren<ButtonProps>>;
 ```
@@ -134,10 +190,48 @@ import { Render } from 'react-login-page';
 </Render>
 ```
 
+```tsx
+import { FC } from 'react';
+import { RenderStateProps, InitialState } from 'react-login-page';
+export type RenderChildren = {
+  children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
+} | {
+  children?: React.ReactNode;
+};
+export declare const Render: FC<RenderChildren>;
+```
+
+`index` refers to the use of indexes to control the order of controls
+
+```tsx
+<Render>
+  {({ blocks }, { fields, buttons }) => {
+    return (
+      <div>
+        <header>{blocks.logo} {blocks.title}</header>
+        {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
+          return <label key={item.name + idx}>{item.children}</label>
+        })}
+        <div>
+          {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
+            const child = item.children;
+            if (!isValidElement(child)) return null;
+            return cloneElement(child, {
+              ...child.props,
+              key: item.name + idx,
+            })
+          })}
+        </div>
+      </div>
+    );
+  }}
+</Render>
+```
+
 ### `useStore`
 
 ```jsx mdx:preview
-import React, { Fragment } from 'react';
+import React from 'react';
 import Login, { Render, Provider, Container, useStore } from 'react-login-page';
 
 const RenderLoginPage = () => {
@@ -161,8 +255,8 @@ const Demo = () => {
       <Container>
         <RenderLoginPage />
       </Container>
-      <Login.Block name="logo">⚛️</Login.Block>
-      <Login.Block name="title">Login</Login.Block>
+      <Login.Block name="logo" tagName="span">⚛️</Login.Block>
+      <Login.Block name="title" tagName="span">Login</Login.Block>
       <Login.Input name="username" placeholder="Please input Username" />
       <Login.Input name="password" placeholder="please enter password" />
       <Login.Button name="submit" type="submit">Submit</Login.Button>
@@ -174,6 +268,54 @@ const Demo = () => {
 export default Demo;
 ```
 
+`index` refers to the use of indexes to control the order of controls
+
+```jsx mdx:preview
+import React, { isValidElement, cloneElement } from 'react';
+import Login, { Render, Provider, Container, useStore } from 'react-login-page';
+
+const RenderLoginPage = () => {
+  const { blocks, data  } = useStore();
+  const { fields, buttons } = data;
+  return (
+    <Render>
+      <header>{blocks.logo} {blocks.title}</header>
+      {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
+        return <label key={item.name + idx}>{item.children}</label>
+      })}
+      <div>
+        {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
+            const child = item.children;
+            if (!isValidElement(child)) return null;
+            return cloneElement(child, {
+              ...child.props,
+              key: item.name + idx,
+            })
+        })}
+      </div>
+    </Render>
+  );
+}
+
+const Demo = () => {
+  return (
+    <Provider>
+      <Container>
+        <RenderLoginPage />
+      </Container>
+      <Login.Block name="logo" tagName="span">⚛️</Login.Block>
+      <Login.Block name="title" tagName="span">Login</Login.Block>
+      <Login.Input name="username" index={1} placeholder="Please input Username" />
+      <Login.Input name="password" placeholder="please enter password" />
+      <Login.Button name="submit" index={1} type="submit">Submit</Login.Button>
+      <Login.Button name="reset" type="reset">Reset</Login.Button>
+    </Provider>
+  );
+}
+
+export default Demo;
+```
+
 ## Contributors
 
 As always, thanks to our amazing contributors!
diff --git a/core/src/Block.tsx b/core/src/Block.tsx
@@ -1,25 +1,36 @@
-import { FC, PropsWithChildren, useRef, useEffect } from 'react';
-import { useStore } from './store';
+import { PropsWithChildren, useRef, useEffect, createElement } from 'react';
+import { useStore, BlockTagType } from './store';
 
-export interface BlockProps extends React.HTMLAttributes<HTMLDivElement> {
+// export type BlockTagType = React.ComponentType | keyof JSX.IntrinsicElements;
+
+export interface BlockProps<Tag extends BlockTagType = 'div'> extends React.ReactElement<Tag> {
   name?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
+  /** custom created element */
+  tagName?: Tag;
 }
 
-export const Block: FC<PropsWithChildren<BlockProps>> = (props) => {
-  const ref = useRef<BlockProps>();
+export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<Tag>>>) => {
+  const ref = useRef<Partial<BlockProps<Tag>>>();
   const { blocks = {}, dispatch } = useStore();
   useEffect(() => {
-    const { name, visible = true, ...elmProps } = props;
+    const { name, visible = true, tagName = 'div', ...elmProps } = props;
     if (ref.current !== elmProps && name) {
       ref.current = { ...elmProps };
+
+      const div = (visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null);
       dispatch({
-        blocks: { ...blocks, [name]: visible ? <div {...elmProps} /> : null },
+        // blocks: { ...blocks, [name]: div as unknown as React.ReactElement<Tag> },
+        // @ts-ignore
+        blocks: { ...blocks, [name]: div },
       });
     }
   }, [props, ref]);
 
   return null;
-};
+}
 
 Block.displayName = 'Login.Block';
diff --git a/core/src/Button.tsx b/core/src/Button.tsx
@@ -3,7 +3,10 @@ import { useStore } from './store';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   name?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
 }
 
 export const Button: FC<PropsWithChildren<ButtonProps>> = (props) => {
diff --git a/core/src/Input.tsx b/core/src/Input.tsx
@@ -5,7 +5,10 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   name?: string;
   /** Used to define the name of form controls */
   rename?: string;
+  /** Can be shown or hidden with controls */
   visible?: boolean;
+  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
+  index?: number;
 }
 
 export const Input: FC<PropsWithChildren<InputProps>> = (props) => {
@@ -15,8 +18,12 @@ export const Input: FC<PropsWithChildren<InputProps>> = (props) => {
   useEffect(() => {
     if (ref.current !== props && name) {
       ref.current = { ...props };
+      const oldProps = fields[name]?.props;
+      if (rename) {
+        console.log('oldProps:', oldProps, name, rename, fields[name])
+      }
       dispatch({
-        fields: { ...fields, [name]: visible ? <input {...elmProps} name={rename || name} /> : null },
+        fields: { ...fields, [name]: visible ? <input  {...elmProps} name={rename || name} /> : null },
       });
     }
   }, [props, name, ref]);
diff --git a/core/src/Render.tsx b/core/src/Render.tsx
@@ -1,21 +1,18 @@
 import { FC, Fragment, Children, cloneElement, isValidElement } from 'react';
-import { useStore, RenderStateProps } from './store';
+import { useStore, RenderStateProps , InitialState} from './store';
 
 export type RenderChildren =
-  | { children?: (props: Required<RenderStateProps>) => React.ReactNode }
+  | { children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode }
   | { children?: React.ReactNode };
 
 export const Render: FC<RenderChildren> = ({ children }) => {
-  const { fields = {}, buttons = {}, blocks = {} } = useStore();
-  const childs = typeof children === 'function' ? [children] : Children.toArray(children);
+  const { fields = {}, buttons = {}, blocks = {}, data } = useStore();
+  const childs = typeof children === 'function' ? [] : Children.toArray(children);
   return (
     <Fragment>
-      {typeof children === 'function' && !isValidElement(children) && children({ fields, buttons, blocks })}
-      {childs.map((child, key) => {
+      {typeof children === 'function' && !isValidElement(children) && children({ fields, buttons, blocks }, { ...data })}
+      {typeof children !== 'function' && childs.map((child, key) => {
         if (!isValidElement(child)) return null;
-        if (child.type && typeof child.type === 'string') {
-          return cloneElement(child, { key });
-        }
         return cloneElement(child, {
           ...child.props,
           key,
diff --git a/core/src/store.tsx b/core/src/store.tsx

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,10 @@ import { useStore } from './store';`
`3`	`3`
`4`	`4`	`export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {`
`5`	`5`	`name?: string;`
	`6`	`+ /** Can be shown or hidden with controls */`
`6`	`7`	`visible?: boolean;`
	`8`	`+ /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */`
	`9`	`+ index?: number;`
`7`	`10`	`}`
`8`	`11`
`9`	`12`	`export const Button: FC<PropsWithChildren<ButtonProps>> = (props) => {`