@kep-platform/basic-component 0.0.49 → 0.0.50

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