fix: fix input index issue.

Author: jaywcjlove

core/src/Input.tsx

@@ -13,19 +13,20 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 
 export const Input: FC<PropsWithChildren<InputProps>> = memo((props) => {
   const ref = useRef<InputProps>();
-  const { fields = {}, extra = {}, dispatch } = useStore();
+  const { fields = {}, extra = {}, $$index = {}, dispatch } = useStore();
   const { name, rename, visible = true, children, ...elmProps } = props;
   useEffect(() => {
     if (ref.current !== props && name) {
       ref.current = { ...props };
       dispatch({
+        $$index: { ...$$index, [name]: elmProps.index || 0 },
         extra: {
           ...extra,
           [name]: children || null,
         },
         fields: {
           ...fields,
-          [name]: visible ? <input  {...elmProps} name={rename || name} /> : null
+          [name]: visible ? <input {...elmProps} name={rename || name} /> : null
         },
       });
     }

core/src/store.tsx

@@ -6,11 +6,13 @@ export interface StoreContextValue<Tag extends BlockTagType> extends InitialStat
 
 export type BlockTagType = keyof JSX.IntrinsicElements;
 
+export type Index = Record<string, number>;
 export type Fields = React.ReactElement<HTMLInputElement & { index?: number; }>;
 export type Buttons = React.ReactElement<HTMLButtonElement & { index?: number; }>;
 export type Blocks<Tag extends BlockTagType = 'div'> =  React.ReactElement<Tag & { index?: number; }>;
 
 export interface RenderStateProps<T extends BlockTagType = 'div'> {
+  $$index?: Record<string, number>;
   fields?: Record<string, Fields | null>;
   buttons?: Record<string, Buttons | null>;
   blocks?: Record<string, Blocks<T> | null>;
@@ -33,6 +35,7 @@ export interface InitialState<Tag extends BlockTagType = 'div'> extends RenderSt
 }
 
 export const initialState: InitialState = {
+  index: {},
   fields: {},
   buttons: {},
   blocks: {},
@@ -51,24 +54,25 @@ export function reducer(state: InitialState, action: Partial<RenderStateProps>):
   const result = {
     ...state,
     ...action,
+    $$index: { ...state.$$index, ...action.$$index },
     fields: { ...state.fields, ...action.fields },
     buttons: { ...state.buttons, ...action.buttons },
     blocks: { ...state.blocks, ...action.blocks },
     extra: { ...state.extra, ...action.extra },
   }
-  const fieldsArray = Object.keys(result.fields).map((key, index) => ({
+  const fieldsArray = Object.keys(result.fields).map((key) => ({
     name: key,
-    index: result.fields[key]?.props?.index || 0,
+    index: result.fields[key]?.props?.index || (result.$$index || {})[key] || 0,
     children: result.fields[key],
   }));
-  const buttonsArray = Object.keys(result.buttons).map((key, index) => ({
+  const buttonsArray = Object.keys(result.buttons).map((key) => ({
     name: key,
-    index: result.buttons[key]?.props?.index || 0,
+    index: result.buttons[key]?.props?.index || (result.$$index || {})[key] || 0,
     children: result.buttons[key],
   }));
-  const blocksArray = Object.keys(result.blocks).map((key, index) => ({
+  const blocksArray = Object.keys(result.blocks).map((key) => ({
     name: key,
-    index: result.blocks[key]?.props?.index || 0,
+    index: result.blocks[key]?.props?.index || (result.$$index || {})[key] || 0,
     children: result.blocks[key],
   }));
   return { ...result, data: { ...result.data, fields: fieldsArray, buttons: buttonsArray, blocks: blocksArray }};

pages/base/README.md

@@ -93,7 +93,13 @@ const Demo = () => (
     <Logo>
       <LoginLogo />
     </Logo>
+    <Username rename="subtitle" visible={false} index={0}>
+      欢迎登录页面
+    </Username>
     <Username index={3} />
+    <Username rename="username_rule" visible={false} index={4}>
+      用户名规则
+    </Username>
     <Password index={1} />
     <Input name="phone" index={2} placeholder="Phone number">
       <img src={imgSrc} height={38} />

pages/base/src/control/Password.tsx

@@ -2,6 +2,10 @@ import { FC } from 'react';
 import { Input, InputProps } from 'react-login-page';
 
 export const Password: FC<InputProps> = (props) => {
-  const { name, ...elmProps } = props;
-  return <Input type="password" placeholder="Password" {...elmProps} name="password" rename={name} />;
+  const { name, rename, ...elmProps } = props;
+  const nameProps = { name: 'email', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+  return <Input type="password" placeholder="Password" {...elmProps} {...nameProps} />;
 };

pages/base/src/control/Username.tsx

@@ -2,6 +2,10 @@ import { FC } from 'react';
 import { Input, InputProps } from 'react-login-page';
 
 export const Username: FC<InputProps> = (props) => {
-  const { name, ...elmProps } = props;
-  return <Input placeholder="Username" spellCheck={false} {...elmProps} name="username" rename={name} />;
+  const { name, rename, ...elmProps } = props;
+  const nameProps = { name: 'username', rename: name };
+  if (rename) {
+    nameProps.name = rename;
+  }
+  return <Input placeholder="Username" spellCheck={false} {...elmProps} {...nameProps} />;
 };

pages/base/src/index.tsx

@@ -29,8 +29,9 @@ const RenderLogin = () => {
           {blocks.logo} {blocks.title}
         </header>
         {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
-          if (!item.children) return null;
-          return <label key={item.name + idx}>{item.children}{extra[item.name as keyof typeof extra]}</label>
+          const extraLabel = extra[item.name as keyof typeof extra];
+          if (!item.children && extraLabel) return <div key={idx}>{extraLabel}</div>;
+          return <label key={item.name + idx}>{item.children}{extraLabel}</label>
         })}
         <section>
           {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {