@hsu-react/ui 0.0.9 → 0.0.10
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/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/useTableColumns.js +11 -0
- 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/useTableColumns.js +11 -0
- 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/useTableColumns.tsx +17 -0
- /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;
|
|
@@ -26,6 +26,8 @@ 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;
|
|
29
31
|
|
|
30
32
|
// 计算 measureAlign 列的定宽(取本列所有行展示文本的最大像素宽)
|
|
31
33
|
var getMeasureAlignWidth = function getMeasureAlignWidth(column, dataSource) {
|
|
@@ -124,6 +126,15 @@ var useTableColumns = function useTableColumns(params) {
|
|
|
124
126
|
}, 0)) !== null && _dataSource$reduce !== void 0 ? _dataSource$reduce : 0 : 0;
|
|
125
127
|
item.width = Math.max(titleWidth, dataIndexWidth) + 32;
|
|
126
128
|
}
|
|
129
|
+
|
|
130
|
+
// measureAlign 列:列宽须容得下最宽行的定宽内容块 + 单元格左右内边距,
|
|
131
|
+
// 否则出现超长值(如 +3357.52%)时内容会被列宽截断;声明的 width 只作下限。
|
|
132
|
+
if (item.measureAlign && typeof item.width === "number") {
|
|
133
|
+
var measured = getMeasureAlignWidth(item, dataSource);
|
|
134
|
+
if (measured > 0) {
|
|
135
|
+
item.width = Math.max(item.width, measured + MEASURE_ALIGN_CELL_PADDING_PX);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
127
138
|
return item;
|
|
128
139
|
})) === null || _cloned$map === void 0 ? void 0 : _cloned$map.map(function (item) {
|
|
129
140
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -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 = ({
|
|
@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
8
|
-
var _antd = require("antd");
|
|
9
|
-
var _FormItem = _interopRequireDefault(require("../../FormItem"));
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
9
|
var _indexModule = _interopRequireDefault(require("../index.module.scss"));
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var _SearchButtons = require("../_components/SearchButtons");
|
|
15
|
-
var _FilterDropdown = require("../_components/FilterDropdown");
|
|
16
|
-
var _ExpandButton = require("../_components/ExpandButton");
|
|
17
|
-
var _AdvancedFiltersDrawer = require("../_components/AdvancedFiltersDrawer");
|
|
10
|
+
var _SearchBase = _interopRequireDefault(require("../_components/SearchBase"));
|
|
11
|
+
var _AdvancedFiltersDrawer = require("./_components/AdvancedFiltersDrawer");
|
|
18
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
14
|
/**
|
|
23
15
|
* 高级筛选模式的 Search 组件
|
|
24
16
|
* - 不显示标签(label)
|
|
@@ -27,136 +19,29 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
27
19
|
*/
|
|
28
20
|
const SearchAdvanced = props => {
|
|
29
21
|
const {
|
|
30
|
-
searchItems = [],
|
|
31
|
-
moreSearchItems = [],
|
|
32
22
|
className,
|
|
33
|
-
onSearch,
|
|
34
|
-
onReset,
|
|
35
|
-
externalForm,
|
|
36
|
-
hasPermi,
|
|
37
|
-
columnNum = 4,
|
|
38
|
-
beforeButtonGroup,
|
|
39
|
-
affterButtonGroup,
|
|
40
|
-
searchData,
|
|
41
23
|
advancedFiltersProps,
|
|
42
24
|
setFilter,
|
|
43
25
|
minLabelWidth,
|
|
44
|
-
|
|
45
|
-
onExpandChange,
|
|
46
|
-
autoAdaptWidth = true,
|
|
47
|
-
baseWidth,
|
|
48
|
-
onValuesChange,
|
|
49
|
-
searchDisabled = false,
|
|
50
|
-
showAllSearchItems = false,
|
|
51
|
-
searchText,
|
|
52
|
-
resetText,
|
|
53
|
-
onFilterChange,
|
|
54
|
-
columnOffsetWidth = 0
|
|
26
|
+
...rest
|
|
55
27
|
} = props;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
toggleExpand,
|
|
69
|
-
showExpandButton,
|
|
70
|
-
onSearchClick,
|
|
71
|
-
onResetClick,
|
|
72
|
-
shouldRender,
|
|
73
|
-
permitted
|
|
74
|
-
} = (0, _hooks.useSearchCommon)({
|
|
75
|
-
form,
|
|
76
|
-
searchItems,
|
|
77
|
-
moreSearchItems,
|
|
78
|
-
searchData,
|
|
79
|
-
hasPermi,
|
|
80
|
-
beforeButtonGroup,
|
|
81
|
-
affterButtonGroup,
|
|
82
|
-
columnNum,
|
|
83
|
-
autoAdaptWidth,
|
|
84
|
-
defaultExpanded,
|
|
85
|
-
onExpandChange,
|
|
86
|
-
showAllSearchItems,
|
|
87
|
-
minLabelWidth,
|
|
88
|
-
baseWidth,
|
|
89
|
-
onSearch,
|
|
90
|
-
onReset,
|
|
91
|
-
columnOffsetWidth
|
|
92
|
-
});
|
|
93
|
-
if (!shouldRender) {
|
|
94
|
-
return null;
|
|
95
|
-
}
|
|
96
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
97
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
98
|
-
ref: containerRef,
|
|
99
|
-
className: (0, _classnames.default)(_indexModule.default.Search, className, {
|
|
100
|
-
[_indexModule.default.advancedFilters]: true
|
|
101
|
-
}),
|
|
102
|
-
style: {
|
|
103
|
-
"--column-number": totalColumnNum,
|
|
104
|
-
"--column-offset-width": `${columnOffsetWidth}px`
|
|
105
|
-
},
|
|
106
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
107
|
-
className: (0, _classnames.default)(_indexModule.default.searchOption, _indexModule.default[expand.toString()]),
|
|
108
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, {
|
|
109
|
-
form: form,
|
|
110
|
-
className: (0, _classnames.default)(_indexModule.default.option, cls),
|
|
111
|
-
onValuesChange: onValuesChange,
|
|
112
|
-
children: [permitted && currentSearchItems?.map(item => {
|
|
113
|
-
return /*#__PURE__*/(0, _react.createElement)(_FormItem.default, {
|
|
114
|
-
...item,
|
|
115
|
-
key: item.name,
|
|
116
|
-
className: (0, _classnames.default)(_indexModule.default.item, item.className, {
|
|
117
|
-
[_indexModule.default.unFill]: item.width !== undefined
|
|
118
|
-
}),
|
|
119
|
-
label: undefined,
|
|
120
|
-
labelWidth: undefined
|
|
121
|
-
});
|
|
122
|
-
}), (beforeButtonGroup?.length || affterButtonGroup?.length || permitted) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.ButtonGroup, {
|
|
123
|
-
beforeButtonGroup: beforeButtonGroup,
|
|
124
|
-
affterButtonGroup: affterButtonGroup,
|
|
125
|
-
expandButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandButton.ExpandButton, {
|
|
126
|
-
expand: expand,
|
|
127
|
-
toggleExpand: toggleExpand,
|
|
128
|
-
advancedFilters: true,
|
|
129
|
-
showExpandButton: showExpandButton,
|
|
130
|
-
showAllSearchItems: showAllSearchItems || !!moreSearchItems?.length
|
|
131
|
-
}),
|
|
132
|
-
permitted: permitted,
|
|
133
|
-
ref: buttonGroupRef,
|
|
134
|
-
children: [currentSearchItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchButtons.SearchButtons, {
|
|
135
|
-
onSearch: onSearchClick,
|
|
136
|
-
onReset: onResetClick,
|
|
137
|
-
searchDisabled: searchDisabled,
|
|
138
|
-
searchText: searchText,
|
|
139
|
-
resetText: resetText
|
|
140
|
-
}), setFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterDropdown.FilterDropdown, {
|
|
141
|
-
searchItems: processedSearchItems,
|
|
142
|
-
originalSearchItems: searchItems,
|
|
143
|
-
setSearchItems: setSearchItems,
|
|
144
|
-
onFilterChange: onFilterChange
|
|
145
|
-
})]
|
|
146
|
-
})]
|
|
147
|
-
})
|
|
148
|
-
})
|
|
149
|
-
}), permitted && setExpand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdvancedFiltersDrawer.AdvancedFiltersDrawer, {
|
|
150
|
-
expand: expand,
|
|
151
|
-
setExpand: setExpand,
|
|
152
|
-
searchItems: processedSearchItems,
|
|
153
|
-
form: form,
|
|
154
|
-
getLabelWidth: getLabelWidth,
|
|
28
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBase.default, {
|
|
29
|
+
...rest,
|
|
30
|
+
minLabelWidth: minLabelWidth,
|
|
31
|
+
advancedFilters: true,
|
|
32
|
+
showFilter: !!setFilter,
|
|
33
|
+
className: (0, _classnames.default)(className, _indexModule.default.advancedFilters),
|
|
34
|
+
renderOutside: ctx => ctx.setExpand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AdvancedFiltersDrawer.AdvancedFiltersDrawer, {
|
|
35
|
+
expand: ctx.expand,
|
|
36
|
+
setExpand: ctx.setExpand,
|
|
37
|
+
searchItems: ctx.processedSearchItems,
|
|
38
|
+
form: ctx.form,
|
|
39
|
+
getLabelWidth: ctx.getLabelWidth,
|
|
155
40
|
minLabelWidth: minLabelWidth,
|
|
156
|
-
onSearchClick: onSearchClick,
|
|
157
|
-
onResetClick: onResetClick,
|
|
41
|
+
onSearchClick: ctx.onSearchClick,
|
|
42
|
+
onResetClick: ctx.onResetClick,
|
|
158
43
|
advancedFiltersProps: advancedFiltersProps
|
|
159
|
-
})
|
|
44
|
+
})
|
|
160
45
|
});
|
|
161
46
|
};
|
|
162
47
|
var _default = exports.default = SearchAdvanced;
|
|
@@ -71,7 +71,7 @@ const SearchCard = /*#__PURE__*/(0, _react.memo)(props => {
|
|
|
71
71
|
}),
|
|
72
72
|
style: {
|
|
73
73
|
"--searchCard-column-gap": `${gap}px`,
|
|
74
|
-
"
|
|
74
|
+
"--searchCard-padding-left-right": `${padding}px`
|
|
75
75
|
},
|
|
76
76
|
children: [showSearchBox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.SearchBox, {
|
|
77
77
|
value: internalValue,
|
package/lib/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.js
RENAMED
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.CollapseToggle = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _Icon = _interopRequireDefault(require("
|
|
8
|
+
var _Icon = _interopRequireDefault(require("../../../../Icon"));
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _indexModule = _interopRequireDefault(require("
|
|
10
|
+
var _indexModule = _interopRequireDefault(require("../../../index.module.scss"));
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
const CollapseToggle = ({
|