@kep-platform/basic-component 0.0.49 → 0.0.51

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.
Files changed (6) hide show
  1. package/dist/Columns/Columns.d.ts +1 -1
  2. package/dist/PopupBox/PopupBox.d.ts +1 -1
  3. package/dist/PopupBox/PopupBox.js +12 -2
  4. package/dist/Table/Table.d.ts +4 -2
  5. package/dist/Table/Table.js +78 -40
  6. package/package.json +3 -3
package/dist/Columns/Columns.d.ts CHANGED
@@ -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, "render" | "dataIndex"> & {
17
+ } & Omit<React.HtmlHTMLAttributes<HTMLLIElement>, "title">, Omit<ColumnType, "dataIndex" | "render"> & {
18
18
  key: React.Key;
19
19
  title?: React.ReactNode;
20
20
  index?: number | undefined;
package/dist/PopupBox/PopupBox.d.ts CHANGED
@@ -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;
package/dist/PopupBox/PopupBox.js CHANGED
@@ -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
@@ -2,7 +2,8 @@ import React, { ReactNode } from 'react';
2
2
  type SorterDesc = Record<string, Sorter>;
3
3
  type FilterDesc = Record<string, string>;
4
4
  export type Scroll = {
5
- y: number;
5
+ y?: number;
6
+ x?: number;
6
7
  };
7
8
  export type TableProps = {
8
9
  dataSource: Record<string, any>[];
@@ -17,6 +18,7 @@ export type TableProps = {
17
18
  pagination?: Pagination | false;
18
19
  empty?: ReactNode;
19
20
  rowSelection?: RowSelection;
21
+ multiple?: boolean;
20
22
  };
21
- export default function Table({ columns, dataSource, rowKey, actions, title, 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;
22
24
  export {};
package/dist/Table/Table.js CHANGED
@@ -1,6 +1,6 @@
1
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
2
  var _excluded = ["render"];
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
4
4
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
5
  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; }
6
6
  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; }
@@ -28,38 +28,44 @@ import styled, { css } from 'styled-components';
28
28
  import { BoxShadowBox } from "../BoxShadowBox";
29
29
  import { Column, Columns } from "../Columns";
30
30
  import { DefaultColumnWidth } from "../Columns/Columns";
31
- import { Col, Row } from "../Grid";
32
31
  import { Input } from "../Input";
33
32
  import { List, ListItem } from "../List";
34
33
  import { Pagination } from "../Pagination";
35
34
  import { Popup } from "../PopupBox";
36
35
  import { Space } from "../Space";
37
36
  var TableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
38
- var TableTitle = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-weight: 600;\n padding: var(--kep-platform-padding-sm);\n"])));
39
- var TableToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n text-align: right;\n padding: var(--kep-platform-padding-sm);\n"])));
40
- var TableHeaderRow = styled(Columns)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n position: sticky;\n top: 0;\n left: 0;\n z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n & ", " {\n background-color: var(--kep-platform-header-bg);\n font-weight: 600;\n position: sticky;\n &:not(:last-child):after {\n content: '';\n width: 1px;\n height: calc(100% - 2 * var(--kep-platform-padding-xs));\n position: absolute;\n top: var(--kep-platform-padding-xs);\n right: 0;\n background-color: var(--kep-platform-color-border-secondary);\n }\n }\n"])), Column);
41
- var TableBody = styled(List)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
37
+ var TableHeaderRow = styled(Columns)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n position: sticky;\n top: 0;\n left: 0;\n z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n & ", " {\n background-color: var(--kep-platform-header-bg);\n font-weight: 600;\n position: sticky;\n &:not(:last-child):after {\n content: '';\n width: 1px;\n height: calc(100% - 2 * var(--kep-platform-padding-xs));\n position: absolute;\n top: var(--kep-platform-padding-xs);\n right: 0;\n background-color: var(--kep-platform-color-border-secondary);\n }\n }\n"])), Column);
38
+ var TableBody = styled(List)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
42
39
  var TableBodyRow = styled(ListItem).withConfig({
43
40
  shouldForwardProp: function shouldForwardProp(prop) {
44
41
  return !['isActive'].includes(prop);
45
42
  }
46
- })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n & ", " {\n ", "\n }\n"])), Column, function (props) {
43
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n & ", " {\n ", "\n }\n"])), Column, function (props) {
47
44
  if (props.isActive) {
48
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: var(--kep-platform-color-bg-active) !important;\n "])));
45
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-color: var(--kep-platform-color-bg-active) !important;\n "])));
49
46
  }
50
47
  });
