@dckj-npm/dc-material 0.1.359 → 0.1.360
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lowcode/assets-daily.json +13 -13
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +13 -13
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.design.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +6 -6
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +5 -5
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +5 -5
- package/dist/BizComps.css +1 -1
- package/dist/BizComps.js +2 -2
- package/dist/BizComps.js.map +1 -1
- package/es/components/custom-form/custom-form.d.ts +37 -0
- package/es/components/custom-form/custom-form.js +158 -0
- package/es/components/custom-form/index.d.ts +6 -0
- package/es/components/custom-form/index.js +6 -0
- package/es/components/custom-form/index.scss +25 -0
- package/es/components/teletext-list/teletext-list-item.js +3 -3
- package/es/components/teletext-list/teletext-list.js +2 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +4 -0
- package/es/style.js +8 -0
- package/es/utils/children-node-handle.js +5 -0
- package/lib/components/custom-form/custom-form.d.ts +37 -0
- package/lib/components/custom-form/custom-form.js +164 -0
- package/lib/components/custom-form/index.d.ts +6 -0
- package/lib/components/custom-form/index.js +6 -0
- package/lib/components/custom-form/index.scss +25 -0
- package/lib/components/teletext-list/teletext-list-item.js +3 -3
- package/lib/components/teletext-list/teletext-list.js +2 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +6 -1
- package/lib/style.js +8 -0
- package/lib/utils/children-node-handle.js +5 -0
- package/lowcode/custom-form/meta.ts +307 -0
- package/lowcode_es/custom-form/meta.d.ts +22 -0
- package/lowcode_es/custom-form/meta.js +302 -0
- package/lowcode_es/meta.js +3 -2
- package/lowcode_lib/custom-form/meta.d.ts +22 -0
- package/lowcode_lib/custom-form/meta.js +307 -0
- package/lowcode_lib/meta.js +41 -40
- package/package.json +3 -3
- package/build/docs/colorful-button.html +0 -48
- package/build/docs/colorful-input.html +0 -48
- package/build/docs/index.html +0 -48
- package/build/docs/umi.d22560a0.css +0 -8
- package/build/docs/umi.d7be81d3.js +0 -1
- package/build/docs/~demos/colorful-button-demo.html +0 -47
- package/build/docs/~demos/colorful-input-demo.html +0 -47
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.scss';
|
|
3
|
+
import { FormProps } from '@alifd/next/lib/form';
|
|
4
|
+
export type CustomFormItemType = 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'CheckboxGroup' | 'NumberPicker' | 'DatePicker' | 'Upload';
|
|
5
|
+
export interface CustomFormItemSchema {
|
|
6
|
+
field: string;
|
|
7
|
+
label?: string;
|
|
8
|
+
required?: boolean;
|
|
9
|
+
componentType?: CustomFormItemType;
|
|
10
|
+
componentProps?: Record<string, any>;
|
|
11
|
+
options?: Array<{
|
|
12
|
+
label: string;
|
|
13
|
+
value: any;
|
|
14
|
+
}>;
|
|
15
|
+
columnSpan?: number;
|
|
16
|
+
formItemProps?: Record<string, any>;
|
|
17
|
+
}
|
|
18
|
+
type GridSpacing = [number] | [number, number] | [number, number, number] | [number, number, number, number];
|
|
19
|
+
export interface CustomFormProps extends Omit<FormProps, 'onSubmit'> {
|
|
20
|
+
columns?: number;
|
|
21
|
+
spacing?: GridSpacing;
|
|
22
|
+
emptyContent?: React.ReactNode;
|
|
23
|
+
formItems?: CustomFormItemSchema[];
|
|
24
|
+
showSubmit?: boolean;
|
|
25
|
+
submitText?: string;
|
|
26
|
+
submitValidate?: boolean;
|
|
27
|
+
submitDataSource?: any;
|
|
28
|
+
submitButtonProps?: Record<string, any>;
|
|
29
|
+
showReset?: boolean;
|
|
30
|
+
resetText?: string;
|
|
31
|
+
resetButtonProps?: Record<string, any>;
|
|
32
|
+
onSubmit?: (values: any, errors: any, field: any) => void;
|
|
33
|
+
onSubmitFailed?: (values: any, errors: any, field: any) => void;
|
|
34
|
+
children?: React.ReactNode;
|
|
35
|
+
}
|
|
36
|
+
declare const CustomForm: React.FC<CustomFormProps>;
|
|
37
|
+
export default CustomForm;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _Upload from "@alifd/next/es/upload";
|
|
4
|
+
import _NumberPicker from "@alifd/next/es/number-picker";
|
|
5
|
+
import _DatePicker from "@alifd/next/es/date-picker";
|
|
6
|
+
import _Checkbox from "@alifd/next/es/checkbox";
|
|
7
|
+
import _Radio from "@alifd/next/es/radio";
|
|
8
|
+
import _Select from "@alifd/next/es/select";
|
|
9
|
+
import _Input from "@alifd/next/es/input";
|
|
10
|
+
import _ResponsiveGrid from "@alifd/next/es/responsive-grid";
|
|
11
|
+
import _Form from "@alifd/next/es/form";
|
|
12
|
+
var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
|
|
13
|
+
import React, { useCallback } from 'react';
|
|
14
|
+
import "./index.scss";
|
|
15
|
+
var NextFormAny = _Form;
|
|
16
|
+
var ResponsiveGridAny = _ResponsiveGrid;
|
|
17
|
+
var ResponsiveGridCell = _ResponsiveGrid.Cell;
|
|
18
|
+
var FormItemAny = _Form.Item;
|
|
19
|
+
var InputAny = _Input;
|
|
20
|
+
var TextAreaAny = _Input.TextArea;
|
|
21
|
+
var SelectAny = _Select;
|
|
22
|
+
var RadioGroupAny = _Radio.Group;
|
|
23
|
+
var CheckboxGroupAny = _Checkbox.Group;
|
|
24
|
+
var DatePickerAny = _DatePicker;
|
|
25
|
+
var NumberPickerAny = _NumberPicker;
|
|
26
|
+
var UploadAny = _Upload;
|
|
27
|
+
var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values, errors, field) {
|
|
28
|
+
if (!submitDataSource) return;
|
|
29
|
+
if (typeof submitDataSource === 'function') {
|
|
30
|
+
submitDataSource(values, errors, field);
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.run) === 'function') {
|
|
34
|
+
submitDataSource.run(values, errors, field);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.execute) === 'function') {
|
|
38
|
+
submitDataSource.execute(values, errors, field);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.request) === 'function') {
|
|
42
|
+
submitDataSource.request(values, errors, field);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.submit) === 'function') {
|
|
46
|
+
submitDataSource.submit(values, errors, field);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var renderFormItemComponent = function renderFormItemComponent(item) {
|
|
50
|
+
var componentProps = item.componentProps || {};
|
|
51
|
+
var dataSource = componentProps.dataSource || item.options || [];
|
|
52
|
+
switch (item.componentType) {
|
|
53
|
+
case 'TextArea':
|
|
54
|
+
return /*#__PURE__*/React.createElement(TextAreaAny, componentProps);
|
|
55
|
+
case 'Select':
|
|
56
|
+
return /*#__PURE__*/React.createElement(SelectAny, _extends({
|
|
57
|
+
dataSource: dataSource
|
|
58
|
+
}, componentProps));
|
|
59
|
+
case 'RadioGroup':
|
|
60
|
+
return /*#__PURE__*/React.createElement(RadioGroupAny, _extends({
|
|
61
|
+
dataSource: dataSource
|
|
62
|
+
}, componentProps));
|
|
63
|
+
case 'CheckboxGroup':
|
|
64
|
+
return /*#__PURE__*/React.createElement(CheckboxGroupAny, _extends({
|
|
65
|
+
dataSource: dataSource
|
|
66
|
+
}, componentProps));
|
|
67
|
+
case 'NumberPicker':
|
|
68
|
+
return /*#__PURE__*/React.createElement(NumberPickerAny, componentProps);
|
|
69
|
+
case 'DatePicker':
|
|
70
|
+
return /*#__PURE__*/React.createElement(DatePickerAny, componentProps);
|
|
71
|
+
case 'Upload':
|
|
72
|
+
return /*#__PURE__*/React.createElement(UploadAny, componentProps);
|
|
73
|
+
case 'Input':
|
|
74
|
+
default:
|
|
75
|
+
return /*#__PURE__*/React.createElement(InputAny, componentProps);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
var CustomForm = function CustomForm(_ref) {
|
|
79
|
+
var _ref$columns = _ref.columns,
|
|
80
|
+
columns = _ref$columns === void 0 ? 1 : _ref$columns,
|
|
81
|
+
_ref$spacing = _ref.spacing,
|
|
82
|
+
spacing = _ref$spacing === void 0 ? [0, 16, 16, 0] : _ref$spacing,
|
|
83
|
+
_ref$emptyContent = _ref.emptyContent,
|
|
84
|
+
emptyContent = _ref$emptyContent === void 0 ? '添加表单项' : _ref$emptyContent,
|
|
85
|
+
_ref$formItems = _ref.formItems,
|
|
86
|
+
formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
|
|
87
|
+
_ref$showSubmit = _ref.showSubmit,
|
|
88
|
+
showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
|
|
89
|
+
_ref$submitText = _ref.submitText,
|
|
90
|
+
submitText = _ref$submitText === void 0 ? '提交' : _ref$submitText,
|
|
91
|
+
_ref$submitValidate = _ref.submitValidate,
|
|
92
|
+
submitValidate = _ref$submitValidate === void 0 ? true : _ref$submitValidate,
|
|
93
|
+
submitDataSource = _ref.submitDataSource,
|
|
94
|
+
submitButtonProps = _ref.submitButtonProps,
|
|
95
|
+
_ref$showReset = _ref.showReset,
|
|
96
|
+
showReset = _ref$showReset === void 0 ? false : _ref$showReset,
|
|
97
|
+
_ref$resetText = _ref.resetText,
|
|
98
|
+
resetText = _ref$resetText === void 0 ? '重置' : _ref$resetText,
|
|
99
|
+
resetButtonProps = _ref.resetButtonProps,
|
|
100
|
+
onSubmit = _ref.onSubmit,
|
|
101
|
+
onSubmitFailed = _ref.onSubmitFailed,
|
|
102
|
+
children = _ref.children,
|
|
103
|
+
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
104
|
+
var handleSubmit = useCallback(function (values, errors, field) {
|
|
105
|
+
if (errors && Object.keys(errors).length) {
|
|
106
|
+
if (onSubmitFailed) {
|
|
107
|
+
onSubmitFailed(values, errors, field);
|
|
108
|
+
}
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
if (onSubmit) {
|
|
112
|
+
onSubmit(values, errors, field);
|
|
113
|
+
}
|
|
114
|
+
runSubmitDataSource(submitDataSource, values, errors, field);
|
|
115
|
+
}, [onSubmit, onSubmitFailed, submitDataSource]);
|
|
116
|
+
var formItemNodes = formItems.map(function (item, index) {
|
|
117
|
+
var colSpan = Math.min(columns, Math.max(1, item.columnSpan || 1));
|
|
118
|
+
var formItemProps = item.formItemProps || {};
|
|
119
|
+
return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
|
|
120
|
+
colSpan: colSpan,
|
|
121
|
+
key: (item.field || index) + "-form-item"
|
|
122
|
+
}, /*#__PURE__*/React.createElement(FormItemAny, _extends({
|
|
123
|
+
label: item.label,
|
|
124
|
+
name: item.field,
|
|
125
|
+
required: item.required
|
|
126
|
+
}, formItemProps), renderFormItemComponent(item)));
|
|
127
|
+
});
|
|
128
|
+
var childrenNodes = React.Children.toArray(children).map(function (child, index) {
|
|
129
|
+
if (/*#__PURE__*/React.isValidElement(child) && child.type === ResponsiveGridCell) {
|
|
130
|
+
return child;
|
|
131
|
+
}
|
|
132
|
+
return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
|
|
133
|
+
colSpan: 1,
|
|
134
|
+
key: "custom-form-child-" + index
|
|
135
|
+
}, child);
|
|
136
|
+
});
|
|
137
|
+
var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
|
|
138
|
+
return /*#__PURE__*/React.createElement(NextFormAny, _extends({
|
|
139
|
+
className: "custom-form"
|
|
140
|
+
}, otherProps), hasContent ? /*#__PURE__*/React.createElement(ResponsiveGridAny, {
|
|
141
|
+
className: "custom-form__grid",
|
|
142
|
+
gap: spacing,
|
|
143
|
+
columns: columns
|
|
144
|
+
}, formItemNodes, childrenNodes) : /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
className: "custom-form__empty"
|
|
146
|
+
}, emptyContent), showSubmit || showReset ? /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
className: "custom-form__actions"
|
|
148
|
+
}, showReset ? /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
|
|
149
|
+
className: "custom-form__reset"
|
|
150
|
+
}, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/React.createElement(NextFormAny.Submit, _extends({
|
|
151
|
+
className: "custom-form__submit",
|
|
152
|
+
type: "primary",
|
|
153
|
+
validate: submitValidate,
|
|
154
|
+
onClick: handleSubmit
|
|
155
|
+
}, submitButtonProps), submitText) : null) : null);
|
|
156
|
+
};
|
|
157
|
+
CustomForm.displayName = 'CustomForm';
|
|
158
|
+
export default CustomForm;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.custom-form {
|
|
2
|
+
background-color: #fafafa;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.custom-form__grid {
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.custom-form__empty {
|
|
10
|
+
color: #999;
|
|
11
|
+
padding: 12px 0;
|
|
12
|
+
text-align: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.custom-form__actions {
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
gap: 12px;
|
|
19
|
+
padding: 12px 0 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.custom-form__submit,
|
|
23
|
+
.custom-form__reset {
|
|
24
|
+
min-width: 120px;
|
|
25
|
+
}
|
|
@@ -39,8 +39,8 @@ var TeletextListItem = function TeletextListItem(_ref) {
|
|
|
39
39
|
_ref$textImgGap = _ref.textImgGap,
|
|
40
40
|
textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
|
|
41
41
|
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
42
|
-
//
|
|
43
|
-
var resultImage = image
|
|
42
|
+
// 处理图片地址,兼容字符串和数组
|
|
43
|
+
var resultImage = Array.isArray(image) ? image.length > 0 ? image[0] : '' : typeof image === 'string' ? image : '';
|
|
44
44
|
var _otherProps = otherProps || {};
|
|
45
45
|
var tagColorArray = ['orange', 'green'];
|
|
46
46
|
var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
|
|
@@ -211,7 +211,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
|
|
|
211
211
|
src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
|
|
212
212
|
alt: ""
|
|
213
213
|
}), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
|
|
214
|
-
|
|
214
|
+
imgSrc: resultImage,
|
|
215
215
|
className: 'teletext-list__panel__item_image'
|
|
216
216
|
}) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
|
|
217
217
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -74,6 +74,7 @@ var TeletextList = function TeletextList(_ref) {
|
|
|
74
74
|
};
|
|
75
75
|
var getDataList = function getDataList() {
|
|
76
76
|
if (!dataList) return [];
|
|
77
|
+
console.log('dataList2', dataList);
|
|
77
78
|
return Array.isArray(dataList) ? dataList : [dataList];
|
|
78
79
|
};
|
|
79
80
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
@@ -103,7 +104,7 @@ var TeletextList = function TeletextList(_ref) {
|
|
|
103
104
|
style: getListStyle()
|
|
104
105
|
}, dataList ? getDataList().map(function (item, index) {
|
|
105
106
|
return /*#__PURE__*/React.createElement(TeletextListItem, _extends({
|
|
106
|
-
key: index,
|
|
107
|
+
key: item.id || index,
|
|
107
108
|
onClick: onClick,
|
|
108
109
|
imagePlacement: imagePlacement,
|
|
109
110
|
style: itemRowAlign === 'row' ? {
|
package/es/index.d.ts
CHANGED
|
@@ -79,5 +79,7 @@ export type { CollapseSelectorProps } from './components/collapse-selector';
|
|
|
79
79
|
export { CollapseSelector } from './components/collapse-selector';
|
|
80
80
|
export type { CollapseSelectorItemProps } from './components/collapse-selector-item';
|
|
81
81
|
export { CollapseSelectorItem } from './components/collapse-selector-item';
|
|
82
|
+
export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './components/custom-form';
|
|
83
|
+
export { CustomForm } from './components/custom-form';
|
|
82
84
|
declare const bizCssPrefix = "bizpack";
|
|
83
85
|
export { bizCssPrefix };
|
package/es/index.js
CHANGED
|
@@ -161,5 +161,9 @@ export { CollapseSelector } from "./components/collapse-selector";
|
|
|
161
161
|
// 折叠面板选择器2子项
|
|
162
162
|
|
|
163
163
|
export { CollapseSelectorItem } from "./components/collapse-selector-item";
|
|
164
|
+
|
|
165
|
+
// 自定义表单
|
|
166
|
+
|
|
167
|
+
export { CustomForm } from "./components/custom-form";
|
|
164
168
|
var bizCssPrefix = 'bizpack';
|
|
165
169
|
export { bizCssPrefix };
|
package/es/style.js
CHANGED
|
@@ -9,4 +9,12 @@ import '@alifd/next/es/switch/style';
|
|
|
9
9
|
import '@alifd/next/es/breadcrumb/style';
|
|
10
10
|
import '@alifd/next/es/collapse/style';
|
|
11
11
|
import '@alifd/next/es/rating/style';
|
|
12
|
+
import '@alifd/next/es/upload/style';
|
|
13
|
+
import '@alifd/next/es/number-picker/style';
|
|
14
|
+
import '@alifd/next/es/date-picker/style';
|
|
15
|
+
import '@alifd/next/es/checkbox/style';
|
|
16
|
+
import '@alifd/next/es/radio/style';
|
|
17
|
+
import '@alifd/next/es/input/style';
|
|
18
|
+
import '@alifd/next/es/responsive-grid/style';
|
|
19
|
+
import '@alifd/next/es/form/style';
|
|
12
20
|
import './index.scss';
|
|
@@ -14,8 +14,13 @@ export function convertChildren(children, key, props) {
|
|
|
14
14
|
for (var i = 0; i < children.length; i++) {
|
|
15
15
|
var child = children[i];
|
|
16
16
|
if (child.key === key) {
|
|
17
|
+
var _child$props;
|
|
17
18
|
// 属性融合
|
|
18
19
|
var propsContact = props ? _extends({}, child.props, props) : child.props;
|
|
20
|
+
// 样式融合
|
|
21
|
+
if (props !== null && props !== void 0 && props.style && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.style) {
|
|
22
|
+
propsContact.style = _extends({}, child.props.style, props.style);
|
|
23
|
+
}
|
|
19
24
|
node = /*#__PURE__*/React.cloneElement(child, propsContact);
|
|
20
25
|
break;
|
|
21
26
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.scss';
|
|
3
|
+
import { FormProps } from '@alifd/next/lib/form';
|
|
4
|
+
export type CustomFormItemType = 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'CheckboxGroup' | 'NumberPicker' | 'DatePicker' | 'Upload';
|
|
5
|
+
export interface CustomFormItemSchema {
|
|
6
|
+
field: string;
|
|
7
|
+
label?: string;
|
|
8
|
+
required?: boolean;
|
|
9
|
+
componentType?: CustomFormItemType;
|
|
10
|
+
componentProps?: Record<string, any>;
|
|
11
|
+
options?: Array<{
|
|
12
|
+
label: string;
|
|
13
|
+
value: any;
|
|
14
|
+
}>;
|
|
15
|
+
columnSpan?: number;
|
|
16
|
+
formItemProps?: Record<string, any>;
|
|
17
|
+
}
|
|
18
|
+
type GridSpacing = [number] | [number, number] | [number, number, number] | [number, number, number, number];
|
|
19
|
+
export interface CustomFormProps extends Omit<FormProps, 'onSubmit'> {
|
|
20
|
+
columns?: number;
|
|
21
|
+
spacing?: GridSpacing;
|
|
22
|
+
emptyContent?: React.ReactNode;
|
|
23
|
+
formItems?: CustomFormItemSchema[];
|
|
24
|
+
showSubmit?: boolean;
|
|
25
|
+
submitText?: string;
|
|
26
|
+
submitValidate?: boolean;
|
|
27
|
+
submitDataSource?: any;
|
|
28
|
+
submitButtonProps?: Record<string, any>;
|
|
29
|
+
showReset?: boolean;
|
|
30
|
+
resetText?: string;
|
|
31
|
+
resetButtonProps?: Record<string, any>;
|
|
32
|
+
onSubmit?: (values: any, errors: any, field: any) => void;
|
|
33
|
+
onSubmitFailed?: (values: any, errors: any, field: any) => void;
|
|
34
|
+
children?: React.ReactNode;
|
|
35
|
+
}
|
|
36
|
+
declare const CustomForm: React.FC<CustomFormProps>;
|
|
37
|
+
export default CustomForm;
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports["default"] = void 0;
|
|
6
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
7
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
|
+
var _upload = _interopRequireDefault(require("@alifd/next/lib/upload"));
|
|
9
|
+
var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
|
|
10
|
+
var _datePicker = _interopRequireDefault(require("@alifd/next/lib/date-picker"));
|
|
11
|
+
var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
|
|
12
|
+
var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
|
|
13
|
+
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
|
|
14
|
+
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
|
|
15
|
+
var _responsiveGrid = _interopRequireDefault(require("@alifd/next/lib/responsive-grid"));
|
|
16
|
+
var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
|
|
17
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
18
|
+
require("./index.scss");
|
|
19
|
+
var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
|
|
20
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
|
+
var NextFormAny = _form["default"];
|
|
22
|
+
var ResponsiveGridAny = _responsiveGrid["default"];
|
|
23
|
+
var ResponsiveGridCell = _responsiveGrid["default"].Cell;
|
|
24
|
+
var FormItemAny = _form["default"].Item;
|
|
25
|
+
var InputAny = _input["default"];
|
|
26
|
+
var TextAreaAny = _input["default"].TextArea;
|
|
27
|
+
var SelectAny = _select["default"];
|
|
28
|
+
var RadioGroupAny = _radio["default"].Group;
|
|
29
|
+
var CheckboxGroupAny = _checkbox["default"].Group;
|
|
30
|
+
var DatePickerAny = _datePicker["default"];
|
|
31
|
+
var NumberPickerAny = _numberPicker["default"];
|
|
32
|
+
var UploadAny = _upload["default"];
|
|
33
|
+
var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values, errors, field) {
|
|
34
|
+
if (!submitDataSource) return;
|
|
35
|
+
if (typeof submitDataSource === 'function') {
|
|
36
|
+
submitDataSource(values, errors, field);
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.run) === 'function') {
|
|
40
|
+
submitDataSource.run(values, errors, field);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.execute) === 'function') {
|
|
44
|
+
submitDataSource.execute(values, errors, field);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.request) === 'function') {
|
|
48
|
+
submitDataSource.request(values, errors, field);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.submit) === 'function') {
|
|
52
|
+
submitDataSource.submit(values, errors, field);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
var renderFormItemComponent = function renderFormItemComponent(item) {
|
|
56
|
+
var componentProps = item.componentProps || {};
|
|
57
|
+
var dataSource = componentProps.dataSource || item.options || [];
|
|
58
|
+
switch (item.componentType) {
|
|
59
|
+
case 'TextArea':
|
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(TextAreaAny, componentProps);
|
|
61
|
+
case 'Select':
|
|
62
|
+
return /*#__PURE__*/_react["default"].createElement(SelectAny, (0, _extends2["default"])({
|
|
63
|
+
dataSource: dataSource
|
|
64
|
+
}, componentProps));
|
|
65
|
+
case 'RadioGroup':
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(RadioGroupAny, (0, _extends2["default"])({
|
|
67
|
+
dataSource: dataSource
|
|
68
|
+
}, componentProps));
|
|
69
|
+
case 'CheckboxGroup':
|
|
70
|
+
return /*#__PURE__*/_react["default"].createElement(CheckboxGroupAny, (0, _extends2["default"])({
|
|
71
|
+
dataSource: dataSource
|
|
72
|
+
}, componentProps));
|
|
73
|
+
case 'NumberPicker':
|
|
74
|
+
return /*#__PURE__*/_react["default"].createElement(NumberPickerAny, componentProps);
|
|
75
|
+
case 'DatePicker':
|
|
76
|
+
return /*#__PURE__*/_react["default"].createElement(DatePickerAny, componentProps);
|
|
77
|
+
case 'Upload':
|
|
78
|
+
return /*#__PURE__*/_react["default"].createElement(UploadAny, componentProps);
|
|
79
|
+
case 'Input':
|
|
80
|
+
default:
|
|
81
|
+
return /*#__PURE__*/_react["default"].createElement(InputAny, componentProps);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
var CustomForm = function CustomForm(_ref) {
|
|
85
|
+
var _ref$columns = _ref.columns,
|
|
86
|
+
columns = _ref$columns === void 0 ? 1 : _ref$columns,
|
|
87
|
+
_ref$spacing = _ref.spacing,
|
|
88
|
+
spacing = _ref$spacing === void 0 ? [0, 16, 16, 0] : _ref$spacing,
|
|
89
|
+
_ref$emptyContent = _ref.emptyContent,
|
|
90
|
+
emptyContent = _ref$emptyContent === void 0 ? '添加表单项' : _ref$emptyContent,
|
|
91
|
+
_ref$formItems = _ref.formItems,
|
|
92
|
+
formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
|
|
93
|
+
_ref$showSubmit = _ref.showSubmit,
|
|
94
|
+
showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
|
|
95
|
+
_ref$submitText = _ref.submitText,
|
|
96
|
+
submitText = _ref$submitText === void 0 ? '提交' : _ref$submitText,
|
|
97
|
+
_ref$submitValidate = _ref.submitValidate,
|
|
98
|
+
submitValidate = _ref$submitValidate === void 0 ? true : _ref$submitValidate,
|
|
99
|
+
submitDataSource = _ref.submitDataSource,
|
|
100
|
+
submitButtonProps = _ref.submitButtonProps,
|
|
101
|
+
_ref$showReset = _ref.showReset,
|
|
102
|
+
showReset = _ref$showReset === void 0 ? false : _ref$showReset,
|
|
103
|
+
_ref$resetText = _ref.resetText,
|
|
104
|
+
resetText = _ref$resetText === void 0 ? '重置' : _ref$resetText,
|
|
105
|
+
resetButtonProps = _ref.resetButtonProps,
|
|
106
|
+
onSubmit = _ref.onSubmit,
|
|
107
|
+
onSubmitFailed = _ref.onSubmitFailed,
|
|
108
|
+
children = _ref.children,
|
|
109
|
+
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
|
|
110
|
+
var handleSubmit = (0, _react.useCallback)(function (values, errors, field) {
|
|
111
|
+
if (errors && Object.keys(errors).length) {
|
|
112
|
+
if (onSubmitFailed) {
|
|
113
|
+
onSubmitFailed(values, errors, field);
|
|
114
|
+
}
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
if (onSubmit) {
|
|
118
|
+
onSubmit(values, errors, field);
|
|
119
|
+
}
|
|
120
|
+
runSubmitDataSource(submitDataSource, values, errors, field);
|
|
121
|
+
}, [onSubmit, onSubmitFailed, submitDataSource]);
|
|
122
|
+
var formItemNodes = formItems.map(function (item, index) {
|
|
123
|
+
var colSpan = Math.min(columns, Math.max(1, item.columnSpan || 1));
|
|
124
|
+
var formItemProps = item.formItemProps || {};
|
|
125
|
+
return /*#__PURE__*/_react["default"].createElement(ResponsiveGridCell, {
|
|
126
|
+
colSpan: colSpan,
|
|
127
|
+
key: (item.field || index) + "-form-item"
|
|
128
|
+
}, /*#__PURE__*/_react["default"].createElement(FormItemAny, (0, _extends2["default"])({
|
|
129
|
+
label: item.label,
|
|
130
|
+
name: item.field,
|
|
131
|
+
required: item.required
|
|
132
|
+
}, formItemProps), renderFormItemComponent(item)));
|
|
133
|
+
});
|
|
134
|
+
var childrenNodes = _react["default"].Children.toArray(children).map(function (child, index) {
|
|
135
|
+
if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === ResponsiveGridCell) {
|
|
136
|
+
return child;
|
|
137
|
+
}
|
|
138
|
+
return /*#__PURE__*/_react["default"].createElement(ResponsiveGridCell, {
|
|
139
|
+
colSpan: 1,
|
|
140
|
+
key: "custom-form-child-" + index
|
|
141
|
+
}, child);
|
|
142
|
+
});
|
|
143
|
+
var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
|
|
144
|
+
return /*#__PURE__*/_react["default"].createElement(NextFormAny, (0, _extends2["default"])({
|
|
145
|
+
className: "custom-form"
|
|
146
|
+
}, otherProps), hasContent ? /*#__PURE__*/_react["default"].createElement(ResponsiveGridAny, {
|
|
147
|
+
className: "custom-form__grid",
|
|
148
|
+
gap: spacing,
|
|
149
|
+
columns: columns
|
|
150
|
+
}, formItemNodes, childrenNodes) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
151
|
+
className: "custom-form__empty"
|
|
152
|
+
}, emptyContent), showSubmit || showReset ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
153
|
+
className: "custom-form__actions"
|
|
154
|
+
}, showReset ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Reset, (0, _extends2["default"])({
|
|
155
|
+
className: "custom-form__reset"
|
|
156
|
+
}, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Submit, (0, _extends2["default"])({
|
|
157
|
+
className: "custom-form__submit",
|
|
158
|
+
type: "primary",
|
|
159
|
+
validate: submitValidate,
|
|
160
|
+
onClick: handleSubmit
|
|
161
|
+
}, submitButtonProps), submitText) : null) : null);
|
|
162
|
+
};
|
|
163
|
+
CustomForm.displayName = 'CustomForm';
|
|
164
|
+
var _default = exports["default"] = CustomForm;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.custom-form {
|
|
2
|
+
background-color: #fafafa;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.custom-form__grid {
|
|
6
|
+
width: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.custom-form__empty {
|
|
10
|
+
color: #999;
|
|
11
|
+
padding: 12px 0;
|
|
12
|
+
text-align: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.custom-form__actions {
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
gap: 12px;
|
|
19
|
+
padding: 12px 0 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.custom-form__submit,
|
|
23
|
+
.custom-form__reset {
|
|
24
|
+
min-width: 120px;
|
|
25
|
+
}
|
|
@@ -43,8 +43,8 @@ var TeletextListItem = function TeletextListItem(_ref) {
|
|
|
43
43
|
_ref$textImgGap = _ref.textImgGap,
|
|
44
44
|
textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
|
|
45
45
|
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
|
|
46
|
-
//
|
|
47
|
-
var resultImage = image
|
|
46
|
+
// 处理图片地址,兼容字符串和数组
|
|
47
|
+
var resultImage = Array.isArray(image) ? image.length > 0 ? image[0] : '' : typeof image === 'string' ? image : '';
|
|
48
48
|
var _otherProps = otherProps || {};
|
|
49
49
|
var tagColorArray = ['orange', 'green'];
|
|
50
50
|
var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
|
|
@@ -215,7 +215,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
|
|
|
215
215
|
src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
|
|
216
216
|
alt: ""
|
|
217
217
|
}), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? (0, _childrenNodeHandle.convertChildren)(children, 'image', {
|
|
218
|
-
|
|
218
|
+
imgSrc: resultImage,
|
|
219
219
|
className: 'teletext-list__panel__item_image'
|
|
220
220
|
}) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
|
|
221
221
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -78,6 +78,7 @@ var TeletextList = function TeletextList(_ref) {
|
|
|
78
78
|
};
|
|
79
79
|
var getDataList = function getDataList() {
|
|
80
80
|
if (!dataList) return [];
|
|
81
|
+
console.log('dataList2', dataList);
|
|
81
82
|
return Array.isArray(dataList) ? dataList : [dataList];
|
|
82
83
|
};
|
|
83
84
|
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
|
@@ -107,7 +108,7 @@ var TeletextList = function TeletextList(_ref) {
|
|
|
107
108
|
style: getListStyle()
|
|
108
109
|
}, dataList ? getDataList().map(function (item, index) {
|
|
109
110
|
return /*#__PURE__*/_react["default"].createElement(_teletextListItem["default"], (0, _extends2["default"])({
|
|
110
|
-
key: index,
|
|
111
|
+
key: item.id || index,
|
|
111
112
|
onClick: onClick,
|
|
112
113
|
imagePlacement: imagePlacement,
|
|
113
114
|
style: itemRowAlign === 'row' ? {
|
package/lib/index.d.ts
CHANGED
|
@@ -79,5 +79,7 @@ export type { CollapseSelectorProps } from './components/collapse-selector';
|
|
|
79
79
|
export { CollapseSelector } from './components/collapse-selector';
|
|
80
80
|
export type { CollapseSelectorItemProps } from './components/collapse-selector-item';
|
|
81
81
|
export { CollapseSelectorItem } from './components/collapse-selector-item';
|
|
82
|
+
export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './components/custom-form';
|
|
83
|
+
export { CustomForm } from './components/custom-form';
|
|
82
84
|
declare const bizCssPrefix = "bizpack";
|
|
83
85
|
export { bizCssPrefix };
|
package/lib/index.js
CHANGED
|
@@ -45,9 +45,10 @@ var _exportNames = {
|
|
|
45
45
|
Rating: true,
|
|
46
46
|
CollapseSelector: true,
|
|
47
47
|
CollapseSelectorItem: true,
|
|
48
|
+
CustomForm: true,
|
|
48
49
|
bizCssPrefix: true
|
|
49
50
|
};
|
|
50
|
-
exports.bizCssPrefix = exports.UserCard = exports.Title2 = exports.Title1 = exports.TextDescriptionDetailList = exports.TeletextList = exports.TagC = exports.TabMessage = exports.TabContainerItem = exports.TabContainer = exports.Switch = exports.Swiper = exports.StreamList = exports.ShoppingCart = exports.SearchHistoryList = exports.SearchBar = exports.RichText = exports.ReviewList = exports.Rating = exports.Profile = exports.Position = exports.NoticeBar = exports.Navigation = exports.MessageList = exports.MenuList = exports.MemberCard = exports.IntegralTask = exports.Input = exports.Image = exports.GridNav = exports.GoodsCardListCommon = exports.GoodsCardList = exports.DCSlider = exports.CustomSelect = exports.CustomRadioGroupItem = exports.CustomRadioGroup = exports.CustomDrawer = exports.CollapseSelectorItem = exports.CollapseSelector = exports.Collapse = exports.Button2 = exports.BreadCrumb = exports.AddressList = void 0;
|
|
51
|
+
exports.bizCssPrefix = exports.UserCard = exports.Title2 = exports.Title1 = exports.TextDescriptionDetailList = exports.TeletextList = exports.TagC = exports.TabMessage = exports.TabContainerItem = exports.TabContainer = exports.Switch = exports.Swiper = exports.StreamList = exports.ShoppingCart = exports.SearchHistoryList = exports.SearchBar = exports.RichText = exports.ReviewList = exports.Rating = exports.Profile = exports.Position = exports.NoticeBar = exports.Navigation = exports.MessageList = exports.MenuList = exports.MemberCard = exports.IntegralTask = exports.Input = exports.Image = exports.GridNav = exports.GoodsCardListCommon = exports.GoodsCardList = exports.DCSlider = exports.CustomSelect = exports.CustomRadioGroupItem = exports.CustomRadioGroup = exports.CustomForm = exports.CustomDrawer = exports.CollapseSelectorItem = exports.CollapseSelector = exports.Collapse = exports.Button2 = exports.BreadCrumb = exports.AddressList = void 0;
|
|
51
52
|
var _swiper = _interopRequireDefault(require("./components/swiper"));
|
|
52
53
|
exports.Swiper = _swiper["default"];
|
|
53
54
|
var _dcSlider = _interopRequireDefault(require("./components/dc-slider"));
|
|
@@ -136,6 +137,8 @@ var _collapseSelector = require("./components/collapse-selector");
|
|
|
136
137
|
exports.CollapseSelector = _collapseSelector.CollapseSelector;
|
|
137
138
|
var _collapseSelectorItem = require("./components/collapse-selector-item");
|
|
138
139
|
exports.CollapseSelectorItem = _collapseSelectorItem.CollapseSelectorItem;
|
|
140
|
+
var _customForm = require("./components/custom-form");
|
|
141
|
+
exports.CustomForm = _customForm.CustomForm;
|
|
139
142
|
// 轮播图
|
|
140
143
|
|
|
141
144
|
// 轮播图2号
|
|
@@ -222,4 +225,6 @@ exports.CollapseSelectorItem = _collapseSelectorItem.CollapseSelectorItem;
|
|
|
222
225
|
|
|
223
226
|
// 折叠面板选择器2子项
|
|
224
227
|
|
|
228
|
+
// 自定义表单
|
|
229
|
+
|
|
225
230
|
var bizCssPrefix = exports.bizCssPrefix = 'bizpack';
|