@cloudbase/weda-ui 3.4.11 → 3.4.12
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/dist/configs/components/common/form-input-required.js +3 -3
- package/dist/configs/components/customer-service.js +3 -0
- package/dist/configs/components/dataView.js +20 -10
- package/dist/configs/components/form-checkbox.js +15 -2
- package/dist/configs/components/form-email.js +17 -2
- package/dist/configs/components/form-input.js +17 -2
- package/dist/configs/components/form-phone.js +17 -2
- package/dist/configs/components/form-radio.js +15 -2
- package/dist/configs/components/form-select-multiple.js +362 -0
- package/dist/configs/components/form-switch.js +15 -2
- package/dist/configs/components/form-text-area.js +15 -2
- package/dist/configs/components/form-url.js +17 -2
- package/dist/configs/components/form-user-tree-select.js +13 -0
- package/dist/configs/components/listView.js +32 -49
- package/dist/configs/components/table.json +1 -54
- package/dist/configs/components/wd-bubble.js +46 -8
- package/dist/configs/components/wd-button.js +3 -0
- package/dist/configs/components/wd-checkbox.js +464 -0
- package/dist/configs/components/wd-form.js +66 -10
- package/dist/configs/components/wd-input-email.js +37 -0
- package/dist/configs/components/wd-input-phone.js +43 -0
- package/dist/configs/components/wd-input-url.js +37 -0
- package/dist/configs/components/wd-input.js +94 -0
- package/dist/configs/components/wd-official-account.js +87 -0
- package/dist/configs/components/wd-radio.js +443 -0
- package/dist/configs/components/wd-switch.js +315 -0
- package/dist/configs/components/wd-table.js +8 -56
- package/dist/configs/components/wd-textarea.js +82 -0
- package/dist/configs/components/wd-tree.js +443 -0
- package/dist/configs/components/web-view.js +3 -0
- package/dist/configs/index.js +24 -1
- package/dist/configs/type-utils/type-form.js +681 -0
- package/dist/docs/common/components/json-schema-view.js +1 -1
- package/dist/docs/common/components/methods-view.js +1 -1
- package/dist/docs/common/components/properties-view.js +3 -1
- package/dist/docs/common/format.js +7 -7
- package/dist/docs/common/tableView.js +3 -1
- package/dist/enum/index.js +196 -0
- package/dist/style/index.scss +1 -1
- package/dist/web/actions/showMessage/index.js +4 -1
- package/dist/web/components/carousel/index.js +1 -1
- package/dist/web/components/customer-service/customer-service.js +19 -2
- package/dist/web/components/dataView/index.js +16 -3
- package/dist/web/components/flow/common/hooks/useCommonFlowData/flow-get.js +5 -1
- package/dist/web/components/flow/common/request.js +5 -5
- package/dist/web/components/flow/modules/operations/controls-items/flow-task-info-modal.js +90 -0
- package/dist/web/components/form/formcell/index.css +13 -1
- package/dist/web/components/form/formcell/index.js +1 -1
- package/dist/web/components/form/location/components/LocationH5/location.h5.js +1 -1
- package/dist/web/components/form/select/dropdown-select/index.js +7 -1
- package/dist/web/components/form/select/h5.js +18 -8
- package/dist/web/components/form/select/index.js +9 -9
- package/dist/web/components/form/select/region/index.js +1 -1
- package/dist/web/components/form/selectMultiple/dropdown-select/h5.js +111 -0
- package/dist/web/components/form/selectMultiple/dropdown-select/index.css +270 -0
- package/dist/web/components/form/selectMultiple/dropdown-select/index.js +206 -0
- package/dist/web/components/form/selectMultiple/dropdown-select/pc.js +115 -0
- package/dist/web/components/form/selectMultiple/dropdown-select/ui.js +113 -0
- package/dist/web/components/form/selectMultiple/h5.js +40 -0
- package/dist/web/components/form/selectMultiple/index.js +94 -0
- package/dist/web/components/form/selectMultiple/request.js +76 -0
- package/dist/web/components/form/selectMultiple/status/allEmpty.js +5 -0
- package/dist/web/components/form/selectMultiple/status/empty.js +19 -0
- package/dist/web/components/form/selectMultiple/status/index.css +63 -0
- package/dist/web/components/form/selectMultiple/status/index.js +7 -0
- package/dist/web/components/form/selectMultiple/status/loading.js +19 -0
- package/dist/web/components/form/selectMultiple/status/propsType.js +1 -0
- package/dist/web/components/form/selectMultiple/status/retry.js +19 -0
- package/dist/web/components/form/tips/index.css +9 -3
- package/dist/web/components/form/uploader/index.css +10 -0
- package/dist/web/components/form/uploader/uploader.h5.js +60 -62
- package/dist/web/components/form/uploader/uploader.pc.js +48 -41
- package/dist/web/components/form/uploaderFile/uploadFile.h5.js +8 -33
- package/dist/web/components/form/uploaderFile/uploadFile.pc.js +8 -37
- package/dist/web/components/form/userOrgSelect/common/fetch-data-service.js +76 -50
- package/dist/web/components/form/userOrgSelect/common/utils.js +24 -8
- package/dist/web/components/form/userOrgSelect/component/depart-select/depart-select-pc.js +3 -8
- package/dist/web/components/form/userOrgSelect/component/depart-select/index.js +14 -18
- package/dist/web/components/form/userOrgSelect/component/depart-select/org-modal-pc.js +20 -14
- package/dist/web/components/form/userOrgSelect/component/modal-select-h5.js +1 -1
- package/dist/web/components/form/userOrgSelect/component/org-tree.js +21 -9
- package/dist/web/components/form/userOrgSelect/component/user-select-h5/index.js +57 -10
- package/dist/web/components/form/userOrgSelect/component/user-select-pc/user-model.js +2 -7
- package/dist/web/components/form/userOrgSelect/component/user-select-pc/user-select-pc.js +6 -4
- package/dist/web/components/form/userOrgSelect/component/userOrgSelect.css +8 -2
- package/dist/web/components/form/userOrgSelect/departTreeSelect/departTreeSelect.h5.js +25 -51
- package/dist/web/components/form/userOrgSelect/hooks/use-depart-data.js +3 -3
- package/dist/web/components/form-input-hooks/index.js +39 -14
- package/dist/web/components/form-select-multiple/index.js +26 -0
- package/dist/web/components/form-user-tree-select/index.js +2 -2
- package/dist/web/components/formdetail/index.css +31 -1
- package/dist/web/components/formdetail/index.js +30 -0
- package/dist/web/components/index.js +17 -1
- package/dist/web/components/listView/index.js +20 -5
- package/dist/web/components/phone/index.js +26 -1
- package/dist/web/components/phoneCode/index.js +3 -1
- package/dist/web/components/richText/index.css +70 -67
- package/dist/web/components/richText/index.js +311 -251
- package/dist/web/components/richText/richtext.module.css +1 -0
- package/dist/web/components/richTextView/index.css +39 -0
- package/dist/web/components/richTextView/index.js +1 -1
- package/dist/web/components/share/index.js +26 -1
- package/dist/web/components/wd-checkbox/checkbox.js +34 -0
- package/dist/web/components/wd-checkbox/index.js +3 -0
- package/dist/web/components/wd-checkbox-list/checkboxList.js +140 -0
- package/dist/web/components/wd-checkbox-list/index.js +3 -0
- package/dist/web/components/wd-form/index.js +25 -12
- package/dist/web/components/wd-form/wd-form.js +42 -0
- package/dist/web/components/wd-form-cell/index.js +3 -0
- package/dist/web/components/wd-form-cell/wd-form-cell.js +42 -0
- package/dist/web/components/wd-form-item/index.js +4 -0
- package/dist/web/components/wd-form-item/wd-form-item.js +55 -0
- package/dist/web/components/wd-form-item/wd-input-group.js +24 -0
- package/dist/web/components/wd-input/index.js +3 -0
- package/dist/web/components/wd-input/wd-input.js +155 -0
- package/dist/web/components/wd-input-email/index.js +3 -0
- package/dist/web/components/wd-input-email/wd-input-email.js +13 -0
- package/dist/web/components/wd-input-group/index.js +3 -0
- package/dist/web/components/wd-input-group/wd-input-group.js +10 -0
- package/dist/web/components/wd-input-phone/index.js +3 -0
- package/dist/web/components/wd-input-phone/wd-input-phone.js +14 -0
- package/dist/web/components/wd-input-url/index.js +3 -0
- package/dist/web/components/wd-input-url/wd-input-url.js +13 -0
- package/dist/web/components/wd-input-wrap/index.js +3 -0
- package/dist/web/components/wd-input-wrap/wd-input-wrap.js +18 -0
- package/dist/web/components/wd-official-account/index.css +29 -0
- package/dist/web/components/wd-official-account/index.js +36 -0
- package/dist/web/components/wd-radio/index.js +3 -0
- package/dist/web/components/wd-radio/wd-radio.js +30 -0
- package/dist/web/components/wd-radio-list/index.js +3 -0
- package/dist/web/components/wd-radio-list/wd-radio-list.js +104 -0
- package/dist/web/components/wd-switch/index.js +3 -0
- package/dist/web/components/wd-switch/wd-switch.js +52 -0
- package/dist/web/components/wd-table/components/FieldRender/index.js +5 -4
- package/dist/web/components/wd-table/components/Table/index.js +12 -2
- package/dist/web/components/wd-table/hooks/useQueryParams.js +4 -1
- package/dist/web/components/wd-table/utils/index.js +6 -2
- package/dist/web/components/wd-table/wd-table.js +70 -57
- package/dist/web/components/wd-textarea/index.js +3 -0
- package/dist/web/components/wd-textarea/wd-textarea.js +78 -0
- package/dist/web/components/wd-tree/index.js +3 -0
- package/dist/web/components/wd-tree/utils.js +291 -0
- package/dist/web/components/wd-tree/wd-tree.js +193 -0
- package/dist/web/utils/constant.js +16 -0
- package/dist/web/utils/datasource.js +2 -2
- package/dist/web/utils/date.js +3 -3
- package/dist/web/utils/hooks/useFormLegacy.js +111 -0
- package/dist/web/utils/tool.js +12 -2
- package/dist/web/weda-ui.css +193 -3
- package/package.json +6 -5
|
@@ -86,8 +86,8 @@ export const whereList = (whereProxy) => {
|
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
// 获取最终的查询参数
|
|
89
|
-
export const getQueryParams = ({ queryParams, wList, viewFieldsData, connectorParams, isModel, isViewTable, }) => {
|
|
90
|
-
var _a, _b;
|
|
89
|
+
export const getQueryParams = ({ queryParams, wList, viewFieldsData, connectorParams, isModel, isViewTable, columns, }) => {
|
|
90
|
+
var _a, _b, _c;
|
|
91
91
|
const _defaultPageSize = 10;
|
|
92
92
|
const _defaultPageIndex = 1;
|
|
93
93
|
const { pageIndex: pageNo, pageSize, sort } = queryParams;
|
|
@@ -125,6 +125,10 @@ export const getQueryParams = ({ queryParams, wList, viewFieldsData, connectorPa
|
|
|
125
125
|
// 运行态主动排序进行覆盖
|
|
126
126
|
if ((sort === null || sort === void 0 ? void 0 : sort.length) && sort[0].order) {
|
|
127
127
|
params.orderBy = sort[0].by;
|
|
128
|
+
// 后端根据业务字段排序
|
|
129
|
+
params.orderBy =
|
|
130
|
+
((_c = columns === null || columns === void 0 ? void 0 : columns.find((i) => params.orderBy === i.slotKey)) === null || _c === void 0 ? void 0 : _c.fieldKey) ||
|
|
131
|
+
params.orderBy;
|
|
128
132
|
params.orderType = sort[0].order;
|
|
129
133
|
}
|
|
130
134
|
const _pageSize = parseInt(`${params.pageSize}`);
|
|
@@ -118,8 +118,10 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
118
118
|
// 筛选条件
|
|
119
119
|
const wList = where;
|
|
120
120
|
// 搜索和分页参数
|
|
121
|
-
|
|
122
|
-
|
|
121
|
+
let initPageIndex = isModel ? defaultPageIndex : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo;
|
|
122
|
+
let initPageSize = isModel ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
|
|
123
|
+
initPageIndex = parseInt(initPageIndex);
|
|
124
|
+
initPageSize = parseInt(initPageSize);
|
|
123
125
|
const [queryParams, setQueryParams] = useState({
|
|
124
126
|
pageIndex: initPageIndex,
|
|
125
127
|
pageSize: initPageSize,
|
|
@@ -147,60 +149,11 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
147
149
|
const filterFieldsData = getFilterFields(filterFields, fields);
|
|
148
150
|
// 可排序字段
|
|
149
151
|
const sortColumns = getSortColumns({ fields, columnSets });
|
|
150
|
-
// 查询参数
|
|
151
|
-
const { query } = useQueryParams({
|
|
152
|
-
queryParams,
|
|
153
|
-
wList,
|
|
154
|
-
viewFieldsData,
|
|
155
|
-
connectorParams,
|
|
156
|
-
isModel,
|
|
157
|
-
isViewTable,
|
|
158
|
-
events,
|
|
159
|
-
});
|
|
160
|
-
// 查询数据
|
|
161
|
-
const { tableData, total, tableLoading, getNewList } = useTableData({
|
|
162
|
-
dataSourceAPI,
|
|
163
|
-
dbName,
|
|
164
|
-
connectorMethod,
|
|
165
|
-
query,
|
|
166
|
-
events,
|
|
167
|
-
isModel,
|
|
168
|
-
isH5,
|
|
169
|
-
isNoDataSourceBind,
|
|
170
|
-
});
|
|
171
|
-
const refreshTable = () => {
|
|
172
|
-
// 清除选中的 key
|
|
173
|
-
setSelectedKeys([]);
|
|
174
|
-
if (queryParams.pageIndex === _defaultPageIndex) {
|
|
175
|
-
getNewList();
|
|
176
|
-
}
|
|
177
|
-
else {
|
|
178
|
-
setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
|
|
182
|
-
// 表格数据
|
|
183
|
-
const mapTableData = () => {
|
|
184
|
-
if (isMock || (isInIde() && isNoDataSourceBind)) {
|
|
185
|
-
return Mock.records;
|
|
186
|
-
}
|
|
187
|
-
// 加载过程中,pc端每次查询置空,h5端仅首页置空
|
|
188
|
-
// 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
|
|
189
|
-
if ((isTableLoading && !isH5) || isNoDataSourceBind) {
|
|
190
|
-
return [];
|
|
191
|
-
}
|
|
192
|
-
if (isTableLoading &&
|
|
193
|
-
isH5 &&
|
|
194
|
-
(queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
|
|
195
|
-
return [];
|
|
196
|
-
}
|
|
197
|
-
if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
|
|
198
|
-
mapTableDataWithView(viewFieldsData, tableData);
|
|
199
|
-
}
|
|
200
|
-
return tableData;
|
|
201
|
-
};
|
|
202
|
-
const tableRecords = mapTableData();
|
|
203
152
|
// 表格 columns
|
|
153
|
+
const [resizeColumns, setColumns] = useState([]);
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
setColumns([]);
|
|
156
|
+
}, [columnSets]);
|
|
204
157
|
const columns = useMemo(() => {
|
|
205
158
|
if (isMock || (isInIde() && isNoDataSourceBind)) {
|
|
206
159
|
return Mock.columns;
|
|
@@ -208,7 +161,7 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
208
161
|
if (fieldsLoading || isNoDataSourceBind) {
|
|
209
162
|
return [];
|
|
210
163
|
}
|
|
211
|
-
|
|
164
|
+
let baseColumns = getTableColumns({
|
|
212
165
|
fields,
|
|
213
166
|
columnSets,
|
|
214
167
|
slots,
|
|
@@ -246,6 +199,11 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
246
199
|
fixed: 'left',
|
|
247
200
|
});
|
|
248
201
|
}
|
|
202
|
+
baseColumns = baseColumns.map((i) => {
|
|
203
|
+
var _a;
|
|
204
|
+
const width = (_a = resizeColumns === null || resizeColumns === void 0 ? void 0 : resizeColumns.find((j) => i.key === j.key)) === null || _a === void 0 ? void 0 : _a.width;
|
|
205
|
+
return width ? { ...i, width } : i;
|
|
206
|
+
});
|
|
249
207
|
return baseColumns;
|
|
250
208
|
}, [
|
|
251
209
|
isMock,
|
|
@@ -260,7 +218,62 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
260
218
|
enableCellCustomOption,
|
|
261
219
|
columnSelectType,
|
|
262
220
|
classPrefix,
|
|
221
|
+
resizeColumns,
|
|
263
222
|
]);
|
|
223
|
+
// 查询参数
|
|
224
|
+
const { query } = useQueryParams({
|
|
225
|
+
queryParams,
|
|
226
|
+
wList,
|
|
227
|
+
viewFieldsData,
|
|
228
|
+
connectorParams,
|
|
229
|
+
isModel,
|
|
230
|
+
isViewTable,
|
|
231
|
+
events,
|
|
232
|
+
columns,
|
|
233
|
+
});
|
|
234
|
+
// 查询数据
|
|
235
|
+
const { tableData, total, tableLoading, getNewList } = useTableData({
|
|
236
|
+
dataSourceAPI,
|
|
237
|
+
dbName,
|
|
238
|
+
connectorMethod,
|
|
239
|
+
query,
|
|
240
|
+
events,
|
|
241
|
+
isModel,
|
|
242
|
+
isH5,
|
|
243
|
+
isNoDataSourceBind,
|
|
244
|
+
});
|
|
245
|
+
const refreshTable = () => {
|
|
246
|
+
// 清除选中的 key
|
|
247
|
+
setSelectedKeys([]);
|
|
248
|
+
if (queryParams.pageIndex === _defaultPageIndex) {
|
|
249
|
+
getNewList();
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
|
|
253
|
+
}
|
|
254
|
+
};
|
|
255
|
+
const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
|
|
256
|
+
// 表格数据
|
|
257
|
+
const mapTableData = () => {
|
|
258
|
+
if (isMock || (isInIde() && isNoDataSourceBind)) {
|
|
259
|
+
return Mock.records;
|
|
260
|
+
}
|
|
261
|
+
// 加载过程中,pc端每次查询置空,h5端仅首页置空
|
|
262
|
+
// 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
|
|
263
|
+
if ((isTableLoading && !isH5) || isNoDataSourceBind) {
|
|
264
|
+
return [];
|
|
265
|
+
}
|
|
266
|
+
if (isTableLoading &&
|
|
267
|
+
isH5 &&
|
|
268
|
+
(queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
|
|
269
|
+
return [];
|
|
270
|
+
}
|
|
271
|
+
if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
|
|
272
|
+
mapTableDataWithView(viewFieldsData, tableData);
|
|
273
|
+
}
|
|
274
|
+
return tableData;
|
|
275
|
+
};
|
|
276
|
+
const tableRecords = mapTableData();
|
|
264
277
|
// 总数
|
|
265
278
|
const beforeModalDestroy = () => {
|
|
266
279
|
// 重新加载数据
|
|
@@ -421,7 +434,7 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
|
|
|
421
434
|
enableTableHeightSizeBtn ||
|
|
422
435
|
hasFilterButton) && (_jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: refreshTable, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
|
|
423
436
|
setOpenMobileFilter(true);
|
|
424
|
-
}, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: (keys, context) => {
|
|
437
|
+
}, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, setColumns: setColumns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: (keys, context) => {
|
|
425
438
|
setSelectedKeys([].concat(keys));
|
|
426
439
|
if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
|
|
427
440
|
const selectValue = columnSelectType === 'radio'
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, } from 'react';
|
|
3
|
+
import classNames from '../../utils/classnames';
|
|
4
|
+
import { useConfig } from '../../utils/config-context';
|
|
5
|
+
import { WdFormItem } from '../wd-form-item';
|
|
6
|
+
import { FORM_MAX_LENGTH } from '../../utils/constant';
|
|
7
|
+
import { useFormInputTrait } from '../form-input-hooks';
|
|
8
|
+
import { filterPropsWithOn, getUuid } from '../../utils/tool';
|
|
9
|
+
import { useSize } from '../../utils/hooks/useFormLegacy';
|
|
10
|
+
import { usePlatform } from '../../utils/platform';
|
|
11
|
+
/**
|
|
12
|
+
* 标准化:多行输入组件
|
|
13
|
+
*/
|
|
14
|
+
export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
|
|
15
|
+
const { name, placeholder = '请输入', counterVisible = true, focus = false, maxLength = FORM_MAX_LENGTH, events, block: _block, classRoot = 'textarea', label, required, } = props;
|
|
16
|
+
/** 兼容从 Form 获取属性,必须引入,自动挂载组件方法 */
|
|
17
|
+
const [innerHandle, setInnerHandle] = useState({});
|
|
18
|
+
const traitProps = { ...props, setInnerHandle, inputRef: ref };
|
|
19
|
+
const { value, onChange: onChangeForm, disabled, readOnly, validateErrorMsg, validateState, visible, layout, } = useFormInputTrait(traitProps);
|
|
20
|
+
const block = usePlatform() === 'h5' ? true : _block;
|
|
21
|
+
const { classPrefix } = useConfig();
|
|
22
|
+
const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
|
|
23
|
+
const inputId = useMemo(() => getUuid(), []);
|
|
24
|
+
const size = useSize(props);
|
|
25
|
+
const textareaRef = useRef(null);
|
|
26
|
+
const counter = typeof value === 'string' ? value.length : 0;
|
|
27
|
+
const wrapRef = useRef(null);
|
|
28
|
+
const root = `${classPrefix}-${classRoot}`;
|
|
29
|
+
const inputWrap = `${classPrefix}-form-input-wrap`;
|
|
30
|
+
const textareaWrap = `${classPrefix}-form-textarea-wrap`;
|
|
31
|
+
const cls = classNames(inputWrap, textareaWrap, `${root}-${classRoot}`, `size-width-${size}`, `size-font-${size}`, {
|
|
32
|
+
'size-width-hundred': block,
|
|
33
|
+
'is-disabled': disabled,
|
|
34
|
+
'textarea-restriction': counterVisible,
|
|
35
|
+
});
|
|
36
|
+
const countCls = `${textareaWrap}__label ${root}-${classRoot}__count-text`;
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
autoScroll();
|
|
39
|
+
}, []);
|
|
40
|
+
// 输入自动滚动
|
|
41
|
+
const autoScroll = function () {
|
|
42
|
+
if (!textareaRef.current)
|
|
43
|
+
return;
|
|
44
|
+
textareaRef.current.style.height = 'auto';
|
|
45
|
+
if (textareaRef.current.scrollHeight >= textareaRef.current.offsetHeight) {
|
|
46
|
+
textareaRef.current.style.height =
|
|
47
|
+
textareaRef.current.scrollHeight + 'px';
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
/** 内部事件 */
|
|
51
|
+
const onChange = function (e) {
|
|
52
|
+
var _a;
|
|
53
|
+
autoScroll();
|
|
54
|
+
const text = typeof e === 'string' ? e : e.target.value;
|
|
55
|
+
onChangeForm(text);
|
|
56
|
+
(_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: text }, { originEvent: e });
|
|
57
|
+
};
|
|
58
|
+
const onFocus = function (e) {
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = events.focus) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
|
|
61
|
+
};
|
|
62
|
+
const onBlur = function (e) {
|
|
63
|
+
var _a;
|
|
64
|
+
(_a = events.blur) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
|
|
65
|
+
};
|
|
66
|
+
/** widgets */
|
|
67
|
+
useImperativeHandle(ref, () => ({
|
|
68
|
+
...innerHandle,
|
|
69
|
+
name,
|
|
70
|
+
value,
|
|
71
|
+
label,
|
|
72
|
+
required,
|
|
73
|
+
visible,
|
|
74
|
+
disabled,
|
|
75
|
+
readOnly,
|
|
76
|
+
}), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
|
|
77
|
+
return (visible && (_jsx(WdFormItem, { ...props, validateErrorMsg: validateErrorMsg, validateState: validateState, readOnly: readOnly, disabled: disabled, readValue: value, classRoot: classRoot, inputId: inputId, layout: layout, children: _jsxs("div", { className: cls, ref: wrapRef, onFocus: () => wrapRef.current.classList.add('is-focused'), onBlur: () => wrapRef.current.classList.remove('is-focused'), children: [_jsx("textarea", { id: inputId, ref: textareaRef, rows: 2, placeholder: placeholder, name: name, value: value, maxLength: maxLength, autoFocus: focus, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, ...startWithOnProps }), counterVisible && (_jsxs("label", { className: countCls, children: [counter, "/", maxLength] }))] }) })));
|
|
78
|
+
});
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
/* eslint-disable max-lines */
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-magic-numbers */
|
|
3
|
+
import { deepClone } from '../../utils/tool';
|
|
4
|
+
const TREE_INFO_GOT = [
|
|
5
|
+
{ key: 'value', infoKey: 'selected', alias: 'selected' },
|
|
6
|
+
{ key: 'value', infoKey: 'selected', alias: 'selectedPositions', aim: 'pos' },
|
|
7
|
+
{ key: 'value', infoKey: 'selected', alias: 'selectedNodes', aim: 'root' },
|
|
8
|
+
{ key: 'isExpand', value: true, alias: 'expanded' },
|
|
9
|
+
{ key: 'isExpand', value: true, alias: 'expandedPositions', aim: 'pos' },
|
|
10
|
+
{ key: 'isExpand', value: true, alias: 'expandedNodes', aim: 'root' },
|
|
11
|
+
{ key: 'searched', value: 'searched' },
|
|
12
|
+
{
|
|
13
|
+
key: 'searched',
|
|
14
|
+
value: 'searched',
|
|
15
|
+
alias: 'searchedPositions',
|
|
16
|
+
aim: 'pos',
|
|
17
|
+
},
|
|
18
|
+
{ key: 'searched', value: 'searched', alias: 'searchedNodes', aim: 'root' },
|
|
19
|
+
{ key: 'checked', value: 'checked' },
|
|
20
|
+
{ key: 'checked', value: 'checked', alias: 'checkedPositions', aim: 'pos' },
|
|
21
|
+
{ key: 'checked', value: 'checked', alias: 'checkedNodes', aim: 'root' },
|
|
22
|
+
{ key: 'checked', value: 'childChecked', alias: 'childChecked' },
|
|
23
|
+
{
|
|
24
|
+
key: 'checked',
|
|
25
|
+
value: 'childChecked',
|
|
26
|
+
alias: 'childCheckedPositions',
|
|
27
|
+
aim: 'pos',
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
key: 'checked',
|
|
31
|
+
value: 'childChecked',
|
|
32
|
+
alias: 'childCheckedNodes',
|
|
33
|
+
aim: 'root',
|
|
34
|
+
},
|
|
35
|
+
];
|
|
36
|
+
/**
|
|
37
|
+
* 仅根据初始值判断当前节点的展开状态
|
|
38
|
+
* @param treeNode 当前节点
|
|
39
|
+
* @param expandType 节点展开类型
|
|
40
|
+
* @param expandCustom 自定义要展开的节点
|
|
41
|
+
* @returns
|
|
42
|
+
*/
|
|
43
|
+
const judgeExpand = (treeNode, expandType, expandCustom) => {
|
|
44
|
+
if (!expandType)
|
|
45
|
+
return treeNode.expanded || '';
|
|
46
|
+
if (expandType === 'all')
|
|
47
|
+
return 'expand';
|
|
48
|
+
if (expandType !== 'none') {
|
|
49
|
+
return (expandCustom === null || expandCustom === void 0 ? void 0 : expandCustom.includes(treeNode.value)) ? 'expand' : '';
|
|
50
|
+
}
|
|
51
|
+
return '';
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* 仅根据搜索关键字判断节点是否被搜索到
|
|
55
|
+
* @param treeNode 当前节点
|
|
56
|
+
* @param searchKey 关键字
|
|
57
|
+
* @returns
|
|
58
|
+
*/
|
|
59
|
+
const judgeSearch = (treeNode, searchKey) => {
|
|
60
|
+
var _a;
|
|
61
|
+
return searchKey && ((_a = treeNode.label) === null || _a === void 0 ? void 0 : _a.includes(searchKey)) ? 'searched' : '';
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* 仅根据初始值判断是否选中
|
|
65
|
+
* @param treeNode 当前节点
|
|
66
|
+
* @param checkedCustom 自定义选中的节点
|
|
67
|
+
* @returns
|
|
68
|
+
*/
|
|
69
|
+
const judgeCheck = (treeNode, checkedCustom) => {
|
|
70
|
+
if (!(checkedCustom === null || checkedCustom === void 0 ? void 0 : checkedCustom.length))
|
|
71
|
+
return treeNode.checked || '';
|
|
72
|
+
return checkedCustom.includes(treeNode.value) ? 'checked' : '';
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* 根据初始值获取用于组件展示的数据
|
|
76
|
+
* @param {IInitData} param0
|
|
77
|
+
* @returns
|
|
78
|
+
*/
|
|
79
|
+
const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos = '', }) => {
|
|
80
|
+
if (!Array.isArray(data))
|
|
81
|
+
return [];
|
|
82
|
+
return data
|
|
83
|
+
.filter((item) => item === null || item === void 0 ? void 0 : item.value)
|
|
84
|
+
.map((item, index) => {
|
|
85
|
+
var _a;
|
|
86
|
+
item.pos = `${pos ? `${pos}-` : ''}${index}`;
|
|
87
|
+
item.root = item.root || { ...deepClone(item), pos: item.pos };
|
|
88
|
+
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
89
|
+
item.children = initData({
|
|
90
|
+
data: item.children,
|
|
91
|
+
parent: item,
|
|
92
|
+
showIcon,
|
|
93
|
+
expendIcon,
|
|
94
|
+
foldIcon,
|
|
95
|
+
leafIcon,
|
|
96
|
+
pos: item.pos,
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
item.expendIcon = item.expendIcon || expendIcon;
|
|
100
|
+
item.foldIcon = item.foldIcon || foldIcon;
|
|
101
|
+
item.leafIcon = item.leafIcon || leafIcon;
|
|
102
|
+
item.showIcon = showIcon;
|
|
103
|
+
item.parent = parent;
|
|
104
|
+
return item;
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
/**
|
|
108
|
+
* 根据子节点的状态处理父节点的相关状态,如选中、展开
|
|
109
|
+
* @param {IGetStateOfChildrenParams} param0
|
|
110
|
+
* @returns
|
|
111
|
+
*/
|
|
112
|
+
const getStateOfChildren = ({ treeNode, key, state, }) => {
|
|
113
|
+
var _a, _b, _c;
|
|
114
|
+
const notHas = (_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.map((v) => v[key]).includes(state.notHas);
|
|
115
|
+
const has = (_b = treeNode.children) === null || _b === void 0 ? void 0 : _b.map((v) => v[key]).includes(state.has);
|
|
116
|
+
const childHas = (_c = treeNode.children) === null || _c === void 0 ? void 0 : _c.map((v) => v[key]).includes(state.childHas);
|
|
117
|
+
if (notHas && !has && !childHas) {
|
|
118
|
+
return state.notHas;
|
|
119
|
+
}
|
|
120
|
+
else if (has && !notHas && !childHas) {
|
|
121
|
+
return state.has;
|
|
122
|
+
}
|
|
123
|
+
return state.childHas;
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* 处理节点的搜索状态
|
|
127
|
+
* @param treeNode 节点
|
|
128
|
+
* @returns
|
|
129
|
+
*/
|
|
130
|
+
const getSearched = (treeNode) => getStateOfChildren({
|
|
131
|
+
treeNode,
|
|
132
|
+
key: 'searched',
|
|
133
|
+
state: {
|
|
134
|
+
notHas: '',
|
|
135
|
+
has: 'searched',
|
|
136
|
+
childHas: 'childSearched',
|
|
137
|
+
},
|
|
138
|
+
});
|
|
139
|
+
/**
|
|
140
|
+
* 处理节点的展开状态
|
|
141
|
+
* @param treeNode 节点
|
|
142
|
+
* @returns
|
|
143
|
+
*/
|
|
144
|
+
const getExpand = (treeNode) => getStateOfChildren({
|
|
145
|
+
treeNode,
|
|
146
|
+
key: 'expanded',
|
|
147
|
+
state: {
|
|
148
|
+
notHas: '',
|
|
149
|
+
has: 'expand',
|
|
150
|
+
childHas: 'childExpand',
|
|
151
|
+
},
|
|
152
|
+
});
|
|
153
|
+
/**
|
|
154
|
+
* 处理节点的选中状态
|
|
155
|
+
* @param treeNode 节点
|
|
156
|
+
* @returns
|
|
157
|
+
*/
|
|
158
|
+
const getChecked = (treeNode) => getStateOfChildren({
|
|
159
|
+
treeNode,
|
|
160
|
+
key: 'checked',
|
|
161
|
+
state: {
|
|
162
|
+
notHas: '',
|
|
163
|
+
has: 'checked',
|
|
164
|
+
childHas: 'childChecked',
|
|
165
|
+
},
|
|
166
|
+
});
|
|
167
|
+
/**
|
|
168
|
+
* 初始化节点状态
|
|
169
|
+
* @param param0
|
|
170
|
+
* @returns
|
|
171
|
+
*/
|
|
172
|
+
const initTreeState = ({ data, checkedCustom, expandType, expandCustom, searchKey = '', parentChecked = '', }) => {
|
|
173
|
+
if (!Array.isArray(data))
|
|
174
|
+
return [];
|
|
175
|
+
return data.map((item) => {
|
|
176
|
+
var _a, _b, _c;
|
|
177
|
+
const currentChecked = parentChecked || judgeCheck(item, checkedCustom);
|
|
178
|
+
const currentSearched = judgeSearch(item, searchKey);
|
|
179
|
+
const currentExpand = judgeExpand(item, expandType, expandCustom);
|
|
180
|
+
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
181
|
+
item.children = initTreeState({
|
|
182
|
+
data: item.children,
|
|
183
|
+
checkedCustom,
|
|
184
|
+
expandType,
|
|
185
|
+
expandCustom,
|
|
186
|
+
searchKey,
|
|
187
|
+
parentChecked: currentChecked === 'checked' ? 'checked' : '', // 只有父节点选中才去操作子节点选中
|
|
188
|
+
});
|
|
189
|
+
item.checked = currentChecked || getChecked(item);
|
|
190
|
+
item.searched = currentSearched || getSearched(item);
|
|
191
|
+
item.expanded = currentExpand || getExpand(item);
|
|
192
|
+
}
|
|
193
|
+
else {
|
|
194
|
+
item.checked = currentChecked || judgeCheck(item, checkedCustom);
|
|
195
|
+
item.searched = currentSearched;
|
|
196
|
+
item.expanded = item.searched ? 'expand' : '';
|
|
197
|
+
}
|
|
198
|
+
// 被搜索到的或根据输入判断需要展开的都认为要展开
|
|
199
|
+
item.isExpand =
|
|
200
|
+
!!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) &&
|
|
201
|
+
(searchKey ? !!item.searched : !!item.expanded);
|
|
202
|
+
if (item.showIcon) {
|
|
203
|
+
if ((_c = item.children) === null || _c === void 0 ? void 0 : _c.length) {
|
|
204
|
+
item.iconShow = item.isExpand ? item.expendIcon : item.foldIcon;
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
item.iconShow = item.leafIcon;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
return item;
|
|
211
|
+
});
|
|
212
|
+
};
|
|
213
|
+
/**
|
|
214
|
+
* 当某节点的选择状态变化时,处理该节点的父和子的选择状态
|
|
215
|
+
* @param treeNode
|
|
216
|
+
*/
|
|
217
|
+
const dealCheck = (treeNode) => {
|
|
218
|
+
var _a;
|
|
219
|
+
let parent = treeNode.parent;
|
|
220
|
+
const adjust = (arr, checked) => {
|
|
221
|
+
arr.forEach((item) => {
|
|
222
|
+
var _a;
|
|
223
|
+
item.checked = checked;
|
|
224
|
+
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
225
|
+
adjust(item.children, item.checked);
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
};
|
|
229
|
+
while (parent) {
|
|
230
|
+
parent.checked = getChecked(parent);
|
|
231
|
+
parent = parent.parent;
|
|
232
|
+
}
|
|
233
|
+
if ((_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
234
|
+
adjust(treeNode.children, treeNode.checked);
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
/**
|
|
238
|
+
* 查找满足要求的节点
|
|
239
|
+
* @param tree 树
|
|
240
|
+
* @param condition 需要获取的内容
|
|
241
|
+
* @returns
|
|
242
|
+
*/
|
|
243
|
+
const findNode = (params) => {
|
|
244
|
+
const { tree, info, condition } = params;
|
|
245
|
+
const list = {};
|
|
246
|
+
tree.forEach((item) => {
|
|
247
|
+
var _a;
|
|
248
|
+
let childList = {};
|
|
249
|
+
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
250
|
+
childList = findNode({ tree: item.children, info, condition });
|
|
251
|
+
}
|
|
252
|
+
condition.forEach((v) => {
|
|
253
|
+
var _a;
|
|
254
|
+
const { key, value, alias, aim, infoKey } = v;
|
|
255
|
+
const k = alias || key;
|
|
256
|
+
const aimValue = infoKey ? info[infoKey] : value;
|
|
257
|
+
if (!list[k])
|
|
258
|
+
list[k] = [];
|
|
259
|
+
if (item[key] === aimValue) {
|
|
260
|
+
list[k].push(item[aim || 'value']);
|
|
261
|
+
}
|
|
262
|
+
if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
|
|
263
|
+
list[k] = [...new Set([...list[k], ...childList[k]])];
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
});
|
|
267
|
+
return list;
|
|
268
|
+
};
|
|
269
|
+
/**
|
|
270
|
+
* 根据checkable状态获取树信息
|
|
271
|
+
* @param params
|
|
272
|
+
* @param checkable
|
|
273
|
+
* @returns
|
|
274
|
+
*/
|
|
275
|
+
const getTreeInfo = (params, checkable) => {
|
|
276
|
+
const info = findNode(params);
|
|
277
|
+
// 如果未开启多选,则将点击状态覆盖选中状态
|
|
278
|
+
if (!checkable) {
|
|
279
|
+
info.checked = info.selected;
|
|
280
|
+
info.checkedNodes = info.selectedNodes;
|
|
281
|
+
info.checkedPositions = info.selectedPositions;
|
|
282
|
+
info.childChecked = [];
|
|
283
|
+
info.childCheckedNodes = [];
|
|
284
|
+
info.childCheckedPositions = [];
|
|
285
|
+
}
|
|
286
|
+
delete info.selected;
|
|
287
|
+
delete info.selectedNodes;
|
|
288
|
+
delete info.selectedPositions;
|
|
289
|
+
return info;
|
|
290
|
+
};
|
|
291
|
+
export { TREE_INFO_GOT, initData, initTreeState, dealCheck, findNode, getTreeInfo, };
|