@aloudata/aloudata-design 2.12.4-beta.1 → 2.12.4

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.
@@ -2,10 +2,10 @@ var _excluded = ["size", "showFullValue", "children", "src"];
2
2
  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); }
3
3
  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; }
4
4
  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; }
5
+ import { User } from "../../../Icon";
5
6
  import InternalAvatar from 'antd/lib/avatar/avatar';
6
7
  import classNames from 'classnames';
7
8
  import * as React from 'react';
8
- import { User } from "../../../Icon";
9
9
  var ZERO = 0;
10
10
  var Avatar = function Avatar(props) {
11
11
  var _props$size = props.size,
@@ -2,12 +2,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
2
2
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
3
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
4
4
  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
5
+ import { LocaleContext, getTranslator } from "../../locale/default";
5
6
  import classnames from 'classnames';
6
7
  import React, { useContext } from 'react';
7
8
  import Checkbox from "../../Checkbox";
8
9
  import { EUserType } from "../../ConfigProvider/getUserList";
9
10
  import TextLink from "../../TextLink/index";
10
- import { LocaleContext, getTranslator } from "../../locale/default";
11
11
  import { getAccount, getId, getPhoto } from "../utils";
12
12
  import { isUserGroup } from "../utils/getUsersWithUserId";
13
13
  import NickLabel from "./NickLabel";
@@ -1,5 +1,5 @@
1
+ import { EUserType } from "../../ConfigProvider/getUserList";
1
2
  import React, { ReactNode } from 'react';
2
- import { EUserType } from '../../ConfigProvider/getUserList';
3
3
  interface INickLabelProps {
4
4
  name?: string;
5
5
  id: string;
@@ -1,7 +1,7 @@
1
- import React, { memo } from 'react';
2
- import Avatar from "../../Avatar";
3
1
  import { EUserType } from "../../ConfigProvider/getUserList";
4
2
  import { UserGroup } from "../../Icon";
3
+ import React, { memo } from 'react';
4
+ import Avatar from "../../Avatar";
5
5
  var NickLabel = function NickLabel(_ref) {
6
6
  var photo = _ref.photo,
7
7
  name = _ref.name,
@@ -1,5 +1,5 @@
1
+ import { IUserGroup, TUser, TUserGroupValue, TUserValue } from "../../ConfigProvider/getUserList";
1
2
  import React from 'react';
2
- import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
3
3
  import { EMemberPicker, IUser } from '../interface';
4
4
  interface IPanelProps {
5
5
  type: EMemberPicker;
@@ -13,8 +13,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
13
13
  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; } }
14
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
15
  import classNames from 'classnames';
16
- import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
17
16
  import { EUserType } from "../../ConfigProvider/getUserList";
17
+ import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
18
18
  import Tabs from "../../Tabs";
19
19
  import { LocaleContext, getTranslator } from "../../locale/default";
20
20
  import { EMemberPicker } from "../interface";
@@ -71,7 +71,7 @@ export default function Panel(props) {
71
71
  return getId(item) !== getId(user);
72
72
  }));
73
73
  }, [selectedUsers]);
