style: remove old meta-form code

pull/49/head
moonrailgun 3 years ago
parent 79bb323dbe
commit bfc9853e74

@ -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"
},

@ -1,2 +0,0 @@
# https://npmmirror.com/
registry = https://registry.npmmirror.com

@ -1,8 +0,0 @@
基于Meta信息快速构建Form表单
## Install
```bash
npm install react meta-form
```

@ -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 <moonrailgun@gmail.com>",
"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"
}
}

@ -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';

@ -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<MetaFormContainerProps>;
let MetaFormContainer: MetaFormContainerComponent;
export function regFormContainer(component: MetaFormContainerComponent) {
MetaFormContainer = component;
}
export function getFormContainer():
| ComponentType<MetaFormContainerProps>
| undefined {
return MetaFormContainer;
}

@ -1,13 +0,0 @@
import React, { useContext } from 'react';
import type { useFormik } from 'formik';
type MetaFormContextType = ReturnType<typeof useFormik>;
export const MetaFormContext = React.createContext<MetaFormContextType | null>(
null
);
MetaFormContext.displayName = 'MetaFormContext';
export function useMetaFormContext(): MetaFormContextType | null {
return useContext(MetaFormContext);
}

@ -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<T = Record<string, unknown>> =
React.ComponentType<MetaFormFieldProps & T>;
const fieldMap = new Map<string, MetaFormFieldComponent>();
/**
*
*/
export function regField(type: string, component: MetaFormFieldComponent<any>) {
fieldMap.set(type, component);
}
/**
*
*/
export function getField(
type: string
): MetaFormFieldComponent<any> | undefined {
return fieldMap.get(type);
}
/**
*
*/
export interface MetaFormFieldMeta extends MetaFormFieldCommon {
type: string; // 字段类型
}
// 内建字段
regField('custom', CustomField);

@ -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<any>; // yup schame object 用于表单校验
layout?: 'horizontal' | 'vertical'; // 布局方式(默认水平)
submitLabel?: string; // 提交按钮的标签名
initialValues?: any;
onSubmit: (values: any) => Promise<void> | void; // 点击提交按钮的回调
onChange?: (values: any) => void; // 数据更新回调
}
/**
*
*
*/
export const MetaForm: React.FC<MetaFormProps> = 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 (
<Component
key={fieldName + i}
{...fieldMeta}
value={value}
error={error}
onChange={(val: any) => setFieldValue(fieldName, val)}
/>
);
}
});
}, [props.fields, values, errors, setFieldValue]);
return (
<MetaFormContext.Provider value={formik}>
<MetaFormContainer
loading={loading}
layout={props.layout ?? 'horizontal'}
submitLabel={props.submitLabel}
handleSubmit={handleSubmit}
canSubmit={_isEmpty(errors)}
>
{fieldsRender}
</MetaFormContainer>
</MetaFormContext.Provider>
);
});
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';

@ -1,17 +0,0 @@
/* eslint-disable id-blacklist */
import { string, object, ref } from 'yup';
import type { ObjectShape } from 'yup/lib/object';
/**
* MetaFormSchema
*
*
*/
export function createMetaFormSchema(fieldMap: ObjectShape) {
return object().shape(fieldMap);
}
export const fieldSchema = {
string,
ref,
};

@ -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",
}
}

@ -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

Loading…
Cancel
Save