kts-components-document-access-point 1.4.4 → 1.4.7

package/src/DocumentsEdit/tools/index.ts

@@ -1,88 +1,88 @@
-import IProperties, { FormatType, PropertiesType } from "../DocumentsEditController/DocumentsEditControllerState/IProperties";
-
-/** 初始化 form type */
-export function initType(editProperties: IProperties) {
-    if (!!editProperties.items) editProperties = editProperties.items;
-    if (editProperties.format === 'date') return 'string|date';
-    if (editProperties.format === 'date-time') return 'string|date-time';
-    if (editProperties.format === "time") return 'string|time';
-    return editProperties.type;
-}
-
-/** form type => 属性的 type */
-export function getType(v: string): PropertiesType {
-    if (v === 'string|date') return 'string';
-    if (v === 'string|time') return 'string';
-    if (v === 'string|date-time') return 'string';
-    return v as PropertiesType;
-}
-
-/** form type => 属性的 type 的中文 */
-export function getTypeName(v: string) {
-    switch (v) {
-        case 'string|date':
-            return '日期（YYYY-MM-DD）'
-        case 'string|date-time':
-            return '日期-时间（YYYY-MM-DD hh:mm:ss）'
-        case 'string|time':
-            return '时间（hh:mm:ss）'
-        case 'string':
-            return '文本'
-        case 'object':
-            return '复合类型'
-        case 'integer':
-            return '数字（整数）'
-        case 'number':
-            return '数字（小数）'
-        case 'boolean':
-            return '布尔（是/否）'
-        default:
-            return '未知'
-    }
-}
-
-/** form type => 属性的 type */
-export function getFormat(v: string): FormatType | undefined {
-    if (v === 'string|date') return 'date';
-    if (v === 'string|time') return 'time';
-    if (v === 'string|date-time') return 'date-time';
-    return undefined;
-}
-
-/** form => 属性的 Items */
-export function getItems(values: any) {
-    if (values.isArray) {
-        return {
-            $id: `#/definitions/${values.$name}/items`,
-            $count: 0,
-            $name: values.$name,
-            $createTime: new Date().getTime(),
-            title: values.title,
-            type: getType(values.type),
-            format: getFormat(values.type),
-            properties: values.properties,
-        }
-    } else {
-        return undefined;
-    }
-}
-
-/** 删除 属性的 properties */
-export function delProperties(editProperties: IProperties, definitions: { [key: string]: IProperties }) {
-    if (!editProperties.properties) return;
-
-    Object.entries(editProperties.properties)
-        .filter(e => {
-            definitions[e[0]].$count--;
-            if (definitions[e[0]].$count <= 0) delPropertiesOneself(definitions[e[0]].$name, definitions);
-        })
-
-    delete editProperties.properties;
-}
-
-/** 删除 属性 自己 */
-export function delPropertiesOneself($name: string, definitions: { [key: string]: IProperties }) {
-    delProperties(definitions[$name], definitions);
-    delete definitions[$name];
-}
-
+import IProperties, { FormatType, PropertiesType } from "../DocumentsEditController/DocumentsEditControllerState/IProperties";
+
+/** 初始化 form type */
+export function initType(editProperties: IProperties) {
+    if (!!editProperties.items) editProperties = editProperties.items;
+    if (editProperties.format === 'date') return 'string|date';
+    if (editProperties.format === 'date-time') return 'string|date-time';
+    if (editProperties.format === "time") return 'string|time';
+    return editProperties.type;
+}
+
+/** form type => 属性的 type */
+export function getType(v: string): PropertiesType {
+    if (v === 'string|date') return 'string';
+    if (v === 'string|time') return 'string';
+    if (v === 'string|date-time') return 'string';
+    return v as PropertiesType;
+}
+
+/** form type => 属性的 type 的中文 */
+export function getTypeName(v: string) {
+    switch (v) {
+        case 'string|date':
+            return '日期（YYYY-MM-DD）'
+        case 'string|date-time':
+            return '日期-时间（YYYY-MM-DD hh:mm:ss）'
+        case 'string|time':
+            return '时间（hh:mm:ss）'
+        case 'string':
+            return '文本'
+        case 'object':
+            return '复合类型'
+        case 'integer':
+            return '数字（整数）'
+        case 'number':
+            return '数字（小数）'
+        case 'boolean':
+            return '布尔（是/否）'
+        default:
+            return '未知'
+    }
+}
+
+/** form type => 属性的 type */
+export function getFormat(v: string): FormatType | undefined {
+    if (v === 'string|date') return 'date';
+    if (v === 'string|time') return 'time';
+    if (v === 'string|date-time') return 'date-time';
+    return undefined;
+}
+
+/** form => 属性的 Items */
+export function getItems(values: any) {
+    if (values.isArray) {
+        return {
+            $id: `#/definitions/${values.$name}/items`,
+            $count: 0,
+            $name: values.$name,
+            $createTime: new Date().getTime(),
+            title: values.title,
+            type: getType(values.type),
+            format: getFormat(values.type),
+            properties: values.properties,
+        }
+    } else {
+        return undefined;
+    }
+}
+
+/** 删除 属性的 properties */
+export function delProperties(editProperties: IProperties, definitions: { [key: string]: IProperties }) {
+    if (!editProperties.properties) return;
+
+    Object.entries(editProperties.properties)
+        .filter(e => {
+            definitions[e[0]].$count--;
+            if (definitions[e[0]].$count <= 0) delPropertiesOneself(definitions[e[0]].$name, definitions);
+        })
+
+    delete editProperties.properties;
+}
+
+/** 删除 属性 自己 */
+export function delPropertiesOneself($name: string, definitions: { [key: string]: IProperties }) {
+    delProperties(definitions[$name], definitions);
+    delete definitions[$name];
+}
+

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

@@ -1,239 +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 }),
-        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>
-  )
+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>
+  )
 }