@kep-platform/basic-component 0.0.50 → 0.0.52
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/Columns/Columns.d.ts +1 -1
- package/dist/PopupBox/PopupBox.d.ts +1 -1
- package/dist/PopupBox/PopupBox.js +12 -2
- package/dist/Table/Table.d.ts +2 -1
- package/dist/Table/Table.js +45 -5
- package/dist/ViewPort/ViewPortWindow.d.ts +9 -0
- package/dist/ViewPort/ViewPortWindow.js +4 -3
- package/package.json +3 -3
@@ -14,7 +14,7 @@ export declare const Column: import("styled-components/dist/types").IStyledCompo
|
|
14
14
|
title?: React.ReactNode;
|
15
15
|
index?: number | undefined;
|
16
16
|
itemRender?: ListItemRender | undefined;
|
17
|
-
} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, Omit<ColumnType, "
|
17
|
+
} & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, Omit<ColumnType, "render" | "dataIndex"> & {
|
18
18
|
key: React.Key;
|
19
19
|
title?: React.ReactNode;
|
20
20
|
index?: number | undefined;
|
@@ -17,5 +17,5 @@ export declare function Popup(props: {
|
|
17
17
|
trigger?: TriggerType;
|
18
18
|
content?: ReactNode;
|
19
19
|
onVisibleChange?: (visible: boolean) => void;
|
20
|
-
}): React.JSX.Element | undefined;
|
20
|
+
}): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
|
21
21
|
export default PopupBox;
|
@@ -8,6 +8,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
8
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
9
9
|
import { useClickOutsize } from '@kep-platform/hooks';
|
10
10
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
11
|
+
import ReactDOM from 'react-dom';
|
11
12
|
import styled, { css } from 'styled-components';
|
12
13
|
var PopupBox = styled('div').withConfig({
|
13
14
|
shouldForwardProp: function shouldForwardProp(prop) {
|
@@ -16,6 +17,13 @@ var PopupBox = styled('div').withConfig({
|
|
16
17
|
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--kep-platform-color-bg-base);\n padding: var(--kep-platform-padding-xs);\n border-radius: var(--kep-platform-border-radius-sm);\n position: fixed;\n box-shadow: var(--kep-platform-box-shadow);\n z-index: 999;\n ", ";\n"])), function (props) {
|
17
18
|
if (props.visible) return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n left: ", "px;\n top: ", "px;\n "])), props.left || -999, props.top || -999);else return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n left: -9999px;\n top: -9999px;\n "])));
|
18
19
|
});
|
20
|
+
var popupContainerId = 'popupContainer';
|
21
|
+
var popupContainer = document.getElementById(popupContainerId);
|
22
|
+
if (!popupContainer) {
|
23
|
+
popupContainer = document.createElement('div');
|
24
|
+
popupContainer.id = popupContainerId;
|
25
|
+
document.body.appendChild(popupContainer);
|
26
|
+
}
|
19
27
|
export function Popup(props) {
|
20
28
|
var children = props.children,
|
21
29
|
_props$trigger = props.trigger,
|
@@ -70,12 +78,14 @@ export function Popup(props) {
|
|
70
78
|
if (typeof outerVisible === 'boolean') setVisible(outerVisible);
|
71
79
|
}, [outerVisible]);
|
72
80
|
if ( /*#__PURE__*/React.isValidElement(children)) {
|
73
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopupBox, {
|
81
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, popupContainer && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(PopupBox, {
|
74
82
|
left: pos.left,
|
75
83
|
top: pos.top,
|
76
84
|
visible: visible,
|
77
85
|
ref: popupBox
|
78
|
-
}, content), /*#__PURE__*/React.cloneElement(children, mergeProps));
|
86
|
+
}, content), popupContainer), /*#__PURE__*/React.cloneElement(children, mergeProps));
|
87
|
+
} else {
|
88
|
+
return children;
|
79
89
|
}
|
80
90
|
}
|
81
91
|
export default PopupBox;
|
package/dist/Table/Table.d.ts
CHANGED
@@ -18,6 +18,7 @@ export type TableProps = {
|
|
18
18
|
pagination?: Pagination | false;
|
19
19
|
empty?: ReactNode;
|
20
20
|
rowSelection?: RowSelection;
|
21
|
+
multiple?: boolean;
|
21
22
|
};
|
22
|
-
export default function Table({ columns, dataSource, rowKey, scroll, onChange, headerRender, pagination: outerPagination, empty, rowSelection, }: TableProps): React.JSX.Element;
|
23
|
+
export default function Table({ columns, dataSource, rowKey, scroll, onChange, headerRender, pagination: outerPagination, empty, rowSelection, multiple, }: TableProps): React.JSX.Element;
|
23
24
|
export {};
|
package/dist/Table/Table.js
CHANGED
@@ -163,7 +163,8 @@ export default function Table(_ref3) {
|
|
163
163
|
outerPagination = _ref3.pagination,
|
164
164
|
_ref3$empty = _ref3.empty,
|
165
165
|
empty = _ref3$empty === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _ref3$empty,
|
166
|
-
rowSelection = _ref3.rowSelection
|
166
|
+
rowSelection = _ref3.rowSelection,
|
167
|
+
multiple = _ref3.multiple;
|
167
168
|
var _useState = useState(null),
|
168
169
|
_useState2 = _slicedToArray(_useState, 2),
|
169
170
|
sorterController = _useState2[0],
|
@@ -195,13 +196,16 @@ export default function Table(_ref3) {
|
|
195
196
|
}
|
196
197
|
}, [rowSelection]);
|
197
198
|
var formatedColumns = useMemo(function () {
|
198
|
-
if (rowSelection) {
|
199
|
+
if (rowSelection && multiple) {
|
199
200
|
return [{
|
200
201
|
key: 'selectRow',
|
201
202
|
dataIndex: 'selectRow',
|
202
203
|
title: /*#__PURE__*/React.createElement("input", {
|
203
204
|
type: "checkbox",
|
204
205
|
checked: selectedRows.length === dataSource.length,
|
206
|
+
onClick: function onClick(e) {
|
207
|
+
e.stopPropagation();
|
208
|
+
},
|
205
209
|
onChange: function onChange(e) {
|
206
210
|
if (e.target.checked) {
|
207
211
|
var _rowSelection$onSelec;
|
@@ -264,7 +268,7 @@ export default function Table(_ref3) {
|
|
264
268
|
} else {
|
265
269
|
return columns;
|
266
270
|
}
|
267
|
-
}, [columns, rowSelection, dataSource, selectedRows]);
|
271
|
+
}, [columns, rowSelection, dataSource, selectedRows, multiple]);
|
268
272
|
var titleRowData = useMemo(function () {
|
269
273
|
var data = {};
|
270
274
|
formatedColumns.forEach(function (column) {
|
@@ -292,7 +296,7 @@ export default function Table(_ref3) {
|
|
292
296
|
});
|
293
297
|
});
|
294
298
|
return data;
|
295
|
-
}, [formatedColumns,
|
299
|
+
}, [formatedColumns, sorterController, filterValues]);
|
296
300
|
var boxShadowBox = useRef(null);
|
297
301
|
var headerColumns = useMemo(function () {
|
298
302
|
return formatedColumns.map(function (column) {
|
@@ -367,7 +371,43 @@ export default function Table(_ref3) {
|
|
367
371
|
}, formatedDataSource.map(function (rowData, index) {
|
368
372
|
if (rowData) return /*#__PURE__*/React.createElement(TableBodyRow, {
|
369
373
|
key: rowData[rowKey],
|
370
|
-
isActive: selectedRows.includes(rowData)
|
374
|
+
isActive: selectedRows.includes(rowData),
|
375
|
+
onClick: function onClick(e) {
|
376
|
+
var _rowSelection$onSelec5;
|
377
|
+
if (!rowSelection) return;
|
378
|
+
var rows;
|
379
|
+
var selected;
|
380
|
+
if (multiple) {
|
381
|
+
if (selectedRows.includes(rowData)) {
|
382
|
+
rows = selectedRows.filter(function (row) {
|
383
|
+
return row[rowKey] !== rowData[rowKey];
|
384
|
+
});
|
385
|
+
selected = false;
|
386
|
+
setSelectedRows(rows);
|
387
|
+
} else {
|
388
|
+
rows = [].concat(_toConsumableArray(selectedRows), [rowData]);
|
389
|
+
selected = true;
|
390
|
+
setSelectedRows(rows);
|
391
|
+
}
|
392
|
+
} else {
|
393
|
+
if (selectedRows.includes(rowData)) {
|
394
|
+
rows = [];
|
395
|
+
selected = false;
|
396
|
+
setSelectedRows(rows);
|
397
|
+
} else {
|
398
|
+
rows = [rowData];
|
399
|
+
selected = true;
|
400
|
+
setSelectedRows(rows);
|
401
|
+
}
|
402
|
+
}
|
403
|
+
(_rowSelection$onSelec5 = rowSelection.onSelect) === null || _rowSelection$onSelec5 === void 0 || _rowSelection$onSelec5.call(rowSelection, rows.map(function (row) {
|
404
|
+
return row[rowKey];
|
405
|
+
}), {
|
406
|
+
type: 'row',
|
407
|
+
selected: selected,
|
408
|
+
nativeEvent: e
|
409
|
+
});
|
410
|
+
}
|
371
411
|
}, /*#__PURE__*/React.createElement(Columns, {
|
372
412
|
rowIndex: index,
|
373
413
|
rowData: rowData,
|
@@ -15,6 +15,15 @@ export declare class ViewPortWindowStore extends WindowStore {
|
|
15
15
|
transform: string;
|
16
16
|
transformOrigin: string;
|
17
17
|
transition: string;
|
18
|
+
} | {
|
19
|
+
left: string;
|
20
|
+
top: string;
|
21
|
+
width: string;
|
22
|
+
height: string;
|
23
|
+
zIndex: number;
|
24
|
+
transformOrigin: string;
|
25
|
+
transition: string;
|
26
|
+
transform?: undefined;
|
18
27
|
} | {
|
19
28
|
left: string;
|
20
29
|
top: string;
|
@@ -70,10 +70,10 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
70
70
|
return {
|
71
71
|
left: this.fullscreenPos.left + 'px',
|
72
72
|
top: this.fullscreenPos.top + 'px',
|
73
|
-
width: this.fullscreenPos.width
|
74
|
-
height: this.fullscreenPos.height
|
73
|
+
width: this.fullscreenPos.width + 'px',
|
74
|
+
height: this.fullscreenPos.height + 'px',
|
75
|
+
// transform: `scale(${1 / this.viewPortStore.scale})`,
|
75
76
|
zIndex: this.zIndex,
|
76
|
-
transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
|
77
77
|
transformOrigin: 'left top',
|
78
78
|
transition: 'width height 0.5s ease-out'
|
79
79
|
};
|
@@ -157,6 +157,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
|
|
157
157
|
value: function fullscreenWindow(func) {
|
158
158
|
this.resetState();
|
159
159
|
this.fullscreen = true;
|
160
|
+
this.viewPortStore.scale = 1;
|
160
161
|
func === null || func === void 0 || func();
|
161
162
|
this.fullscreenPos = this.viewPortStore.viewPortRect;
|
162
163
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@kep-platform/basic-component",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.52",
|
4
4
|
"description": "A react library developed with dumi",
|
5
5
|
"license": "MIT",
|
6
6
|
"module": "dist/index.js",
|
@@ -47,7 +47,7 @@
|
|
47
47
|
},
|
48
48
|
"dependencies": {
|
49
49
|
"@ant-design/icons": "^5.3.7",
|
50
|
-
"@kep-platform/hooks": "^0.0.
|
50
|
+
"@kep-platform/hooks": "^0.0.52",
|
51
51
|
"color": "^4.2.3",
|
52
52
|
"rc-pagination": "^4.1.0"
|
53
53
|
},
|
@@ -87,5 +87,5 @@
|
|
87
87
|
"authors": [
|
88
88
|
"less-step-jss 1599925910@qq.com"
|
89
89
|
],
|
90
|
-
"gitHead": "
|
90
|
+
"gitHead": "76a464cda0951e66bccbed12b9374d6358338950"
|
91
91
|
}
|