@kep-platform/basic-component 0.0.49 → 0.0.51

Sign up to get free protection for your applications and to get access to all the features.
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
  }