@hsu-react/ui 0.0.9 → 0.0.11
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/README.md +2 -2
- package/es/components/FormItem/ItemContainer/index.d.ts +2 -0
- package/es/components/FormItem/ItemContainer/index.js +4 -15
- package/es/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.d.ts +3 -3
- package/es/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.js +3 -3
- package/es/components/Search/SearchAdvanced/index.js +26 -148
- package/es/components/Search/SearchCard/index.js +1 -1
- package/es/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.js +2 -2
- package/es/components/Search/SearchCollapsible/index.js +17 -138
- package/es/components/Search/SearchWithFilter/index.js +4 -143
- package/es/components/Search/SearchWithMore/index.js +11 -142
- package/es/components/Search/_components/FilterDropdown/index.js +5 -6
- package/es/components/Search/_components/SearchBase/index.d.ts +32 -0
- package/es/components/Search/_components/SearchBase/index.js +185 -0
- package/es/components/Search/_hooks/useSearchCommon.js +5 -11
- package/es/components/Search/_hooks/useSearchExpand.js +4 -13
- package/es/components/Search/_utils/calculateButtonGroupAndColumnWidth.js +3 -10
- package/es/components/Search/_utils/calculateVisibleItems.js +4 -5
- package/es/components/Search/_utils/index.d.ts +2 -0
- package/es/components/Search/_utils/index.js +3 -1
- package/es/components/Search/_utils/measureButtonGroupWidth.d.ts +6 -0
- package/es/components/Search/_utils/measureButtonGroupWidth.js +18 -0
- package/es/components/Search/_utils/shouldDisplayExtraItem.d.ts +11 -0
- package/es/components/Search/_utils/shouldDisplayExtraItem.js +13 -0
- package/es/components/Search/index.d.ts +4 -0
- package/es/components/Search/index.js +6 -133
- package/es/components/Table/_hooks/useEllipsisTooltip.js +4 -2
- package/es/components/Table/_hooks/useTableColumns.d.ts +1 -0
- package/es/components/Table/_hooks/useTableColumns.js +35 -2
- package/es/components/Table/index.js +2 -1
- package/es/components/TextEllipsis/index.js +32 -14
- package/lib/components/FormItem/ItemContainer/index.d.ts +2 -0
- package/lib/components/FormItem/ItemContainer/index.js +2 -5
- package/lib/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.d.ts +3 -3
- package/lib/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.js +3 -3
- package/lib/components/Search/SearchAdvanced/index.js +19 -134
- package/lib/components/Search/SearchCard/index.js +1 -1
- package/lib/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.js +2 -2
- package/lib/components/Search/SearchCollapsible/index.js +12 -124
- package/lib/components/Search/SearchWithFilter/index.js +5 -129
- package/lib/components/Search/SearchWithMore/index.js +7 -126
- package/lib/components/Search/_components/FilterDropdown/index.js +5 -6
- package/lib/components/Search/_components/SearchBase/index.d.ts +32 -0
- package/lib/components/Search/_components/SearchBase/index.js +169 -0
- package/lib/components/Search/_hooks/useSearchCommon.js +4 -6
- package/lib/components/Search/_hooks/useSearchExpand.js +2 -13
- package/lib/components/Search/_utils/calculateButtonGroupAndColumnWidth.js +2 -10
- package/lib/components/Search/_utils/calculateVisibleItems.js +3 -5
- package/lib/components/Search/_utils/index.d.ts +2 -0
- package/lib/components/Search/_utils/index.js +15 -1
- package/lib/components/Search/_utils/measureButtonGroupWidth.d.ts +6 -0
- package/lib/components/Search/_utils/measureButtonGroupWidth.js +24 -0
- package/lib/components/Search/_utils/shouldDisplayExtraItem.d.ts +11 -0
- package/lib/components/Search/_utils/shouldDisplayExtraItem.js +19 -0
- package/lib/components/Search/index.d.ts +4 -0
- package/lib/components/Search/index.js +8 -119
- package/lib/components/Table/_hooks/useEllipsisTooltip.js +3 -1
- package/lib/components/Table/_hooks/useTableColumns.d.ts +1 -0
- package/lib/components/Table/_hooks/useTableColumns.js +31 -2
- package/lib/components/Table/index.js +2 -1
- package/lib/components/TextEllipsis/index.js +27 -14
- package/package.json +1 -1
- package/src/components/FormItem/ItemContainer/index.tsx +4 -7
- package/src/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.tsx +6 -6
- package/src/components/Search/SearchAdvanced/index.tsx +25 -164
- package/src/components/Search/SearchCard/index.tsx +1 -1
- package/src/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.tsx +2 -2
- package/src/components/Search/SearchCollapsible/index.tsx +13 -162
- package/src/components/Search/SearchWithFilter/index.tsx +2 -164
- package/src/components/Search/SearchWithMore/index.tsx +9 -161
- package/src/components/Search/_components/FilterDropdown/index.tsx +5 -6
- package/src/components/Search/_components/SearchBase/index.tsx +224 -0
- package/src/components/Search/_hooks/useSearchCommon.ts +10 -13
- package/src/components/Search/_hooks/useSearchExpand.ts +3 -13
- package/src/components/Search/_utils/calculateButtonGroupAndColumnWidth.ts +2 -10
- package/src/components/Search/_utils/calculateVisibleItems.ts +10 -11
- package/src/components/Search/_utils/index.ts +2 -0
- package/src/components/Search/_utils/measureButtonGroupWidth.ts +23 -0
- package/src/components/Search/_utils/shouldDisplayExtraItem.ts +23 -0
- package/src/components/Search/index.tsx +7 -153
- package/src/components/Table/_hooks/useEllipsisTooltip.ts +2 -4
- package/src/components/Table/_hooks/useTableColumns.tsx +41 -1
- package/src/components/Table/index.md +2 -0
- package/src/components/Table/index.tsx +1 -0
- package/src/components/TextEllipsis/index.md +1 -1
- package/src/components/TextEllipsis/index.tsx +33 -18
- /package/es/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.d.ts +0 -0
- /package/lib/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.d.ts +0 -0
|
@@ -5,6 +5,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
5
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import { useState, useEffect, useCallback } from "react";
|
|
8
|
+
import { measureButtonGroupWidth } from "../_utils";
|
|
9
|
+
|
|
8
10
|
/**
|
|
9
11
|
* 基于宽度自适应控制展开/收起的Hook
|
|
10
12
|
* @param containerRef 容器引用
|
|
@@ -35,25 +37,14 @@ export function useSearchExpand(containerRef, buttonGroupRef, itemClassName, ite
|
|
|
35
37
|
}
|
|
36
38
|
var container = containerRef.current;
|
|
37
39
|
var calculateVisibleItems = function calculateVisibleItems() {
|
|
40
|
+
var _measureButtonGroupWi;
|
|
38
41
|
if (!containerRef.current || !buttonGroupRef.current) return;
|
|
39
42
|
var containerWidth = container.offsetWidth;
|
|
40
43
|
// 减去padding
|
|
41
44
|
var availableWidth = containerWidth - 30; // 15px padding on each side
|
|
42
45
|
|
|
43
46
|
// 获取按钮组的实际宽度(计算所有子元素宽度总和)
|
|
44
|
-
var buttonGroupWidth = 0;
|
|
45
|
-
var buttonChildren = Array.from(buttonGroupRef.current.children);
|
|
46
|
-
if (buttonChildren.length > 0) {
|
|
47
|
-
// 计算所有子元素的宽度总和
|
|
48
|
-
var totalWidth = 0;
|
|
49
|
-
buttonChildren === null || buttonChildren === void 0 || buttonChildren.forEach(function (child) {
|
|
50
|
-
totalWidth += child.offsetWidth;
|
|
51
|
-
});
|
|
52
|
-
// 加上子元素之间的间距(column-gap: 10px)
|
|
53
|
-
var childGap = 5;
|
|
54
|
-
totalWidth += (buttonChildren.length - 1) * childGap;
|
|
55
|
-
buttonGroupWidth = totalWidth;
|
|
56
|
-
}
|
|
47
|
+
var buttonGroupWidth = (_measureButtonGroupWi = measureButtonGroupWidth(buttonGroupRef.current)) !== null && _measureButtonGroupWi !== void 0 ? _measureButtonGroupWi : 0;
|
|
57
48
|
|
|
58
49
|
// 获取所有搜索项元素
|
|
59
50
|
var items = container.querySelectorAll("".concat(itemClassName));
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { measureButtonGroupWidth } from "./measureButtonGroupWidth";
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* 计算按钮组宽度和列宽
|
|
3
5
|
* @param containerRef 容器引用
|
|
@@ -16,16 +18,7 @@ export function calculateButtonGroupAndColumnWidth(containerRef, buttonGroupRef,
|
|
|
16
18
|
var gap = 10; // 项之间的间距
|
|
17
19
|
|
|
18
20
|
// 计算按钮组宽度
|
|
19
|
-
|
|
20
|
-
if (buttonChildren.length > 0) {
|
|
21
|
-
var totalWidth = 0;
|
|
22
|
-
buttonChildren === null || buttonChildren === void 0 || buttonChildren.forEach(function (child) {
|
|
23
|
-
totalWidth += child.offsetWidth;
|
|
24
|
-
});
|
|
25
|
-
var childGap = 5;
|
|
26
|
-
totalWidth += (buttonChildren.length - 1) * childGap;
|
|
27
|
-
buttonGroupWidth = totalWidth;
|
|
28
|
-
}
|
|
21
|
+
buttonGroupWidth = measureButtonGroupWidth(buttonGroupRef.current);
|
|
29
22
|
|
|
30
23
|
// 计算列宽(单个搜索项的默认宽度)
|
|
31
24
|
if (adaptiveColumnNum > 0) {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* 计算当前应该显示的搜索项
|
|
3
5
|
* @param searchItems 所有搜索项
|
|
@@ -13,7 +15,7 @@ export function calculateVisibleItems(searchItems, expand, columnNum, visibleIte
|
|
|
13
15
|
var visibleItems = searchItems.filter(function (item) {
|
|
14
16
|
return item.visible;
|
|
15
17
|
});
|
|
16
|
-
var hasCustomWidth = searchItems.
|
|
18
|
+
var hasCustomWidth = searchItems.some(function (item) {
|
|
17
19
|
return item.width !== undefined;
|
|
18
20
|
});
|
|
19
21
|
if (!expand) {
|
|
@@ -25,10 +27,7 @@ export function calculateVisibleItems(searchItems, expand, columnNum, visibleIte
|
|
|
25
27
|
} else if (!hasCustomWidth) {
|
|
26
28
|
// 没有自定义宽度时,使用 columnNum(实际搜索项数量)
|
|
27
29
|
// 判断按钮组宽度是否大于列宽,如果是,则显示 实际搜索项数量+1
|
|
28
|
-
var displayCount = columnNum;
|
|
29
|
-
if (buttonGroupWidth !== undefined && columnWidth !== undefined && (buttonGroupWidth > columnWidth || buttonGroupWidth < columnWidth && columnNum + 1 === visibleItems.length)) {
|
|
30
|
-
displayCount = columnNum + 1;
|
|
31
|
-
}
|
|
30
|
+
var displayCount = shouldDisplayExtraItem(buttonGroupWidth, columnWidth, columnNum, visibleItems.length) ? columnNum + 1 : columnNum;
|
|
32
31
|
if (visibleItems.length >= displayCount) {
|
|
33
32
|
return visibleItems.slice(0, displayCount);
|
|
34
33
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export { cleanSearchData } from "./cleanSearchData";
|
|
2
2
|
export { calculateVisibleItems } from "./calculateVisibleItems";
|
|
3
3
|
export { calculateButtonGroupAndColumnWidth } from "./calculateButtonGroupAndColumnWidth";
|
|
4
|
+
export { measureButtonGroupWidth } from "./measureButtonGroupWidth";
|
|
5
|
+
export { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export { cleanSearchData } from "./cleanSearchData";
|
|
2
2
|
export { calculateVisibleItems } from "./calculateVisibleItems";
|
|
3
|
-
export { calculateButtonGroupAndColumnWidth } from "./calculateButtonGroupAndColumnWidth";
|
|
3
|
+
export { calculateButtonGroupAndColumnWidth } from "./calculateButtonGroupAndColumnWidth";
|
|
4
|
+
export { measureButtonGroupWidth } from "./measureButtonGroupWidth";
|
|
5
|
+
export { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 计算按钮组的实际宽度(所有子元素宽度总和 + 子元素间距)
|
|
3
|
+
* @param buttonGroupEl 按钮组元素
|
|
4
|
+
* @returns 按钮组宽度;无子元素时返回 undefined
|
|
5
|
+
*/
|
|
6
|
+
export function measureButtonGroupWidth(buttonGroupEl) {
|
|
7
|
+
if (!buttonGroupEl) return undefined;
|
|
8
|
+
var buttonChildren = Array.from(buttonGroupEl.children);
|
|
9
|
+
if (buttonChildren.length === 0) return undefined;
|
|
10
|
+
var totalWidth = 0;
|
|
11
|
+
buttonChildren.forEach(function (child) {
|
|
12
|
+
totalWidth += child.offsetWidth;
|
|
13
|
+
});
|
|
14
|
+
// 加上子元素之间的间距
|
|
15
|
+
var childGap = 5;
|
|
16
|
+
totalWidth += (buttonChildren.length - 1) * childGap;
|
|
17
|
+
return totalWidth;
|
|
18
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 判断收起状态下是否应多显示一个搜索项
|
|
3
|
+
*
|
|
4
|
+
* 规则:按钮组宽度大于列宽(按钮组独占更宽空间,首行有富余);
|
|
5
|
+
* 或按钮组宽度小于列宽且可见项刚好比列数多 1(此时收起只会藏起 1 项,不如直接放下)。
|
|
6
|
+
* @param buttonGroupWidth 按钮组宽度
|
|
7
|
+
* @param columnWidth 列宽
|
|
8
|
+
* @param columnNum 搜索项列数(不含按钮组)
|
|
9
|
+
* @param visibleCount 可见搜索项总数
|
|
10
|
+
*/
|
|
11
|
+
export declare function shouldDisplayExtraItem(buttonGroupWidth: number | undefined, columnWidth: number | undefined, columnNum: number, visibleCount: number): boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 判断收起状态下是否应多显示一个搜索项
|
|
3
|
+
*
|
|
4
|
+
* 规则:按钮组宽度大于列宽(按钮组独占更宽空间,首行有富余);
|
|
5
|
+
* 或按钮组宽度小于列宽且可见项刚好比列数多 1(此时收起只会藏起 1 项,不如直接放下)。
|
|
6
|
+
* @param buttonGroupWidth 按钮组宽度
|
|
7
|
+
* @param columnWidth 列宽
|
|
8
|
+
* @param columnNum 搜索项列数(不含按钮组)
|
|
9
|
+
* @param visibleCount 可见搜索项总数
|
|
10
|
+
*/
|
|
11
|
+
export function shouldDisplayExtraItem(buttonGroupWidth, columnWidth, columnNum, visibleCount) {
|
|
12
|
+
return buttonGroupWidth !== undefined && columnWidth !== undefined && (buttonGroupWidth > columnWidth || buttonGroupWidth < columnWidth && columnNum + 1 === visibleCount);
|
|
13
|
+
}
|
|
@@ -26,5 +26,9 @@ export type SearchModePropsMap = {
|
|
|
26
26
|
WithFilter: React.ComponentProps<SearchFC["WithFilter"]>;
|
|
27
27
|
WithMore: React.ComponentProps<SearchFC["WithMore"]>;
|
|
28
28
|
};
|
|
29
|
+
/**
|
|
30
|
+
* 基础 Search 组件
|
|
31
|
+
* - 标准的搜索表单布局,自适应列数与展开/收起
|
|
32
|
+
*/
|
|
29
33
|
declare const Search: SearchFC;
|
|
30
34
|
export default Search;
|
|
@@ -4,151 +4,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
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; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
-
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; }
|
|
11
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
-
import { Form as AntdForm } from "antd";
|
|
14
|
-
import FormItem from "../FormItem";
|
|
15
7
|
import React from "react";
|
|
16
|
-
import classNames from "classnames";
|
|
17
|
-
import styles from "./index.module.scss";
|
|
18
|
-
import { useSearchCommon } from "./_hooks";
|
|
19
8
|
import SearchCard from "./SearchCard";
|
|
20
9
|
import SearchAdvanced from "./SearchAdvanced";
|
|
21
10
|
import SearchCollapsible from "./SearchCollapsible";
|
|
22
11
|
import SearchWithFilter from "./SearchWithFilter";
|
|
23
12
|
import SearchWithMore from "./SearchWithMore";
|
|
24
|
-
import
|
|
25
|
-
import { SearchButtons } from "./_components/SearchButtons";
|
|
26
|
-
import { ExpandButton } from "./_components/ExpandButton";
|
|
13
|
+
import SearchBase from "./_components/SearchBase";
|
|
27
14
|
|
|
28
15
|
// 导出所有可用的 Search 模式键名
|
|
29
16
|
|
|
30
17
|
// 导出 Search 模式映射类型
|
|
31
|
-
import { createElement as _createElement } from "react";
|
|
32
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
33
|
-
|
|
19
|
+
/**
|
|
20
|
+
* 基础 Search 组件
|
|
21
|
+
* - 标准的搜索表单布局,自适应列数与展开/收起
|
|
22
|
+
*/
|
|
34
23
|
var Search = function Search(props) {
|
|
35
|
-
|
|
36
|
-
searchItems = _props$searchItems === void 0 ? [] : _props$searchItems,
|
|
37
|
-
_props$moreSearchItem = props.moreSearchItems,
|
|
38
|
-
moreSearchItems = _props$moreSearchItem === void 0 ? [] : _props$moreSearchItem,
|
|
39
|
-
className = props.className,
|
|
40
|
-
onSearch = props.onSearch,
|
|
41
|
-
onReset = props.onReset,
|
|
42
|
-
externalForm = props.externalForm,
|
|
43
|
-
hasPermi = props.hasPermi,
|
|
44
|
-
_props$columnNum = props.columnNum,
|
|
45
|
-
columnNum = _props$columnNum === void 0 ? 4 : _props$columnNum,
|
|
46
|
-
beforeButtonGroup = props.beforeButtonGroup,
|
|
47
|
-
affterButtonGroup = props.affterButtonGroup,
|
|
48
|
-
searchData = props.searchData,
|
|
49
|
-
minLabelWidth = props.minLabelWidth,
|
|
50
|
-
_props$defaultExpande = props.defaultExpanded,
|
|
51
|
-
defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
|
|
52
|
-
onExpandChange = props.onExpandChange,
|
|
53
|
-
_props$autoAdaptWidth = props.autoAdaptWidth,
|
|
54
|
-
autoAdaptWidth = _props$autoAdaptWidth === void 0 ? true : _props$autoAdaptWidth,
|
|
55
|
-
baseWidth = props.baseWidth,
|
|
56
|
-
onValuesChange = props.onValuesChange,
|
|
57
|
-
_props$searchDisabled = props.searchDisabled,
|
|
58
|
-
searchDisabled = _props$searchDisabled === void 0 ? false : _props$searchDisabled,
|
|
59
|
-
_props$showAllSearchI = props.showAllSearchItems,
|
|
60
|
-
showAllSearchItems = _props$showAllSearchI === void 0 ? false : _props$showAllSearchI,
|
|
61
|
-
searchText = props.searchText,
|
|
62
|
-
resetText = props.resetText,
|
|
63
|
-
_props$columnOffsetWi = props.columnOffsetWidth,
|
|
64
|
-
columnOffsetWidth = _props$columnOffsetWi === void 0 ? 0 : _props$columnOffsetWi;
|
|
65
|
-
var _AntdForm$useForm = AntdForm.useForm(externalForm),
|
|
66
|
-
_AntdForm$useForm2 = _slicedToArray(_AntdForm$useForm, 1),
|
|
67
|
-
form = _AntdForm$useForm2[0];
|
|
68
|
-
var _useSearchCommon = useSearchCommon({
|
|
69
|
-
form: form,
|
|
70
|
-
searchItems: searchItems,
|
|
71
|
-
moreSearchItems: moreSearchItems,
|
|
72
|
-
searchData: searchData,
|
|
73
|
-
hasPermi: hasPermi,
|
|
74
|
-
beforeButtonGroup: beforeButtonGroup,
|
|
75
|
-
affterButtonGroup: affterButtonGroup,
|
|
76
|
-
columnNum: columnNum,
|
|
77
|
-
autoAdaptWidth: autoAdaptWidth,
|
|
78
|
-
defaultExpanded: defaultExpanded,
|
|
79
|
-
onExpandChange: onExpandChange,
|
|
80
|
-
showAllSearchItems: showAllSearchItems,
|
|
81
|
-
minLabelWidth: minLabelWidth,
|
|
82
|
-
baseWidth: baseWidth,
|
|
83
|
-
onSearch: onSearch,
|
|
84
|
-
onReset: onReset,
|
|
85
|
-
columnOffsetWidth: columnOffsetWidth
|
|
86
|
-
}),
|
|
87
|
-
containerRef = _useSearchCommon.containerRef,
|
|
88
|
-
buttonGroupRef = _useSearchCommon.buttonGroupRef,
|
|
89
|
-
cls = _useSearchCommon.cls,
|
|
90
|
-
getLabelWidth = _useSearchCommon.getLabelWidth,
|
|
91
|
-
currentSearchItems = _useSearchCommon.currentSearchItems,
|
|
92
|
-
totalColumnNum = _useSearchCommon.totalColumnNum,
|
|
93
|
-
expand = _useSearchCommon.expand,
|
|
94
|
-
toggleExpand = _useSearchCommon.toggleExpand,
|
|
95
|
-
showExpandButton = _useSearchCommon.showExpandButton,
|
|
96
|
-
onSearchClick = _useSearchCommon.onSearchClick,
|
|
97
|
-
onResetClick = _useSearchCommon.onResetClick,
|
|
98
|
-
shouldRender = _useSearchCommon.shouldRender,
|
|
99
|
-
permitted = _useSearchCommon.permitted;
|
|
100
|
-
if (!shouldRender) {
|
|
101
|
-
return null;
|
|
102
|
-
}
|
|
103
|
-
return /*#__PURE__*/_jsx("div", {
|
|
104
|
-
ref: containerRef,
|
|
105
|
-
className: classNames(styles.Search, className),
|
|
106
|
-
style: {
|
|
107
|
-
"--column-number": totalColumnNum,
|
|
108
|
-
"--column-offset-width": "".concat(columnOffsetWidth, "px")
|
|
109
|
-
},
|
|
110
|
-
children: /*#__PURE__*/_jsx("div", {
|
|
111
|
-
className: classNames(styles.searchOption, styles[expand.toString()]),
|
|
112
|
-
children: /*#__PURE__*/_jsxs(AntdForm, {
|
|
113
|
-
form: form,
|
|
114
|
-
className: classNames(styles.option, cls),
|
|
115
|
-
onValuesChange: onValuesChange,
|
|
116
|
-
children: [permitted && (currentSearchItems === null || currentSearchItems === void 0 ? void 0 : currentSearchItems.map(function (item, idx) {
|
|
117
|
-
var visibleCurrentItems = currentSearchItems.filter(function (i) {
|
|
118
|
-
return i.visible !== false;
|
|
119
|
-
});
|
|
120
|
-
var columnIndex = idx % totalColumnNum;
|
|
121
|
-
var sameColumnItems = visibleCurrentItems.filter(function (_, _idx) {
|
|
122
|
-
return _idx % totalColumnNum === columnIndex;
|
|
123
|
-
});
|
|
124
|
-
return /*#__PURE__*/_createElement(FormItem, _objectSpread(_objectSpread({}, item), {}, {
|
|
125
|
-
key: item.name,
|
|
126
|
-
className: classNames(styles.item, item.className, _defineProperty({}, styles.unFill, item.width !== undefined)),
|
|
127
|
-
labelWidth: item.width !== undefined ? undefined : getLabelWidth(sameColumnItems, undefined, minLabelWidth)
|
|
128
|
-
}));
|
|
129
|
-
})), ((beforeButtonGroup === null || beforeButtonGroup === void 0 ? void 0 : beforeButtonGroup.length) || (affterButtonGroup === null || affterButtonGroup === void 0 ? void 0 : affterButtonGroup.length) || permitted) && /*#__PURE__*/_jsx(ButtonGroup, {
|
|
130
|
-
beforeButtonGroup: beforeButtonGroup,
|
|
131
|
-
affterButtonGroup: affterButtonGroup,
|
|
132
|
-
expandButton: /*#__PURE__*/_jsx(ExpandButton, {
|
|
133
|
-
expand: expand,
|
|
134
|
-
toggleExpand: toggleExpand,
|
|
135
|
-
advancedFilters: false,
|
|
136
|
-
showExpandButton: showExpandButton,
|
|
137
|
-
showAllSearchItems: showAllSearchItems || !!(moreSearchItems !== null && moreSearchItems !== void 0 && moreSearchItems.length)
|
|
138
|
-
}),
|
|
139
|
-
permitted: permitted,
|
|
140
|
-
ref: buttonGroupRef,
|
|
141
|
-
children: currentSearchItems.length > 0 && /*#__PURE__*/_jsx(SearchButtons, {
|
|
142
|
-
onSearch: onSearchClick,
|
|
143
|
-
onReset: onResetClick,
|
|
144
|
-
searchDisabled: searchDisabled,
|
|
145
|
-
searchText: searchText,
|
|
146
|
-
resetText: resetText
|
|
147
|
-
})
|
|
148
|
-
})]
|
|
149
|
-
})
|
|
150
|
-
})
|
|
151
|
-
});
|
|
24
|
+
return /*#__PURE__*/_jsx(SearchBase, _objectSpread({}, props));
|
|
152
25
|
};
|
|
153
26
|
Search.Card = SearchCard;
|
|
154
27
|
Search.Advanced = SearchAdvanced;
|
|
@@ -25,11 +25,13 @@ var useEllipsisTooltip = function useEllipsisTooltip(tooltipConfig) {
|
|
|
25
25
|
if (column.ellipsis && !column.render && column.dataIndex) {
|
|
26
26
|
return _objectSpread(_objectSpread({}, column), {}, {
|
|
27
27
|
render: function render(text) {
|
|
28
|
-
var _column$
|
|
28
|
+
var _column$ellipsisPosit;
|
|
29
29
|
// 获取实际的显示值
|
|
30
30
|
var displayValue = typeof text === "string" || typeof text === "number" ? text : String(text !== null && text !== void 0 ? text : "");
|
|
31
|
+
|
|
32
|
+
// 不传 width:由 TextEllipsis 实测单元格实际渲染宽度作为 Tooltip 宽度
|
|
33
|
+
// (声明的列宽经 fixedWidth 比例分配后与实际宽度并不一致)
|
|
31
34
|
return /*#__PURE__*/React.createElement(TextEllipsis, {
|
|
32
|
-
width: Math.max(Number((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 0), 300) === 300 ? undefined : Math.max(Number((_column$width2 = column.width) !== null && _column$width2 !== void 0 ? _column$width2 : 0), 300),
|
|
33
35
|
tooltipConfig: tooltipConfig,
|
|
34
36
|
children: displayValue,
|
|
35
37
|
ellipsisPosition: (_column$ellipsisPosit = column.ellipsisPosition) !== null && _column$ellipsisPosit !== void 0 ? _column$ellipsisPosit : tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.ellipsisPosition,
|
|
@@ -31,6 +31,7 @@ interface UseTableColumnsParams<T extends AnyObject> {
|
|
|
31
31
|
bordered?: boolean;
|
|
32
32
|
rowSelection?: TableRowSelection<T>;
|
|
33
33
|
expandable?: TableProps<T>["expandable"];
|
|
34
|
+
tdPadding?: string;
|
|
34
35
|
}
|
|
35
36
|
declare const useTableColumns: <T extends AnyObject>(params: UseTableColumnsParams<T>) => {
|
|
36
37
|
_columns: ColumnsType<T>;
|
|
@@ -26,6 +26,29 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
26
26
|
var MEASURE_ALIGN_FONT_SIZE = 14;
|
|
27
27
|
// Canvas measureText 仅返回 advance width,较 DOM 实际渲染偏窄约 1px,补 2px 缓冲避免最宽行被挤压
|
|
28
28
|
var MEASURE_ALIGN_BUFFER_PX = 2;
|
|
29
|
+
// 单元格左右内边距合计的默认值(默认 --td-padding: 4px 8px),用于把列宽抬到能放下定宽内容块
|
|
30
|
+
var MEASURE_ALIGN_CELL_PADDING_PX = 16;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* 解析 tdPadding(CSS padding 简写)的左右内边距合计;
|
|
34
|
+
* 未传或解析不出时回退默认值(与默认 --td-padding: 4px 8px 一致)。
|
|
35
|
+
*/
|
|
36
|
+
var getCellHorizontalPadding = function getCellHorizontalPadding(tdPadding) {
|
|
37
|
+
if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
|
|
38
|
+
var parts = tdPadding.trim().split(/\s+/).map(function (v) {
|
|
39
|
+
return parseFloat(v);
|
|
40
|
+
});
|
|
41
|
+
if (!parts.length || parts.some(function (v) {
|
|
42
|
+
return Number.isNaN(v);
|
|
43
|
+
})) {
|
|
44
|
+
return MEASURE_ALIGN_CELL_PADDING_PX;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// CSS 简写:1 值=四边;2/3 值=第 2 个为左右;4 值=右+左
|
|
48
|
+
if (parts.length === 1) return parts[0] * 2;
|
|
49
|
+
if (parts.length === 4) return parts[1] + parts[3];
|
|
50
|
+
return parts[1] * 2;
|
|
51
|
+
};
|
|
29
52
|
|
|
30
53
|
// 计算 measureAlign 列的定宽(取本列所有行展示文本的最大像素宽)
|
|
31
54
|
var getMeasureAlignWidth = function getMeasureAlignWidth(column, dataSource) {
|
|
@@ -62,7 +85,8 @@ var useTableColumns = function useTableColumns(params) {
|
|
|
62
85
|
cls = params.cls,
|
|
63
86
|
bordered = params.bordered,
|
|
64
87
|
rowSelection = params.rowSelection,
|
|
65
|
-
expandable = params.expandable
|
|
88
|
+
expandable = params.expandable,
|
|
89
|
+
tdPadding = params.tdPadding;
|
|
66
90
|
var _usePermissions = usePermissions(),
|
|
67
91
|
checkPermission = _usePermissions.checkPermission;
|
|
68
92
|
var _useState = useState(null),
|
|
@@ -124,6 +148,15 @@ var useTableColumns = function useTableColumns(params) {
|
|
|
124
148
|
}, 0)) !== null && _dataSource$reduce !== void 0 ? _dataSource$reduce : 0 : 0;
|
|
125
149
|
item.width = Math.max(titleWidth, dataIndexWidth) + 32;
|
|
126
150
|
}
|
|
151
|
+
|
|
152
|
+
// measureAlign 列:列宽须容得下最宽行的定宽内容块 + 单元格左右内边距,
|
|
153
|
+
// 否则出现超长值(如 +3357.52%)时内容会被列宽截断;声明的 width 只作下限。
|
|
154
|
+
if (item.measureAlign && typeof item.width === "number") {
|
|
155
|
+
var measured = getMeasureAlignWidth(item, dataSource);
|
|
156
|
+
if (measured > 0) {
|
|
157
|
+
item.width = Math.max(item.width, measured + getCellHorizontalPadding(tdPadding));
|
|
158
|
+
}
|
|
159
|
+
}
|
|
127
160
|
return item;
|
|
128
161
|
})) === null || _cloned$map === void 0 ? void 0 : _cloned$map.map(function (item) {
|
|
129
162
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -133,7 +166,7 @@ var useTableColumns = function useTableColumns(params) {
|
|
|
133
166
|
});
|
|
134
167
|
});
|
|
135
168
|
return newColumns;
|
|
136
|
-
}, [autoWidth, columns, dataSource, checkPermission, scroll]);
|
|
169
|
+
}, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
|
|
137
170
|
|
|
138
171
|
// 渲染列标题
|
|
139
172
|
var renderColumnTitle = useCallback(function (column) {
|
|
@@ -126,7 +126,8 @@ var Table = function Table(props) {
|
|
|
126
126
|
cls: cls,
|
|
127
127
|
bordered: bordered,
|
|
128
128
|
rowSelection: rowSelection,
|
|
129
|
-
expandable: expandable
|
|
129
|
+
expandable: expandable,
|
|
130
|
+
tdPadding: tdPadding
|
|
130
131
|
}),
|
|
131
132
|
_columns = _useTableColumns._columns,
|
|
132
133
|
renderedColumns = _useTableColumns.renderedColumns,
|
|
@@ -46,6 +46,11 @@ var TextEllipsis = function TextEllipsis(_ref) {
|
|
|
46
46
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
47
47
|
truncatedText = _useState4[0],
|
|
48
48
|
setTruncatedText = _useState4[1];
|
|
49
|
+
// 容器实际渲染宽度:未声明 width 时(如表格列宽动态分配)作为 Tooltip 宽度
|
|
50
|
+
var _useState5 = useState(0),
|
|
51
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
52
|
+
measuredWidth = _useState6[0],
|
|
53
|
+
setMeasuredWidth = _useState6[1];
|
|
49
54
|
useEffect(function () {
|
|
50
55
|
var element = textRef.current;
|
|
51
56
|
var measureElement = measureRef.current;
|
|
@@ -101,27 +106,40 @@ var TextEllipsis = function TextEllipsis(_ref) {
|
|
|
101
106
|
return result;
|
|
102
107
|
};
|
|
103
108
|
var textContent = getTextContent(children);
|
|
104
|
-
var
|
|
105
|
-
|
|
109
|
+
var update = function update() {
|
|
110
|
+
var isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
|
|
111
|
+
setIsOverflow(isTextOverflow);
|
|
112
|
+
setMeasuredWidth(element.clientWidth);
|
|
106
113
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
// 如果是省略前面且文本溢出,需要计算截断后的文本
|
|
115
|
+
if (ellipsisPosition === "start" && isTextOverflow && textContent) {
|
|
116
|
+
var maxWidth = element.clientWidth;
|
|
117
|
+
var truncated = calculateTruncatedText(textContent, maxWidth);
|
|
118
|
+
setTruncatedText(truncated);
|
|
119
|
+
} else {
|
|
120
|
+
setTruncatedText(children);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
update();
|
|
124
|
+
|
|
125
|
+
// 容器宽度动态变化(如表格列宽重分配、窗口 resize)时重测溢出与宽度
|
|
126
|
+
var resizeObserver = new ResizeObserver(update);
|
|
127
|
+
resizeObserver.observe(element);
|
|
128
|
+
return function () {
|
|
129
|
+
return resizeObserver.disconnect();
|
|
130
|
+
};
|
|
115
131
|
}, [children, ellipsisPosition, style]);
|
|
116
132
|
|
|
117
|
-
// 计算 Tooltip
|
|
133
|
+
// 计算 Tooltip 的宽度:显式 width 优先;未声明(或百分比)时用容器实际渲染宽度,
|
|
134
|
+
// 实测不到再回退 defaultWidth
|
|
118
135
|
var getTooltipWidth = function getTooltipWidth() {
|
|
119
136
|
var _tooltipConfig$defaul;
|
|
120
137
|
var defaultWidth = (_tooltipConfig$defaul = tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.defaultWidth) !== null && _tooltipConfig$defaul !== void 0 ? _tooltipConfig$defaul : DEFAULT_TOOLTIP_WIDTH;
|
|
121
|
-
|
|
138
|
+
var dynamicWidth = measuredWidth > 0 ? measuredWidth : defaultWidth;
|
|
139
|
+
if (!width) return dynamicWidth;
|
|
122
140
|
if (typeof width === "number") return width;
|
|
123
|
-
if (typeof width === "string" && width.includes("%")) return
|
|
124
|
-
return parseInt(width) ||
|
|
141
|
+
if (typeof width === "string" && width.includes("%")) return dynamicWidth;
|
|
142
|
+
return parseInt(width) || dynamicWidth;
|
|
125
143
|
};
|
|
126
144
|
var tooltipWidth = getTooltipWidth();
|
|
127
145
|
|
|
@@ -35,6 +35,8 @@ export interface ItemContainerProps extends FormItemProps {
|
|
|
35
35
|
labelBreak?: boolean;
|
|
36
36
|
hideAdditiona?: boolean;
|
|
37
37
|
hideLabel?: boolean;
|
|
38
|
+
/** 显隐开关,由 FormItem 消费;在此解构剥离,避免透传到 DOM */
|
|
39
|
+
visible?: boolean;
|
|
38
40
|
}
|
|
39
41
|
declare const ItemContainer: React.FC<ItemContainerProps>;
|
|
40
42
|
export default ItemContainer;
|
|
@@ -55,6 +55,7 @@ const ItemContainer = props => {
|
|
|
55
55
|
labelBreak = false,
|
|
56
56
|
hideAdditiona = false,
|
|
57
57
|
hideLabel = false,
|
|
58
|
+
visible: _visible,
|
|
58
59
|
...formItemProps
|
|
59
60
|
} = props;
|
|
60
61
|
const {
|
|
@@ -149,12 +150,8 @@ const ItemContainer = props => {
|
|
|
149
150
|
if (!permitted) {
|
|
150
151
|
return null;
|
|
151
152
|
}
|
|
152
|
-
|
|
153
|
-
// 页面层 FormItemProps 的展示控制属性(如 visible)不属于 antd Form.Item,
|
|
154
|
-
// 剥离后再透传,避免被 antd 转发到 DOM 触发 React 非法属性警告。
|
|
155
|
-
const restFormItemProps = Object.fromEntries(Object.entries(formItemProps).filter(([key]) => key !== "visible"));
|
|
156
153
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, {
|
|
157
|
-
...
|
|
154
|
+
...formItemProps,
|
|
158
155
|
name: name,
|
|
159
156
|
rules: [{
|
|
160
157
|
required,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { FormInstance } from "antd";
|
|
3
|
-
import { FormItemProps } from "
|
|
4
|
-
import { DrawerFormProps } from "
|
|
5
|
-
import type useLabelWidth from "
|
|
3
|
+
import { FormItemProps } from "../../../../FormItem";
|
|
4
|
+
import { DrawerFormProps } from "../../../../Form/DrawerForm";
|
|
5
|
+
import type useLabelWidth from "../../../../../hooks/useLabelWidth";
|
|
6
6
|
interface AdvancedFiltersDrawerProps {
|
|
7
7
|
expand: boolean;
|
|
8
8
|
setExpand: (expand: boolean) => void;
|
|
@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.AdvancedFiltersDrawer = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _Form = _interopRequireDefault(require("
|
|
8
|
+
var _Form = _interopRequireDefault(require("../../../../Form"));
|
|
9
9
|
var _icons = require("@ant-design/icons");
|
|
10
|
-
var _Icon = _interopRequireDefault(require("
|
|
11
|
-
var _indexModule = _interopRequireDefault(require("
|
|
10
|
+
var _Icon = _interopRequireDefault(require("../../../../Icon"));
|
|
11
|
+
var _indexModule = _interopRequireDefault(require("../../../index.module.scss"));
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
const AdvancedFiltersDrawer = ({
|