feat(): support editor for eo-date-picker

bricks/form/src/bootstrap.ts

@@ -17,3 +17,4 @@ import "./time-picker/index.js";
 import "./date-picker/index.js";
 import "./time-range-picker/index.js";
 import "./color-picker/index.js";
+import "./editors/index.js";

bricks/form/src/editors/eo-date-picker/eoDatePicker.schema.tsx

@@ -0,0 +1,222 @@
+export const eoDatePickerSchema = {
+  name: "layout",
+  type: "void",
+  component: {
+    name: "FormLayout",
+    props: {
+      layout: "vertical",
+    },
+  },
+  children: [
+    {
+      name: "categoryTitle_item",
+      type: "void",
+      decorator: {
+        name: "CategoryTitle",
+        props: {
+          text: "表单项",
+        },
+      },
+    },
+    {
+      name: "name",
+      title: "字段名",
+      type: "string",
+    },
+    {
+      name: "label",
+      title: "标签",
+      type: "string",
+    },
+    {
+      name: "value",
+      title: "值",
+      type: "string",
+    },
+    {
+      name: "disabled",
+      title: "禁用",
+      type: "boolean",
+    },
+    {
+      name: "notRender",
+      title: "隐藏表单项",
+      type: "boolean",
+      component: {
+        name: "Switch",
+      },
+      decorator: {
+        name: "FormItem",
+        props: {
+          layout: "horizontal",
+          tooltip:
+            "区别于通用的“隐藏”属性，隐藏表单项时，表单不仅不显示当前项，同时也不会校验当前项；通用隐藏仅仅是不显示，但仍会校验当前项。通常，您应选择此属性来隐藏表单项。",
+        },
+      },
+    },
+    {
+      name: "placeholder",
+      title: "占位文本",
+      type: "string",
+    },
+    {
+      name: "required",
+      title: "必填",
+      type: "boolean",
+      component: {
+        props: {
+          size: "small",
+        },
+      },
+      "x-reactions": [
+        {
+          target: "requiredValidatorText",
+          fulfill: {
+            state: {
+              visible: "{{$self.value}}",
+            },
+          },
+        },
+      ],
+    },
+    {
+      name: "showTime",
+      title: "显示时间",
+      type: "boolean",
+    },
+    {
+      name: "format",
+      title: "显示预览格式",
+      type: "string",
+    },
+    {
+      name: "picker",
+      title: "选择器类型",
+      type: "string",
+      component: {
+        name: "Select",
+        props: {
+          options: ["date", "week", "month", "year", "quarter"].map((item) => ({
+            label: item,
+            value: item,
+          })),
+        },
+      },
+    },
+    {
+      name: "futureDateDisabled",
+      title: "不可选择未来的日期",
+      type: "boolean",
+    },
+    {
+      name: "disabledDate",
+      title: "禁用日期",
+      type: "string",
+      component: "CodeEditor",
+      decorator: "FormItemWithoutAdvanced",
+    },
+    {
+      name: "useFastSelectBtn",
+      title: "快速选项",
+      type: "boolean",
+    },
+    {
+      name: "categoryTitle_itemStyle",
+      type: "void",
+      decorator: {
+        name: "CategoryTitle",
+        props: {
+          text: "表单项样式",
+        },
+      },
+    },
+    {
+      name: "labelAlign",
+      title: "标签对齐方式",
+      type: "string",
+      decorator: {
+        name: "FormItem",
+        props: {
+          layout: "horizontal",
+        },
+      },
+      enum: [
+        {
+          label: "左对齐",
+          value: "left",
+        },
+        {
+          label: "右对齐",
+          value: "right",
+        },
+      ],
+      component: {
+        name: "Radio.Group",
+        props: {
+          size: "small",
+          optionType: "button",
+          defaultValue: "left",
+        },
+      },
+    },
+    {
+      name: "labelColor",
+      title: "标签颜色",
+      type: "string",
+      component: "ColorPicker",
+    },
+    {
+      name: "labelBold",
+      title: "标签加粗",
+      type: "boolean",
+    },
+    {
+      name: "labelTooltip",
+      title: "标签提示",
+      type: "string",
+    },
+    {
+      name: "labelCol",
+      title: "标签布局",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+    {
+      name: "labelBrick",
+      title: "标签构件",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+    {
+      name: "inputBoxStyle",
+      title: "输入框样式",
+      type: "string",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+    {
+      name: "wrapperCol",
+      title: "控件布局",
+      type: "string",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+    {
+      name: "helpBrick",
+      title: "帮助构件",
+      type: "string",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+  ],
+};

bricks/form/src/editors/eo-date-picker/index.tsx

@@ -0,0 +1,19 @@
+import type _React from "react";
+import { customEditors } from "@next-core/runtime";
+import type { EditorComponentProps } from "@next-shared/property-editor";
+import { eoDatePickerSchema } from "./eoDatePicker.schema";
+
+function EoDatePickerComponentFactory(React: typeof _React) {
+  return function EoDatePickerComponent(
+    props: EditorComponentProps
+  ): React.ReactElement {
+    const { SchemaFieldComponent, formilySchemaFormatter, scope } = props;
+
+    return React.createElement(SchemaFieldComponent, {
+      schema: formilySchemaFormatter(eoDatePickerSchema as any),
+      scope,
+    });
+  };
+}
+
+customEditors.define("eo-date-picker", EoDatePickerComponentFactory);

bricks/form/src/editors/eo-time-picker/eoTimePicker.schema.tsx

@@ -0,0 +1,82 @@
+export const EoTimePickerSchema = {
+  name: "layout",
+  type: "void",
+  component: {
+    name: "FormLayout",
+    props: {
+      layout: "vertical",
+    },
+  },
+  children: [
+    {
+      name: "categoryTitle_item",
+      type: "void",
+      decorator: {
+        name: "CategoryTitle",
+        props: {
+          text: "表单项",
+        },
+      },
+    },
+    {
+      name: "name",
+      title: "字段名",
+      type: "string",
+    },
+    {
+      name: "label",
+      title: "标签",
+      type: "string",
+    },
+    {
+      name: "value",
+      title: "值",
+      type: "string",
+    },
+    {
+      name: "disabled",
+      title: "禁用",
+      type: "boolean",
+    },
+    {
+      name: "notRender",
+      title: "隐藏表单项",
+      type: "boolean",
+      component: {
+        name: "Switch",
+      },
+      decorator: {
+        name: "FormItem",
+        props: {
+          layout: "horizontal",
+          tooltip:
+            "区别于通用的“隐藏”属性，隐藏表单项时，表单不仅不显示当前项，同时也不会校验当前项；通用隐藏仅仅是不显示，但仍会校验当前项。通常，您应选择此属性来隐藏表单项。",
+        },
+      },
+    },
+    {
+      name: "required",
+      title: "必填",
+      type: "boolean",
+      component: {
+        props: {
+          size: "small",
+        },
+      },
+    },
+    {
+      name: "placeholder",
+      title: "占位说明",
+      type: "string",
+    },
+    {
+      name: "configProps",
+      title: "Antd timePicker 属性",
+      type: "string",
+      component: {
+        name: "CodeEditor",
+      },
+      decorator: "FormItemWithoutAdvanced",
+    },
+  ],
+};

bricks/form/src/editors/eo-time-picker/index.tsx

@@ -0,0 +1,19 @@
+import type _React from "react";
+import { customEditors } from "@next-core/runtime";
+import type { EditorComponentProps } from "@next-shared/property-editor";
+import { EoTimePickerSchema } from "./eoTimePicker.schema";
+
+function EoTimePickerComponentFactory(React: typeof _React) {
+  return function EoTimePickerComponent(
+    props: EditorComponentProps
+  ): React.ReactElement {
+    const { SchemaFieldComponent, formilySchemaFormatter, scope } = props;
+
+    return React.createElement(SchemaFieldComponent, {
+      schema: formilySchemaFormatter(EoTimePickerSchema as any),
+      scope,
+    });
+  };
+}
+
+customEditors.define("eo-time-picker", EoTimePickerComponentFactory);

bricks/form/src/editors/index.ts

@@ -0,0 +1,2 @@
+import "./eo-date-picker/index.js";
+import "./eo-time-picker/index.js";