74
- var panelwidth = useMemo(function () {
74
+ var panelWidth = useMemo(function () {
75
75
  if (dropdownWidth) {
76
76
  return dropdownWidth;
77
77
  } else if (multiple) {
@@ -96,7 +96,7 @@ export default function Panel(props) {
96
96
  var userSelection = /*#__PURE__*/React.createElement(MemberSelection, {
97
97
  className: 'ald-member-picker-member-selection-multiple',
98
98
  userList: dataList.filter(isUser),
99
- width: (panelwidth - 6) / 2,
99
+ width: (panelWidth - 6) / 2,
100
100
  selectedUsers: selectedUsers.filter(isUser),
101
101
  onChange: onSelectionChange,
102
102
  onSearchValueChange: onSearchValueChange,
@@ -107,7 +107,7 @@ export default function Panel(props) {
107
107
  var userGroupSelection = /*#__PURE__*/React.createElement(UserGroupSelection, {
108
108
  className: 'ald-member-picker-member-selection-multiple',
109
109
  userGroupList: dataList.filter(isUserGroup),
110
- width: (panelwidth - 6) / 2,
110
+ width: (panelWidth - 6) / 2,
111
111
  selectedUsersGroup: selectedUsers.filter(isUserGroup),
112
112
  onChange: onSelectionChange,
113
113
  onSearchValueChange: onSearchValueChange,
@@ -137,18 +137,18 @@ export default function Panel(props) {
137
137
  className: "ald-member-tabs"
138
138
  });
139
139
  }
140
- }, [t, dataList, panelwidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type]);
140
+ }, [t, dataList, panelWidth, selectedUsers, onSelectionChange, onSearchValueChange, lockedIds, props.loading, type]);
141
141
  return /*#__PURE__*/React.createElement("div", {
142
142
  className: classNames(className, 'ald-member-picker-wrapper', (_classNames = {}, _defineProperty(_classNames, 'ald-member-picker-multiple', multiple), _defineProperty(_classNames, 'ald-member-picker-single', !multiple), _classNames)),
143
143
  style: {
144
- width: panelwidth
144
+ width: panelWidth
145
145
  }
146
146
  }, multiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
147
147
  className: "ald-member-picker-member-selection-wrapper"
148
148
  }, renderDropdown()), /*#__PURE__*/React.createElement(SelectedMemberTags, {
149
149
  className: 'ald-member-picker-selected-member-tags',
150
150
  selectedUsers: selectedUsers,
151
- width: (panelwidth - 3) / 2,
151
+ width: (panelWidth - 3) / 2,
152
152
  onRemove: onRemove,
153
153
  lockedIds: lockedIds,
154
154
  userList: dataList
@@ -159,7 +159,7 @@ export default function Panel(props) {
159
159
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, type === EMemberPicker.USER && /*#__PURE__*/React.createElement(MemberSelection, {
160
160
  className: 'ald-member-picker-member-selection-single',
161
161
  userList: dataList.filter(isUser),
162
- width: panelwidth - 2,
162
+ width: panelWidth - 2,
163
163
  onChange: onSelectionChange,
164
164
  selectedUsers: selectedUsers.filter(isUser),
165
165
  onSearchValueChange: onSearchValueChange,
@@ -169,7 +169,7 @@ export default function Panel(props) {
169
169
  }), type === EMemberPicker.GROUP && /*#__PURE__*/React.createElement(UserGroupSelection, {
170
170
  className: 'ald-member-picker-member-selection-multiple',
171
171
  userGroupList: dataList.filter(isUserGroup),
172
- width: (panelwidth - 3) / 2,
172
+ width: (panelWidth - 3) / 2,
173
173
  selectedUsersGroup: selectedUsers.filter(isUserGroup),
174
174
  onChange: onSelectionChange,
175
175
  onSearchValueChange: onSearchValueChange,
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
2
  import { IUserGroup, TUser, TUserGroupValue, TUserValue } from '../../ConfigProvider/getUserList';
3
- import { EMemberPicker, IUser, TMemberPickerValue } from '../interface';
3
+ import { EMemberPicker, IUser, MemberPickerValue } from '../interface';
4
4
  interface IProps {
5
5
  type: EMemberPicker;
6
6
  multiple?: boolean;
7
7
  onChange?(v: TUser | (IUser | IUserGroup)): void;
8
8
  dropdownWidth?: number;
9
- value?: TMemberPickerValue;
9
+ value?: MemberPickerValue;
10
10
  className?: string;
11
11
  onCancel?: () => void;
12
12
  lockedIds?: Array<TUserValue | TUserGroupValue>;
@@ -5,11 +5,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
5
5
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
6
6
  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; } }
7
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
+ import { message } from "../..";
9
+ import ConfigProvider from "../../ConfigProvider";
8
10
  import { useRequest } from 'ahooks';
9
11
  import _ from 'lodash';
10
12
  import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
11
- import { message } from "../../";
12
- import ConfigProvider from "../../ConfigProvider";
13
13
  import { EUserType } from "../../ConfigProvider/getUserList";
14
14
  import { LocaleContext, getTranslator } from "../../locale/default";
15
15
  import { isUser, isUserGroup } from "../utils/getUsersWithUserId";
@@ -101,7 +101,20 @@ export var PanelWrapper = function PanelWrapper(_ref) {
101
101
  } else if (isUser(value) || isUserGroup(value)) {
102
102
  setSelectedUserList([value]);
103
103
  } else {
104
- console.error('props error');
104
+ var id = [];
105
+ if (!value) return;
106
+ if (Array.isArray(value) && value.length === 0) {
107
+ setSelectedUserList([]);
108
+ return;
109
+ }
110
+ if (!Array.isArray(value)) {
111
+ id = [value];
112
+ } else {
113
+ id = value;
114
+ }
115
+ queryByIds(id).then(function (result) {
116
+ setSelectedUserList(result);
117
+ });
105
118
  }
106
119
  }, [value, queryByIds]);
107
120
  var onSelectedChange = useCallback(function (users) {
@@ -1,9 +1,9 @@
1
+ import { LocaleContext, getTranslator } from "../../locale/default";
1
2
  import classNames from 'classnames';
2
3
  import _ from 'lodash';
3
4
  import React, { useContext } from 'react';
4
5
  import { CloseMLine } from "../../Icon";
5
6
  import ScrollArea from "../../ScrollArea";
6
- import { LocaleContext, getTranslator } from "../../locale/default";
7
7
  import { getAccount, getId, getPhoto } from "../utils";
8
8
  import NickLabel from "./NickLabel";
9
9
  import { userDisplayNameIsRepeated } from "./Panel";
@@ -2,11 +2,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
2
2
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
3
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
4
4
  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
5
+ import { LocaleContext, getTranslator } from "../../locale/default";
5
6
  import classnames from 'classnames';
6
7
  import React, { useContext } from 'react';
7
8
  import { EUserType } from "../../ConfigProvider/getUserList";
8
9
  import TextLink from "../../TextLink/index";
9
- import { LocaleContext, getTranslator } from "../../locale/default";
10
10
  import { getAccount, getId, getPhoto } from "../utils";
11
11
  import { isUserGroup } from "../utils/getUsersWithUserId";
12
12
  import NickLabel from "./NickLabel";
@@ -1,4 +1,4 @@
1
- import { IUserGroup } from '../../ConfigProvider/getUserList';
1
+ import { IUserGroup } from "../../ConfigProvider/getUserList";
2
2
  import { IUser } from '../interface';
3
3
  export declare function isUser(value: any): value is IUser;
4
4
  export declare function isUserGroup(value: any): value is IUserGroup;
@@ -1,10 +1,10 @@
1
1
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
2
  import { EUserType } from "../../ConfigProvider/getUserList";
3
3
  export function isUser(value) {
4
- return value && _typeof(value) === 'object' && value.type === EUserType.USER && (value.nickname || value.name || value.userId);
4
+ return value && _typeof(value) === 'object' && value.type === EUserType.USER && (value.nickname || value.name);
5
5
  }
6
6
  export function isUserGroup(value) {
7
- return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP && (value.name || value.groupId);
7
+ return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP && value.name;
8
8
  }
9
9
  function getUsersWithUserId(obj) {
10
10
  var users = [];
@@ -1,5 +1,5 @@
1
+ import { IUserGroup } from "../../ConfigProvider/getUserList";
1
2
  import React from 'react';
2
- import { IUserGroup } from '../../ConfigProvider/getUserList';
3
3
  import { IUser } from '../interface';
4
4
  export declare const getId: (user: IUser | IUserGroup) => string;
5
5
  export declare const getPhoto: (user: IUser | IUserGroup) => React.JSX.Element | null;
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
1
  import { EUserType } from "../../ConfigProvider/getUserList";
2
+ import React from 'react';
3
3
  export var getId = function getId(user) {
4
4
  if (user.type === EUserType.USER) return user.userId;
5
5
  return user.groupId;
@@ -1,8 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { ITableColumn, ITableProps } from './types';
3
- export declare function getTableColumns<TDataItem extends object>({ columns, containerWidth, onError, onSort, }: {
3
+ export declare function getTableColumns<TDataItem extends object>({ columns, totalWidth, onError, onSort, }: {
4
4
  columns: ITableColumn<TDataItem>[];
5
- containerWidth: number;
5
+ totalWidth: number;
6
6
  onError: ITableProps<TDataItem>['onError'];
7
7
  onSort: ITableProps<TDataItem>['onSort'];
8
8
  }): {
@@ -10,7 +10,6 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
10
10
  header: (props: import("./components/Header").IProps<TDataItem>) => import("react").JSX.Element;
11
11
  cell: (props: import("./components/Cell").IProps<TDataItem>) => import("react").JSX.Element;
12
12
  size: number;
13
- minSize: number;
14
13
  meta: {
15
14
  onError: ((errorInfo: import("./types").ITableCellErrorInfo) => void) | undefined;
16
15
  columnWidths: number[];
@@ -19,7 +18,6 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
19
18
  title: import("react").ReactNode;
20
19
  dataIndex?: string | undefined;
21
20
  width?: string | number | undefined;
22
- minWidth?: number | undefined;
23
21
  render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
24
22
  ellipsis?: boolean | undefined;
25
23
  noPadding?: boolean | undefined;
@@ -30,8 +28,12 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
30
28
  }[];
31
29
  /**
32
30
  * 计算列宽
31
+ * @param columns
32
+ * @param columnSizing
33
+ * @param totalWidth
34
+ * @returns
33
35
  */
34
- export declare function getColumnWidths(columns: ITableColumn<unknown>[], scrollWidth: number): number[];
36
+ export declare function getColumnWidths(columns: ITableColumn<unknown>[], totalWidth: number): number[];
35
37
  export declare function getNumberFromPercentageStr(str: string): number;
36
38
  /**
37
39
  * 判断是否百分比字符串
@@ -10,10 +10,10 @@ import Cell from "./components/Cell";
10
10
  import Header from "./components/Header";
11
11
  export function getTableColumns(_ref) {
12
12
  var columns = _ref.columns,
13
- containerWidth = _ref.containerWidth,
13
+ totalWidth = _ref.totalWidth,
14
14
  onError = _ref.onError,
15
15
  onSort = _ref.onSort;
16
- var columnWidths = getColumnWidths(columns, containerWidth);
16
+ var columnWidths = getColumnWidths(columns, totalWidth);
17
17
  // 根据固定列的位置重排列顺序,将 left 的列放到最前面,right 的列放到最后面
18
18
  var leftColumns = [];
19
19
  var rightColumns = [];
@@ -29,15 +29,12 @@ export function getTableColumns(_ref) {
29
29
  });
30
30
  var sortedColumns = [].concat(leftColumns, unFixedColumns, rightColumns);
31
31
  return _.map(sortedColumns, function (col, index) {
32
- // 最小宽度不能小于 40px,因为每个 cell 存在左右 padding,太小的宽度会导致 resize 列后看不出这个列的标题
33
- var minSize = Math.max(col.minWidth || 0, 40);
34
32
  return {
35
33
  // 这里还需要排除掉空字符串的情况,id 不能为 ''
36
34
  accessorKey: col.dataIndex || "column-".concat(index),
37
35
  header: Header,
38
36
  cell: Cell,
39
37
  size: columnWidths[index],
40
- minSize: minSize,
41
38
  meta: _objectSpread(_objectSpread({}, col), {}, {
42
39
  onError: onError,
43
40
  columnWidths: columnWidths,
@@ -50,11 +47,12 @@ export function getTableColumns(_ref) {
50
47
 
51
48
  /**
52
49
  * 计算列宽
50
+ * @param columns
51
+ * @param columnSizing
52
+ * @param totalWidth
53
+ * @returns
53
54
  */
54
- export function getColumnWidths(columns, scrollWidth) {
55
- if (columns.length === 0) {
56
- return [];
57
- }
55
+ export function getColumnWidths(columns, totalWidth) {
58
56
  // 可改变列宽情况,react-table 可拖动列宽要求列宽值必须是数字,因为将百分比列宽转换为数字
59
57
  var DEFAULT_WIDTH = 150;
60
58
  // 计算出每个列的具体宽度值
@@ -69,19 +67,20 @@ export function getColumnWidths(columns, scrollWidth) {
69
67
  if (typeof width === 'string' && isPercentage(width)) {
70
68
  var widthNum = getNumberFromPercentageStr(width);
71
69
  return {
72
- width: widthNum * scrollWidth / 100,
70
+ width: widthNum * totalWidth / 100,
73
71
  isSpecific: false
74
72
  };
75
73
  }
76
74
  return {
77
75
  width: DEFAULT_WIDTH,
78
- isSpecific: false
76
+ isSpecific: false,
77
+ radio: 0
79
78
  };
80
79
  });
81
80
  var totalColumnWidth = _.sum(columnWidthInfos.map(function (col) {
82
81
  return col.width;
83
82
  }));
84
- if (scrollWidth !== totalColumnWidth) {
83
+ if (totalWidth !== totalColumnWidth) {
85
84
  // 如果实际宽度不等于列总宽度之和,则将差额的宽度按列宽的比例分配给各个没有设置具体宽度值的列
86
85
 
87
86
  // 指定了具体值的列的总宽度
@@ -90,7 +89,7 @@ export function getColumnWidths(columns, scrollWidth) {
90
89
  }).map(function (col) {
91
90
  return col.width;
92
91
  }));
93
- var offset = scrollWidth - totalColumnWidth;
92
+ var offset = totalWidth - totalColumnWidth;
94
93
 
95
94
  // 计算每个没有设置具体宽度值的列应该分到的差值的占比
96
95
  var totalOffsetWidth = totalColumnWidth - specificWidth;
@@ -110,7 +109,7 @@ export function getColumnWidths(columns, scrollWidth) {
110
109
  var newTotalColumnWidth = _.sum(newColumnWidths);
111
110
 
112
111
  // 计算并处理可能存在的误差
113
- var errorWidth = scrollWidth - newTotalColumnWidth;
112
+ var errorWidth = totalWidth - newTotalColumnWidth;
114
113
 
115
114
  // 将误差加到最后一个没有指定具体值的列上
116
115
  var colIndex = _.findLastIndex(columnWidthInfos, function (columnWidthInfo) {
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ColumnDef } from '@tanstack/react-table';
3
- export default function useFixed<TDataItem>({ columnWidths, tableColumns, y, scrollbarWidth, }: {
4
- columnWidths: number[];
3
+ export default function useFixed<TDataItem>({ tableColumns, y, scrollbarWidth, }: {
5
4
  tableColumns: Array<ColumnDef<TDataItem, unknown>>;
6
5
  y?: string | number;
7
6
  scrollbarWidth: number;
@@ -12,8 +12,7 @@ import classnames from 'classnames';
12
12
  import { useCallback } from 'react';
13
13
  import { prefixCls } from "../helper";
14
14
  export default function useFixed(_ref) {
15
- var columnWidths = _ref.columnWidths,
16
- tableColumns = _ref.tableColumns,
15
+ var tableColumns = _ref.tableColumns,
17
16
  y = _ref.y,
18
17
  scrollbarWidth = _ref.scrollbarWidth;
19
18
  return useCallback(function (index) {
@@ -21,7 +20,8 @@ export default function useFixed(_ref) {
21
20
  var isHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
22
21
  var column = tableColumns[index];
23
22
  var _ref2 = column.meta,
24
- fixed = _ref2.fixed;
23
+ fixed = _ref2.fixed,
24
+ columnWidths = _ref2.columnWidths;
25
25
  var style = {};
26
26
  if (fixed === 'left') {
27
27
  style.left = getFixedColumnOffset(columnWidths, index, true);
@@ -32,7 +32,7 @@ export default function useFixed(_ref) {
32
32
  className: classnames((_classnames = {}, _defineProperty(_classnames, prefixCls('fixed-left'), fixed === 'left'), _defineProperty(_classnames, prefixCls('fixed-right'), fixed === 'right'), _classnames)),
33
33
  style: style
34
34
  };
35
- }, [tableColumns, y, scrollbarWidth, columnWidths]);
35
+ }, [tableColumns, y, scrollbarWidth]);
36
36
  }
37
37
 
38
38
  /**
@@ -99,9 +99,7 @@ export default function useRowSelection(props) {
99
99
  }
100
100
  var rowSelectionColumn = {
101
101
  dataIndex: '',
102
- title: /*#__PURE__*/React.createElement("div", {
103
- className: prefixCls('row-selection-all-header-wrap')
104
- }, getCheckboxAllNode()),
102
+ title: getCheckboxAllNode(),
105
103
  width: 48,
106
104
  render: function render(text, record) {
107
105
  var _rowSelection$getChec;
@@ -115,8 +113,7 @@ export default function useRowSelection(props) {
115
113
  checked: isChecked
116
114
  }, checkboxProps)));
117
115
  },
118
- fixed: rowSelection.fixed ? 'left' : undefined,
119
- align: 'left'
116
+ fixed: rowSelection.fixed ? 'left' : undefined
120
117
  };
121
118
  var selectedRowKeysInCurrPage = getDataWithoutDisabled(data, rowSelection.getCheckboxProps).map(function (record) {
122
119
  return getRowKey(record, rowKey);
@@ -6,14 +6,13 @@ import { IScroll } from '../types';
6
6
  * @returns
7
7
  */
8
8
  export default function useScroll(props: IProps): {
9
- containerWidth: number | undefined;
9
+ realWidth: number | undefined;
10
10
  headerRef: import("react").RefObject<HTMLDivElement>;
11
11
  bodyRef: import("react").RefObject<HTMLDivElement>;
12
12
  onBodyScroll: (e: React.UIEvent<HTMLDivElement>) => void;
13
13
  isPingLeft: boolean;
14
14
  isPingRight: boolean;
15
15
  scrollbarWidth: number;
16
- changeIsPing: () => void;
17
16
  };
18
17
  interface IProps {
19
18
  scroll: IScroll;
@@ -27,5 +26,5 @@ interface IProps {
27
26
  * @param scrollX 横向宽度值
28
27
  * @param width 容器的宽度
29
28
  */
30
- export declare function getContainerWidth(scrollX: IScroll['x'], width: number): number;
29
+ export declare function getRealWidth(scrollX: IScroll['x'], width: number): number;
31
30
  export {};
@@ -36,21 +36,17 @@ export default function useScroll(props) {
36
36
  setIsPingRight = _useState4[1];
37
37
  var x = scroll.x,
38
38
  y = scroll.y;
39
- var containerWidth = useMemo(function () {
39
+ var realWidth = useMemo(function () {
40
40
  if (!totalSize) {
41
41
  return;
42
42
  }
43
- var width = getContainerWidth(x, totalSize.width);
43
+ var width = getRealWidth(x, totalSize.width);
44
44
  if (y !== undefined) {
45
- return Math.max(width - scrollbarWidth, 0);
45
+ return width - scrollbarWidth;
46
46
  }
47
47
  return width;
48
48
  }, [x, y, totalSize]);
49
- var changeIsPing = useCallback(function () {
50
- var elem = bodyRef.current;
51
- if (!elem) {
52
- return;
53
- }
49
+ var changeIsPing = useCallback(function (elem) {
54
50
  var scrollLeft = elem.scrollLeft;
55
51
  if (scrollLeft <= 0) {
56
52
  setIsPingLeft(false);
@@ -64,11 +60,11 @@ export default function useScroll(props) {
64
60
  }
65
61
  }, [y]);
66
62
  useEffect(function () {
67
- if (containerWidth && bodyRef.current) {
63
+ if (realWidth && bodyRef.current) {
68
64
  // 待表格渲染完成,宽度稳定后,初始化 ping 状态
69
- changeIsPing();
65
+ changeIsPing(bodyRef.current);
70
66
  }
71
- }, [containerWidth, changeIsPing]);
67
+ }, [realWidth, changeIsPing]);
72
68
  var requestAnimationFrame = useCallback(function (callback) {
73
69
  // animationFrame 可以保证滚动时,header 和 body 不会出现不同步的情况
74
70
  if (animationFrameId.current !== null) {
@@ -84,31 +80,28 @@ export default function useScroll(props) {
84
80
  (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.scrollTo({
85
81
  left: scrollLeft
86
82
  });
87
- changeIsPing();
83
+ changeIsPing(target);
88
84
  });
89
85
  }, [requestAnimationFrame, changeIsPing]);
90
86
  return {
91
- containerWidth: containerWidth,
87
+ realWidth: realWidth,
92
88
  headerRef: headerRef,
93
89
  bodyRef: bodyRef,
94
90
  onBodyScroll: onBodyScroll,
95
91
  isPingLeft: isPingLeft,
96
92
  isPingRight: isPingRight,
97
- scrollbarWidth: scrollbarWidth,
98
- changeIsPing: changeIsPing
93
+ scrollbarWidth: scrollbarWidth
99
94
  };
100
95
  }
101
- // 计算最大可滚动值
102
- function getMaxScrollLeft(element, offsetRight) {
96
+ function isScrolledToRight(element, offsetRight) {
97
+ // 计算最大可滚动值
103
98
  var maxScrollLeft = element.scrollWidth - element.clientWidth - offsetRight;
99
+
104
100
  // 允许一些误差,避免因为浮点数计算导致的问题
105
101
  var DEVIATION = 2;
106
- return maxScrollLeft + DEVIATION;
107
- }
108
102
 
109
- // 判断是否滚动到最右侧
110
- function isScrolledToRight(element, offsetRight) {
111
- return element.scrollLeft >= getMaxScrollLeft(element, offsetRight);
103
+ // 判断是否滚动到最右侧
104
+ return element.scrollLeft >= maxScrollLeft - DEVIATION;
112
105
  }
113
106
 
114
107
  /**
@@ -116,7 +109,7 @@ function isScrolledToRight(element, offsetRight) {
116
109
  * @param scrollX 横向宽度值
117
110
  * @param width 容器的宽度
118
111
  */
119
- export function getContainerWidth(scrollX, width) {
112
+ export function getRealWidth(scrollX, width) {
120
113
  if (typeof scrollX === 'string') {
121
114
  var percent = getNumberFromPercentageStr(scrollX);
122
115
  if (isNaN(percent)) {
@@ -14,7 +14,7 @@ import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-tabl
14
14
  import classnames from 'classnames';
15
15
  import _ from 'lodash';
16
16
  import ResizeObserver from 'rc-resize-observer';
17
- import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
17
+ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
18
18
  import { Empty, Spin } from '..';
19
19
  import ExpandCell from "./components/ExpandCell";
20
20
  import Footer from "./components/Footer";
@@ -54,14 +54,13 @@ function Table(props, ref) {
54
54
  totalSize: totalSize,
55
55
  scroll: scroll
56
56
  }),
57
- containerWidth = _useScroll.containerWidth,
57
+ realWidth = _useScroll.realWidth,
58
58
  onBodyScroll = _useScroll.onBodyScroll,
59
59
  headerRef = _useScroll.headerRef,
60
60
  bodyRef = _useScroll.bodyRef,
61
61
  isPingLeft = _useScroll.isPingLeft,
62
62
  isPingRight = _useScroll.isPingRight,
63
- scrollbarWidth = _useScroll.scrollbarWidth,
64
- changeIsPing = _useScroll.changeIsPing;
63
+ scrollbarWidth = _useScroll.scrollbarWidth;
65
64
  var scrollToFirstRow = useCallback(function () {
66
65
  if (!bodyRef.current) {
67
66
  return;
@@ -81,13 +80,21 @@ function Table(props, ref) {
81
80
  var expandableConfig = getExpandableConfig(expandable);
82
81
  var rowSelectionInfo = useRowSelection(props);
83
82
  var tableColumns = useMemo(function () {
83
+ if (!totalSize || !realWidth) {
84
+ return [];
85
+ }
84
86
  return getTableColumns({
85
87
  columns: rowSelectionInfo.columns,
86
- containerWidth: containerWidth || 0,
88
+ totalWidth: realWidth,
87
89
  onError: onError,
88
90
  onSort: onSort
89
91
  });
90
- }, [containerWidth, onError, onSort, rowSelectionInfo.columns]);
92
+ }, [totalSize, realWidth, onError, onSort, rowSelectionInfo.columns]);
93
+ var getColumnFixedInfo = useFixed({
94
+ tableColumns: tableColumns,
95
+ y: y,
96
+ scrollbarWidth: scrollbarWidth
97
+ });
91
98
  var tableInstance = useReactTable({
92
99
  columns: tableColumns,
93
100
  // 排除掉被折叠的行
@@ -98,18 +105,9 @@ function Table(props, ref) {
98
105
  },
99
106
  columnResizeMode: 'onChange'
100
107
  });
101
- var headerGroups = tableInstance.getHeaderGroups();
102
- var columnWidths = headerGroups[0].headers.map(function (header) {
103
- return header.getSize();
104
- });
105
- var getColumnFixedInfo = useFixed({
106
- columnWidths: columnWidths,
107
- tableColumns: tableColumns,
108
- y: y,
109
- scrollbarWidth: scrollbarWidth
110
- });
111
108
 
112
109
  // 渲染 header
110
+ var headerGroups = tableInstance.getHeaderGroups();
113
111
  var _tableInstance$getRow = tableInstance.getRowModel(),
114
112
  rows = _tableInstance$getRow.rows;
115
113
  var isStickyWork = !!sticky && y === undefined;
@@ -117,11 +115,6 @@ function Table(props, ref) {
117
115
  if (isStickyWork && _.get(sticky, 'offsetHeader')) {
118
116
  headerStyle.top = _.get(sticky, 'offsetHeader', 0);
119
117
  }
120
- var totalColumnsWidth = _.sum(columnWidths);
121
- useEffect(function () {
122
- // 总列宽改变时,重新计算是否需要显示固定列的阴影
123
- changeIsPing();
124
- }, [changeIsPing, totalColumnsWidth]);
125
118
  var headerContent = /*#__PURE__*/React.createElement("div", {
126
119
  className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _classnames)),
127
120
  ref: headerRef,
@@ -131,7 +124,7 @@ function Table(props, ref) {
131
124
  className: prefixCls('tr'),
132
125
  key: headerGroup.id,
133
126
  style: {
134
- width: totalColumnsWidth
127
+ width: realWidth
135
128
  }
136
129
  }, _.map(headerGroup.headers, function (header, index) {
137
130
  var _classnames2;
@@ -184,7 +177,7 @@ function Table(props, ref) {
184
177
  var bodyContent = /*#__PURE__*/React.createElement("div", {
185
178
  className: prefixCls('body'),
186
179
  style: {
187
- width: totalColumnsWidth
180
+ width: realWidth
188
181
  }
189
182
  }, isEmpty ? /*#__PURE__*/React.createElement("div", {
190
183
  style: {