51
- var TableContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: relative;\n overflow: auto;\n border-radius: var(--kep-platform-border-radius);\n box-shadow: var(--kep-platform-box-shadow-tertiary);\n ", "\n"])), function (props) {
48
+ var TableContent = styled.div.withConfig({
49
+ shouldForwardProp: function shouldForwardProp(prop) {
50
+ return !['scroll', 'isFlex'].includes(prop);
51
+ }
52
+ })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n overflow: auto;\n border-radius: var(--kep-platform-border-radius);\n box-shadow: var(--kep-platform-box-shadow-tertiary);\n width: ", ";\n height: ", ";\n"])), function (props) {
52
53
  var _props$scroll;
53
- if ((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y) {
54
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: ", "px;\n "])), props.scroll.y);
54
+ if (!props.isFlex && (_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.x) {
55
+ return '100%';
56
+ }
57
+ }, function (props) {
58
+ var _props$scroll2;
59
+ if ((_props$scroll2 = props.scroll) !== null && _props$scroll2 !== void 0 && _props$scroll2.y) {
60
+ return props.scroll.y + 'px';
55
61
  }
56
62
  });
57
- var SortIconList = styled(List)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])));
63
+ var SortIconList = styled(List)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
58
64
  var SortIconListItem = styled(ListItem).withConfig({
59
65
  shouldForwardProp: function shouldForwardProp(prop) {
60
66
  return !['active'].includes(prop);
61
67
  }
62
- })(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n height: 10px;\n line-height: 10px;\n font-size: 10px;\n cursor: pointer;\n user-select: none;\n color: ", ";\n"])), function (props) {
68
+ })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 10px;\n line-height: 10px;\n font-size: 10px;\n cursor: pointer;\n user-select: none;\n color: ", ";\n"])), function (props) {
63
69
  return props.active ? 'var(--kep-platform-color-primary)' : 'currentColor';
64
70
  });
65
71
  var SortIconGroup = function SortIconGroup(_ref) {
@@ -90,8 +96,8 @@ var SortIconGroup = function SortIconGroup(_ref) {
90
96
  active: sorter === 'desc'
91
97
  }, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
92
98
  };
93
- var ColumnTitle = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
94
- var FilterValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n color: var(--kep-platform-color-primary);\n cursor: pointer;\n padding: var(--kep-platform-padding-xxs);\n border-radius: var(--kep-platform-border-radius-sm);\n &:hover {\n background-color: var(--kep-platform-color-bg-active);\n }\n"])));
99
+ var ColumnTitle = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])));
100
+ var FilterValue = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: var(--kep-platform-color-primary);\n cursor: pointer;\n padding: var(--kep-platform-padding-xxs);\n border-radius: var(--kep-platform-border-radius-sm);\n &:hover {\n background-color: var(--kep-platform-color-bg-active);\n }\n"])));
95
101
  var ColumnTitleController = function ColumnTitleController(_ref2) {
96
102
  var onSorterChange = _ref2.onSorterChange,
97
103
  title = _ref2.title,
@@ -151,15 +157,14 @@ export default function Table(_ref3) {
151
157
  var columns = _ref3.columns,
152
158
  dataSource = _ref3.dataSource,
153
159
  rowKey = _ref3.rowKey,
154
- actions = _ref3.actions,
155
- title = _ref3.title,
156
160
  scroll = _ref3.scroll,
157
161
  _onChange2 = _ref3.onChange,
158
162
  headerRender = _ref3.headerRender,
159
163
  outerPagination = _ref3.pagination,
160
164
  _ref3$empty = _ref3.empty,
161
165
  empty = _ref3$empty === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _ref3$empty,
162
- rowSelection = _ref3.rowSelection;
166
+ rowSelection = _ref3.rowSelection,
167
+ multiple = _ref3.multiple;
163
168
  var _useState = useState(null),
164
169
  _useState2 = _slicedToArray(_useState, 2),
165
170
  sorterController = _useState2[0],
@@ -191,13 +196,16 @@ export default function Table(_ref3) {
191
196
  }
192
197
  }, [rowSelection]);
