Skip to content

Commit d8534d6

Browse files
SailorFSailorF
committed
feat(): support editor for eo-time-picker and eo-date-picker
1 parent 04fb5ac commit d8534d6

File tree

6 files changed

+345
-0
lines changed

6 files changed

+345
-0
lines changed

‎bricks/form/src/bootstrap.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ import "./time-picker/index.js";
1717
import "./date-picker/index.js";
1818
import "./time-range-picker/index.js";
1919
import "./color-picker/index.js";
20+
import "./editors/index.js";

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

+222
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
export const eoDatePickerSchema = {
2+
name: "layout",
3+
type: "void",
4+
component: {
5+
name: "FormLayout",
6+
props: {
7+
layout: "vertical",
8+
},
9+
},
10+
children: [
11+
{
12+
name: "categoryTitle_item",
13+
type: "void",
14+
decorator: {
15+
name: "CategoryTitle",
16+
props: {
17+
text: "表单项",
18+
},
19+
},
20+
},
21+
{
22+
name: "name",
23+
title: "字段名",
24+
type: "string",
25+
},
26+
{
27+
name: "label",
28+
title: "标签",
29+
type: "string",
30+
},
31+
{
32+
name: "value",
33+
title: "值",
34+
type: "string",
35+
},
36+
{
37+
name: "disabled",
38+
title: "禁用",
39+
type: "boolean",
40+
},
41+
{
42+
name: "notRender",
43+
title: "隐藏表单项",
44+
type: "boolean",
45+
component: {
46+
name: "Switch",
47+
},
48+
decorator: {
49+
name: "FormItem",
50+
props: {
51+
layout: "horizontal",
52+
tooltip:
53+
"区别于通用的“隐藏”属性，隐藏表单项时，表单不仅不显示当前项，同时也不会校验当前项；通用隐藏仅仅是不显示，但仍会校验当前项。通常，您应选择此属性来隐藏表单项。",
54+
},
55+
},
56+
},
57+
{
58+
name: "placeholder",
59+
title: "占位文本",
60+
type: "string",
61+
},
62+
{
63+
name: "required",
64+
title: "必填",
65+
type: "boolean",
66+
component: {
67+
props: {
68+
size: "small",
69+
},
70+
},
71+
"x-reactions": [
72+
{
73+
target: "requiredValidatorText",
74+
fulfill: {
75+
state: {
76+
visible: "{{$self.value}}",
77+
},
78+
},
79+
},
80+
],
81+
},
82+
{
83+
name: "showTime",
84+
title: "显示时间",
85+
type: "boolean",
86+
},
87+
{
88+
name: "format",
89+
title: "显示预览格式",
90+
type: "string",
91+
},
92+
{
93+
name: "picker",
94+
title: "非选中时的文本",
95+
type: "string",
96+
component: {
97+
name: "Select",
98+
props: {
99+
options: ["date", "week", "month", "year", "quarter"].map((item) => ({
100+
label: item,
101+
value: item,
102+
})),
103+
},
104+
},
105+
},
106+
{
107+
name: "futureDateDisabled",
108+
title: "不可选择未来的日期",
109+
type: "boolean",
110+
},
111+
{
112+
name: "disabledDate",
113+
title: "禁用日期",
114+
type: "string",
115+
component: "CodeEditor",
116+
decorator: "FormItemWithoutAdvanced",
117+
},
118+
{
119+
name: "useFastSelectBtn",
120+
title: "快速选项",
121+
type: "boolean",
122+
},
123+
{
124+
name: "categoryTitle_itemStyle",
125+
type: "void",
126+
decorator: {
127+
name: "CategoryTitle",
128+
props: {
129+
text: "表单项样式",
130+
},
131+
},
132+
},
133+
{
134+
name: "labelAlign",
135+
title: "标签对齐方式",
136+
type: "string",
137+
decorator: {
138+
name: "FormItem",
139+
props: {
140+
layout: "horizontal",
141+
},
142+
},
143+
enum: [
144+
{
145+
label: "左对齐",
146+
value: "left",
147+
},
148+
{
149+
label: "右对齐",
150+
value: "right",
151+
},
152+
],
153+
component: {
154+
name: "Radio.Group",
155+
props: {
156+
size: "small",
157+
optionType: "button",
158+
defaultValue: "left",
159+
},
160+
},
161+
},
162+
{
163+
name: "labelColor",
164+
title: "标签颜色",
165+
type: "string",
166+
component: "ColorPicker",
167+
},
168+
{
169+
name: "labelBold",
170+
title: "标签加粗",
171+
type: "boolean",
172+
},
173+
{
174+
name: "labelTooltip",
175+
title: "标签提示",
176+
type: "string",
177+
},
178+
{
179+
name: "labelCol",
180+
title: "标签布局",
181+
component: {
182+
name: "CodeEditor",
183+
},
184+
decorator: "FormItemWithoutAdvanced",
185+
},
186+
{
187+
name: "labelBrick",
188+
title: "标签构件",
189+
component: {
190+
name: "CodeEditor",
191+
},
192+
decorator: "FormItemWithoutAdvanced",
193+
},
194+
{
195+
name: "inputBoxStyle",
196+
title: "输入框样式",
197+
type: "string",
198+
component: {
199+
name: "CodeEditor",
200+
},
201+
decorator: "FormItemWithoutAdvanced",
202+
},
203+
{
204+
name: "wrapperCol",
205+
title: "控件布局",
206+
type: "string",
207+
component: {
208+
name: "CodeEditor",
209+
},
210+
decorator: "FormItemWithoutAdvanced",
211+
},
212+
{
213+
name: "helpBrick",
214+
title: "帮助构件",
215+
type: "string",
216+
component: {
217+
name: "CodeEditor",
218+
},
219+
decorator: "FormItemWithoutAdvanced",
220+
},
221+
],
222+
};

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type _React from "react";
2+
import { customEditors } from "@next-core/runtime";
3+
import type { EditorComponentProps } from "@next-shared/property-editor";
4+
import { eoDatePickerSchema } from "./eoDatePicker.schema";
5+
6+
function EoDatePickerComponentFactory(React: typeof _React) {
7+
return function EoDatePickerComponent(
8+
props: EditorComponentProps
9+
): React.ReactElement {
10+
const { SchemaFieldComponent, formilySchemaFormatter, scope } = props;
11+
12+
return React.createElement(SchemaFieldComponent, {
13+
schema: formilySchemaFormatter(eoDatePickerSchema as any),
14+
scope,
15+
});
16+
};
17+
}
18+
19+
customEditors.define("eo-date-picker", EoDatePickerComponentFactory);

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

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
export const EoTimePickerSchema = {
2+
name: "layout",
3+
type: "void",
4+
component: {
5+
name: "FormLayout",
6+
props: {
7+
layout: "vertical",
8+
},
9+
},
10+
children: [
11+
{
12+
name: "categoryTitle_item",
13+
type: "void",
14+
decorator: {
15+
name: "CategoryTitle",
16+
props: {
17+
text: "表单项",
18+
},
19+
},
20+
},
21+
{
22+
name: "name",
23+
title: "字段名",
24+
type: "string",
25+
},
26+
{
27+
name: "label",
28+
title: "标签",
29+
type: "string",
30+
},
31+
{
32+
name: "value",
33+
title: "值",
34+
type: "string",
35+
},
36+
{
37+
name: "disabled",
38+
title: "禁用",
39+
type: "boolean",
40+
},
41+
{
42+
name: "notRender",
43+
title: "隐藏表单项",
44+
type: "boolean",
45+
component: {
46+
name: "Switch",
47+
},
48+
decorator: {
49+
name: "FormItem",
50+
props: {
51+
layout: "horizontal",
52+
tooltip:
53+
"区别于通用的“隐藏”属性，隐藏表单项时，表单不仅不显示当前项，同时也不会校验当前项；通用隐藏仅仅是不显示，但仍会校验当前项。通常，您应选择此属性来隐藏表单项。",
54+
},
55+
},
56+
},
57+
{
58+
name: "required",
59+
title: "必填",
60+
type: "boolean",
61+
component: {
62+
props: {
63+
size: "small",
64+
},
65+
},
66+
},
67+
{
68+
name: "placeholder",
69+
title: "占位说明",
70+
type: "string",
71+
},
72+
{
73+
name: "configProps",
74+
title: "Antd timePicker 属性",
75+
type: "string",
76+
component: {
77+
name: "CodeEditor",
78+
},
79+
decorator: "FormItemWithoutAdvanced",
80+
},
81+
],
82+
};

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type _React from "react";
2+
import { customEditors } from "@next-core/runtime";
3+
import type { EditorComponentProps } from "@next-shared/property-editor";
4+
import { EoTimePickerSchema } from "./eoTimePicker.schema";
5+
6+
function EoTimePickerComponentFactory(React: typeof _React) {
7+
return function EoTimePickerComponent(
8+
props: EditorComponentProps
9+
): React.ReactElement {
10+
const { SchemaFieldComponent, formilySchemaFormatter, scope } = props;
11+
12+
return React.createElement(SchemaFieldComponent, {
13+
schema: formilySchemaFormatter(EoTimePickerSchema as any),
14+
scope,
15+
});
16+
};
17+
}
18+
19+
customEditors.define("eo-time-picker", EoTimePickerComponentFactory);

‎bricks/form/src/editors/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import "./eo-date-picker/index.js";
2+
import "./eo-time-picker/index.js";

0 commit comments

Comments
 (0)