mirror of https://github.com/msgbyte/tailchat
refactor: 解耦fastform -> metaform
moonrailgun
3 years ago
parent
e1d55be242
commit
87d4952fcc
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'antd';
|
||||
import type { MetaFormFieldComponent, MetaFormFieldProps } from 'meta-form';
|
||||
import { CustomField } from 'meta-form';
|
||||
|
||||
export const MetaFormCustom: MetaFormFieldComponent<{
|
||||
render: (props: MetaFormFieldProps) => React.ReactNode;
|
||||
}> = React.memo((props) => {
|
||||
const { label } = props;
|
||||
|
||||
return (
|
||||
<Form.Item label={label}>
|
||||
<CustomField {...props} />
|
||||
</Form.Item>
|
||||
);
|
||||
});
|
||||
MetaFormCustom.displayName = 'MetaFormCustom';
|
||||
@ -1,2 +1,10 @@
|
||||
export { Icon } from './Icon';
|
||||
export { Image } from './Image';
|
||||
|
||||
export { WebMetaForm } from './WebMetaForm';
|
||||
export {
|
||||
createMetaFormSchema,
|
||||
fieldSchema as metaFormFieldSchema,
|
||||
useMetaFormContext,
|
||||
} from 'meta-form';
|
||||
export type { MetaFormFieldMeta } from 'meta-form';
|
||||
|
||||
@ -0,0 +1 @@
|
||||
lib
|
||||
@ -0,0 +1,2 @@
|
||||
# https://npmmirror.com/
|
||||
registry = https://registry.npmmirror.com
|
||||
@ -0,0 +1,8 @@
|
||||
基于Meta信息快速构建Form表单
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install react meta-form
|
||||
```
|
||||
@ -0,0 +1,39 @@
|
||||
{
|
||||
"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": {
|
||||
"react": "17.0.2",
|
||||
"typescript": "^4.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"formik": "^2.2.9",
|
||||
"yup": "^0.32.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "17.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import type { FastFormFieldComponent, FastFormFieldProps } from './field';
|
||||
import type { MetaFormFieldComponent, MetaFormFieldProps } from './field';
|
||||
|
||||
export const CustomField: FastFormFieldComponent<{
|
||||
render: (props: FastFormFieldProps) => React.ReactNode;
|
||||
export const CustomField: MetaFormFieldComponent<{
|
||||
render: (props: MetaFormFieldProps) => React.ReactNode;
|
||||
}> = React.memo((props) => {
|
||||
const { render, ...others } = props;
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
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);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"lib": ["DOM"],
|
||||
"jsx": "react",
|
||||
"outDir": "./lib",
|
||||
"declaration": true,
|
||||
"esModuleInterop": true,
|
||||
"isolatedModules": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"importsNotUsedAsValues": "error",
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,29 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
/**
|
||||
* 容器配置
|
||||
*/
|
||||
export interface FastFormContainerProps {
|
||||
loading: boolean;
|
||||
submitLabel?: string;
|
||||
|
||||
layout?: 'horizontal' | 'vertical';
|
||||
|
||||
/**
|
||||
* 是否允许提交
|
||||
*/
|
||||
canSubmit?: boolean;
|
||||
handleSubmit: () => void;
|
||||
}
|
||||
export type FastFormContainerComponent =
|
||||
React.ComponentType<FastFormContainerProps>;
|
||||
let FastFormContainer: FastFormContainerComponent;
|
||||
export function regFormContainer(component: FastFormContainerComponent) {
|
||||
FastFormContainer = component;
|
||||
}
|
||||
|
||||
export function getFormContainer():
|
||||
| ComponentType<FastFormContainerProps>
|
||||
| undefined {
|
||||
return FastFormContainer;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import type { useFormik } from 'formik';
|
||||
|
||||
type FastFormContextType = ReturnType<typeof useFormik>;
|
||||
|
||||
export const FastFormContext = React.createContext<FastFormContextType | null>(
|
||||
null
|
||||
);
|
||||
FastFormContext.displayName = 'FastFormContext';
|
||||
|
||||
export function useFastFormContext(): FastFormContextType | null {
|
||||
return useContext(FastFormContext);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'antd';
|
||||
import _get from 'lodash/get';
|
||||
import _isNil from 'lodash/isNil';
|
||||
import type {
|
||||
FastFormFieldComponent,
|
||||
FastFormFieldProps,
|
||||
} from 'tailchat-shared';
|
||||
import { CustomField } from 'tailchat-shared';
|
||||
|
||||
export const FastFormCustom: FastFormFieldComponent<{
|
||||
render: (props: FastFormFieldProps) => React.ReactNode;
|
||||
}> = React.memo((props) => {
|
||||
const { label } = props;
|
||||
|
||||
return (
|
||||
<Form.Item label={label}>
|
||||
<CustomField {...props} />
|
||||
</Form.Item>
|
||||
);
|
||||
});
|
||||
FastFormCustom.displayName = 'FastFormCustom';
|
||||
Loading…
Reference in New Issue