@aloudata/aloudata-design 2.12.4 → 2.12.5
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 +3 -16
- 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 +6 -8
- package/dist/Table/helper.js +14 -13
- package/dist/Table/hooks/useFixed.d.ts +2 -1
- package/dist/Table/hooks/useFixed.js +4 -4
- package/dist/Table/hooks/useRowSelection.js +3 -1
- package/dist/Table/hooks/useScroll.d.ts +3 -2
- package/dist/Table/hooks/useScroll.js +23 -16
- package/dist/Table/index.js +25 -19
- package/dist/Table/style/index.less +32 -32
- package/dist/Table/tests/helper.d.ts +14 -0
- package/dist/Table/tests/helper.js +41 -0
- package/dist/Table/types.d.ts +1 -0
- package/dist/ald.min.css +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -0
- package/package.json +8 -3
|
@@ -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";
|
|
6
5
|
import InternalAvatar from 'antd/lib/avatar/avatar';
|
|
7
6
|
import classNames from 'classnames';
|
|
8
7
|
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";
|
|
6
5
|
import classnames from 'classnames';
|
|
7
6
|
import React, { useContext } from 'react';
|
|
8
7
|
import Checkbox from "../../Checkbox";
|
|
9
8
|
import { EUserType } from "../../ConfigProvider/getUserList";
|
|
10
9
|
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 { EUserType } from "../../ConfigProvider/getUserList";
|
|
2
|
-
import { UserGroup } from "../../Icon";
|
|
3
1
|
import React, { memo } from 'react';
|
|
4
2
|
import Avatar from "../../Avatar";
|
|
3
|
+
import { EUserType } from "../../ConfigProvider/getUserList";
|
|
4
|
+
import { UserGroup } from "../../Icon";
|
|
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";
|
|
2
1
|
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 { EUserType } from "../../ConfigProvider/getUserList";
|
|
17
16
|
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
17
|
+
import { EUserType } from "../../ConfigProvider/getUserList";
|
|
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, TMemberPickerValue } 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?: TMemberPickerValue;
|
|
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";
|
|
10
8
|
import { useRequest } from 'ahooks';
|
|
11
9
|
import _ from 'lodash';
|
|
12
10
|
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,20 +101,7 @@ export var PanelWrapper = function PanelWrapper(_ref) {
|
|
|
101
101
|
} else if (isUser(value) || isUserGroup(value)) {
|
|
102
102
|
setSelectedUserList([value]);
|
|
103
103
|
} else {
|
|
104
|
-
|
|
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
|
-
});
|
|
104
|
+
console.error('props error');
|
|
118
105
|
}
|
|
119
106
|
}, [value, queryByIds]);
|
|
120
107
|
var onSelectedChange = useCallback(function (users) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LocaleContext, getTranslator } from "../../locale/default";
|
|
2
1
|
import classNames from 'classnames';
|
|
3
2
|
import _ from 'lodash';
|
|
4
3
|
import React, { useContext } from 'react';
|
|
5
4
|
import { CloseMLine } from "../../Icon";
|
|
6
5
|
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";
|
|
6
5
|
import classnames from 'classnames';
|
|
7
6
|
import React, { useContext } from 'react';
|
|
8
7
|
import { EUserType } from "../../ConfigProvider/getUserList";
|
|
9
8
|
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 || value.userId);
|
|
5
5
|
}
|
|
6
6
|
export function isUserGroup(value) {
|
|
7
|
-
return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP && value.name;
|
|
7
|
+
return value && _typeof(value) === 'object' && value.type === EUserType.USER_GROUP && (value.name || value.groupId);
|
|
8
8
|
}
|
|
9
9
|
function getUsersWithUserId(obj) {
|
|
10
10
|
var users = [];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { IUserGroup } from "../../ConfigProvider/getUserList";
|
|
2
1
|
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 { EUserType } from "../../ConfigProvider/getUserList";
|
|
2
1
|
import React from 'react';
|
|
2
|
+
import { EUserType } from "../../ConfigProvider/getUserList";
|
|
3
3
|
export var getId = function getId(user) {
|
|
4
4
|
if (user.type === EUserType.USER) return user.userId;
|
|
5
5
|
return user.groupId;
|
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, containerWidth, onError, onSort, }: {
|
|
4
4
|
columns: ITableColumn<TDataItem>[];
|
|
5
|
-
|
|
5
|
+
containerWidth: number;
|
|
6
6
|
onError: ITableProps<TDataItem>['onError'];
|
|
7
7
|
onSort: ITableProps<TDataItem>['onSort'];
|
|
8
8
|
}): {
|
|
@@ -10,6 +10,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
|
|
|
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;
|
|
13
14
|
meta: {
|
|
14
15
|
onError: ((errorInfo: import("./types").ITableCellErrorInfo) => void) | undefined;
|
|
15
16
|
columnWidths: number[];
|
|
@@ -18,22 +19,19 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
|
|
|
18
19
|
title: import("react").ReactNode;
|
|
19
20
|
dataIndex?: string | undefined;
|
|
20
21
|
width?: string | number | undefined;
|
|
22
|
+
minWidth?: number | undefined;
|
|
21
23
|
render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
|
|
22
24
|
ellipsis?: boolean | undefined;
|
|
23
25
|
noPadding?: boolean | undefined;
|
|
24
|
-
align?: "
|
|
26
|
+
align?: "left" | "right" | "center" | undefined;
|
|
25
27
|
fixed?: "left" | "right" | undefined;
|
|
26
28
|
sortOrder?: "ascend" | "descend" | null | undefined;
|
|
27
29
|
};
|
|
28
30
|
}[];
|
|
29
31
|
/**
|
|
30
32
|
* 计算列宽
|
|
31
|
-
* @param columns
|
|
32
|
-
* @param columnSizing
|
|
33
|
-
* @param totalWidth
|
|
34
|
-
* @returns
|
|
35
33
|
*/
|
|
36
|
-
export declare function getColumnWidths(columns: ITableColumn<unknown>[],
|
|
34
|
+
export declare function getColumnWidths(columns: ITableColumn<unknown>[], scrollWidth: number): number[];
|
|
37
35
|
export declare function getNumberFromPercentageStr(str: string): number;
|
|
38
36
|
/**
|
|
39
37
|
* 判断是否百分比字符串
|
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
|
+
containerWidth = _ref.containerWidth,
|
|
14
14
|
onError = _ref.onError,
|
|
15
15
|
onSort = _ref.onSort;
|
|
16
|
-
var columnWidths = getColumnWidths(columns,
|
|
16
|
+
var columnWidths = getColumnWidths(columns, containerWidth);
|
|
17
17
|
// 根据固定列的位置重排列顺序,将 left 的列放到最前面,right 的列放到最后面
|
|
18
18
|
var leftColumns = [];
|
|
19
19
|
var rightColumns = [];
|
|
@@ -29,12 +29,15 @@ 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);
|
|
32
34
|
return {
|
|
33
35
|
// 这里还需要排除掉空字符串的情况,id 不能为 ''
|
|
34
36
|
accessorKey: col.dataIndex || "column-".concat(index),
|
|
35
37
|
header: Header,
|
|
36
38
|
cell: Cell,
|
|
37
39
|
size: columnWidths[index],
|
|
40
|
+
minSize: minSize,
|
|
38
41
|
meta: _objectSpread(_objectSpread({}, col), {}, {
|
|
39
42
|
onError: onError,
|
|
40
43
|
columnWidths: columnWidths,
|
|
@@ -47,12 +50,11 @@ export function getTableColumns(_ref) {
|
|
|
47
50
|
|
|
48
51
|
/**
|
|
49
52
|
* 计算列宽
|
|
50
|
-
* @param columns
|
|
51
|
-
* @param columnSizing
|
|
52
|
-
* @param totalWidth
|
|
53
|
-
* @returns
|
|
54
53
|
*/
|
|
55
|
-
export function getColumnWidths(columns,
|
|
54
|
+
export function getColumnWidths(columns, scrollWidth) {
|
|
55
|
+
if (columns.length === 0) {
|
|
56
|
+
return [];
|
|
57
|
+
}
|
|
56
58
|
// 可改变列宽情况,react-table 可拖动列宽要求列宽值必须是数字,因为将百分比列宽转换为数字
|
|
57
59
|
var DEFAULT_WIDTH = 150;
|
|
58
60
|
// 计算出每个列的具体宽度值
|
|
@@ -67,20 +69,19 @@ export function getColumnWidths(columns, totalWidth) {
|
|
|
67
69
|
if (typeof width === 'string' && isPercentage(width)) {
|
|
68
70
|
var widthNum = getNumberFromPercentageStr(width);
|
|
69
71
|
return {
|
|
70
|
-
width: widthNum *
|
|
72
|
+
width: widthNum * scrollWidth / 100,
|
|
71
73
|
isSpecific: false
|
|
72
74
|
};
|
|
73
75
|
}
|
|
74
76
|
return {
|
|
75
77
|
width: DEFAULT_WIDTH,
|
|
76
|
-
isSpecific: false
|
|
77
|
-
radio: 0
|
|
78
|
+
isSpecific: false
|
|
78
79
|
};
|
|
79
80
|
});
|
|
80
81
|
var totalColumnWidth = _.sum(columnWidthInfos.map(function (col) {
|
|
81
82
|
return col.width;
|
|
82
83
|
}));
|
|
83
|
-
if (
|
|
84
|
+
if (scrollWidth !== totalColumnWidth) {
|
|
84
85
|
// 如果实际宽度不等于列总宽度之和,则将差额的宽度按列宽的比例分配给各个没有设置具体宽度值的列
|
|
85
86
|
|
|
86
87
|
// 指定了具体值的列的总宽度
|
|
@@ -89,7 +90,7 @@ export function getColumnWidths(columns, totalWidth) {
|
|
|
89
90
|
}).map(function (col) {
|
|
90
91
|
return col.width;
|
|
91
92
|
}));
|
|
92
|
-
var offset =
|
|
93
|
+
var offset = scrollWidth - totalColumnWidth;
|
|
93
94
|
|
|
94
95
|
// 计算每个没有设置具体宽度值的列应该分到的差值的占比
|
|
95
96
|
var totalOffsetWidth = totalColumnWidth - specificWidth;
|
|
@@ -109,7 +110,7 @@ export function getColumnWidths(columns, totalWidth) {
|
|
|
109
110
|
var newTotalColumnWidth = _.sum(newColumnWidths);
|
|
110
111
|
|
|
111
112
|
// 计算并处理可能存在的误差
|
|
112
|
-
var errorWidth =
|
|
113
|
+
var errorWidth = scrollWidth - newTotalColumnWidth;
|
|
113
114
|
|
|
114
115
|
// 将误差加到最后一个没有指定具体值的列上
|
|
115
116
|
var colIndex = _.findLastIndex(columnWidthInfos, function (columnWidthInfo) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ColumnDef } from '@tanstack/react-table';
|
|
3
|
-
export default function useFixed<TDataItem>({ tableColumns, y, scrollbarWidth, }: {
|
|
3
|
+
export default function useFixed<TDataItem>({ columnWidths, tableColumns, y, scrollbarWidth, }: {
|
|
4
|
+
columnWidths: number[];
|
|
4
5
|
tableColumns: Array<ColumnDef<TDataItem, unknown>>;
|
|
5
6
|
y?: string | number;
|
|
6
7
|
scrollbarWidth: number;
|
|
@@ -12,7 +12,8 @@ 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
|
|
15
|
+
var columnWidths = _ref.columnWidths,
|
|
16
|
+
tableColumns = _ref.tableColumns,
|
|
16
17
|
y = _ref.y,
|
|
17
18
|
scrollbarWidth = _ref.scrollbarWidth;
|
|
18
19
|
return useCallback(function (index) {
|
|
@@ -20,8 +21,7 @@ export default function useFixed(_ref) {
|
|
|
20
21
|
var isHeader = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
21
22
|
var column = tableColumns[index];
|
|
22
23
|
var _ref2 = column.meta,
|
|
23
|
-
fixed = _ref2.fixed
|
|
24
|
-
columnWidths = _ref2.columnWidths;
|
|
24
|
+
fixed = _ref2.fixed;
|
|
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, columnWidths]);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
/**
|
|
@@ -99,7 +99,9 @@ export default function useRowSelection(props) {
|
|
|
99
99
|
}
|
|
100
100
|
var rowSelectionColumn = {
|
|
101
101
|
dataIndex: '',
|
|
102
|
-
title:
|
|
102
|
+
title: /*#__PURE__*/React.createElement("div", {
|
|
103
|
+
className: prefixCls('row-selection-all-header-wrap')
|
|
104
|
+
}, getCheckboxAllNode()),
|
|
103
105
|
width: 48,
|
|
104
106
|
render: function render(text, record) {
|
|
105
107
|
var _rowSelection$getChec;
|
|
@@ -6,13 +6,14 @@ import { IScroll } from '../types';
|
|
|
6
6
|
* @returns
|
|
7
7
|
*/
|
|
8
8
|
export default function useScroll(props: IProps): {
|
|
9
|
-
|
|
9
|
+
containerWidth: 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;
|
|
16
17
|
};
|
|
17
18
|
interface IProps {
|
|
18
19
|
scroll: IScroll;
|
|
@@ -26,5 +27,5 @@ interface IProps {
|
|
|
26
27
|
* @param scrollX 横向宽度值
|
|
27
28
|
* @param width 容器的宽度
|
|
28
29
|
*/
|
|
29
|
-
export declare function
|
|
30
|
+
export declare function getContainerWidth(scrollX: IScroll['x'], width: number): number;
|
|
30
31
|
export {};
|
|
@@ -36,17 +36,21 @@ 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 containerWidth = useMemo(function () {
|
|
40
40
|
if (!totalSize) {
|
|
41
41
|
return;
|
|
42
42
|
}
|
|
43
|
-
var width =
|
|
43
|
+
var width = getContainerWidth(x, totalSize.width);
|
|
44
44
|
if (y !== undefined) {
|
|
45
|
-
return width - scrollbarWidth;
|
|
45
|
+
return Math.max(width - scrollbarWidth, 0);
|
|
46
46
|
}
|
|
47
47
|
return width;
|
|
48
48
|
}, [x, y, totalSize]);
|
|
49
|
-
var changeIsPing = useCallback(function (
|
|
49
|
+
var changeIsPing = useCallback(function () {
|
|
50
|
+
var elem = bodyRef.current;
|
|
51
|
+
if (!elem) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
50
54
|
var scrollLeft = elem.scrollLeft;
|
|
51
55
|
if (scrollLeft <= 0) {
|
|
52
56
|
setIsPingLeft(false);
|
|
@@ -60,11 +64,11 @@ export default function useScroll(props) {
|
|
|
60
64
|
}
|
|
61
65
|
}, [y]);
|
|
62
66
|
useEffect(function () {
|
|
63
|
-
if (
|
|
67
|
+
if (containerWidth && bodyRef.current) {
|
|
64
68
|
// 待表格渲染完成,宽度稳定后,初始化 ping 状态
|
|
65
|
-
changeIsPing(
|
|
69
|
+
changeIsPing();
|
|
66
70
|
}
|
|
67
|
-
}, [
|
|
71
|
+
}, [containerWidth, changeIsPing]);
|
|
68
72
|
var requestAnimationFrame = useCallback(function (callback) {
|
|
69
73
|
// animationFrame 可以保证滚动时,header 和 body 不会出现不同步的情况
|
|
70
74
|
if (animationFrameId.current !== null) {
|
|
@@ -80,28 +84,31 @@ export default function useScroll(props) {
|
|
|
80
84
|
(_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.scrollTo({
|
|
81
85
|
left: scrollLeft
|
|
82
86
|
});
|
|
83
|
-
changeIsPing(
|
|
87
|
+
changeIsPing();
|
|
84
88
|
});
|
|
85
89
|
}, [requestAnimationFrame, changeIsPing]);
|
|
86
90
|
return {
|
|
87
|
-
|
|
91
|
+
containerWidth: containerWidth,
|
|
88
92
|
headerRef: headerRef,
|
|
89
93
|
bodyRef: bodyRef,
|
|
90
94
|
onBodyScroll: onBodyScroll,
|
|
91
95
|
isPingLeft: isPingLeft,
|
|
92
96
|
isPingRight: isPingRight,
|
|
93
|
-
scrollbarWidth: scrollbarWidth
|
|
97
|
+
scrollbarWidth: scrollbarWidth,
|
|
98
|
+
changeIsPing: changeIsPing
|
|
94
99
|
};
|
|
95
100
|
}
|
|
96
|
-
|
|
97
|
-
|
|
101
|
+
// 计算最大可滚动值
|
|
102
|
+
function getMaxScrollLeft(element, offsetRight) {
|
|
98
103
|
var maxScrollLeft = element.scrollWidth - element.clientWidth - offsetRight;
|
|
99
|
-
|
|
100
104
|
// 允许一些误差,避免因为浮点数计算导致的问题
|
|
101
105
|
var DEVIATION = 2;
|
|
106
|
+
return maxScrollLeft + DEVIATION;
|
|
107
|
+
}
|
|
102
108
|
|
|
103
|
-
|
|
104
|
-
|
|
109
|
+
// 判断是否滚动到最右侧
|
|
110
|
+
function isScrolledToRight(element, offsetRight) {
|
|
111
|
+
return element.scrollLeft >= getMaxScrollLeft(element, offsetRight);
|
|
105
112
|
}
|
|
106
113
|
|
|
107
114
|
/**
|
|
@@ -109,7 +116,7 @@ function isScrolledToRight(element, offsetRight) {
|
|
|
109
116
|
* @param scrollX 横向宽度值
|
|
110
117
|
* @param width 容器的宽度
|
|
111
118
|
*/
|
|
112
|
-
export function
|
|
119
|
+
export function getContainerWidth(scrollX, width) {
|
|
113
120
|
if (typeof scrollX === 'string') {
|
|
114
121
|
var percent = getNumberFromPercentageStr(scrollX);
|
|
115
122
|
if (isNaN(percent)) {
|