style: code

src/components/NiceForm/index.tsx

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