@teamias/rex-design 0.0.19 → 0.0.21
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/components/base-descriptions/base-descriptions.d.ts +28 -0
- package/dist/components/base-descriptions/base-descriptions.js +58 -0
- package/dist/components/base-descriptions/demo/Basic.d.ts +2 -0
- package/dist/components/base-descriptions/demo/Basic.js +25 -0
- package/dist/components/base-descriptions/demo/BasicDataCell.d.ts +2 -0
- package/dist/components/base-descriptions/demo/BasicDataCell.js +121 -0
- package/dist/components/base-descriptions/index.d.ts +1 -0
- package/dist/components/base-descriptions/index.js +1 -0
- package/dist/components/base-table/base-table.d.ts +6 -2
- package/dist/components/base-table/base-table.js +8 -1
- package/dist/components/base-table/demo/DynamicData.d.ts +2 -0
- package/dist/components/base-table/demo/DynamicData.js +67 -0
- package/dist/components/data-cell/demo/DynamicData.d.ts +2 -0
- package/dist/components/data-cell/demo/DynamicData.js +80 -0
- package/dist/components/data-cell/index.d.ts +1 -0
- package/dist/components/data-cell/index.js +2 -1
- package/dist/components/data-cell/types.d.ts +6 -0
- package/dist/components/data-cell/utils/index.d.ts +3 -0
- package/dist/components/data-cell/utils/index.js +68 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Descriptions, GetProps } from 'antd';
|
|
2
|
+
import { FC } from 'react';
|
|
3
|
+
import { DataCell } from '../data-cell';
|
|
4
|
+
export declare const BaseDescriptions: FC<IBaseDescriptionsProps>;
|
|
5
|
+
type TDataCellItem = GetProps<typeof DataCell>['items'][number];
|
|
6
|
+
/** 允许自定义参数 */
|
|
7
|
+
type TDataCellItemExtend = TDataCellItem & Record<string, any>;
|
|
8
|
+
export interface IBaseDescriptionsProps extends Omit<GetProps<typeof Descriptions>, 'items'> {
|
|
9
|
+
/** 主要渲染数据 */
|
|
10
|
+
items?: Array<{
|
|
11
|
+
label: React.ReactNode;
|
|
12
|
+
span?: number;
|
|
13
|
+
children?: React.ReactNode | Array<TDataCellItemExtend[]>;
|
|
14
|
+
}>;
|
|
15
|
+
/**
|
|
16
|
+
* - 使用 DataCell 组件渲染单元格, 需要注意数据结构
|
|
17
|
+
* - 默认 true
|
|
18
|
+
*/
|
|
19
|
+
useDataCellRender?: boolean;
|
|
20
|
+
/** dataCell 的点击事件 */
|
|
21
|
+
onDataCellClick?: (data: {
|
|
22
|
+
item: TDataCellItemExtend[];
|
|
23
|
+
cellItem: TDataCellItemExtend;
|
|
24
|
+
subItem: TDataCellItemExtend[number];
|
|
25
|
+
index: number;
|
|
26
|
+
}) => void;
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["items", "useDataCellRender", "onDataCellClick"];
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
|
+
import { Descriptions } from 'antd';
|
|
11
|
+
import { DataCell } from "../data-cell";
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
export var BaseDescriptions = function BaseDescriptions(_ref) {
|
|
14
|
+
var items = _ref.items,
|
|
15
|
+
_ref$useDataCellRende = _ref.useDataCellRender,
|
|
16
|
+
useDataCellRender = _ref$useDataCellRende === void 0 ? true : _ref$useDataCellRende,
|
|
17
|
+
onDataCellClick = _ref.onDataCellClick,
|
|
18
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
return /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
|
|
20
|
+
size: "small"
|
|
21
|
+
}, otherProps), {}, {
|
|
22
|
+
items: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
23
|
+
try {
|
|
24
|
+
var children = useDataCellRender ? item.children.map(function (topItem, topIndex) {
|
|
25
|
+
return /*#__PURE__*/_jsx(DataCell, {
|
|
26
|
+
items: topItem,
|
|
27
|
+
onClick: function onClick(cellItem, subItem) {
|
|
28
|
+
// console.log(cellItem, subItem);
|
|
29
|
+
onDataCellClick === null || onDataCellClick === void 0 || onDataCellClick({
|
|
30
|
+
item: topItem,
|
|
31
|
+
cellItem: cellItem,
|
|
32
|
+
subItem: subItem,
|
|
33
|
+
index: index
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
}, topIndex);
|
|
37
|
+
}) : item.children || '';
|
|
38
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
39
|
+
key: "".concat(index),
|
|
40
|
+
children: children
|
|
41
|
+
});
|
|
42
|
+
} catch (error) {
|
|
43
|
+
console.error('BaseDescriptions Error:', error, item, index);
|
|
44
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
45
|
+
key: "".concat(index),
|
|
46
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
47
|
+
style: {
|
|
48
|
+
color: 'red'
|
|
49
|
+
},
|
|
50
|
+
children: "\u6570\u636E\u51FA\u73B0\u95EE\u9898,\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u8F93\u51FA"
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
/** 允许自定义参数 */
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { BaseDescriptions } from "../base-descriptions";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export default (function () {
|
|
4
|
+
return /*#__PURE__*/_jsx(BaseDescriptions, {
|
|
5
|
+
bordered: true,
|
|
6
|
+
useDataCellRender: false,
|
|
7
|
+
items: [{
|
|
8
|
+
label: 'UserName',
|
|
9
|
+
children: 'Zhou Maomao'
|
|
10
|
+
}, {
|
|
11
|
+
label: 'Telephone',
|
|
12
|
+
children: '1810000000'
|
|
13
|
+
}, {
|
|
14
|
+
label: 'Live',
|
|
15
|
+
children: 'Hangzhou, Zhejiang'
|
|
16
|
+
}, {
|
|
17
|
+
label: 'Address',
|
|
18
|
+
span: 2,
|
|
19
|
+
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China'
|
|
20
|
+
}, {
|
|
21
|
+
label: 'Remark',
|
|
22
|
+
children: 'empty'
|
|
23
|
+
}]
|
|
24
|
+
});
|
|
25
|
+
});
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { BaseDescriptions } from "../base-descriptions";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export default (function () {
|
|
4
|
+
return /*#__PURE__*/_jsx(BaseDescriptions, {
|
|
5
|
+
bordered: true,
|
|
6
|
+
items: [{
|
|
7
|
+
label: 'Address',
|
|
8
|
+
span: 2,
|
|
9
|
+
children: [[{
|
|
10
|
+
type: 'group-v2',
|
|
11
|
+
props: {
|
|
12
|
+
label: 'label',
|
|
13
|
+
// labelStyle: {},
|
|
14
|
+
// itemsGap: 2,
|
|
15
|
+
// itemsStyle: {},
|
|
16
|
+
// itemsSeparator: '/',
|
|
17
|
+
// itemsDirection: 'row',
|
|
18
|
+
items: [{
|
|
19
|
+
type: 'text',
|
|
20
|
+
value: 'qweqweqweqwe',
|
|
21
|
+
action: 'url',
|
|
22
|
+
url: 'http://baidu.com'
|
|
23
|
+
}, {
|
|
24
|
+
type: 'icon',
|
|
25
|
+
iconsType: 'iconify',
|
|
26
|
+
name: 'svg-spinners:ring-resize',
|
|
27
|
+
size: 12,
|
|
28
|
+
action: 'url',
|
|
29
|
+
url: 'http://baidu.com'
|
|
30
|
+
}, {
|
|
31
|
+
type: 'text',
|
|
32
|
+
value: 'qweqweqweqwe',
|
|
33
|
+
copyable: true,
|
|
34
|
+
tooltip: true,
|
|
35
|
+
style: {
|
|
36
|
+
color: 'red'
|
|
37
|
+
}
|
|
38
|
+
}, {
|
|
39
|
+
type: 'tag',
|
|
40
|
+
value: '33123',
|
|
41
|
+
color: 'red'
|
|
42
|
+
}, {
|
|
43
|
+
type: 'img',
|
|
44
|
+
src: 'http://qweqe'
|
|
45
|
+
}]
|
|
46
|
+
}
|
|
47
|
+
}, {
|
|
48
|
+
type: 'group-v2',
|
|
49
|
+
props: {
|
|
50
|
+
items: [{
|
|
51
|
+
type: 'img',
|
|
52
|
+
src: 'http://qweqe'
|
|
53
|
+
}, {
|
|
54
|
+
type: 'group-v2',
|
|
55
|
+
props: {
|
|
56
|
+
itemsDirection: 'column',
|
|
57
|
+
items: [{
|
|
58
|
+
type: 'text',
|
|
59
|
+
value: 'qweqweqweqwe',
|
|
60
|
+
action: 'url',
|
|
61
|
+
url: 'http://baidu.com',
|
|
62
|
+
ellipsis: 1,
|
|
63
|
+
copyable: true
|
|
64
|
+
}, {
|
|
65
|
+
type: 'text',
|
|
66
|
+
value: 'qweqweqweqwe2',
|
|
67
|
+
ellipsis: 1,
|
|
68
|
+
copyable: '自定义复制'
|
|
69
|
+
}, {
|
|
70
|
+
type: 'text',
|
|
71
|
+
value: 'qweqweqweqwe3',
|
|
72
|
+
tooltip: '自定义提示'
|
|
73
|
+
}]
|
|
74
|
+
}
|
|
75
|
+
}]
|
|
76
|
+
}
|
|
77
|
+
}, {
|
|
78
|
+
type: 'group-v2',
|
|
79
|
+
props: {
|
|
80
|
+
items: [{
|
|
81
|
+
type: 'img',
|
|
82
|
+
src: 'http://qweqe'
|
|
83
|
+
}, {
|
|
84
|
+
type: 'group-v2',
|
|
85
|
+
props: {
|
|
86
|
+
itemsDirection: 'column',
|
|
87
|
+
items: [{
|
|
88
|
+
type: 'group-v2',
|
|
89
|
+
props: {
|
|
90
|
+
itemsDirection: 'column',
|
|
91
|
+
label: 'label',
|
|
92
|
+
items: [{
|
|
93
|
+
type: 'text',
|
|
94
|
+
value: 'qweqweqweqwe'
|
|
95
|
+
}]
|
|
96
|
+
}
|
|
97
|
+
}, {
|
|
98
|
+
type: 'group-v2',
|
|
99
|
+
props: {
|
|
100
|
+
itemsDirection: 'column',
|
|
101
|
+
label: 'label',
|
|
102
|
+
items: [{
|
|
103
|
+
type: 'text',
|
|
104
|
+
value: 'qweqweqweqwe2',
|
|
105
|
+
action: 'custom'
|
|
106
|
+
}]
|
|
107
|
+
}
|
|
108
|
+
}]
|
|
109
|
+
}
|
|
110
|
+
}]
|
|
111
|
+
}
|
|
112
|
+
}]]
|
|
113
|
+
}, {
|
|
114
|
+
label: 'Remark',
|
|
115
|
+
children: 'empty'
|
|
116
|
+
}],
|
|
117
|
+
onDataCellClick: function onDataCellClick(data) {
|
|
118
|
+
console.log(data);
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './base-descriptions';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./base-descriptions";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { GetProps, Table } from 'antd';
|
|
3
|
-
import { IDataCellItem, TGroupV2 } from '../data-cell
|
|
4
|
-
export declare const BaseTable: <T extends object = object>({ useDataCellRender, fields: outFields, fieldsConfig, fieldProps: outFieldProps, requestFields, requestFieldsUrl, requestFieldsParams, fieldPropsFn, indexColumn, extraColumns, onDataCellClick, onDataCellClickV2, scroll, rootClassName, customEmptyText, headerStyle: topHeaderStyle, ...otherProps }: IBaseTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
import { IDataCellItem, TDataCellConfig, TGroupV2 } from '../data-cell';
|
|
4
|
+
export declare const BaseTable: <T extends object = object>({ useDataCellRender, fields: outFields, fieldsConfig, fieldProps: outFieldProps, requestFields, requestFieldsUrl, requestFieldsParams, fieldPropsFn, indexColumn, extraColumns, onDataCellClick, onDataCellClickV2, scroll, rootClassName, customEmptyText, headerStyle: topHeaderStyle, useDataCellConfig, dataCellConfig, dataSource, ...otherProps }: IBaseTableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
/** 组件props */
|
|
6
6
|
export interface IBaseTableProps<T extends object = object> extends Omit<TRawTableProps<T>, 'size' | 'bordered' | 'tableLayout' | 'scroll'> {
|
|
7
7
|
/** @deprecated 使用 fieldsConfig */
|
|
@@ -29,6 +29,10 @@ export interface IBaseTableProps<T extends object = object> extends Omit<TRawTab
|
|
|
29
29
|
* @default true
|
|
30
30
|
*/
|
|
31
31
|
useDataCellRender?: boolean;
|
|
32
|
+
/** 是否使用 dataCell 配置,进行渲染 */
|
|
33
|
+
useDataCellConfig?: boolean;
|
|
34
|
+
/** dataCell 组件配置项, 通过这种方式来配置单元格内容,简化bff层的逻辑 */
|
|
35
|
+
dataCellConfig?: TDataCellConfig;
|
|
32
36
|
/** dataCell组件中的点击回调 */
|
|
33
37
|
onDataCellClick?: (item: IDataCellItem, dataIndex: string, record: T, index: number) => void;
|
|
34
38
|
onDataCellClickV2?: (data: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["useDataCellRender", "fields", "fieldsConfig", "fieldProps", "requestFields", "requestFieldsUrl", "requestFieldsParams", "fieldPropsFn", "indexColumn", "extraColumns", "onDataCellClick", "onDataCellClickV2", "scroll", "rootClassName", "customEmptyText", "headerStyle"];
|
|
1
|
+
var _excluded = ["useDataCellRender", "fields", "fieldsConfig", "fieldProps", "requestFields", "requestFieldsUrl", "requestFieldsParams", "fieldPropsFn", "indexColumn", "extraColumns", "onDataCellClick", "onDataCellClickV2", "scroll", "rootClassName", "customEmptyText", "headerStyle", "useDataCellConfig", "dataCellConfig", "dataSource"];
|
|
2
2
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -12,6 +12,7 @@ import { useDebounceEffect } from 'ahooks';
|
|
|
12
12
|
import { ConfigProvider, Empty, Skeleton, Table } from 'antd';
|
|
13
13
|
import classNames from 'classnames';
|
|
14
14
|
import { useMemo } from 'react';
|
|
15
|
+
import { dataToDataCellData } from "../data-cell";
|
|
15
16
|
import { DataCell } from "../data-cell/data-cell";
|
|
16
17
|
import { BaseTableRow } from "./components/BaseTableRow";
|
|
17
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -35,6 +36,10 @@ export var BaseTable = function BaseTable(_ref) {
|
|
|
35
36
|
rootClassName = _ref.rootClassName,
|
|
36
37
|
customEmptyText = _ref.customEmptyText,
|
|
37
38
|
topHeaderStyle = _ref.headerStyle,
|
|
39
|
+
useDataCellConfig = _ref.useDataCellConfig,
|
|
40
|
+
_ref$dataCellConfig = _ref.dataCellConfig,
|
|
41
|
+
dataCellConfig = _ref$dataCellConfig === void 0 ? [] : _ref$dataCellConfig,
|
|
42
|
+
dataSource = _ref.dataSource,
|
|
38
43
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
39
44
|
var responseConfig = useRequestFieldsConfig();
|
|
40
45
|
var _useRexProConfigProvi = useRexProConfigProvider(),
|
|
@@ -60,6 +65,7 @@ export var BaseTable = function BaseTable(_ref) {
|
|
|
60
65
|
}),
|
|
61
66
|
loading = _useRequestFields.loading,
|
|
62
67
|
fields = _useRequestFields.fields;
|
|
68
|
+
// const newDataSrouce = useMemo(() => useDataCellConfig ? dataToDataCellData(dataSource as [], dataCellConfig) as [] : dataSource, [])
|
|
63
69
|
|
|
64
70
|
/** 表格点击事件 */
|
|
65
71
|
var cellClick = function cellClick(data) {
|
|
@@ -272,6 +278,7 @@ export var BaseTable = function BaseTable(_ref) {
|
|
|
272
278
|
})),
|
|
273
279
|
rowKey: "key"
|
|
274
280
|
}, otherProps), {}, {
|
|
281
|
+
dataSource: useDataCellConfig ? dataToDataCellData(dataSource, dataCellConfig) : dataSource,
|
|
275
282
|
rootClassName: classNames(state.tableKey, rootClassName),
|
|
276
283
|
onRow: function onRow() {
|
|
277
284
|
return {
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { BaseTable } from "../base-table";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export default (function () {
|
|
4
|
+
var config = [{
|
|
5
|
+
field: 'goods_image',
|
|
6
|
+
items: [{
|
|
7
|
+
type: 'group-v2',
|
|
8
|
+
props: {
|
|
9
|
+
items: [{
|
|
10
|
+
type: 'text',
|
|
11
|
+
action: 'default',
|
|
12
|
+
value: '{{ dqewe }}'
|
|
13
|
+
}]
|
|
14
|
+
},
|
|
15
|
+
extra: {}
|
|
16
|
+
}],
|
|
17
|
+
key: '1763099807878ve0lbd1'
|
|
18
|
+
}, {
|
|
19
|
+
field: 'sku_size',
|
|
20
|
+
items: [{
|
|
21
|
+
type: 'group-v2',
|
|
22
|
+
props: {
|
|
23
|
+
items: [{
|
|
24
|
+
type: 'text',
|
|
25
|
+
action: 'default',
|
|
26
|
+
value: '{{ qweqwe }}'
|
|
27
|
+
}, {
|
|
28
|
+
type: 'text',
|
|
29
|
+
action: 'default',
|
|
30
|
+
value: '{{ eeeeeeqw }}'
|
|
31
|
+
}, {
|
|
32
|
+
type: 'text',
|
|
33
|
+
action: 'default',
|
|
34
|
+
value: 'eeeeeeqw'
|
|
35
|
+
}],
|
|
36
|
+
itemsDirection: 'row',
|
|
37
|
+
itemsGap: 4,
|
|
38
|
+
itemsSeparator: '/',
|
|
39
|
+
label: 'weqw'
|
|
40
|
+
},
|
|
41
|
+
extra: {}
|
|
42
|
+
}],
|
|
43
|
+
key: '1763099807878dft337k'
|
|
44
|
+
}];
|
|
45
|
+
var data = [{
|
|
46
|
+
qweqwe: 1,
|
|
47
|
+
dqewe: '图片1',
|
|
48
|
+
eeeeeeqw: 'false'
|
|
49
|
+
}, {
|
|
50
|
+
qweqwe: 2,
|
|
51
|
+
dqewe: '图片2',
|
|
52
|
+
eeeeeeqw: 'true'
|
|
53
|
+
}];
|
|
54
|
+
return /*#__PURE__*/_jsx(BaseTable, {
|
|
55
|
+
fieldsConfig: [{
|
|
56
|
+
title: 'sku_size',
|
|
57
|
+
dataIndex: 'sku_size'
|
|
58
|
+
}, {
|
|
59
|
+
title: 'goods_image',
|
|
60
|
+
dataIndex: 'goods_image'
|
|
61
|
+
}],
|
|
62
|
+
useDataCellRender: true,
|
|
63
|
+
useDataCellConfig: true,
|
|
64
|
+
dataCellConfig: config,
|
|
65
|
+
dataSource: data
|
|
66
|
+
});
|
|
67
|
+
});
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { DataCell } from "../data-cell";
|
|
2
|
+
import { dataToDataCellData } from "../utils";
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
export default (function () {
|
|
7
|
+
var _dataSource$, _dataSource$2, _dataSource$3, _dataSource$4;
|
|
8
|
+
var config = [{
|
|
9
|
+
field: 'goods_image',
|
|
10
|
+
items: [{
|
|
11
|
+
type: 'group-v2',
|
|
12
|
+
props: {
|
|
13
|
+
items: [{
|
|
14
|
+
type: 'text',
|
|
15
|
+
action: 'default',
|
|
16
|
+
value: '{{ dqewe }}'
|
|
17
|
+
}]
|
|
18
|
+
},
|
|
19
|
+
extra: {}
|
|
20
|
+
}],
|
|
21
|
+
key: '1763099807878ve0lbd1'
|
|
22
|
+
}, {
|
|
23
|
+
field: 'sku_size',
|
|
24
|
+
items: [{
|
|
25
|
+
type: 'group-v2',
|
|
26
|
+
props: {
|
|
27
|
+
items: [{
|
|
28
|
+
type: 'text',
|
|
29
|
+
action: 'default',
|
|
30
|
+
value: '{{ qweqwe }}'
|
|
31
|
+
}, {
|
|
32
|
+
type: 'text',
|
|
33
|
+
action: 'default',
|
|
34
|
+
value: '{{ eeeeeeqw }}'
|
|
35
|
+
}, {
|
|
36
|
+
type: 'text',
|
|
37
|
+
action: 'default',
|
|
38
|
+
value: 'eeeeeeqw'
|
|
39
|
+
}],
|
|
40
|
+
itemsDirection: 'row',
|
|
41
|
+
itemsGap: 4,
|
|
42
|
+
itemsSeparator: '/',
|
|
43
|
+
label: 'weqw'
|
|
44
|
+
},
|
|
45
|
+
extra: {}
|
|
46
|
+
}],
|
|
47
|
+
key: '1763099807878dft337k'
|
|
48
|
+
}];
|
|
49
|
+
var data = [{
|
|
50
|
+
qweqwe: 1,
|
|
51
|
+
dqewe: '图片1',
|
|
52
|
+
eeeeeeqw: 'false'
|
|
53
|
+
}, {
|
|
54
|
+
qweqwe: 2,
|
|
55
|
+
dqewe: '图片2',
|
|
56
|
+
eeeeeeqw: 'true'
|
|
57
|
+
}];
|
|
58
|
+
var dataSource = dataToDataCellData(data, config) || [];
|
|
59
|
+
// console.log(dataSource);
|
|
60
|
+
|
|
61
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
62
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
63
|
+
children: /*#__PURE__*/_jsx(DataCell, {
|
|
64
|
+
items: (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.goods_image
|
|
65
|
+
})
|
|
66
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
67
|
+
children: /*#__PURE__*/_jsx(DataCell, {
|
|
68
|
+
items: (_dataSource$2 = dataSource[0]) === null || _dataSource$2 === void 0 ? void 0 : _dataSource$2.sku_size
|
|
69
|
+
})
|
|
70
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
71
|
+
children: /*#__PURE__*/_jsx(DataCell, {
|
|
72
|
+
items: (_dataSource$3 = dataSource[1]) === null || _dataSource$3 === void 0 ? void 0 : _dataSource$3.goods_image
|
|
73
|
+
})
|
|
74
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
75
|
+
children: /*#__PURE__*/_jsx(DataCell, {
|
|
76
|
+
items: (_dataSource$4 = dataSource[1]) === null || _dataSource$4 === void 0 ? void 0 : _dataSource$4.sku_size
|
|
77
|
+
})
|
|
78
|
+
})]
|
|
79
|
+
});
|
|
80
|
+
});
|
|
@@ -190,3 +190,9 @@ export type TCellActionExtend = {
|
|
|
190
190
|
};
|
|
191
191
|
/** 支持配置的展示类型 */
|
|
192
192
|
export type TDataCellType = 'text' | 'link' | 'tag' | 'link-group' | 'img' | 'icon' | 'group' | 'group-v2';
|
|
193
|
+
/** 数据单元格配置 */
|
|
194
|
+
export type TDataCellConfig = Array<{
|
|
195
|
+
field: string;
|
|
196
|
+
key: string;
|
|
197
|
+
items: Array<TGroupV2>;
|
|
198
|
+
}>;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
import { get } from 'radash';
|
|
3
|
+
// 缓存编译后的正则表达式
|
|
4
|
+
var TEMPLATE_REGEX = /"{{\s*(.+?)\s*}}"/g;
|
|
5
|
+
|
|
6
|
+
// 缓存字符串转义函数
|
|
7
|
+
var escapeString = function escapeString(str) {
|
|
8
|
+
// 使用更高效的替换方式
|
|
9
|
+
var result = '';
|
|
10
|
+
for (var i = 0; i < str.length; i++) {
|
|
11
|
+
var char = str[i];
|
|
12
|
+
if (char === '\\') result += '\\\\';else if (char === '"') result += '\\"';else result += char;
|
|
13
|
+
}
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// 提取替换逻辑为独立函数,避免重复创建
|
|
18
|
+
var replaceTemplate = function replaceTemplate(item) {
|
|
19
|
+
return function (rawStr, matchKey) {
|
|
20
|
+
var trimmedKey = matchKey.trim();
|
|
21
|
+
var newVal = get(item, trimmedKey);
|
|
22
|
+
if (typeof newVal === 'string') {
|
|
23
|
+
return "\"".concat(escapeString(newVal), "\"");
|
|
24
|
+
} else if (typeof newVal === 'number' || typeof newVal === 'boolean') {
|
|
25
|
+
return String(newVal);
|
|
26
|
+
} else if (newVal === null || typeof newVal === 'undefined') {
|
|
27
|
+
return 'null';
|
|
28
|
+
} else if (_typeof(newVal) === 'object') {
|
|
29
|
+
return JSON.stringify(newVal);
|
|
30
|
+
}
|
|
31
|
+
return rawStr;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/** 将 普通数据 转 dataCell 数据 */
|
|
36
|
+
export var dataToDataCellData = function dataToDataCellData(oldDataSource, config) {
|
|
37
|
+
if (!Array.isArray(config) || !config.length) return oldDataSource;
|
|
38
|
+
if (!oldDataSource || !oldDataSource.length) return oldDataSource;
|
|
39
|
+
var newDataSource = [];
|
|
40
|
+
|
|
41
|
+
// 预编译配置的 JSON 字符串,避免重复 stringify
|
|
42
|
+
var preCompiledConfigs = config.map(function (cfg) {
|
|
43
|
+
return {
|
|
44
|
+
field: cfg.field,
|
|
45
|
+
items: cfg.items,
|
|
46
|
+
jsonStr: JSON.stringify(cfg.items)
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
oldDataSource.forEach(function (item) {
|
|
50
|
+
// 保留原始数据的所有字段
|
|
51
|
+
var newItem = {
|
|
52
|
+
_raw: item
|
|
53
|
+
};
|
|
54
|
+
var replacer = replaceTemplate(item);
|
|
55
|
+
preCompiledConfigs.forEach(function (config) {
|
|
56
|
+
// 重置正则表达式的 lastIndex(虽然使用了 g 标志,但 replace 会自动处理)
|
|
57
|
+
var newJson = config.jsonStr.replace(TEMPLATE_REGEX, replacer);
|
|
58
|
+
try {
|
|
59
|
+
newItem[config.field] = JSON.parse(newJson);
|
|
60
|
+
} catch (error) {
|
|
61
|
+
console.error("DataCell config parse error for key \"".concat(config.field, "\":"), error, '\nJSON:', newJson);
|
|
62
|
+
newItem[config.field] = config.items;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
newDataSource.push(newItem);
|
|
66
|
+
});
|
|
67
|
+
return newDataSource;
|
|
68
|
+
};
|
package/dist/components/index.js
CHANGED