feat(Form): Form组件

Author: ChenlingasMx

example/examples/ios/Podfile.lock

@@ -583,4 +583,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 36745b97236db17730b2d687b78fe071003a4a52
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.11.2

example/examples/src/routes.tsx

@@ -1,7 +1,4 @@
-import {
-  StackNavigationProp,
-  StackNavigationOptions,
-} from '@react-navigation/stack';
+import {StackNavigationProp, StackNavigationOptions} from '@react-navigation/stack';
 
 type ModalStackNavigation = StackNavigationProp<{}>;
 
@@ -178,8 +175,7 @@ export const stackPageData: Routes[] = [
     component: require('./routes/Result').default,
     params: {
       title: 'Result 结果页',
-      description:
-        '在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。',
+      description: '在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。',
     },
   },
   {
@@ -339,8 +335,7 @@ export const stackPageData: Routes[] = [
     component: require('./routes/SpeedDial').default,
     params: {
       title: 'SpeedDial 悬浮标记',
-      description:
-        'SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。',
+      description: 'SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示标记的形式显示指定相关动作。',
     },
   },
   {
@@ -498,4 +493,12 @@ export const stackPageData: Routes[] = [
       description: '图片查看',
     },
   },
+  {
+    name: 'Form',
+    component: require('./routes/Form').default,
+    params: {
+      title: 'form',
+      description: 'form',
+    },
+  },
 ];

example/examples/src/routes/Form/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Form} from '@uiw/react-native';
+import {ComProps} from '../../routes';
+
+export interface FormDemoProps extends ComProps {}
+
+const FormDemo = () => {
+  const items = [{type: 'input', label: 'name'}];
+  return (
+    <React.Fragment>
+      <Form formDatas={items} />
+    </React.Fragment>
+  );
+};
+
+export default FormDemo;

packages/core/src/Form/form.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import FormItems from './formItems';
+import { Provider } from './store';
+import { FormProps } from './types';
+
+const Form: FC<FormProps> = (props) => {
+  const { formDatas } = props;
+
+  return (
+    <Provider>
+      <FormItems formDatas={formDatas} />
+    </Provider>
+  );
+};
+
+export default Form;

packages/core/src/Form/formItems.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { FormProps } from './types';
+import { useFormContext } from './store';
+import Input from '../Input';
+
+const FormItems: FC<FormProps> = ({ formDatas = [] }) => {
+  const {
+    state: { formValues },
+    dispatch,
+  } = useFormContext();
+
+  const change = (label: string, value: any) => {
+    dispatch({
+      formValues: { ...formValues, [label]: value },
+    });
+  };
+
+  const _render = () => {
+    return formDatas.map((v: any) => {
+      if (v.type === 'input') {
+        return <Input onChangeText={(value) => change(v.label, value)} />;
+      }
+    });
+  };
+  return <React.Fragment>{_render()}</React.Fragment>;
+};
+
+export default FormItems;

packages/core/src/Form/index.tsx

@@ -0,0 +1,3 @@
+import Form from './form';
+
+export default Form;

packages/core/src/Form/store/index.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, PropsWithChildren, FC, useReducer } from 'react';
+
+export interface InitialState {
+  formValues: any; // 表单数据
+}
+
+export interface CreateContext {
+  state: Partial<InitialState>;
+  dispatch: React.Dispatch<InitialState>;
+}
+
+export const initialState = {
+  formValues: {},
+};
+
+const Context = createContext<CreateContext>({
+  state: initialState,
+  dispatch: () => null,
+});
+
+const reducer = (state: Partial<InitialState>, action: Partial<InitialState>) => {
+  return {
+    ...state,
+    ...action,
+  };
+};
+
+const Provider: FC<PropsWithChildren> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>;
+};
+
+function useFormContext() {
+  const { state, dispatch } = useContext(Context);
+  return { ...state, state, dispatch };
+}
+
+export { Context, reducer, Provider, useFormContext };

packages/core/src/Form/types/index.tsx

@@ -0,0 +1,10 @@
+interface FormProps {
+  formDatas?: FormItemsProps[];
+}
+
+interface FormItemsProps {
+  label: string;
+  type: string;
+}
+
+export type { FormProps, FormItemsProps };

packages/core/src/Form/utils/is.ts

@@ -0,0 +1,21 @@
+const opt = Object.prototype.toString;
+
+export function isArray(obj: any): obj is any[] {
+  return opt.call(obj) === '[object Array]';
+}
+
+export function isObject(obj: any): obj is { [key: string]: any } {
+  return opt.call(obj) === '[object Object]';
+}
+
+export function isString(obj: any): obj is string {
+  return opt.call(obj) === '[object String]';
+}
+
+export function isNumber(obj: any): obj is number {
+  return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
+}
+
+export function isRegExp(obj: any) {
+  return opt.call(obj) === '[object RegExp]';
+}

packages/core/src/index.tsx

@@ -118,6 +118,8 @@ export { default as ActionBar } from './ActionBar';
 export * from './ActionBar';
 export { default as ImageViewer } from './ImageViewer';
 export * from './ImageViewer';
+export { default as Form } from './Form';
+export * from './Form';
 /**
  * Typography
  */