diff --git a/bricks/form/src/bootstrap.ts b/bricks/form/src/bootstrap.ts index 9ab08e60d..67ff39370 100644 --- a/bricks/form/src/bootstrap.ts +++ b/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"; diff --git a/bricks/form/src/editors/eo-date-picker/eoDatePicker.schema.tsx b/bricks/form/src/editors/eo-date-picker/eoDatePicker.schema.tsx new file mode 100644 index 000000000..8484cc892 --- /dev/null +++ b/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", + }, + ], +}; diff --git a/bricks/form/src/editors/eo-date-picker/index.tsx b/bricks/form/src/editors/eo-date-picker/index.tsx new file mode 100644 index 000000000..6d817a9e0 --- /dev/null +++ b/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); diff --git a/bricks/form/src/editors/eo-time-picker/eoTimePicker.schema.tsx b/bricks/form/src/editors/eo-time-picker/eoTimePicker.schema.tsx new file mode 100644 index 000000000..121bc466f --- /dev/null +++ b/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", + }, + ], +}; diff --git a/bricks/form/src/editors/eo-time-picker/index.tsx b/bricks/form/src/editors/eo-time-picker/index.tsx new file mode 100644 index 000000000..27434edef --- /dev/null +++ b/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); diff --git a/bricks/form/src/editors/index.ts b/bricks/form/src/editors/index.ts new file mode 100644 index 000000000..22e389f53 --- /dev/null +++ b/bricks/form/src/editors/index.ts @@ -0,0 +1,2 @@ +import "./eo-date-picker/index.js"; +import "./eo-time-picker/index.js";