Skip to content

J
jinfa-platform
Commit 8a3968e1 authored by 前端-许佳敏's avatar 前端-许佳敏
Browse files
Options

style: code

parent f475db10
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 141 deletions
src/components/NiceForm/index.tsx
View file @ 8a3968e1
import React from 'react'; import React from 'react';
import SchemaForm, { import SchemaForm, {
IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox, registerValidationRules, IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox, registerValidationRules,
} from '@formily/antd'; } from '@formily/antd';
import { Button, Space, Row, Col, DatePicker } from 'antd'; import { Button, Space, Row, Col, DatePicker } from 'antd';
import CustomUpload from './components/CustomUpload'; import CustomUpload from './components/CustomUpload';
import CustomStatus from './components/CustomStatus'; import CustomStatus from './components/CustomStatus';
import CustomAddArray from './components/CustomAddArray'; import CustomAddArray from './components/CustomAddArray';
import CustomSlider from './components/CustomSlider'; import CustomSlider from './components/CustomSlider';
import Search from './components/Search'; import Search from './components/Search';
import CustomInputSearch from './components/CustomInputSearch' import CustomInputSearch from './components/CustomInputSearch'
import Submit from './components/Submit'; import Submit from './components/Submit';
import Text from './components/Text'; import Text from './components/Text';
import CardCheckBox from './components/CardCheckBox'; import CardCheckBox from './components/CardCheckBox';
import MultTable from './components/MultTable'; import MultTable from './components/MultTable';
import CustomRegistryPhone from './components/CustomRegistryPhone'; import CustomRegistryPhone from './components/CustomRegistryPhone';
import CustomRelevance from './components/CustomRelevance'; import CustomRelevance from './components/CustomRelevance';
import Children from './components/Children'; import Children from './components/Children';
import CircleBox from './components/CircleBox'; import CircleBox from './components/CircleBox';
import Phone from './components/Phone'; import Phone from './components/Phone';
import CustomRadio from './components/CustomRadio'; import CustomRadio from './components/CustomRadio';
import Select from './components/Select'; import Select from './components/Select';
import SearchSelect from './components/SearchSelect'; import SearchSelect from './components/SearchSelect';
import TableTagList from './components/TableTagList'; import TableTagList from './components/TableTagList';
import './index.less' import './index.less'
import { Checkbox, Radio } from '@formily/antd-components'; import { Checkbox, Radio } from '@formily/antd-components';
import DateSelect from './components/DateSelect'; import DateSelect from './components/DateSelect';
import DateRangePickerUnix from './components/DateRangePickerUnix'; import DateRangePickerUnix from './components/DateRangePickerUnix';
import NumberRange from './components/NumberRange'; import NumberRange from './components/NumberRange';
import VirtualChildren from './components/VirtualChildren'; import VirtualChildren from './components/VirtualChildren';
import SmilingFace from './components/SmilingFace'; import SmilingFace from './components/SmilingFace';
import SliderValidate from './components/SliderValidate'; import SliderValidate from './components/SliderValidate';
import { useLinkComponentProps } from './linkages/linkComponentProps'; import { useLinkComponentProps } from './linkages/linkComponentProps';
import Loading from '../Loading'; import Loading from '../Loading';
export interface NiceFormProps extends IAntdSchemaFormProps { export interface NiceFormProps extends IAntdSchemaFormProps {
loading?: boolean loading?: boolean
} }
const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup) const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
const SchemaButton = createVirtualBox('schemaButton', Button) const SchemaButton = createVirtualBox('schemaButton', Button)
const SchemaSubmit = createVirtualBox('schemaSubmit', Submit) const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)
const SchemaReset = createVirtualBox('schemaReset', Reset) const SchemaReset = createVirtualBox('schemaReset', Reset)
export const FlexBox = createVirtualBox('flexBox', props => <Row {...props}/>) export const FlexBox = createVirtualBox('flexBox', props => <Row {...props}/>)
// 自定义校验规则 // 自定义校验规则
registerValidationRules({ registerValidationRules({
limitByte: (value, desc, rules) => { limitByte: (value, desc, rules) => {
const { allowChineseTransform = true, maxByte } = desc; const { allowChineseTransform = true, maxByte } = desc;
let str = value; let str = value;
let message = `不能超过${maxByte}个字符` let message = `不能超过${maxByte}个字符`
if (allowChineseTransform) { if (allowChineseTransform) {
str = str.replace(/[\u4E00-\u9FA5]/g, "AA"); str = str.replace(/[\u4E00-\u9FA5]/g, "AA");
message += `,或者${maxByte / 2}个汉字` message += `,或者${maxByte / 2}个汉字`
} }
return str.length > maxByte ? message : ""; return str.length > maxByte ? message : "";
} }
}); });
// 该组件用于schema中嵌套表单， 不过控制台会出现警告 // 该组件用于schema中嵌套表单， 不过控制台会出现警告
const schemaLayout = createControllerBox("schemaLayout", (_props) => { const schemaLayout = createControllerBox("schemaLayout", (_props) => {
const { schema } = _props; const { schema } = _props;
const componentProps = schema.getExtendsComponentProps(); const componentProps = schema.getExtendsComponentProps();
const { properties } = schema.toJSON(); const { properties } = schema.toJSON();
const nestedSchema = new Schema({ const nestedSchema = new Schema({
type: "object", type: "object",
properties properties
}); });
// const { visible, title, onCancel, footer, ...others } = componentProps; // const { visible, title, onCancel, footer, ...others } = componentProps;
return ( return (
<NiceForm> <NiceForm>
<SchemaField schema={nestedSchema}></SchemaField> <SchemaField schema={nestedSchema}></SchemaField>
</NiceForm> </NiceForm>
); );
}); });
export const componentExport = { export const componentExport = {
CheckboxSingle: Checkbox, CheckboxSingle: Checkbox,
CustomUpload, CustomUpload,
CustomStatus, CustomStatus,
CustomAddArray, CustomAddArray,
CustomSlider, CustomSlider,
CustomRadio, CustomRadio,
Search, Search,
CustomInputSearch, CustomInputSearch,
Submit, Submit,
Text, Text,
CardCheckBox, CardCheckBox,
MultTable, MultTable,
CustomRegistryPhone, CustomRegistryPhone,
CustomRelevance, CustomRelevance,
Children, Children,
CircleBox, CircleBox,
SchemaFormButtonGroup, SchemaFormButtonGroup,
FlexBox, FlexBox,
Phone, Phone,
Select, Select,
SearchSelect, SearchSelect,
DateRangePicker: DatePicker.RangePicker, DateRangePicker: DatePicker.RangePicker,
TableTagList, TableTagList,
DateSelect, DateSelect,
DateRangePickerUnix, DateRangePickerUnix,
NumberRange, NumberRange,
VirtualChildren, VirtualChildren,
SmilingFace, SmilingFace,
SliderValidate, SliderValidate,
RadioGroup: Radio.Group RadioGroup: Radio.Group
} }
const NiceForm: React.FC<NiceFormProps> = props => { const NiceForm: React.FC<NiceFormProps> = props => {
const { children, components, effects, expressionScope, loading = false, ...reset } = props; const { children, components, effects, expressionScope, loading = false, ...reset } = props;
const defineComponents = Object.assign(componentExport, components); const defineComponents = Object.assign(componentExport, components);
return ( return (
<div style={{width: '100%', position: 'relative'}}> <div style={{width: '100%', position: 'relative'}}>
<SchemaForm <SchemaForm
colon={false} colon={false}
components={defineComponents} components={defineComponents}
style={{opacity: loading ? 0 : 1, position: loading ? 'absolute' : 'initial'}} style={{opacity: loading ? 0 : 1, position: loading ? 'absolute' : 'initial'}}
effects={($, ctx) => { effects={($, ctx) => {
// 自定义联动scope收集器 // 自定义联动scope收集器
useLinkComponentProps(expressionScope) useLinkComponentProps(expressionScope)
// 组件联动 // 组件联动
effects && effects($, ctx) effects && effects($, ctx)
}} }}
expressionScope={expressionScope} expressionScope={expressionScope}
{...reset} {...reset}
> >
{children} {children}
</SchemaForm> </SchemaForm>
{ loading && <Loading/> } { loading && <Loading/> }
</div> </div>
); );
}; };
NiceForm.defaultProps = {}; NiceForm.defaultProps = {};
export default NiceForm; export default NiceForm;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment