diff --git a/packages/design/package.json b/packages/design/package.json index 53abc49d..074643f6 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -25,7 +25,6 @@ "@iconify/react": "^3.2.1", "antd": "^4.19.5", "lodash": "^4.17.21", - "meta-form": "^1.0.0", "react-fastify-form": "^1.0.3", "str2int": "^1.1.0" }, diff --git a/packages/meta-form/.gitignore b/packages/meta-form/.gitignore deleted file mode 100644 index a65b4177..00000000 --- a/packages/meta-form/.gitignore +++ /dev/null @@ -1 +0,0 @@ -lib diff --git a/packages/meta-form/.npmrc b/packages/meta-form/.npmrc deleted file mode 100644 index 059ab334..00000000 --- a/packages/meta-form/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -# https://npmmirror.com/ -registry = https://registry.npmmirror.com diff --git a/packages/meta-form/README.md b/packages/meta-form/README.md deleted file mode 100644 index 77056639..00000000 --- a/packages/meta-form/README.md +++ /dev/null @@ -1,8 +0,0 @@ -基于Meta信息快速构建Form表单 - - -## Install - -```bash -npm install react meta-form -``` diff --git a/packages/meta-form/package.json b/packages/meta-form/package.json deleted file mode 100644 index a8377262..00000000 --- a/packages/meta-form/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "meta-form", - "version": "1.0.0", - "description": "基于Meta信息快速构建Form表单", - "main": "lib/index.js", - "scripts": { - "build": "tsc", - "prepare": "tsc", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "files": [ - "lib" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/msgbyte/tailchat.git" - }, - "keywords": [ - "meta", - "form", - "react", - "formik" - ], - "author": "moonrailgun ", - "license": "MIT", - "bugs": { - "url": "https://github.com/msgbyte/tailchat/issues" - }, - "homepage": "https://github.com/msgbyte/tailchat#readme", - "devDependencies": { - "@types/lodash": "^4.14.170", - "@types/react": "^17.0.39", - "react": "17.0.2", - "typescript": "^4.5.2" - }, - "dependencies": { - "formik": "^2.2.9", - "lodash": "^4.17.21", - "yup": "^0.32.9" - }, - "peerDependencies": { - "react": "17.0.2" - } -} diff --git a/packages/meta-form/src/CustomField.tsx b/packages/meta-form/src/CustomField.tsx deleted file mode 100644 index adc7ae97..00000000 --- a/packages/meta-form/src/CustomField.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import type { MetaFormFieldComponent, MetaFormFieldProps } from './field'; - -export const CustomField: MetaFormFieldComponent<{ - render: (props: MetaFormFieldProps) => React.ReactNode; -}> = React.memo((props) => { - const { render, ...others } = props; - - return <>{render(others)}; -}); -CustomField.displayName = 'CustomField'; diff --git a/packages/meta-form/src/container.tsx b/packages/meta-form/src/container.tsx deleted file mode 100644 index 44e8ac9c..00000000 --- a/packages/meta-form/src/container.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { ComponentType } from 'react'; - -/** - * 容器配置 - */ -export interface MetaFormContainerProps { - loading: boolean; - submitLabel?: string; - - layout?: 'horizontal' | 'vertical'; - - /** - * 是否允许提交 - */ - canSubmit?: boolean; - handleSubmit: () => void; -} -export type MetaFormContainerComponent = - React.ComponentType; -let MetaFormContainer: MetaFormContainerComponent; -export function regFormContainer(component: MetaFormContainerComponent) { - MetaFormContainer = component; -} - -export function getFormContainer(): - | ComponentType - | undefined { - return MetaFormContainer; -} diff --git a/packages/meta-form/src/context.tsx b/packages/meta-form/src/context.tsx deleted file mode 100644 index d75fd9d4..00000000 --- a/packages/meta-form/src/context.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useContext } from 'react'; -import type { useFormik } from 'formik'; - -type MetaFormContextType = ReturnType; - -export const MetaFormContext = React.createContext( - null -); -MetaFormContext.displayName = 'MetaFormContext'; - -export function useMetaFormContext(): MetaFormContextType | null { - return useContext(MetaFormContext); -} diff --git a/packages/meta-form/src/field.tsx b/packages/meta-form/src/field.tsx deleted file mode 100644 index 3b1a6f6f..00000000 --- a/packages/meta-form/src/field.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { CustomField } from './CustomField'; - -/** - * 字段通用信息 - */ -interface MetaFormFieldCommon { - name: string; // 字段名 - label?: string; // 字段标签 - defaultValue?: any; // 默认值 - [other: string]: any; // 其他字段 -} - -export interface MetaFormFieldProps extends MetaFormFieldCommon { - value: any; - error: string | undefined; - onChange: (val: any) => void; // 修改数据的回调函数 -} - -/** - * 字段组件 - */ -export type MetaFormFieldComponent> = - React.ComponentType; - -const fieldMap = new Map(); - -/** - * 注册组件 - */ -export function regField(type: string, component: MetaFormFieldComponent) { - fieldMap.set(type, component); -} - -/** - * 获取组件 - */ -export function getField( - type: string -): MetaFormFieldComponent | undefined { - return fieldMap.get(type); -} - -/** - * 字段配置 - */ -export interface MetaFormFieldMeta extends MetaFormFieldCommon { - type: string; // 字段类型 -} - -// 内建字段 -regField('custom', CustomField); diff --git a/packages/meta-form/src/index.tsx b/packages/meta-form/src/index.tsx deleted file mode 100644 index 2b1335f5..00000000 --- a/packages/meta-form/src/index.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React, { useLayoutEffect, useMemo, useState } from 'react'; -import { useFormik } from 'formik'; -import _isNil from 'lodash/isNil'; -import _fromPairs from 'lodash/fromPairs'; -import _isFunction from 'lodash/isFunction'; -import _isEmpty from 'lodash/isEmpty'; -import type { ObjectSchema } from 'yup'; -import { MetaFormContext } from './context'; -import { getField, regField } from './field'; -import type { - MetaFormFieldComponent, - MetaFormFieldProps, - MetaFormFieldMeta, -} from './field'; -import { getFormContainer } from './container'; - -/** - * 表单配置 - */ -export interface MetaFormProps { - fields: MetaFormFieldMeta[]; // 字段详情 - schema?: ObjectSchema; // yup schame object 用于表单校验 - layout?: 'horizontal' | 'vertical'; // 布局方式(默认水平) - submitLabel?: string; // 提交按钮的标签名 - initialValues?: any; - onSubmit: (values: any) => Promise | void; // 点击提交按钮的回调 - onChange?: (values: any) => void; // 数据更新回调 -} - -/** - * 一个快速生成表单的组件 - * 用于通过配置来生成表单，简化通用代码 - */ -export const MetaForm: React.FC = React.memo((props) => { - const initialValues = useMemo(() => { - return { - ..._fromPairs( - props.fields.map((field) => [field.name, field.defaultValue ?? '']) - ), - ...props.initialValues, - }; - }, [props.fields, props.initialValues]); - - const [loading, setLoading] = useState(false); - - useLayoutEffect(() => { - // 加载时提交一次initialValues - typeof props.onChange === 'function' && props.onChange(initialValues); - }, []); - - const formik = useFormik({ - initialValues, - validationSchema: props.schema, - onSubmit: async (values) => { - setLoading(true); - try { - _isFunction(props.onSubmit) && (await props.onSubmit(values)); - } finally { - setLoading(false); - } - }, - validate: (values) => { - _isFunction(props.onChange) && props.onChange(values); - }, - }); - const { handleSubmit, setFieldValue, values, errors } = formik; - - const MetaFormContainer = getFormContainer(); - - if (_isNil(MetaFormContainer)) { - console.warn('MetaFormContainer 没有被注册'); - return null; - } - - const fieldsRender = useMemo(() => { - return props.fields.map((fieldMeta, i) => { - const fieldName = fieldMeta.name; - const value = values[fieldName]; - const error = errors[fieldName]; - const Component = getField(fieldMeta.type); - - if (_isNil(Component)) { - return null; - } else { - return ( - setFieldValue(fieldName, val)} - /> - ); - } - }); - }, [props.fields, values, errors, setFieldValue]); - - return ( - - - {fieldsRender} - - - ); -}); -MetaForm.displayName = 'MetaForm'; -MetaForm.defaultProps = { - submitLabel: '提交', -}; - -export { CustomField } from './CustomField'; -export type { MetaFormFieldComponent, MetaFormFieldProps, MetaFormFieldMeta }; -export { regField }; -export { regFormContainer } from './container'; -export type { MetaFormContainerComponent } from './container'; -export { createMetaFormSchema, fieldSchema } from './schema'; -export { useMetaFormContext } from './context'; diff --git a/packages/meta-form/src/schema.ts b/packages/meta-form/src/schema.ts deleted file mode 100644 index 9cd74dc2..00000000 --- a/packages/meta-form/src/schema.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable id-blacklist */ -import { string, object, ref } from 'yup'; -import type { ObjectShape } from 'yup/lib/object'; - -/** - * 创建MetaForm的Schema - * - * - */ -export function createMetaFormSchema(fieldMap: ObjectShape) { - return object().shape(fieldMap); -} - -export const fieldSchema = { - string, - ref, -}; diff --git a/packages/meta-form/tsconfig.json b/packages/meta-form/tsconfig.json deleted file mode 100644 index 223e78f9..00000000 --- a/packages/meta-form/tsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - "target": "ES5", - "lib": ["DOM", "ES2015"], - "jsx": "react", - "outDir": "./lib", - "declaration": true, - "esModuleInterop": true, - "isolatedModules": true, - "module": "CommonJS", - "moduleResolution": "node", - "strict": true, - "importsNotUsedAsValues": "error", - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06f043a5..ce282d09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,7 +71,6 @@ importers: antd: ^4.19.5 babel-loader: ^8.2.5 lodash: ^4.17.21 - meta-form: ^1.0.0 react: 17.0.2 react-dom: 17.0.2 react-fastify-form: ^1.0.3 @@ -82,7 +81,6 @@ importers: '@iconify/react': 3.2.1 antd: 4.20.4_sfoxds7t5ydpegc3knd667wn6m lodash: 4.17.21 - meta-form: link:../meta-form react-fastify-form: 1.0.3_react@17.0.2 str2int: 1.1.0 devDependencies: @@ -100,25 +98,6 @@ importers: typescript: 4.6.4 webpack: 5.72.1 - packages/meta-form: - specifiers: - '@types/lodash': ^4.14.170 - '@types/react': ^17.0.39 - formik: ^2.2.9 - lodash: ^4.17.21 - react: 17.0.2 - typescript: ^4.5.2 - yup: ^0.32.9 - dependencies: - formik: 2.2.9_react@17.0.2 - lodash: 4.17.21 - yup: 0.32.11 - devDependencies: - '@types/lodash': 4.14.178 - '@types/react': 17.0.44 - react: 17.0.2 - typescript: 4.6.4 - packages/plugin-declaration-generator: specifiers: '@babel/generator': ^7.17.7