kts-components-document-access-point 1.3.25 → 1.3.26

package/src/DocumentsEdit/ui/AddPropertyButton/index.tsx

@@ -1,251 +1,239 @@
-import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import {
-  Button,
-  Drawer,
-  Space,
-  Form,
-  Input,
-  Radio,
-  Switch,
-  FormInstance,
-  Select,
-  Divider
-} from 'kts-components-antd-x4';
-import DocumentsEdit from '../../';
-import * as tools from '../../tools';
-import IProperties from '../../DocumentsEditController/DocumentsEditControllerState/IProperties';
-
-const { Option } = Select;
-const { TextArea } = Input;
-
-export default () => {
-
-  const controller = DocumentsEdit.useDocumentsEditController();
-
-  /** 当前正在处理的属性 */
-  const current = controller.useMemo(s => s.propertyTableState.current, []);
-
-  /** 只读模式 */
-  const readOnly = controller.useMemo(s => s.readOnly, []);
-
-  const [visible, setVisible] = React.useState(false);
-
-  const onOpen = React.useCallback(() => { setVisible(true) }, []);
-
-  const onClose = React.useCallback(() => { setVisible(false) }, []);
-
-  const [form] = Form.useForm();
-
-  /** 点击了提交 */
-  const onSubmit = React.useCallback(async () => {
-    try {
-      const values = await form.validateFields();
-      const name = uuidv4();
-      const properties: IProperties = {
-        $id: `#/definitions/${name}`,
-        $count: 1,
-        $name: name,
-        $createTime: new Date().getTime(),
-        title: values.title,
-        type: values.isArray ? 'array' : tools.getType(values.type),
-        format: values.isArray ? undefined : tools.getFormat(values.type),
-        items: tools.getItems({ ...values, $name: name }),
-        // required: values.required,
-        description: values.description,
-        // rules: values.isArray ? [{
-        //   _index: 0,
-        //   name: '数组容量校验',
-        //   checkType: 'control',
-        //   message: '数组超过最大容量',
-        //   algorithm: 'array-0',
-        //   minItems: values.minItems ? parseInt(values.minItems) : undefined,
-        //   maxItems: values.maxItems ? parseInt(values.maxItems) : undefined,
-        //   exclusiveMinItems: values.exclusiveMinItems,
-        //   exclusiveMaxItems: values.exclusiveMaxItems,
-        // }] : [],
-        rules: values.isArray ? [{
-          _index: 0,
-          name: '数组容量校验(Min)',
-          checkType: 'control',
-          message: `数组长度不得小于${values.exclusiveMinItems ? "等于" : ""}${values.minItems}`,
-          algorithm: 'array-0',
-          minItems: values.minItems ? parseInt(values.minItems) : undefined,
-          exclusiveMinItems: values.exclusiveMinItems,
-        }, {
-          _index: 0,
-          name: '数组容量校验(Max)',
-          checkType: 'control',
-          message: `数组长度不得大于${values.exclusiveMaxItems ? "等于" : ""}${values.maxItems}`,
-          algorithm: 'array-1',
-          maxItems: values.maxItems ? parseInt(values.maxItems) : undefined,
-          exclusiveMaxItems: values.exclusiveMaxItems,
-        }] : undefined,
-      }
-      controller.addProperties({ current, properties, values });
-      onClose();
-    } catch (error) {
-    }
-  }, [current, controller])
-
-  return (
-    <>
-      {readOnly === false && <Button onClick={onOpen} >新增字段</Button>}
-      <Drawer
-        title="新增字段"
-        placement="right"
-        width={500}
-        onClose={onClose}
-        visible={visible}
-        destroyOnClose={true}
-        footer={
-          <Space>
-            <Button onClick={onSubmit} type="primary" >确定</Button>
-            <Button onClick={onClose} >取消</Button>
-          </Space>
-        }
-      >
-        <DrawerBody form={form} />
-      </Drawer>
-    </>
-  );
-};
-
-const DrawerBody = (props: { form: FormInstance<any> }) => {
-
-  const controller = DocumentsEdit.useDocumentsEditController();
-
-  React.useEffect(() => () => { props.form.resetFields() }, []);
-
-  // 是否数组
-  const [isArray, setIsArray] = React.useState(false);
-
-  const definitions = controller.useMemo(s => s.propertyTableState.current?.properties ?? {}, [])
-
-  return (
-    <Form
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      form={props.form}
-      layout="horizontal"
-    >
-      <Form.Item
-        name="$name"
-        label="字段名"
-        rules={[
-          { required: true, message: '请输入字段名' },
-          { pattern: /^([a-z]|[A-Z]|_)\w*$/, message: '只能英文、数字、下划线，并且英文、下划线开头' },
-          { max: 50, message: '只能输入50个字符' },
-          {
-            validator(_, value: string) {
-              if (!value) return Promise.resolve();
-              if (value.length > 20) return Promise.resolve();
-              if (definitions[value]) {
-                return Promise.reject(new Error('字段名已被使用'));
-              } else {
-                return Promise.resolve();
-              }
-            }
-          }
-        ]}
-      >
-        <Input placeholder="请输入字段名" />
-      </Form.Item>
-      <Form.Item
-        name="title"
-        label="显示名称"
-        rules={[
-          { required: true, message: '请输入显示名称' },
-          { max: 20, message: '只能输入20个字符' },
-        ]}
-      >
-        <Input placeholder="请输入显示名称" />
-      </Form.Item>
-      <Form.Item
-        name="isArray"
-        label="是否数组"
-        initialValue={false}
-      >
-        <Radio.Group onChange={e => { setIsArray(e.target.value) }} >
-          <Radio value={false}>单值</Radio>
-          <Radio value={true}>数组</Radio>
-        </Radio.Group>
-      </Form.Item>
-
-      {
-        isArray && <>
-          <Divider />
-          <Form.Item
-            name="minItems"
-            label="最少项"
-            rules={[
-              { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
-              { max: 20, message: '支持不超过20位的正整数' },
-            ]}
-          >
-            <Input placeholder="请输入最少项" />
-          </Form.Item>
-          <Form.Item
-            name="maxItems"
-            label="最多项"
-            rules={[
-              { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
-              { max: 20, message: '支持不超过20位的正整数' },
-            ]}
-          >
-            <Input placeholder="请输入最多项" />
-          </Form.Item>
-          <Form.Item
-            name="exclusiveMinItems"
-            label="排除最少项"
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name="exclusiveMaxItems"
-            label="排除最多项"
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Divider />
-        </>
-      }
-
-      <Form.Item
-        name="required"
-        label="是否必填"
-        valuePropName="checked"
-        initialValue={true}
-      >
-        <Switch />
-      </Form.Item>
-      <Form.Item
-        name="type"
-        label="类型"
-        initialValue="string"
-      >
-        <Select>
-          <Option key="00" value="string">{tools.getTypeName('string')}</Option>
-          <Option key="01" value="string|date">{tools.getTypeName('string|date')}</Option>
-          <Option key="02" value="string|time">{tools.getTypeName('string|time')}</Option>
-          <Option key="03" value="string|date-time">{tools.getTypeName('string|date-time')}</Option>
-          <Option key="04" value="boolean">{tools.getTypeName('boolean')}</Option>
-          <Option key="05" value="integer">{tools.getTypeName('integer')}</Option>
-          <Option key="06" value="number">{tools.getTypeName('number')}</Option>
-          <Option key="07" value="object">{tools.getTypeName('object')}</Option>
-        </Select>
-      </Form.Item>
-      <Form.Item
-        name="description"
-        label="描述"
-        rules={[
-          { max: 50, message: '只能输入50个字符' }
-        ]}
-      >
-        <TextArea autoSize placeholder="请输入描述" />
-      </Form.Item>
-    </Form>
-  )
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  Button,
+  Drawer,
+  Space,
+  Form,
+  Input,
+  Radio,
+  Switch,
+  FormInstance,
+  Select,
+  Divider
+} from 'kts-components-antd-x4';
+import DocumentsEdit from '../../';
+import * as tools from '../../tools';
+import IProperties from '../../DocumentsEditController/DocumentsEditControllerState/IProperties';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+export default () => {
+
+  const controller = DocumentsEdit.useDocumentsEditController();
+
+  /** 当前正在处理的属性 */
+  const current = controller.useMemo(s => s.propertyTableState.current, []);
+
+  /** 只读模式 */
+  const readOnly = controller.useMemo(s => s.readOnly, []);
+
+  const [visible, setVisible] = React.useState(false);
+
+  const onOpen = React.useCallback(() => { setVisible(true) }, []);
+
+  const onClose = React.useCallback(() => { setVisible(false) }, []);
+
+  const [form] = Form.useForm();
+
+  /** 点击了提交 */
+  const onSubmit = React.useCallback(async () => {
+    try {
+      const values = await form.validateFields();
+      const name = uuidv4();
+      const properties: IProperties = {
+        $id: `#/definitions/${name}`,
+        $count: 1,
+        $name: name,
+        $createTime: new Date().getTime(),
+        title: values.title,
+        type: values.isArray ? 'array' : tools.getType(values.type),
+        format: values.isArray ? undefined : tools.getFormat(values.type),
+        items: tools.getItems({ ...values, $name: name }),
+        description: values.description,
+        rules: values.isArray ? [{
+          _index: 0,
+          name: '数组容量校验(Min)',
+          checkType: 'control',
+          message: `数组长度不得小于${values.exclusiveMinItems ? "等于" : ""}${values.minItems}`,
+          algorithm: 'array-0',
+          minItems: values.minItems ? parseInt(values.minItems) : undefined,
+          exclusiveMinItems: values.exclusiveMinItems,
+        }, {
+          _index: 0,
+          name: '数组容量校验(Max)',
+          checkType: 'control',
+          message: `数组长度不得大于${values.exclusiveMaxItems ? "等于" : ""}${values.maxItems}`,
+          algorithm: 'array-1',
+          maxItems: values.maxItems ? parseInt(values.maxItems) : undefined,
+          exclusiveMaxItems: values.exclusiveMaxItems,
+        }] : undefined,
+      }
+      controller.addProperties({ current, properties, values });
+      onClose();
+    } catch (error) {
+    }
+  }, [current, controller])
+
+  return (
+    <>
+      {readOnly === false && <Button onClick={onOpen} >新增字段</Button>}
+      <Drawer
+        title="新增字段"
+        placement="right"
+        width={500}
+        onClose={onClose}
+        visible={visible}
+        destroyOnClose={true}
+        footer={
+          <Space>
+            <Button onClick={onSubmit} type="primary" >确定</Button>
+            <Button onClick={onClose} >取消</Button>
+          </Space>
+        }
+      >
+        <DrawerBody form={form} />
+      </Drawer>
+    </>
+  );
+};
+
+const DrawerBody = (props: { form: FormInstance<any> }) => {
+
+  const controller = DocumentsEdit.useDocumentsEditController();
+
+  React.useEffect(() => () => { props.form.resetFields() }, []);
+
+  // 是否数组
+  const [isArray, setIsArray] = React.useState(false);
+
+  const definitions = controller.useMemo(s => s.propertyTableState.current?.properties ?? {}, [])
+
+  return (
+    <Form
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      form={props.form}
+      layout="horizontal"
+    >
+      <Form.Item
+        name="$name"
+        label="字段名"
+        rules={[
+          { required: true, message: '请输入字段名' },
+          { pattern: /^([a-z]|[A-Z]|_)\w*$/, message: '只能英文、数字、下划线，并且英文、下划线开头' },
+          { max: 50, message: '只能输入50个字符' },
+          {
+            validator(_, value: string) {
+              if (!value) return Promise.resolve();
+              if (value.length > 20) return Promise.resolve();
+              if (definitions[value]) {
+                return Promise.reject(new Error('字段名已被使用'));
+              } else {
+                return Promise.resolve();
+              }
+            }
+          }
+        ]}
+      >
+        <Input placeholder="请输入字段名" />
+      </Form.Item>
+      <Form.Item
+        name="title"
+        label="显示名称"
+        rules={[
+          { required: true, message: '请输入显示名称' },
+          { max: 20, message: '只能输入20个字符' },
+        ]}
+      >
+        <Input placeholder="请输入显示名称" />
+      </Form.Item>
+      <Form.Item
+        name="isArray"
+        label="是否数组"
+        initialValue={false}
+      >
+        <Radio.Group onChange={e => { setIsArray(e.target.value) }} >
+          <Radio value={false}>单值</Radio>
+          <Radio value={true}>数组</Radio>
+        </Radio.Group>
+      </Form.Item>
+
+      {
+        isArray && <>
+          <Divider />
+          <Form.Item
+            name="minItems"
+            label="最少项"
+            rules={[
+              { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
+              { max: 20, message: '支持不超过20位的正整数' },
+            ]}
+          >
+            <Input placeholder="请输入最少项" />
+          </Form.Item>
+          <Form.Item
+            name="maxItems"
+            label="最多项"
+            rules={[
+              { pattern: /(^[1-9]\d*$)|^[0]$/, message: '支持不超过20位的正整数' },
+              { max: 20, message: '支持不超过20位的正整数' },
+            ]}
+          >
+            <Input placeholder="请输入最多项" />
+          </Form.Item>
+          <Form.Item
+            name="exclusiveMinItems"
+            label="排除最少项"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            name="exclusiveMaxItems"
+            label="排除最多项"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Divider />
+        </>
+      }
+
+      <Form.Item
+        name="required"
+        label="是否必填"
+        valuePropName="checked"
+        initialValue={true}
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        name="type"
+        label="类型"
+        initialValue="string"
+      >
+        <Select>
+          <Option key="00" value="string">{tools.getTypeName('string')}</Option>
+          <Option key="01" value="string|date">{tools.getTypeName('string|date')}</Option>
+          <Option key="02" value="string|time">{tools.getTypeName('string|time')}</Option>
+          <Option key="03" value="string|date-time">{tools.getTypeName('string|date-time')}</Option>
+          <Option key="04" value="boolean">{tools.getTypeName('boolean')}</Option>
+          <Option key="05" value="integer">{tools.getTypeName('integer')}</Option>
+          <Option key="06" value="number">{tools.getTypeName('number')}</Option>
+          <Option key="07" value="object">{tools.getTypeName('object')}</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="description"
+        label="描述"
+        rules={[
+          { max: 50, message: '只能输入50个字符' }
+        ]}
+      >
+        <TextArea autoSize placeholder="请输入描述" />
+      </Form.Item>
+    </Form>
+  )
 }

package/src/DocumentsEdit/ui/Breadcrumb/index.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { Breadcrumb, Button } from 'kts-components-antd-x4';
-import DocumentsEdit from '../../';
-// import IProperties from '../../DocumentsEditController/DocumentsEditControllerState/IProperties';
-import { IDataSource } from '../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
-
-export default () => {
-
-  const controller = DocumentsEdit.useDocumentsEditController();
-
-  const title = controller.useMemo(s => s.schema.title, [])
-
-  const breadcrumbState = controller.useMemo(s => s.breadcrumbState, []);
-
-  const onClickRoot = React.useCallback(() => {
-    controller.pipeline(async s => {
-      s.propertyTableState.current = s.schema;
-      s.breadcrumbState = [];
-    })()
-  }, [controller])
-
-  const onClickchild = React.useCallback((e: IDataSource) => {
-    controller.pipeline(async s => {
-      s.propertyTableState.current = e.ref;
-      for (; s.breadcrumbState.length !== 0;) {
-        if (s.breadcrumbState[s.breadcrumbState.length - 1] === e) break;
-        s.breadcrumbState.pop()
-      }
-      s.breadcrumbState = s.breadcrumbState.slice()
-    })()
-  }, [])
-
-  if (breadcrumbState.length === 0) return <span></span>;
-
-  return (
-    <Breadcrumb separator=">">
-      <Breadcrumb.Item key="root" >
-        <Button style={{ padding: 0 }} onClick={onClickRoot} type="link">{title}</Button>
-      </Breadcrumb.Item>
-      {
-        breadcrumbState.map((e, i) => {
-          return (
-            <Breadcrumb.Item key={i}>
-              <Button style={{ padding: 0 }} onClick={() => { onClickchild(e) }} type="link">{`${e.value.alias}(${e.value.$name})`}</Button>
-            </Breadcrumb.Item>
-          )
-        })
-      }
-    </Breadcrumb>
-  );
-};
+import React from 'react';
+import { Breadcrumb, Button } from 'kts-components-antd-x4';
+import DocumentsEdit from '../../';
+// import IProperties from '../../DocumentsEditController/DocumentsEditControllerState/IProperties';
+import { IDataSource } from '../../../DocumentsEdit/DocumentsEditController/DocumentsEditControllerState';
+
+export default () => {
+
+  const controller = DocumentsEdit.useDocumentsEditController();
+
+  const title = controller.useMemo(s => s.schema.title, [])
+
+  const breadcrumbState = controller.useMemo(s => s.breadcrumbState, []);
+
+  const onClickRoot = React.useCallback(() => {
+    controller.pipeline(async s => {
+      s.propertyTableState.current = s.schema;
+      s.breadcrumbState = [];
+    })()
+  }, [controller])
+
+  const onClickchild = React.useCallback((e: IDataSource) => {
+    controller.pipeline(async s => {
+      s.propertyTableState.current = e.ref;
+      for (; s.breadcrumbState.length !== 0;) {
+        if (s.breadcrumbState[s.breadcrumbState.length - 1] === e) break;
+        s.breadcrumbState.pop()
+      }
+      s.breadcrumbState = s.breadcrumbState.slice()
+    })()
+  }, [])
+
+  if (breadcrumbState.length === 0) return <span></span>;
+
+  return (
+    <Breadcrumb separator=">">
+      <Breadcrumb.Item key="root" >
+        <Button style={{ padding: 0 }} onClick={onClickRoot} type="link">{title}</Button>
+      </Breadcrumb.Item>
+      {
+        breadcrumbState.map((e, i) => {
+          return (
+            <Breadcrumb.Item key={i}>
+              <Button style={{ padding: 0 }} onClick={() => { onClickchild(e) }} type="link">{`${e.value.alias}(${e.value.$name})`}</Button>
+            </Breadcrumb.Item>
+          )
+        })
+      }
+    </Breadcrumb>
+  );
+};