193
198
  var formatedColumns = useMemo(function () {
194
- if (rowSelection) {
199
+ if (rowSelection && multiple) {
195
200
  return [{
196
201
  key: 'selectRow',
197
202
  dataIndex: 'selectRow',
198
203
  title: /*#__PURE__*/React.createElement("input", {
199
204
  type: "checkbox",
200
205
  checked: selectedRows.length === dataSource.length,
206
+ onClick: function onClick(e) {
207
+ e.stopPropagation();
208
+ },
201
209
  onChange: function onChange(e) {
202
210
  if (e.target.checked) {
203
211
  var _rowSelection$onSelec;
@@ -260,7 +268,7 @@ export default function Table(_ref3) {
260
268
  } else {
261
269
  return columns;
262
270
  }
263
- }, [columns, rowSelection, dataSource, selectedRows]);
271
+ }, [columns, rowSelection, dataSource, selectedRows, multiple]);
264
272
  var titleRowData = useMemo(function () {
265
273
  var data = {};
266
274
  formatedColumns.forEach(function (column) {
@@ -288,7 +296,7 @@ export default function Table(_ref3) {
288
296
  });
289
297
  });
290
298
  return data;
291
- }, [formatedColumns, _onChange2, sorterController, setSorterController, rowSelection, filterValues, setFilterValues]);
299
+ }, [formatedColumns, sorterController, filterValues]);
292
300
  var boxShadowBox = useRef(null);
293
301
  var headerColumns = useMemo(function () {
294
302
  return formatedColumns.map(function (column) {
@@ -328,20 +336,13 @@ export default function Table(_ref3) {
328
336
  formatedDataSource = filterTableRows(formatedDataSource, filterValues);
329
337
  return formatedDataSource;
330
338
  }, [sorterController, dataSource, formatedColumns, pagination, filterValues]);
331
- return /*#__PURE__*/React.createElement(TableContainer, null, (title || actions) && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
332
- span: 8
333
- }, /*#__PURE__*/React.createElement(TableTitle, null, title)), /*#__PURE__*/React.createElement(Col, {
334
- span: 16
335
- }, /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement(Space, null, actions === null || actions === void 0 ? void 0 : actions.map(function (element) {
336
- if ( /*#__PURE__*/React.isValidElement(element)) {
337
- var action = element;
338
- return /*#__PURE__*/React.cloneElement(action, {
339
- size: 'default'
340
- });
341
- } else {
342
- return element;
343
- }
344
- }))))), /*#__PURE__*/React.createElement(TableContent, {
339
+ var isFlex = useMemo(function () {
340
+ var calculateWidth = columns.reduce(function (pre, column) {
341
+ return pre + (column.hideInTable ? 0 : column.width || DefaultColumnWidth);
342
+ }, 0);
343
+ return !scroll || !scroll.x || calculateWidth < scroll.x;
344
+ }, [scroll, columns]);
345
+ return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(TableContent, {
345
346
  onScroll: function onScroll(e) {
346
347
  var tableContainer = e.target;
347
348
  if (boxShadowBox.current) {
@@ -354,8 +355,9 @@ export default function Table(_ref3) {
354
355
  boxShadowBox.current.style.top = tableContainer.scrollTop + 'px';
355
356
  }
356
357
  },
357
- scroll: scroll
358
- }, scroll && /*#__PURE__*/React.createElement(BoxShadowBox, {
358
+ scroll: scroll,
359
+ isFlex: isFlex
360
+ }, !isFlex && /*#__PURE__*/React.createElement(BoxShadowBox, {
359
361
  ref: boxShadowBox,
360
362
  width: "10px",
361
363
  height: "100%",
@@ -363,18 +365,54 @@ export default function Table(_ref3) {
363
365
  }), /*#__PURE__*/React.createElement(TableHeaderRow, {
364
366
  columns: headerColumns,
365
367
  rowData: titleRowData,
366
- isFlex: !scroll
368
+ isFlex: isFlex
367
369
  }), dataSource.length > 0 ? /*#__PURE__*/React.createElement(TableBody, {
368
370
  direction: "column"
369
371
  }, formatedDataSource.map(function (rowData, index) {
370
372
  if (rowData) return /*#__PURE__*/React.createElement(TableBodyRow, {
371
373
  key: rowData[rowKey],
372
- 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
+ }
373
411
  }, /*#__PURE__*/React.createElement(Columns, {
374
412
  rowIndex: index,
375
413
  rowData: rowData,
376
414
  columns: formatedColumns,
377
- isFlex: !scroll
415
+ isFlex: isFlex
378
416
  }));else return undefined;
379
417
  })) : empty), pagination !== false && dataSource.length !== 0 && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
380
418
  total: (pagination === null || pagination === void 0 ? void 0 : pagination.total) || dataSource.length,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kep-platform/basic-component",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
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.49",
50
+ "@kep-platform/hooks": "^0.0.51",
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": "96bc6255ffe9cdfde9788e0790c92e7c09e48f57"
90
+ "gitHead": "c84a00e8fddc1d7c5f92ec94084e96afa486430f"
91
91
  }