@aloudata/aloudata-design 2.7.4 → 2.7.6

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.
@@ -6,6 +6,7 @@ interface IHeader {
6
6
  columnRange: [number, number];
7
7
  datasource: TValue[][];
8
8
  rowRange: [number, number];
9
+ headerHeight: number;
9
10
  }
10
11
  declare function Body(props: IHeader): React.JSX.Element;
11
12
  declare const _default: React.MemoExoticComponent<typeof Body>;
@@ -5,7 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import React, { memo } from 'react';
8
- import { CELL_HEIGHT, HEADER_HEIGHT } from "../../constant";
8
+ import { CELL_HEIGHT } from "../../constant";
9
9
  import Cell from "./Cell";
10
10
  function Body(props) {
11
11
  var columns = props.columns,
@@ -16,7 +16,8 @@ function Body(props) {
16
16
  endIndex = _props$columnRange[1],
17
17
  _props$rowRange = _slicedToArray(props.rowRange, 2),
18
18
  startRowIndex = _props$rowRange[0],
19
- endRowIndex = _props$rowRange[1];
19
+ endRowIndex = _props$rowRange[1],
20
+ headerHeight = props.headerHeight;
20
21
  return /*#__PURE__*/React.createElement("div", {
21
22
  className: "ald-data-preview-table-body"
22
23
  }, datasource.slice(startRowIndex, endRowIndex).map(function (row, rowIndex) {
@@ -28,7 +29,7 @@ function Body(props) {
28
29
  var style = {
29
30
  height: CELL_HEIGHT,
30
31
  width: columnLayout[columns[columnIndex].id].width,
31
- top: currentRowIndex * CELL_HEIGHT + HEADER_HEIGHT,
32
+ top: currentRowIndex * CELL_HEIGHT + headerHeight,
32
33
  left: columnLayout[columns[columnIndex].id].left,
33
34
  position: 'absolute',
34
35
  textAlign: columns[columnIndex].align || 'left'
@@ -3,6 +3,7 @@ declare function DragBar(props: {
3
3
  wrapWidth: number;
4
4
  columnId: string;
5
5
  onChange: (columnId: string, width: number) => void;
6
+ headerHeight: number;
6
7
  }): React.JSX.Element;
7
8
  declare const _default: React.MemoExoticComponent<typeof DragBar>;
8
9
  export default _default;
@@ -16,7 +16,8 @@ import Mask from "./Mask";
16
16
  function DragBar(props) {
17
17
  var wrapWidth = props.wrapWidth,
18
18
  columnId = props.columnId,
19
- onChange = props.onChange;
19
+ onChange = props.onChange,
20
+ headerHeight = props.headerHeight;
20
21
  var _useState = useState(false),
21
22
  _useState2 = _slicedToArray(_useState, 2),
22
23
  show = _useState2[0],
@@ -52,7 +53,8 @@ function DragBar(props) {
52
53
  e.stopPropagation();
53
54
  },
54
55
  style: {
55
- right: dragBarLeft
56
+ right: dragBarLeft,
57
+ height: headerHeight
56
58
  },
57
59
  className: classNames('ald-data-preview-header-drag-bar', _defineProperty({}, 'ald-data-preview-header-drag-bar-active', show))
58
60
  }, show ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Mask, {
@@ -6,6 +6,7 @@ interface IHeader {
6
6
  columnLayout: IColumnLayout;
7
7
  setWidth: (columnId: string, width: number) => void;
8
8
  columnRange: [number, number];
9
+ headerHeight: number;
9
10
  }
10
11
  export default function Header(props: IHeader): React.JSX.Element;
11
12
  export {};
@@ -5,7 +5,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import React from 'react';
8
- import { HEADER_HEIGHT } from "../../constant";
9
8
  import DragBar from "../DragBar";
10
9
  export default function Header(props) {
11
10
  var contentWidth = props.contentWidth,
@@ -14,7 +13,8 @@ export default function Header(props) {
14
13
  setWidth = props.setWidth,
15
14
  _props$columnRange = _slicedToArray(props.columnRange, 2),
16
15
  startIndex = _props$columnRange[0],
17
- endIndex = _props$columnRange[1];
16
+ endIndex = _props$columnRange[1],
17
+ headerHeight = props.headerHeight;
18
18
  return /*#__PURE__*/React.createElement("div", {
19
19
  className: "ald-data-preview-header",
20
20
  style: {
@@ -24,7 +24,7 @@ export default function Header(props) {
24
24
  var _column$renderHeader;
25
25
  var innerCell = (_column$renderHeader = column.renderHeader) === null || _column$renderHeader === void 0 ? void 0 : _column$renderHeader.call(column, column);
26
26
  var style = {
27
- height: HEADER_HEIGHT,
27
+ height: headerHeight,
28
28
  width: columnLayout[column.id].width,
29
29
  top: 0,
30
30
  left: columnLayout[column.id].left,
@@ -43,7 +43,8 @@ export default function Header(props) {
43
43
  }, column.name)), /*#__PURE__*/React.createElement(DragBar, {
44
44
  columnId: column.id,
45
45
  wrapWidth: columnLayout[column.id].width,
46
- onChange: setWidth
46
+ onChange: setWidth,
47
+ headerHeight: headerHeight
47
48
  }));
48
49
  }));
49
50
  }
@@ -1,5 +1,5 @@
1
1
  export declare const CELL_HEIGHT = 20;
2
- export declare const HEADER_HEIGHT = 32;
2
+ export declare const DEFAULT_HEADER_HEIGHT = 32;
3
3
  export declare const DEFAULT_COLUMN_WIDTH = 100;
4
4
  export declare const PRE_RENDER_RANGE = 100;
5
5
  export declare const UNDEFINED_INDEX = -1;
@@ -1,5 +1,5 @@
1
1
  export var CELL_HEIGHT = 20;
2
- export var HEADER_HEIGHT = 32;
2
+ export var DEFAULT_HEADER_HEIGHT = 32;
3
3
  export var DEFAULT_COLUMN_WIDTH = 100;
4
4
  export var PRE_RENDER_RANGE = 100; //预渲染范围
5
5
 
@@ -6,7 +6,7 @@ import Spin from "../Spin";
6
6
  import Body from "./components/Body";
7
7
  import Error from "./components/Body/Error";
8
8
  import Header from "./components/Header";
9
- import { CELL_HEIGHT, HEADER_HEIGHT } from "./constant";
9
+ import { CELL_HEIGHT, DEFAULT_HEADER_HEIGHT } from "./constant";
10
10
  import useDirection from "./hooks/useDirection";
11
11
  var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
12
12
  var _wrapRef$current5;
@@ -16,13 +16,16 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
16
16
  datasource = _props$datasource === void 0 ? [] : _props$datasource,
17
17
  width = props.width,
18
18
  height = props.height,
19
+ _props$headerHeight = props.headerHeight,
20
+ headerHeight = _props$headerHeight === void 0 ? 0 : _props$headerHeight,
19
21
  loading = props.loading,
20
22
  dataStatus = props.dataStatus,
21
23
  _props$errorMsg = props.errorMsg,
22
24
  errorMsg = _props$errorMsg === void 0 ? '数据加载失败' : _props$errorMsg;
25
+ var realHeaderHeight = Math.max(headerHeight, DEFAULT_HEADER_HEIGHT);
23
26
  var contentHeight = useMemo(function () {
24
- return datasource.length * CELL_HEIGHT + HEADER_HEIGHT;
25
- }, [datasource]);
27
+ return datasource.length * CELL_HEIGHT + realHeaderHeight;
28
+ }, [datasource, realHeaderHeight]);
26
29
  var wrapRef = useRef(null);
27
30
  var progressRef = useRef(null);
28
31
  var _useDirection = useDirection(columns, wrapRef),
@@ -71,9 +74,9 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
71
74
  var skeletonRows = useMemo(function () {
72
75
  var _wrapRef$current4;
73
76
  if (!wrapRef.current) return 0;
74
- var rows = Math.ceil(((((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0) - HEADER_HEIGHT) / CELL_HEIGHT);
77
+ var rows = Math.ceil(((((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0) - realHeaderHeight) / CELL_HEIGHT);
75
78
  return rows - 1 < 0 ? 0 : rows - 1;
76
- }, []);
79
+ }, [realHeaderHeight]);
77
80
  return /*#__PURE__*/React.createElement(ScrollArea, {
78
81
  ref: wrapRef,
79
82
  style: {
@@ -90,7 +93,7 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
90
93
  })
91
94
  }, /*#__PURE__*/React.createElement("div", {
92
95
  style: {
93
- height: dataStatus === 'pending' ? skeletonRows * CELL_HEIGHT + HEADER_HEIGHT : contentHeight,
96
+ height: dataStatus === 'pending' ? skeletonRows * CELL_HEIGHT + realHeaderHeight : contentHeight,
94
97
  position: 'relative'
95
98
  }
96
99
  }, /*#__PURE__*/React.createElement("div", {
@@ -101,6 +104,7 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
101
104
  ref: progressRef
102
105
  }), /*#__PURE__*/React.createElement(Header, {
103
106
  contentWidth: contentWidth,
107
+ headerHeight: realHeaderHeight,
104
108
  columns: tableColumns,
105
109
  columnLayout: columnLayout,
106
110
  setWidth: setColumnsWidth,
@@ -112,7 +116,8 @@ var DataPreviewTable = /*#__PURE__*/forwardRef(function (props, ref) {
112
116
  columnRange: columnRange,
113
117
  columnLayout: columnLayout,
114
118
  datasource: datasource,
115
- rowRange: rowRange
119
+ rowRange: rowRange,
120
+ headerHeight: realHeaderHeight
116
121
  }), dataStatus === 'error' && /*#__PURE__*/React.createElement(Error, {
117
122
  errorMsg: errorMsg,
118
123
  wrapWidth: ((_wrapRef$current5 = wrapRef.current) === null || _wrapRef$current5 === void 0 ? void 0 : _wrapRef$current5.clientWidth) || 0
@@ -4,6 +4,7 @@ export interface ITableProps {
4
4
  datasource?: TValue[][];
5
5
  width?: CSSProperties['width'];
6
6
  height?: CSSProperties['height'];
7
+ headerHeight?: number;
7
8
  dataStatus?: 'pending' | 'success' | 'error';
8
9
  loading?: boolean;
9
10
  errorMsg?: string | React.ReactNode;
@@ -22,13 +22,12 @@
22
22
  }
23
23
 
24
24
  .ald-data-preview-header {
25
- height: 32px;
26
25
  z-index: 2;
27
- background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
28
26
  width: 100%;
29
27
  }
30
28
 
31
29
  .ald-data-preview-header-cell {
30
+ background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
32
31
  height: 100%;
33
32
  position: relative;
34
33
  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
@@ -32,13 +32,13 @@
32
32
  }
33
33
 
34
34
  .ald-empty-title-small {
35
- color: #858585;
35
+ color: #4b5563;
36
36
  font-weight: 400;
37
37
  font-size: 14px;
38
38
  }
39
39
 
40
40
  .ald-empty-description {
41
- color: var(--alias-colors-text-subtlest, #9ca3af);
41
+ color: #4b5563;
42
42
  font-size: 12px;
43
43
  line-height: 20px;
44
44
  font-weight: 400;
@@ -56,28 +56,20 @@ export default function useRowSelection(props) {
56
56
  changeSelectedRowKeys([]);
57
57
  }, [changeSelectedRowKeys]);
58
58
  var onClickAllCheckbox = useCallback(function () {
59
- if (rowSelection !== null && rowSelection !== void 0 && rowSelection.selectedRowKeys) {
60
- // 受控情况
61
- return;
62
- }
63
59
  if (checkboxAllStatus === 'all') {
64
60
  unSelectAll();
65
61
  } else {
66
62
  selectAll();
67
63
  }
68
- }, [checkboxAllStatus, unSelectAll, selectAll, rowSelection]);
64
+ }, [checkboxAllStatus, unSelectAll, selectAll]);
69
65
  var onClickCheckbox = useCallback(function (key, isChecked) {
70
66
  return function () {
71
- if (rowSelection !== null && rowSelection !== void 0 && rowSelection.selectedRowKeys) {
72
- // 受控情况
73
- return;
74
- }
75
67
  var newKeys = isChecked ? selectedRowKeys.filter(function (keyItem) {
76
68
  return keyItem !== key;
77
69
  }) : [].concat(_toConsumableArray(selectedRowKeys), [key]);
78
70
  changeSelectedRowKeys(newKeys);
79
71
  };
80
- }, [selectedRowKeys, rowSelection, changeSelectedRowKeys]);
72
+ }, [selectedRowKeys, changeSelectedRowKeys]);
81
73
 
82
74
  // 全选按钮
83
75
  var getCheckboxAllNode = function getCheckboxAllNode(children) {