feat(react-login-page): add Textarea/Select components.

Author: jaywcjlove

core/README.md

@@ -82,7 +82,11 @@ const Demo = () => {
             <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>
+                return (
+                  <div key={item.name + idx}>
+                    <label>{item.children}{item.children?.props?.extra}</label>
+                  </div>
+                );
               })}
               <div>
                 {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
@@ -98,6 +102,15 @@ const Demo = () => {
       </Render>
       <Login.Block name="logo" tagName="span">⚛️</Login.Block>
       <Login.Block name="title" tagName="span">Login</Login.Block>
+      <Login.Textarea name="note"></Login.Textarea>
+      <Login.Select name="select">
+        <option value="w" selected="">Choose an item...</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+        <option value="4">Four</option>
+      </Login.Select>
+      <Login.Input name="checkbox" type="checkbox" index={3} extra={<span> Remember me </span>} />
       <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>
@@ -158,6 +171,59 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 export declare const Input: FC<PropsWithChildren<InputProps>>;
 ```
 
+### `Login.Textarea`
+
+```jsx
+import Login, { Textarea } from 'react-login-page';
+
+<Login.Textarea name="note" />
+<Textarea name="note" />
+```
+
+```ts
+import React, { FC, PropsWithChildren } from 'react';
+export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  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 Textarea: FC<PropsWithChildren<TextareaProps>>;
+```
+
+### `Login.Select`
+
+```jsx
+import Login, { Select } from 'react-login-page';
+
+<Login.Select name="selectname">
+  <option value="1">One</option>
+  <option value="2">Two</option>
+</Login.Select>
+
+<Select name="selectname">
+  <option value="1">One</option>
+  <option value="2">Two</option>
+</Select>
+```
+
+```ts
+import React, { FC, PropsWithChildren } from 'react';
+export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+  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 Select: FC<PropsWithChildren<SelectProps>>;
+```
+
 ### `Login.Button`
 
 ```jsx

core/src/Block.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren, useRef, useEffect, createElement } from 'react';
-import { useStore, BlockTagType } from './store';
+import { useStore, BlockTagType, Blocks } from './store';
+import { FunctionComponent } from 'react';
 
 // export type BlockTagType = React.ComponentType | keyof JSX.IntrinsicElements;
 
@@ -20,12 +21,9 @@ export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren
     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);
+      const div = (visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null)
       dispatch({
-        // blocks: { ...blocks, [name]: div as unknown as React.ReactElement<Tag> },
-        // @ts-ignore
-        blocks: { ...blocks, [name]: div },
+        blocks: { ...blocks, [name]: div as unknown as Blocks<'div'> },
       });
     }
   }, [props, ref]);

core/src/Input.tsx

@@ -18,10 +18,6 @@ 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 },
       });

core/src/Select.tsx

@@ -0,0 +1,30 @@
+import React, { FC, PropsWithChildren, useRef, useEffect } from 'react';
+import { useStore } from './store';
+
+export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+  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 Select: FC<PropsWithChildren<SelectProps>> = (props) => {
+  const ref = useRef<SelectProps>();
+  const { fields = {}, dispatch } = useStore();
+  const { name, rename, visible = true, ...elmProps } = props;
+  useEffect(() => {
+    if (ref.current !== props && name) {
+      ref.current = { ...props };
+      dispatch({
+        fields: { ...fields, [name]: visible ? <select {...elmProps} name={rename || name} /> : null },
+      });
+    }
+  }, [props, name, ref]);
+
+  return null;
+};
+
+Select.displayName = 'Login.Select';

core/src/Textarea.tsx

@@ -0,0 +1,30 @@
+import React, { FC, PropsWithChildren, useRef, useEffect } from 'react';
+import { useStore } from './store';
+
+export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  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 Textarea: FC<PropsWithChildren<TextareaProps>> = (props) => {
+  const ref = useRef<TextareaProps>();
+  const { fields = {}, dispatch } = useStore();
+  const { name, rename, visible = true, ...elmProps } = props;
+  useEffect(() => {
+    if (ref.current !== props && name) {
+      ref.current = { ...props };
+      dispatch({
+        fields: { ...fields, [name]: visible ? <textarea {...elmProps} name={rename || name} /> : null },
+      });
+    }
+  }, [props, name, ref]);
+
+  return null;
+};
+
+Textarea.displayName = 'Login.Textarea';

core/src/index.tsx

@@ -2,11 +2,15 @@ import React from 'react';
 import { Provider } from './store';
 import { Container, ContainerRef } from './Container';
 import { Block } from './Block';
+import { Textarea } from './Textarea';
+import { Select } from './Select';
 import { Input } from './Input';
 import { Button } from './Button';
 
-export * from './Block';
 export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Block';
 export * from './Button';
 export * from './Container';
 export * from './Render';
@@ -26,13 +30,17 @@ type LoginComponent = React.FC<React.PropsWithRef<LoginProps>> & {
   Block: typeof Block;
   Button: typeof Button;
   Input: typeof Input;
+  Textarea: typeof Textarea;
+  Select: typeof Select;
 };
 
 const Login: LoginComponent = React.forwardRef<ContainerRef>(InternalLogin) as unknown as LoginComponent;
 
 Login.Block = Block;
 Login.Button = Button;
 Login.Input = Input;
+Login.Textarea = Textarea;
+Login.Select = Select;
 Login.displayName = 'Login';
 
 export default Login;

core/src/store.tsx

@@ -6,9 +6,9 @@ export interface StoreContextValue<Tag extends BlockTagType> extends InitialStat
 
 export type BlockTagType = keyof JSX.IntrinsicElements;
 
-type Fields = React.ReactElement<HTMLInputElement & { index?: number; }>;
-type Buttons = React.ReactElement<HTMLButtonElement & { index?: number; }>;
-type Blocks<Tag extends BlockTagType = 'div'> =  React.ReactElement<Tag & { index?: 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<Tag extends BlockTagType = 'div'> {
   fields?: Record<string, Fields | null>;