@kep-platform/basic-component 0.0.49 → 0.0.50

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 (4) hide show
  1. package/dist/Columns/Columns.d.ts +1 -1
  2. package/dist/Table/Table.d.ts +3 -2
  3. package/dist/Table/Table.js +33 -35
  4. 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/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>[];
@@ -18,5 +19,5 @@ export type TableProps = {
18
19
  empty?: ReactNode;
19
20
  rowSelection?: RowSelection;
20
21
  };
21
- export default function Table({ columns, dataSource, rowKey, actions, title, scroll, onChange, headerRender, pagination: outerPagination, empty, rowSelection, }: TableProps): React.JSX.Element;
22
+ export default function Table({ columns, dataSource, rowKey, scroll, onChange, headerRender, pagination: outerPagination, empty, rowSelection, }: TableProps): React.JSX.Element;
22
23
  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,8 +157,6 @@ 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,
@@ -328,20 +332,13 @@ export default function Table(_ref3) {
328
332
  formatedDataSource = filterTableRows(formatedDataSource, filterValues);
329
333
  return formatedDataSource;
330
334
  }, [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, {
335
+ var isFlex = useMemo(function () {
336
+ var calculateWidth = columns.reduce(function (pre, column) {
337
+ return pre + (column.hideInTable ? 0 : column.width || DefaultColumnWidth);
338
+ }, 0);
339
+ return !scroll || !scroll.x || calculateWidth < scroll.x;
340
+ }, [scroll, columns]);
341
+ return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(TableContent, {
345
342
  onScroll: function onScroll(e) {
346
343
  var tableContainer = e.target;
347
344
  if (boxShadowBox.current) {
@@ -354,8 +351,9 @@ export default function Table(_ref3) {
354
351
  boxShadowBox.current.style.top = tableContainer.scrollTop + 'px';
355
352
  }
356
353
  },
357
- scroll: scroll
358
- }, scroll && /*#__PURE__*/React.createElement(BoxShadowBox, {
354
+ scroll: scroll,
355
+ isFlex: isFlex
356
+ }, !isFlex && /*#__PURE__*/React.createElement(BoxShadowBox, {
359
357
  ref: boxShadowBox,
360
358
  width: "10px",
361
359
  height: "100%",
@@ -363,7 +361,7 @@ export default function Table(_ref3) {
363
361
  }), /*#__PURE__*/React.createElement(TableHeaderRow, {
364
362
  columns: headerColumns,
365
363
  rowData: titleRowData,
366
- isFlex: !scroll
364
+ isFlex: isFlex
367
365
  }), dataSource.length > 0 ? /*#__PURE__*/React.createElement(TableBody, {
368
366
  direction: "column"
369
367
  }, formatedDataSource.map(function (rowData, index) {
@@ -374,7 +372,7 @@ export default function Table(_ref3) {
374
372
  rowIndex: index,
375
373
  rowData: rowData,
376
374
  columns: formatedColumns,
377
- isFlex: !scroll
375
+ isFlex: isFlex
378
376
  }));else return undefined;
379
377
  })) : empty), pagination !== false && dataSource.length !== 0 && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
380
378
  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.50",
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.50",
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": "27794473fb736fc66e4a87b05a5c21c67c1165dc"
91
91
  }