linkmore-design 1.1.19-beta → 1.1.19-beta.2
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/LmTable/components/Container/Container.d.ts +1 -1
- package/dist/LmTable/components/DndContainer.d.ts +3 -1
- package/dist/LmTable/components/Item/Item.d.ts +1 -1
- package/dist/LmTable/components/Item/components/Action/Action.d.ts +1 -1
- package/dist/LmTable/hooks/useDndItems.d.ts +1 -1
- package/dist/index.umd.css +56 -56
- package/dist/index.umd.js +667 -52100
- package/dist/index.umd.min.css +1 -1
- package/dist/index.umd.min.js +21 -31
- package/es/LmTable/Table.js +62 -64
- package/es/LmTable/components/Container/{Container.module.css → Container.css} +0 -0
- package/es/LmTable/components/Container/Container.d.ts +1 -1
- package/es/LmTable/components/Container/Container.js +1 -1
- package/es/LmTable/components/DndContainer.d.ts +3 -1
- package/es/LmTable/components/DndContainer.js +6 -2
- package/es/LmTable/components/Item/{Item.module.css → Item.css} +15 -15
- package/es/LmTable/components/Item/Item.d.ts +1 -1
- package/es/LmTable/components/Item/Item.js +6 -6
- package/{lib/LmTable/components/Item/components/Action/Action.module.css → es/LmTable/components/Item/components/Action/Action.css} +7 -7
- package/es/LmTable/components/Item/components/Action/Action.d.ts +1 -1
- package/es/LmTable/components/Item/components/Action/Action.js +2 -2
- package/es/LmTable/hooks/useDndItems.d.ts +1 -1
- package/es/LmTable/hooks/useDndItems.js +21 -23
- package/lib/LmTable/Table.js +62 -64
- package/lib/LmTable/components/Container/{Container.module.css → Container.css} +0 -0
- package/lib/LmTable/components/Container/Container.d.ts +1 -1
- package/lib/LmTable/components/Container/Container.js +1 -1
- package/lib/LmTable/components/DndContainer.d.ts +3 -1
- package/lib/LmTable/components/DndContainer.js +6 -2
- package/lib/LmTable/components/Item/{Item.module.css → Item.css} +15 -15
- package/lib/LmTable/components/Item/Item.d.ts +1 -1
- package/lib/LmTable/components/Item/Item.js +6 -6
- package/{es/LmTable/components/Item/components/Action/Action.module.css → lib/LmTable/components/Item/components/Action/Action.css} +7 -7
- package/lib/LmTable/components/Item/components/Action/Action.d.ts +1 -1
- package/lib/LmTable/components/Item/components/Action/Action.js +2 -2
- package/lib/LmTable/hooks/useDndItems.d.ts +1 -1
- package/lib/LmTable/hooks/useDndItems.js +21 -23
- package/package.json +1 -1
- package/dist/LmTable/demos/excelGroup.d.ts +0 -2
package/lib/LmTable/Table.js
CHANGED
|
@@ -26,7 +26,6 @@ var _IconFont = _interopRequireDefault(require("../IconFont"));
|
|
|
26
26
|
var _Empty = _interopRequireDefault(require("../Empty"));
|
|
27
27
|
var _DndContainer = _interopRequireDefault(require("./components/DndContainer"));
|
|
28
28
|
var _sheelTableCell = _interopRequireDefault(require("./components/sheelTableCell"));
|
|
29
|
-
var _tableChartsModal = _interopRequireDefault(require("./components/tableChartsModal"));
|
|
30
29
|
var _customRenderEmpty = _interopRequireDefault(require("./components/customRenderEmpty"));
|
|
31
30
|
var _util = require("./util");
|
|
32
31
|
var _resetConfig = _interopRequireDefault(require("./resetConfig"));
|
|
@@ -35,7 +34,7 @@ var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataS
|
|
|
35
34
|
var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
|
|
36
35
|
var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
|
|
37
36
|
var _index = require("./common/index");
|
|
38
|
-
var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "
|
|
37
|
+
var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "emptyProps"],
|
|
39
38
|
_excluded2 = ["className", "style"],
|
|
40
39
|
_excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
|
|
41
40
|
var Summary = _proTable.default.Summary;
|
|
@@ -105,7 +104,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
105
104
|
_props$editSheet = props.editSheet,
|
|
106
105
|
editSheet = _props$editSheet === void 0 ? false : _props$editSheet,
|
|
107
106
|
dataChange = props.dataChange,
|
|
108
|
-
|
|
107
|
+
openColGroup = props.openColGroup,
|
|
108
|
+
colGroupTitle = props.colGroupTitle,
|
|
109
|
+
openRowGroup = props.openRowGroup,
|
|
110
|
+
rowGroupTitle = props.rowGroupTitle,
|
|
109
111
|
emptyProps = props.emptyProps,
|
|
110
112
|
resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
111
113
|
var _resetProps$rowKey = resetProps.rowKey,
|
|
@@ -129,20 +131,16 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
129
131
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
130
132
|
useActiveKey = _useState2[0],
|
|
131
133
|
setActiveKey = _useState2[1]; // 行选中
|
|
132
|
-
var _useState3 = (0, _react.useState)([]),
|
|
133
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
134
|
-
useColumns = _useState4[0],
|
|
135
|
-
setColumns = _useState4[1];
|
|
136
134
|
var tableWarpRef = (0, _react.useRef)(null);
|
|
137
135
|
var dataSourceRef = (0, _react.useRef)(null);
|
|
138
136
|
var columnsRef = (0, _react.useRef)(null);
|
|
139
137
|
/** 右键的ref */
|
|
140
138
|
var contentMenuRef = (0, _react.useRef)(null);
|
|
141
139
|
/** 当前展开的列 */
|
|
142
|
-
var
|
|
143
|
-
|
|
144
|
-
expandedRowKeys =
|
|
145
|
-
setExpandedRowKeys =
|
|
140
|
+
var _useState3 = (0, _react.useState)([]),
|
|
141
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
142
|
+
expandedRowKeys = _useState4[0],
|
|
143
|
+
setExpandedRowKeys = _useState4[1];
|
|
146
144
|
var deepDataSourceRef = (0, _react.useRef)([]);
|
|
147
145
|
var deepColumnsRef = (0, _react.useRef)([]);
|
|
148
146
|
//
|
|
@@ -150,7 +148,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
150
148
|
//
|
|
151
149
|
var _useDndItems = (0, _useDndItems2.default)({
|
|
152
150
|
columns: customizeColumns,
|
|
153
|
-
|
|
151
|
+
openColGroup: openColGroup,
|
|
152
|
+
openRowGroup: openRowGroup,
|
|
154
153
|
colSortOpen: colSortOpen,
|
|
155
154
|
filterChange: filterChange
|
|
156
155
|
}),
|
|
@@ -196,7 +195,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
196
195
|
}, [groupRowKeys, groupColKeys]);
|
|
197
196
|
|
|
198
197
|
/** sheel数据的表格 */
|
|
199
|
-
var
|
|
198
|
+
var _useState5 = (0, _react.useState)({
|
|
200
199
|
// 记录框选的行列坐标信息
|
|
201
200
|
start: {},
|
|
202
201
|
end: {},
|
|
@@ -209,9 +208,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
209
208
|
// 记录右下角小方块的拖动信息
|
|
210
209
|
commiting: {}
|
|
211
210
|
}),
|
|
212
|
-
|
|
213
|
-
sheelStataus =
|
|
214
|
-
setSheelStatus =
|
|
211
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
212
|
+
sheelStataus = _useState6[0],
|
|
213
|
+
setSheelStatus = _useState6[1];
|
|
215
214
|
var shellStatusRef = (0, _react.useRef)({
|
|
216
215
|
start: {},
|
|
217
216
|
end: {},
|
|
@@ -221,42 +220,40 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
221
220
|
clear: {},
|
|
222
221
|
commiting: {}
|
|
223
222
|
});
|
|
223
|
+
var _useState7 = (0, _react.useState)(false),
|
|
224
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
225
|
+
selectIng = _useState8[0],
|
|
226
|
+
setSelectIng = _useState8[1];
|
|
224
227
|
var _useState9 = (0, _react.useState)(false),
|
|
225
228
|
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
226
|
-
|
|
227
|
-
|
|
229
|
+
editIng = _useState10[0],
|
|
230
|
+
setEditIng = _useState10[1];
|
|
228
231
|
var _useState11 = (0, _react.useState)(false),
|
|
229
232
|
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
230
|
-
|
|
231
|
-
|
|
233
|
+
commitIng = _useState12[0],
|
|
234
|
+
setCommitIng = _useState12[1];
|
|
235
|
+
/** 右键菜单是否显示 */
|
|
232
236
|
var _useState13 = (0, _react.useState)(false),
|
|
233
237
|
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
/** 右键菜单是否显示 */
|
|
237
|
-
var _useState15 = (0, _react.useState)(false),
|
|
238
|
-
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
239
|
-
contextMenuStatus = _useState16[0],
|
|
240
|
-
setContextMenuStatus = _useState16[1];
|
|
238
|
+
contextMenuStatus = _useState14[0],
|
|
239
|
+
setContextMenuStatus = _useState14[1];
|
|
241
240
|
/** 右键按钮的位置 */
|
|
242
|
-
var
|
|
241
|
+
var _useState15 = (0, _react.useState)({
|
|
243
242
|
position: 'fixed',
|
|
244
243
|
left: 300,
|
|
245
244
|
top: 200
|
|
246
245
|
}),
|
|
247
|
-
|
|
248
|
-
style =
|
|
249
|
-
setStyle =
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
chartsModalStatus = _useState20[0],
|
|
253
|
-
setChartsModalStatus = _useState20[1];
|
|
246
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
247
|
+
style = _useState16[0],
|
|
248
|
+
setStyle = _useState16[1];
|
|
249
|
+
|
|
250
|
+
// const [chartsModalStatus, setChartsModalStatus] = useState(null)
|
|
254
251
|
|
|
255
252
|
// 列设置
|
|
256
|
-
var
|
|
257
|
-
|
|
258
|
-
columnsStateMap =
|
|
259
|
-
setColumnsStateMap =
|
|
253
|
+
var _useState17 = (0, _react.useState)(false),
|
|
254
|
+
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
255
|
+
columnsStateMap = _useState18[0],
|
|
256
|
+
setColumnsStateMap = _useState18[1];
|
|
260
257
|
var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
|
|
261
258
|
return /*#__PURE__*/_react.default.createElement("tr", props);
|
|
262
259
|
});
|
|
@@ -295,6 +292,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
295
292
|
deepChildren(columns);
|
|
296
293
|
deepColumnsRef.current = source;
|
|
297
294
|
}, [columns, groupColKeys]);
|
|
295
|
+
var _useState19 = (0, _react.useState)(columns),
|
|
296
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
297
|
+
useColumns = _useState20[0],
|
|
298
|
+
setColumns = _useState20[1];
|
|
299
|
+
(0, _react.useEffect)(function () {
|
|
300
|
+
setColumns(columns);
|
|
301
|
+
}, [columns]);
|
|
298
302
|
var onSortEnd = function onSortEnd(_ref) {
|
|
299
303
|
var oldIndex = _ref.oldIndex,
|
|
300
304
|
newIndex = _ref.newIndex;
|
|
@@ -913,9 +917,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
913
917
|
}
|
|
914
918
|
return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(innerColumns)) : innerColumns;
|
|
915
919
|
}, [useColumns, sortOpen, selectIng, dataSource, groupRowKeys, commitIng]);
|
|
916
|
-
(0, _react.useEffect)(function () {
|
|
917
|
-
setColumns(columns);
|
|
918
|
-
}, [columns]);
|
|
919
920
|
|
|
920
921
|
// 行点击事件
|
|
921
922
|
var onRecord = function onRecord(record) {
|
|
@@ -1178,11 +1179,19 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
1178
1179
|
body = _ref5$body === void 0 ? {} : _ref5$body,
|
|
1179
1180
|
_ref5$header = _ref5.header,
|
|
1180
1181
|
header = _ref5$header === void 0 ? {} : _ref5$header;
|
|
1182
|
+
var headerRow = null;
|
|
1183
|
+
if (openRowGroup || openColGroup) {
|
|
1184
|
+
headerRow = colDraggableContainer;
|
|
1185
|
+
}
|
|
1186
|
+
var headerCell = null;
|
|
1187
|
+
if (openRowGroup || openColGroup || resizeable) {
|
|
1188
|
+
headerCell = ResizableTitle;
|
|
1189
|
+
}
|
|
1181
1190
|
return {
|
|
1182
1191
|
table: virtual ? _virTual.VirtualTable : null,
|
|
1183
1192
|
header: (0, _objectSpread2.default)({
|
|
1184
|
-
row:
|
|
1185
|
-
cell:
|
|
1193
|
+
row: headerRow,
|
|
1194
|
+
cell: headerCell
|
|
1186
1195
|
}, header),
|
|
1187
1196
|
body: (0, _objectSpread2.default)((0, _objectSpread2.default)({
|
|
1188
1197
|
wrapper: sortOpen ? DraggableContainer : virtual ? _virTual.VirtualWrapper : null,
|
|
@@ -1205,9 +1214,11 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
1205
1214
|
} : emptyProps ? function () {
|
|
1206
1215
|
return /*#__PURE__*/_react.default.createElement(_Empty.default, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null);
|
|
1207
1216
|
} : _customRenderEmpty.default
|
|
1208
|
-
},
|
|
1217
|
+
}, openRowGroup || openColGroup || colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
|
|
1209
1218
|
items: items,
|
|
1210
|
-
updateItems: updateItems
|
|
1219
|
+
updateItems: updateItems,
|
|
1220
|
+
rowGroupTitle: rowGroupTitle,
|
|
1221
|
+
colGroupTitle: colGroupTitle
|
|
1211
1222
|
}, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
|
|
1212
1223
|
loading: loading,
|
|
1213
1224
|
dataSource: dataSource,
|
|
@@ -1272,20 +1283,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
1272
1283
|
}, "\u590D\u5236"), /*#__PURE__*/_react.default.createElement("div", {
|
|
1273
1284
|
className: "rightClickItems",
|
|
1274
1285
|
onClick: handleCopyAll
|
|
1275
|
-
}, "\u590D\u5236\u5168\u90E8"))
|
|
1276
|
-
type: chartsModalStatus,
|
|
1277
|
-
onCancel: function onCancel() {
|
|
1278
|
-
return setChartsModalStatus(false);
|
|
1279
|
-
},
|
|
1280
|
-
onOk: function onOk() {
|
|
1281
|
-
return setChartsModalStatus(false);
|
|
1282
|
-
},
|
|
1283
|
-
data: dataSource,
|
|
1284
|
-
deepDataSource: deepDataSourceRef.current,
|
|
1285
|
-
rowKey: rowKey,
|
|
1286
|
-
columns: columns,
|
|
1287
|
-
selectInfo: (0, _lodash.pick)(shellStatusRef.current, ['start', 'end'])
|
|
1288
|
-
}));
|
|
1286
|
+
}, "\u590D\u5236\u5168\u90E8")));
|
|
1289
1287
|
});
|
|
1290
1288
|
|
|
1291
1289
|
// 监听大小: 这里的高度是整个表格的高度,表体需要减去列头和分页的高度
|
|
@@ -1293,13 +1291,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
1293
1291
|
var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
1294
1292
|
var _props$autoSizer = props.autoSizer,
|
|
1295
1293
|
autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
|
|
1296
|
-
var
|
|
1294
|
+
var _useState21 = (0, _react.useState)({
|
|
1297
1295
|
width: '100%',
|
|
1298
1296
|
height: '100%'
|
|
1299
1297
|
}),
|
|
1300
|
-
|
|
1301
|
-
tableSize =
|
|
1302
|
-
setTableSize =
|
|
1298
|
+
_useState22 = (0, _slicedToArray2.default)(_useState21, 2),
|
|
1299
|
+
tableSize = _useState22[0],
|
|
1300
|
+
setTableSize = _useState22[1];
|
|
1303
1301
|
var defaultRef = ref || (0, _react.useRef)(null);
|
|
1304
1302
|
var tableWarpRef = (0, _react.useRef)(null);
|
|
1305
1303
|
var resizeRef = (0, _react.useRef)(null);
|
|
File without changes
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.Container = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
require("./Container.
|
|
11
|
+
require("./Container.css");
|
|
12
12
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
13
13
|
var t = {};
|
|
14
14
|
for (var p in s) {
|
|
@@ -29,7 +29,9 @@ interface Props {
|
|
|
29
29
|
scrollable?: boolean;
|
|
30
30
|
children?: React.ReactNode;
|
|
31
31
|
updateItems?(items: Items, resume?: string): void;
|
|
32
|
+
rowGroupTitle?: string;
|
|
33
|
+
colGroupTitle?: string;
|
|
32
34
|
}
|
|
33
35
|
export declare const TRASH_ID = "void";
|
|
34
|
-
export default function DndContainer({ adjustScale, itemCount, cancelDrop, columns, handle, items: initialItems, containerStyle, coordinateGetter, getItemStyles, wrapperStyle, modifiers, renderItem, trashable, scrollable, children, updateItems, }: Props): JSX.Element;
|
|
36
|
+
export default function DndContainer({ adjustScale, itemCount, cancelDrop, columns, handle, items: initialItems, containerStyle, coordinateGetter, getItemStyles, wrapperStyle, modifiers, renderItem, trashable, scrollable, children, updateItems, rowGroupTitle, colGroupTitle, }: Props): JSX.Element;
|
|
35
37
|
export {};
|
|
@@ -166,7 +166,11 @@ function DndContainer(_ref2) {
|
|
|
166
166
|
_ref2$updateItems = _ref2.updateItems,
|
|
167
167
|
updateItems = _ref2$updateItems === void 0 ? function () {
|
|
168
168
|
return {};
|
|
169
|
-
} : _ref2$updateItems
|
|
169
|
+
} : _ref2$updateItems,
|
|
170
|
+
_ref2$rowGroupTitle = _ref2.rowGroupTitle,
|
|
171
|
+
rowGroupTitle = _ref2$rowGroupTitle === void 0 ? '行分组' : _ref2$rowGroupTitle,
|
|
172
|
+
_ref2$colGroupTitle = _ref2.colGroupTitle,
|
|
173
|
+
colGroupTitle = _ref2$colGroupTitle === void 0 ? '列分组' : _ref2$colGroupTitle;
|
|
170
174
|
var _useState = (0, _react.useState)(function () {
|
|
171
175
|
return initialItems;
|
|
172
176
|
}),
|
|
@@ -413,7 +417,7 @@ function DndContainer(_ref2) {
|
|
|
413
417
|
return /*#__PURE__*/_react.default.createElement(DroppableContainer, {
|
|
414
418
|
key: containerId,
|
|
415
419
|
id: containerId,
|
|
416
|
-
label: containerId === 'row' ?
|
|
420
|
+
label: containerId === 'row' ? rowGroupTitle : colGroupTitle,
|
|
417
421
|
columns: columns,
|
|
418
422
|
items: items[containerId],
|
|
419
423
|
scrollable: true,
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
opacity: 1;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
.dnd_com_item_Wrapper {
|
|
20
20
|
display: flex;
|
|
21
21
|
box-sizing: border-box;
|
|
22
22
|
transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
margin-right: 6px;
|
|
26
26
|
margin-bottom: 6px;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.dnd_com_item_Wrapper.fadeIn {
|
|
29
29
|
animation: fadeIn 500ms ease;
|
|
30
30
|
}
|
|
31
|
-
.
|
|
31
|
+
.dnd_com_item_Wrapper.dragOverlay {
|
|
32
32
|
--scale: 1.05;
|
|
33
33
|
--box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
|
|
34
34
|
--box-shadow-picked-up: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
0px 15px 15px 0 rgba(34, 33, 81, 0.25);
|
|
37
37
|
z-index: 999;
|
|
38
38
|
}
|
|
39
|
-
.
|
|
39
|
+
.dnd_com_Item {
|
|
40
40
|
position: relative;
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-grow: 1;
|
|
@@ -57,29 +57,29 @@
|
|
|
57
57
|
transform: scale(var(--scale, 1));
|
|
58
58
|
transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
|
|
59
59
|
}
|
|
60
|
-
.
|
|
60
|
+
.dnd_com_Item:focus-visible {
|
|
61
61
|
box-shadow: 0 0px 4px 1px #4c9ffe, 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
|
|
62
62
|
}
|
|
63
|
-
.
|
|
63
|
+
.dnd_com_Item:not(.withHandle) {
|
|
64
64
|
touch-action: manipulation;
|
|
65
65
|
cursor: grab;
|
|
66
66
|
}
|
|
67
|
-
.
|
|
67
|
+
.dnd_com_Item.dragging:not(.dragOverlay) {
|
|
68
68
|
opacity: var(--dragging-opacity, 0.5);
|
|
69
69
|
z-index: 0;
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
.dnd_com_Item.dragging:not(.dragOverlay):focus {
|
|
72
72
|
box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
|
|
73
73
|
}
|
|
74
|
-
.
|
|
74
|
+
.dnd_com_Item.disabled {
|
|
75
75
|
color: #999;
|
|
76
76
|
background-color: #f1f1f1;
|
|
77
77
|
cursor: not-allowed;
|
|
78
78
|
}
|
|
79
|
-
.
|
|
79
|
+
.dnd_com_Item.disabled:focus {
|
|
80
80
|
box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
|
|
81
81
|
}
|
|
82
|
-
.
|
|
82
|
+
.dnd_com_Item.dragOverlay {
|
|
83
83
|
cursor: inherit;
|
|
84
84
|
/* box-shadow: 0 0px 6px 2px @focused-outline-color; */
|
|
85
85
|
animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
box-shadow: var(--box-shadow-picked-up);
|
|
88
88
|
opacity: 1;
|
|
89
89
|
}
|
|
90
|
-
.
|
|
90
|
+
.dnd_com_Item.color:before {
|
|
91
91
|
content: '';
|
|
92
92
|
position: absolute;
|
|
93
93
|
top: 50%;
|
|
@@ -100,14 +100,14 @@
|
|
|
100
100
|
border-bottom-left-radius: 3px;
|
|
101
101
|
background-color: var(--color);
|
|
102
102
|
}
|
|
103
|
-
.
|
|
103
|
+
.dnd_com_Item:hover .dnd_com_Remove {
|
|
104
104
|
visibility: visible;
|
|
105
105
|
}
|
|
106
|
-
.
|
|
106
|
+
.dnd_com_Remove {
|
|
107
107
|
margin-left: 6px;
|
|
108
108
|
color: #666;
|
|
109
109
|
}
|
|
110
|
-
.
|
|
110
|
+
.dnd_com_Actions {
|
|
111
111
|
display: flex;
|
|
112
112
|
align-items: center;
|
|
113
113
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DraggableSyntheticListeners } from '@dnd-kit/core';
|
|
3
3
|
import type { Transform } from '@dnd-kit/utilities';
|
|
4
|
-
import './Item.
|
|
4
|
+
import './Item.less';
|
|
5
5
|
export interface Props {
|
|
6
6
|
dragOverlay?: boolean;
|
|
7
7
|
color?: string;
|
|
@@ -9,7 +9,7 @@ exports.Item = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _components = require("./components");
|
|
12
|
-
require("./Item.
|
|
12
|
+
require("./Item.css");
|
|
13
13
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
14
14
|
var t = {};
|
|
15
15
|
for (var p in s) {
|
|
@@ -42,7 +42,7 @@ var Item = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forward
|
|
|
42
42
|
props = __rest(_a, ["color", "dragOverlay", "dragging", "disabled", "fadeIn", "handle", "handleProps", "height", "index", "listeners", "onRemove", "renderItem", "sorting", "style", "transition", "transform", "value", "wrapperStyle"]);
|
|
43
43
|
(0, _react.useEffect)(function () {
|
|
44
44
|
if (!dragOverlay) {
|
|
45
|
-
return
|
|
45
|
+
return undefined;
|
|
46
46
|
}
|
|
47
47
|
document.body.style.cursor = 'grabbing';
|
|
48
48
|
return function () {
|
|
@@ -62,7 +62,7 @@ var Item = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forward
|
|
|
62
62
|
transition: transition,
|
|
63
63
|
value: value
|
|
64
64
|
}) : /*#__PURE__*/_react.default.createElement("li", {
|
|
65
|
-
className: (0, _classnames.default)('
|
|
65
|
+
className: (0, _classnames.default)('dnd_com_item_Wrapper', fadeIn && 'fadeIn', sorting && 'sorting', dragOverlay && 'dragOverlay'),
|
|
66
66
|
style: Object.assign(Object.assign({}, wrapperStyle), {
|
|
67
67
|
transition: [transition, wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.transition].filter(Boolean).join(', '),
|
|
68
68
|
// @ts-ignore
|
|
@@ -75,15 +75,15 @@ var Item = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forward
|
|
|
75
75
|
}),
|
|
76
76
|
ref: ref
|
|
77
77
|
}, /*#__PURE__*/_react.default.createElement("div", Object.assign({
|
|
78
|
-
className: (0, _classnames.default)('
|
|
78
|
+
className: (0, _classnames.default)('dnd_com_Item', dragging && 'dragging', handle && 'withHandle', dragOverlay && 'dragOverlay', disabled && 'disabled', color && 'color'),
|
|
79
79
|
style: style,
|
|
80
80
|
"data-cypress": "draggable-item"
|
|
81
81
|
}, !handle ? listeners : undefined, props, {
|
|
82
82
|
tabIndex: !handle ? 0 : undefined
|
|
83
83
|
}), /*#__PURE__*/_react.default.createElement("div", null, value), /*#__PURE__*/_react.default.createElement("span", {
|
|
84
|
-
className: "
|
|
84
|
+
className: "dnd_com_Actions"
|
|
85
85
|
}, onRemove ? /*#__PURE__*/_react.default.createElement(_components.Remove, {
|
|
86
|
-
className: "
|
|
86
|
+
className: "dnd_com_Remove",
|
|
87
87
|
onClick: onRemove
|
|
88
88
|
}) :
|
|
89
89
|
// <IconFont className={styles.Remove} type="lmweb-close-circle-fill" onClick={onRemove} />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.dnd_item_actions {
|
|
2
2
|
display: flex;
|
|
3
3
|
width: 12px;
|
|
4
4
|
margin-left: 6px;
|
|
@@ -15,27 +15,27 @@
|
|
|
15
15
|
-webkit-tap-highlight-color: transparent;
|
|
16
16
|
}
|
|
17
17
|
@media (hover: hover) {
|
|
18
|
-
.
|
|
18
|
+
.dnd_item_actions:hover {
|
|
19
19
|
background-color: var(--action-background, rgba(0, 0, 0, 0.05));
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.dnd_item_actions:hover svg {
|
|
22
22
|
fill: #6f7b88;
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
.dnd_item_actions svg {
|
|
26
26
|
flex: 0 0 auto;
|
|
27
27
|
margin: auto;
|
|
28
28
|
height: 100%;
|
|
29
29
|
overflow: visible;
|
|
30
30
|
fill: #919eab;
|
|
31
31
|
}
|
|
32
|
-
.
|
|
32
|
+
.dnd_item_actions:active {
|
|
33
33
|
background-color: var(--background, rgba(0, 0, 0, 0.05));
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.dnd_item_actions:active svg {
|
|
36
36
|
fill: var(--fill, #788491);
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.dnd_item_actions:focus-visible {
|
|
39
39
|
outline: none;
|
|
40
40
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
|
|
41
41
|
}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.Action = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
require("./Action.
|
|
11
|
+
require("./Action.css");
|
|
12
12
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
13
13
|
var t = {};
|
|
14
14
|
for (var p in s) {
|
|
@@ -28,7 +28,7 @@ var Action = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
|
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement("button", Object.assign({
|
|
29
29
|
ref: ref
|
|
30
30
|
}, props, {
|
|
31
|
-
className: (0, _classnames.default)('
|
|
31
|
+
className: (0, _classnames.default)('dnd_item_actions', className),
|
|
32
32
|
tabIndex: 0,
|
|
33
33
|
style: Object.assign(Object.assign({}, style), {
|
|
34
34
|
cursor: cursor,
|
|
@@ -9,6 +9,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _index = require("../common/index");
|
|
11
11
|
function del(arr, target) {
|
|
12
|
+
if (!arr || !arr.length) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
12
15
|
var index = arr.findIndex(function (item) {
|
|
13
16
|
return item === target;
|
|
14
17
|
});
|
|
@@ -31,12 +34,6 @@ function getSortInsert(target, value, _ref) {
|
|
|
31
34
|
});
|
|
32
35
|
return arr.filter(Boolean);
|
|
33
36
|
}
|
|
34
|
-
/**
|
|
35
|
-
* 返回按照 arr 顺序的columns
|
|
36
|
-
* @param arr
|
|
37
|
-
* @param param1
|
|
38
|
-
* @returns
|
|
39
|
-
*/
|
|
40
37
|
function getSortDndColumns(arr, _ref2) {
|
|
41
38
|
var columns = _ref2.columns;
|
|
42
39
|
if (!arr || !arr.length) {
|
|
@@ -73,8 +70,9 @@ function useDndItems(props) {
|
|
|
73
70
|
var columns = props.columns,
|
|
74
71
|
colSortOpen = props.colSortOpen,
|
|
75
72
|
filterChange = props.filterChange,
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
openRowGroup = props.openRowGroup,
|
|
74
|
+
openColGroup = props.openColGroup;
|
|
75
|
+
var _useState = (0, _react.useState)(columns),
|
|
78
76
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
79
77
|
dndColumns = _useState2[0],
|
|
80
78
|
setDndColumns = _useState2[1];
|
|
@@ -89,27 +87,27 @@ function useDndItems(props) {
|
|
|
89
87
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
90
88
|
groupColKeys = _useState6[0],
|
|
91
89
|
setGroupColKeys = _useState6[1];
|
|
92
|
-
|
|
93
|
-
(0, _index.treeFind)(columns, function (node) {
|
|
94
|
-
tableHeader.push(node.title);
|
|
95
|
-
return false;
|
|
96
|
-
});
|
|
90
|
+
// 初始化
|
|
97
91
|
var defaultItems = {};
|
|
98
|
-
if (
|
|
99
|
-
defaultItems =
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
92
|
+
if (openRowGroup) {
|
|
93
|
+
defaultItems.row = [];
|
|
94
|
+
}
|
|
95
|
+
if (openColGroup) {
|
|
96
|
+
defaultItems.col = [];
|
|
97
|
+
}
|
|
98
|
+
if (openColGroup || openRowGroup || colSortOpen) {
|
|
99
|
+
var tableHeader = [];
|
|
100
|
+
(0, _index.treeFind)(columns, function (node) {
|
|
101
|
+
tableHeader.push(node.title);
|
|
102
|
+
return false;
|
|
103
|
+
});
|
|
104
|
+
defaultItems.tableHeader = tableHeader;
|
|
108
105
|
}
|
|
109
106
|
var _useState7 = (0, _react.useState)(defaultItems),
|
|
110
107
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
111
108
|
items = _useState8[0],
|
|
112
109
|
setItems = _useState8[1];
|
|
110
|
+
// 更新
|
|
113
111
|
var updateItems = function updateItems(value, resume) {
|
|
114
112
|
if (resume) {
|
|
115
113
|
del(value.row, resume);
|
package/package.json
CHANGED