@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.
- package/dist/Avatar/component/Avatar/index.js +1 -1
- package/dist/MemberPicker/components/MultipleOption.js +1 -1
- package/dist/MemberPicker/components/NickLabel.d.ts +1 -1
- package/dist/MemberPicker/components/NickLabel.js +2 -2
- package/dist/MemberPicker/components/Panel.d.ts +1 -1
- package/dist/MemberPicker/components/Panel.js +9 -9
- package/dist/MemberPicker/components/PanelWrapper.d.ts +2 -2
- package/dist/MemberPicker/components/PanelWrapper.js +16 -3
- package/dist/MemberPicker/components/SelectedMemberTags.js +1 -1
- package/dist/MemberPicker/components/SingleOption.js +1 -1
- package/dist/MemberPicker/utils/getUsersWithUserId.d.ts +1 -1
- package/dist/MemberPicker/utils/getUsersWithUserId.js +2 -2
- package/dist/MemberPicker/utils/index.d.ts +1 -1
- package/dist/MemberPicker/utils/index.js +1 -1
- package/dist/Table/helper.d.ts +7 -5
- package/dist/Table/helper.js +13 -14
- package/dist/Table/hooks/useFixed.d.ts +1 -2
- package/dist/Table/hooks/useFixed.js +4 -4
- package/dist/Table/hooks/useRowSelection.js +2 -5
- package/dist/Table/hooks/useScroll.d.ts +2 -3
- package/dist/Table/hooks/useScroll.js +16 -23
- package/dist/Table/index.js +16 -23
- package/dist/Table/style/index.less +8 -24
- package/dist/Table/types.d.ts +0 -1
- package/dist/ald.min.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +0 -1
- package/package.json +2 -7
- package/dist/Table/tests/helper.d.ts +0 -14
- package/dist/Table/tests/helper.js +0 -41
|
@@ -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,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
|
|
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: (
|
|
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: (
|
|
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,
|
|
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:
|
|
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: (
|
|
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:
|
|
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: (
|
|
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,
|
|
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?:
|
|
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
|
-
|
|
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
|
|
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
|
|
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 &&
|
|
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;
|
package/dist/Table/helper.d.ts
CHANGED
|
@@ -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,
|
|
3
|
+
export declare function getTableColumns<TDataItem extends object>({ columns, totalWidth, onError, onSort, }: {
|
|
4
4
|
columns: ITableColumn<TDataItem>[];
|
|
5
|
-
|
|
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>[],
|
|
36
|
+
export declare function getColumnWidths(columns: ITableColumn<unknown>[], totalWidth: number): number[];
|
|
35
37
|
export declare function getNumberFromPercentageStr(str: string): number;
|
|
36
38
|
/**
|
|
37
39
|
* 判断是否百分比字符串
|
package/dist/Table/helper.js
CHANGED
|
@@ -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
|
-
|
|
13
|
+
totalWidth = _ref.totalWidth,
|
|
14
14
|
onError = _ref.onError,
|
|
15
15
|
onSort = _ref.onSort;
|
|
16
|
-
var columnWidths = getColumnWidths(columns,
|
|
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,
|
|
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 *
|
|
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 (
|
|
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 =
|
|
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 =
|
|
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>({
|
|
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
|
|
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
|
|
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:
|
|
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
|
-
|
|
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
|
|
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
|
|
39
|
+
var realWidth = useMemo(function () {
|
|
40
40
|
if (!totalSize) {
|
|
41
41
|
return;
|
|
42
42
|
}
|
|
43
|
-
var width =
|
|
43
|
+
var width = getRealWidth(x, totalSize.width);
|
|
44
44
|
if (y !== undefined) {
|
|
45
|
-
return
|
|
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 (
|
|
63
|
+
if (realWidth && bodyRef.current) {
|
|
68
64
|
// 待表格渲染完成,宽度稳定后,初始化 ping 状态
|
|
69
|
-
changeIsPing();
|
|
65
|
+
changeIsPing(bodyRef.current);
|
|
70
66
|
}
|
|
71
|
-
}, [
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
112
|
+
export function getRealWidth(scrollX, width) {
|
|
120
113
|
if (typeof scrollX === 'string') {
|
|
121
114
|
var percent = getNumberFromPercentageStr(scrollX);
|
|
122
115
|
if (isNaN(percent)) {
|
package/dist/Table/index.js
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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
|
-
|
|
88
|
+
totalWidth: realWidth,
|
|
87
89
|
onError: onError,
|
|
88
90
|
onSort: onSort
|
|
89
91
|
});
|
|
90
|
-
}, [
|
|
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:
|
|
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:
|
|
180
|
+
width: realWidth
|
|
188
181
|
}
|
|
189
182
|
}, isEmpty ? /*#__PURE__*/React.createElement("div", {
|
|
190
183
|
style: {
|