@creekjs/web-components 1.0.1 → 1.0.3
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/.fatherrc.ts +1 -5
- package/.turbo/turbo-father$colon$build.log +5 -0
- package/.turbo/turbo-father$colon$dev.log +33 -0
- package/dist/creek-config-provider/CreekConfigContext.js +31 -2
- package/dist/creek-config-provider/CreekConfigContext.js.map +7 -0
- package/dist/creek-config-provider/index.js +35 -13
- package/dist/creek-config-provider/index.js.map +7 -0
- package/dist/creek-hooks/index.d.ts +1 -0
- package/dist/creek-hooks/index.js +26 -1
- package/dist/creek-hooks/index.js.map +7 -0
- package/dist/creek-hooks/useApp/DrawerHelper.d.ts +9 -0
- package/dist/creek-hooks/useApp/DrawerHelper.js +62 -0
- package/dist/creek-hooks/useApp/DrawerHelper.js.map +7 -0
- package/dist/creek-hooks/useApp/ModalHelper.d.ts +9 -0
- package/dist/creek-hooks/useApp/ModalHelper.js +62 -0
- package/dist/creek-hooks/useApp/ModalHelper.js.map +7 -0
- package/dist/creek-hooks/useApp/index.d.ts +25 -0
- package/dist/creek-hooks/useApp/index.js +118 -0
- package/dist/creek-hooks/useApp/index.js.map +7 -0
- package/dist/creek-hooks/useApp/types.d.ts +26 -0
- package/dist/creek-hooks/useApp/types.js +18 -0
- package/dist/creek-hooks/useApp/types.js.map +7 -0
- package/dist/creek-hooks/useViewportHeight.js +99 -96
- package/dist/creek-hooks/useViewportHeight.js.map +7 -0
- package/dist/creek-icon/index.js +53 -31
- package/dist/creek-icon/index.js.map +7 -0
- package/dist/creek-keep-alive/index.js +36 -18
- package/dist/creek-keep-alive/index.js.map +7 -0
- package/dist/creek-layout/CollapseButton.js +69 -47
- package/dist/creek-layout/CollapseButton.js.map +7 -0
- package/dist/creek-layout/Exception/NotFound.js +42 -13
- package/dist/creek-layout/Exception/NotFound.js.map +7 -0
- package/dist/creek-layout/Exception/NotFoundPage.js +30 -5
- package/dist/creek-layout/Exception/NotFoundPage.js.map +7 -0
- package/dist/creek-layout/Exception/index.js +37 -8
- package/dist/creek-layout/Exception/index.js.map +7 -0
- package/dist/creek-layout/HeaderContent/FullScreen.js +45 -39
- package/dist/creek-layout/HeaderContent/FullScreen.js.map +7 -0
- package/dist/creek-layout/HeaderContent/UserInfo.js +75 -53
- package/dist/creek-layout/HeaderContent/UserInfo.js.map +7 -0
- package/dist/creek-layout/HeaderContent/index.js +48 -32
- package/dist/creek-layout/HeaderContent/index.js.map +7 -0
- package/dist/creek-layout/index.js +117 -80
- package/dist/creek-layout/index.js.map +7 -0
- package/dist/creek-loading/index.js +55 -48
- package/dist/creek-loading/index.js.map +7 -0
- package/dist/creek-table/SearchTable.js +107 -116
- package/dist/creek-table/SearchTable.js.map +7 -0
- package/dist/creek-table/TableOptionRender.js +69 -60
- package/dist/creek-table/TableOptionRender.js.map +7 -0
- package/dist/creek-table/TableViewContent.js +60 -39
- package/dist/creek-table/TableViewContent.js.map +7 -0
- package/dist/creek-table/hooks/index.d.ts +1 -1
- package/dist/creek-table/hooks/index.js +28 -3
- package/dist/creek-table/hooks/index.js.map +7 -0
- package/dist/creek-table/hooks/useAdaptiveToolBar.js +48 -36
- package/dist/creek-table/hooks/useAdaptiveToolBar.js.map +7 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.d.ts +6 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.js +187 -0
- package/dist/creek-table/hooks/useAutoWidthColumns.js.map +7 -0
- package/dist/creek-table/hooks/useElementDistance.js +51 -39
- package/dist/creek-table/hooks/useElementDistance.js.map +7 -0
- package/dist/creek-table/index.js +35 -25
- package/dist/creek-table/index.js.map +7 -0
- package/dist/creek-table/toolBarRender.js +55 -33
- package/dist/creek-table/toolBarRender.js.map +7 -0
- package/dist/creek-table/type.d.ts +1 -1
- package/dist/creek-table/type.js +18 -1
- package/dist/creek-table/type.js.map +7 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.js +34 -7
- package/dist/index.js.map +7 -0
- package/package.json +2 -2
- package/src/creek-hooks/index.ts +2 -0
- package/src/creek-hooks/useApp/DrawerHelper.tsx +43 -0
- package/src/creek-hooks/useApp/ModalHelper.tsx +43 -0
- package/src/creek-hooks/useApp/index.tsx +119 -0
- package/src/creek-hooks/useApp/types.ts +25 -0
- package/src/creek-hooks/useViewportHeight.tsx +34 -3
- package/src/creek-layout/HeaderContent/index.tsx +1 -4
- package/src/creek-layout/index.tsx +7 -6
- package/src/creek-table/SearchTable.tsx +16 -37
- package/src/creek-table/TableViewContent.tsx +21 -12
- package/src/creek-table/hooks/index.ts +1 -1
- package/src/creek-table/hooks/useAutoWidthColumns.tsx +212 -0
- package/src/creek-table/index.tsx +1 -5
- package/src/creek-table/type.ts +1 -1
- package/src/index.tsx +2 -2
- package/dist/bg-center/index.d.ts +0 -5
- package/dist/bg-center/index.js +0 -28
- package/dist/creek-search/CreekSearch.d.ts +0 -7
- package/dist/creek-search/CreekSearch.js +0 -51
- package/dist/creek-search/CreekSearchContext.d.ts +0 -54
- package/dist/creek-search/CreekSearchContext.js +0 -546
- package/dist/creek-search/CreekSearchFilterDisplay.d.ts +0 -5
- package/dist/creek-search/CreekSearchFilterDisplay.js +0 -97
- package/dist/creek-search/CreekSearchInput.d.ts +0 -4
- package/dist/creek-search/CreekSearchInput.js +0 -96
- package/dist/creek-search/CreekSearchValueSelector.d.ts +0 -5
- package/dist/creek-search/CreekSearchValueSelector.js +0 -422
- package/dist/creek-search/index.d.ts +0 -5
- package/dist/creek-search/index.js +0 -5
- package/dist/creek-search/type.d.ts +0 -8
- package/dist/creek-search/type.js +0 -1
- package/dist/creek-table/hooks/useAutoAddFilterToColumns.d.ts +0 -12
- package/dist/creek-table/hooks/useAutoAddFilterToColumns.js +0 -93
- package/src/bg-center/index.tsx +0 -26
- package/src/creek-search/CreekSearch.tsx +0 -59
- package/src/creek-search/CreekSearchContext.tsx +0 -593
- package/src/creek-search/CreekSearchFilterDisplay.tsx +0 -84
- package/src/creek-search/CreekSearchInput.tsx +0 -75
- package/src/creek-search/CreekSearchValueSelector.tsx +0 -324
- package/src/creek-search/index.tsx +0 -5
- package/src/creek-search/type.ts +0 -9
- package/src/creek-table/hooks/useAutoAddFilterToColumns.tsx +0 -90
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { DeleteOutlined } from '@ant-design/icons';
|
|
2
|
-
import { Flex, Space, Tag } from 'antd';
|
|
3
|
-
import { createStyles } from 'antd-style';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import { useSearchContext } from "./CreekSearchContext";
|
|
6
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
// 样式定义
|
|
9
|
-
var useStyles = createStyles(function (_ref) {
|
|
10
|
-
var token = _ref.token;
|
|
11
|
-
return {
|
|
12
|
-
filtersDisplay: {
|
|
13
|
-
padding: "0 0 ".concat(token.padding, "px"),
|
|
14
|
-
display: 'flex',
|
|
15
|
-
alignItems: 'center',
|
|
16
|
-
flexWrap: 'wrap',
|
|
17
|
-
gap: token.marginXS
|
|
18
|
-
},
|
|
19
|
-
filterTag: {
|
|
20
|
-
borderRadius: token.borderRadiusSM,
|
|
21
|
-
fontSize: token.fontSizeSM,
|
|
22
|
-
backgroundColor: '#f2f3f5',
|
|
23
|
-
padding: "2px 12px 2px 8px"
|
|
24
|
-
},
|
|
25
|
-
filterTagTitle: {
|
|
26
|
-
color: '#81838A'
|
|
27
|
-
},
|
|
28
|
-
filterTagValue: {
|
|
29
|
-
color: '#42464E'
|
|
30
|
-
},
|
|
31
|
-
clearButtonContainer: {
|
|
32
|
-
marginLeft: token.marginXS,
|
|
33
|
-
borderLeft: "1px solid #EBEDF1",
|
|
34
|
-
paddingLeft: 8,
|
|
35
|
-
height: 20
|
|
36
|
-
},
|
|
37
|
-
clearTextContainer: {
|
|
38
|
-
color: '#1E2128',
|
|
39
|
-
fontWeight: 500,
|
|
40
|
-
cursor: 'pointer'
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
});
|
|
44
|
-
export var CreekFilterDisplay = function CreekFilterDisplay(props) {
|
|
45
|
-
var _useStyles = useStyles(),
|
|
46
|
-
styles = _useStyles.styles;
|
|
47
|
-
var _useSearchContext = useSearchContext(),
|
|
48
|
-
filters = _useSearchContext.filters,
|
|
49
|
-
removeFilter = _useSearchContext.removeFilter,
|
|
50
|
-
handelRest = _useSearchContext.handelRest;
|
|
51
|
-
var className = props.className;
|
|
52
|
-
|
|
53
|
-
// 渲染筛选条件标签
|
|
54
|
-
var renderFilterTags = function renderFilterTags(filterList) {
|
|
55
|
-
return /*#__PURE__*/_jsx(Space, {
|
|
56
|
-
size: 4,
|
|
57
|
-
wrap: true,
|
|
58
|
-
children: filterList === null || filterList === void 0 ? void 0 : filterList.map(function (filter) {
|
|
59
|
-
return /*#__PURE__*/_jsxs(Tag, {
|
|
60
|
-
closable: true,
|
|
61
|
-
onClose: function onClose() {
|
|
62
|
-
return removeFilter(filter.dataIndex);
|
|
63
|
-
},
|
|
64
|
-
className: styles.filterTag,
|
|
65
|
-
children: [/*#__PURE__*/_jsxs("span", {
|
|
66
|
-
className: styles.filterTagTitle,
|
|
67
|
-
children: [" ", filter.title, ":"]
|
|
68
|
-
}), /*#__PURE__*/_jsxs("span", {
|
|
69
|
-
className: styles.filterTagValue,
|
|
70
|
-
children: [" ", filter.displayText]
|
|
71
|
-
})]
|
|
72
|
-
}, filter.dataIndex);
|
|
73
|
-
})
|
|
74
|
-
});
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
// 如果没有筛选条件,不渲染
|
|
78
|
-
if (!filters || filters.length === 0) {
|
|
79
|
-
return null;
|
|
80
|
-
}
|
|
81
|
-
return /*#__PURE__*/_jsxs(Flex, {
|
|
82
|
-
className: classNames(styles.filtersDisplay, className),
|
|
83
|
-
wrap: true,
|
|
84
|
-
children: [/*#__PURE__*/_jsx("span", {
|
|
85
|
-
children: renderFilterTags(filters)
|
|
86
|
-
}), /*#__PURE__*/_jsxs(Space, {
|
|
87
|
-
className: styles.clearButtonContainer,
|
|
88
|
-
align: "center",
|
|
89
|
-
size: 4,
|
|
90
|
-
onClick: handelRest,
|
|
91
|
-
children: [/*#__PURE__*/_jsx(DeleteOutlined, {}), /*#__PURE__*/_jsx("span", {
|
|
92
|
-
className: styles.clearTextContainer,
|
|
93
|
-
children: "\u6E05\u7A7A"
|
|
94
|
-
})]
|
|
95
|
-
})]
|
|
96
|
-
});
|
|
97
|
-
};
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
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
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
4
|
-
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); }
|
|
5
|
-
import { SearchOutlined } from '@ant-design/icons';
|
|
6
|
-
import { AutoComplete, Input, Popover } from 'antd';
|
|
7
|
-
import { createStyles } from 'antd-style';
|
|
8
|
-
import classNames from 'classnames';
|
|
9
|
-
import { useSearchContext } from "./CreekSearchContext";
|
|
10
|
-
import { CreekSearchValueSelector } from "./CreekSearchValueSelector";
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
var useStyles = createStyles(function (_ref) {
|
|
13
|
-
var token = _ref.token,
|
|
14
|
-
prefixCls = _ref.prefixCls;
|
|
15
|
-
return {
|
|
16
|
-
searchWrapper: {
|
|
17
|
-
width: 350,
|
|
18
|
-
position: 'relative'
|
|
19
|
-
},
|
|
20
|
-
autoCompleteContainer: {
|
|
21
|
-
width: '100%'
|
|
22
|
-
},
|
|
23
|
-
searchInput: _defineProperty(_defineProperty({}, "& .".concat(prefixCls, "-input"), {
|
|
24
|
-
fontSize: token.fontSize
|
|
25
|
-
}), "& .".concat(prefixCls, "-input-prefix"), {
|
|
26
|
-
color: token.colorTextTertiary
|
|
27
|
-
}),
|
|
28
|
-
popoverContent: _defineProperty({}, "& .".concat(prefixCls, "-popover-inner"), {
|
|
29
|
-
padding: 0
|
|
30
|
-
})
|
|
31
|
-
};
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
// 搜索输入框组件
|
|
35
|
-
var SearchInput = function SearchInput() {
|
|
36
|
-
var _useStyles = useStyles(),
|
|
37
|
-
styles = _useStyles.styles;
|
|
38
|
-
var _useSearchContext = useSearchContext(),
|
|
39
|
-
searchValue = _useSearchContext.searchValue,
|
|
40
|
-
filterOptions = _useSearchContext.filterOptions,
|
|
41
|
-
inputRef = _useSearchContext.inputRef,
|
|
42
|
-
setSearchValue = _useSearchContext.setSearchValue,
|
|
43
|
-
handleSearch = _useSearchContext.handleSearch,
|
|
44
|
-
handleSelectColumn = _useSearchContext.handleSelectColumn;
|
|
45
|
-
|
|
46
|
-
// AutoComplete 选项
|
|
47
|
-
var autoCompleteOptions = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map(function (option) {
|
|
48
|
-
return {
|
|
49
|
-
value: option.dataIndex,
|
|
50
|
-
label: option.title
|
|
51
|
-
};
|
|
52
|
-
});
|
|
53
|
-
return /*#__PURE__*/_jsx(AutoComplete, {
|
|
54
|
-
ref: inputRef,
|
|
55
|
-
className: styles.autoCompleteContainer,
|
|
56
|
-
options: autoCompleteOptions,
|
|
57
|
-
onSearch: setSearchValue,
|
|
58
|
-
onSelect: handleSelectColumn,
|
|
59
|
-
value: searchValue,
|
|
60
|
-
allowClear: true,
|
|
61
|
-
children: /*#__PURE__*/_jsx(Input, {
|
|
62
|
-
placeholder: "\u6DFB\u52A0\u7B5B\u9009\u6761\u4EF6",
|
|
63
|
-
prefix: /*#__PURE__*/_jsx(SearchOutlined, {}),
|
|
64
|
-
onPressEnter: function onPressEnter(e) {
|
|
65
|
-
return handleSearch(e.target.value);
|
|
66
|
-
},
|
|
67
|
-
className: styles.searchInput
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
};
|
|
71
|
-
// 主搜索输入组件
|
|
72
|
-
export var CreekSearchInput = function CreekSearchInput(props) {
|
|
73
|
-
var className = props.className;
|
|
74
|
-
var _useStyles2 = useStyles(),
|
|
75
|
-
styles = _useStyles2.styles;
|
|
76
|
-
var _useSearchContext2 = useSearchContext(),
|
|
77
|
-
showValueSelector = _useSearchContext2.showValueSelector,
|
|
78
|
-
cancelValueSelector = _useSearchContext2.cancelValueSelector;
|
|
79
|
-
return /*#__PURE__*/_jsx("div", {
|
|
80
|
-
className: classNames(styles.searchWrapper, className),
|
|
81
|
-
children: /*#__PURE__*/_jsx(Popover, {
|
|
82
|
-
content: /*#__PURE__*/_jsx(CreekSearchValueSelector, {}),
|
|
83
|
-
trigger: "click",
|
|
84
|
-
arrow: false,
|
|
85
|
-
open: showValueSelector,
|
|
86
|
-
onOpenChange: function onOpenChange(visible) {
|
|
87
|
-
if (!visible) {
|
|
88
|
-
cancelValueSelector();
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
overlayClassName: styles.popoverContent,
|
|
92
|
-
placement: "bottomLeft",
|
|
93
|
-
children: /*#__PURE__*/_jsx(SearchInput, {})
|
|
94
|
-
})
|
|
95
|
-
});
|
|
96
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ParamsType } from '@ant-design/pro-components';
|
|
2
|
-
export type CreekSearchValueSelectorProps<T extends ParamsType, U extends ParamsType> = {
|
|
3
|
-
onConfirm?: () => void;
|
|
4
|
-
};
|
|
5
|
-
export declare const CreekSearchValueSelector: <T extends ParamsType, U extends ParamsType>(props: CreekSearchValueSelectorProps<T, U>) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,422 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
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
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
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
|
-
import { Button, Checkbox, DatePicker, Input, InputNumber, Radio, Select, Space, Switch, TimePicker } from 'antd';
|
|
8
|
-
import { createStyles } from 'antd-style';
|
|
9
|
-
import _ from 'lodash';
|
|
10
|
-
import { useEffect, useMemo } from 'react';
|
|
11
|
-
import { useSearchContext } from "./CreekSearchContext";
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var RangePicker = DatePicker.RangePicker;
|
|
15
|
-
var TimeRangePicker = TimePicker.RangePicker;
|
|
16
|
-
|
|
17
|
-
// 组件渲染器接口
|
|
18
|
-
|
|
19
|
-
// 各类型组件渲染器
|
|
20
|
-
var ComponentRenderer = function ComponentRenderer(_ref) {
|
|
21
|
-
var column = _ref.column,
|
|
22
|
-
value = _ref.value,
|
|
23
|
-
_onChange = _ref.onChange,
|
|
24
|
-
className = _ref.className;
|
|
25
|
-
var _useSearchContext = useSearchContext(),
|
|
26
|
-
getValueTypeConfig = _useSearchContext.getValueTypeConfig,
|
|
27
|
-
getColumnOptions = _useSearchContext.getColumnOptions,
|
|
28
|
-
hasOptions = _useSearchContext.hasOptions;
|
|
29
|
-
var valueType = column.valueType,
|
|
30
|
-
_column$fieldProps = column.fieldProps,
|
|
31
|
-
fieldProps = _column$fieldProps === void 0 ? {} : _column$fieldProps;
|
|
32
|
-
var config = getValueTypeConfig(valueType);
|
|
33
|
-
var baseStyle = {
|
|
34
|
-
width: '100%'
|
|
35
|
-
};
|
|
36
|
-
var mergedProps = _objectSpread(_objectSpread({}, fieldProps), {}, {
|
|
37
|
-
style: _objectSpread(_objectSpread({}, baseStyle), fieldProps.style)
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
// 如果有选项配置,优先使用选项组件
|
|
41
|
-
if (hasOptions(column)) {
|
|
42
|
-
var options = getColumnOptions(column);
|
|
43
|
-
switch (config.componentType) {
|
|
44
|
-
case 'radio':
|
|
45
|
-
var radioOptions = options.map(function (option) {
|
|
46
|
-
return _objectSpread({}, option);
|
|
47
|
-
});
|
|
48
|
-
return /*#__PURE__*/_jsx(Radio.Group, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
49
|
-
className: className,
|
|
50
|
-
value: value,
|
|
51
|
-
onChange: function onChange(e) {
|
|
52
|
-
return _onChange(e.target.value);
|
|
53
|
-
},
|
|
54
|
-
options: radioOptions
|
|
55
|
-
}));
|
|
56
|
-
case 'checkbox':
|
|
57
|
-
var currentValue = value || [];
|
|
58
|
-
var allValues = options.map(function (opt) {
|
|
59
|
-
return opt.value;
|
|
60
|
-
});
|
|
61
|
-
var checkAll = allValues.length === currentValue.length && allValues.length > 0;
|
|
62
|
-
var indeterminate = currentValue.length > 0 && currentValue.length < allValues.length;
|
|
63
|
-
var handleCheckboxChange = function handleCheckboxChange(checkedValues) {
|
|
64
|
-
_onChange(checkedValues);
|
|
65
|
-
};
|
|
66
|
-
var onCheckAllChange = function onCheckAllChange(e) {
|
|
67
|
-
_onChange(e.target.checked ? allValues : []);
|
|
68
|
-
};
|
|
69
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
70
|
-
className: className,
|
|
71
|
-
children: [/*#__PURE__*/_jsx(Checkbox, {
|
|
72
|
-
indeterminate: indeterminate,
|
|
73
|
-
onChange: onCheckAllChange,
|
|
74
|
-
checked: checkAll,
|
|
75
|
-
style: {
|
|
76
|
-
marginBottom: 4
|
|
77
|
-
},
|
|
78
|
-
children: "\u5168\u90E8"
|
|
79
|
-
}), /*#__PURE__*/_jsx(Checkbox.Group, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
80
|
-
value: currentValue,
|
|
81
|
-
onChange: handleCheckboxChange,
|
|
82
|
-
options: options
|
|
83
|
-
}))]
|
|
84
|
-
});
|
|
85
|
-
case 'select':
|
|
86
|
-
default:
|
|
87
|
-
return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
88
|
-
placeholder: "\u8BF7\u9009\u62E9",
|
|
89
|
-
value: value,
|
|
90
|
-
onChange: _onChange,
|
|
91
|
-
options: options,
|
|
92
|
-
showSearch: true,
|
|
93
|
-
allowClear: true
|
|
94
|
-
}));
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// 根据组件类型渲染对应组件
|
|
99
|
-
switch (config.componentType) {
|
|
100
|
-
case 'input':
|
|
101
|
-
return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
102
|
-
placeholder: fieldProps.placeholder || '请输入值',
|
|
103
|
-
value: value,
|
|
104
|
-
onChange: function onChange(e) {
|
|
105
|
-
return _onChange(e.target.value);
|
|
106
|
-
}
|
|
107
|
-
}));
|
|
108
|
-
case 'number':
|
|
109
|
-
return /*#__PURE__*/_jsx(InputNumber, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
110
|
-
placeholder: fieldProps.placeholder || '请输入数字',
|
|
111
|
-
value: value,
|
|
112
|
-
onChange: _onChange
|
|
113
|
-
}));
|
|
114
|
-
case 'select':
|
|
115
|
-
// 处理switch类型的特殊情况
|
|
116
|
-
if (valueType === 'switch') {
|
|
117
|
-
return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
118
|
-
placeholder: "\u8BF7\u9009\u62E9",
|
|
119
|
-
value: value,
|
|
120
|
-
onChange: _onChange,
|
|
121
|
-
allowClear: true
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
125
|
-
placeholder: "\u8BF7\u9009\u62E9",
|
|
126
|
-
value: value,
|
|
127
|
-
onChange: _onChange,
|
|
128
|
-
allowClear: true
|
|
129
|
-
}));
|
|
130
|
-
case 'switch':
|
|
131
|
-
return /*#__PURE__*/_jsx(Switch, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
132
|
-
checked: value,
|
|
133
|
-
onChange: _onChange
|
|
134
|
-
}));
|
|
135
|
-
case 'date':
|
|
136
|
-
var dateProps = _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
137
|
-
placeholder: fieldProps.placeholder || '请选择日期',
|
|
138
|
-
value: value,
|
|
139
|
-
onChange: _onChange
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
// 根据具体的日期类型渲染不同的组件
|
|
143
|
-
switch (valueType) {
|
|
144
|
-
case 'dateTime':
|
|
145
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, dateProps), {}, {
|
|
146
|
-
showTime: true
|
|
147
|
-
}));
|
|
148
|
-
case 'dateMonth':
|
|
149
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, dateProps), {}, {
|
|
150
|
-
picker: "month"
|
|
151
|
-
}));
|
|
152
|
-
case 'dateWeek':
|
|
153
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, dateProps), {}, {
|
|
154
|
-
picker: "week"
|
|
155
|
-
}));
|
|
156
|
-
case 'dateQuarter':
|
|
157
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, dateProps), {}, {
|
|
158
|
-
picker: "quarter"
|
|
159
|
-
}));
|
|
160
|
-
case 'dateYear':
|
|
161
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread(_objectSpread({}, dateProps), {}, {
|
|
162
|
-
picker: "year"
|
|
163
|
-
}));
|
|
164
|
-
case 'date':
|
|
165
|
-
default:
|
|
166
|
-
return /*#__PURE__*/_jsx(DatePicker, _objectSpread({}, dateProps));
|
|
167
|
-
}
|
|
168
|
-
case 'dateRange':
|
|
169
|
-
var rangeProps = _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
170
|
-
placeholder: fieldProps.placeholder || ['开始日期', '结束日期'],
|
|
171
|
-
value: value,
|
|
172
|
-
onChange: _onChange
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
// 根据具体的日期范围类型渲染不同的组件
|
|
176
|
-
switch (valueType) {
|
|
177
|
-
case 'dateTimeRange':
|
|
178
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread(_objectSpread({}, rangeProps), {}, {
|
|
179
|
-
showTime: true
|
|
180
|
-
}));
|
|
181
|
-
case 'dateMonthRange':
|
|
182
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread(_objectSpread({}, rangeProps), {}, {
|
|
183
|
-
picker: "month"
|
|
184
|
-
}));
|
|
185
|
-
case 'dateWeekRange':
|
|
186
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread(_objectSpread({}, rangeProps), {}, {
|
|
187
|
-
picker: "week"
|
|
188
|
-
}));
|
|
189
|
-
case 'dateQuarterRange':
|
|
190
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread(_objectSpread({}, rangeProps), {}, {
|
|
191
|
-
picker: "quarter"
|
|
192
|
-
}));
|
|
193
|
-
case 'dateYearRange':
|
|
194
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread(_objectSpread({}, rangeProps), {}, {
|
|
195
|
-
picker: "year"
|
|
196
|
-
}));
|
|
197
|
-
case 'dateRange':
|
|
198
|
-
default:
|
|
199
|
-
return /*#__PURE__*/_jsx(RangePicker, _objectSpread({}, rangeProps));
|
|
200
|
-
}
|
|
201
|
-
case 'time':
|
|
202
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
203
|
-
placeholder: fieldProps.placeholder || '请选择时间',
|
|
204
|
-
value: value,
|
|
205
|
-
onChange: _onChange
|
|
206
|
-
}));
|
|
207
|
-
case 'timeRange':
|
|
208
|
-
return /*#__PURE__*/_jsx(TimeRangePicker, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
209
|
-
placeholder: fieldProps.placeholder || ['开始时间', '结束时间'],
|
|
210
|
-
value: value,
|
|
211
|
-
onChange: _onChange
|
|
212
|
-
}));
|
|
213
|
-
case 'radio':
|
|
214
|
-
var iswitch = valueType === 'switch';
|
|
215
|
-
var _radioOptions2 = [{
|
|
216
|
-
label: '开',
|
|
217
|
-
value: true
|
|
218
|
-
}, {
|
|
219
|
-
label: '关',
|
|
220
|
-
value: false
|
|
221
|
-
}];
|
|
222
|
-
var _radioOptions = iswitch ? _radioOptions2 : mergedProps.options;
|
|
223
|
-
|
|
224
|
-
// 如果valueType是switch,使用RadioButton样式
|
|
225
|
-
return /*#__PURE__*/_jsx(Radio.Group, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
226
|
-
options: _radioOptions,
|
|
227
|
-
className: className,
|
|
228
|
-
value: value,
|
|
229
|
-
onChange: function onChange(e) {
|
|
230
|
-
return _onChange(e.target.value);
|
|
231
|
-
}
|
|
232
|
-
}));
|
|
233
|
-
case 'checkbox':
|
|
234
|
-
return /*#__PURE__*/_jsx(Checkbox.Group, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
235
|
-
className: className,
|
|
236
|
-
value: value,
|
|
237
|
-
onChange: _onChange
|
|
238
|
-
}));
|
|
239
|
-
default:
|
|
240
|
-
return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, mergedProps), {}, {
|
|
241
|
-
placeholder: "\u8BF7\u8F93\u5165\u503C",
|
|
242
|
-
value: value,
|
|
243
|
-
onChange: function onChange(e) {
|
|
244
|
-
return _onChange(e.target.value);
|
|
245
|
-
}
|
|
246
|
-
}));
|
|
247
|
-
}
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
// 样式定义
|
|
251
|
-
var useStyles = createStyles(function (_ref2) {
|
|
252
|
-
var token = _ref2.token,
|
|
253
|
-
prefixCls = _ref2.prefixCls;
|
|
254
|
-
var selectedBgColor = '#F5F7F9';
|
|
255
|
-
|
|
256
|
-
// 公共选项样式
|
|
257
|
-
var optionBase = {
|
|
258
|
-
width: '100%',
|
|
259
|
-
padding: 8,
|
|
260
|
-
borderRadius: 2,
|
|
261
|
-
marginBottom: 4,
|
|
262
|
-
marginInlineEnd: 0,
|
|
263
|
-
'&:hover': {
|
|
264
|
-
backgroundColor: selectedBgColor
|
|
265
|
-
}
|
|
266
|
-
};
|
|
267
|
-
return {
|
|
268
|
-
valueSelectorContent: _defineProperty(_defineProperty({
|
|
269
|
-
padding: 8,
|
|
270
|
-
borderBottom: "1px solid ".concat(token.colorBorderSecondary)
|
|
271
|
-
}, "& .".concat(prefixCls, "-checkbox-wrapper, & .").concat(prefixCls, "-radio-wrapper"), optionBase), "& .".concat(prefixCls, "-checkbox-wrapper-checked, & .").concat(prefixCls, "-radio-wrapper-checked"), {
|
|
272
|
-
backgroundColor: selectedBgColor
|
|
273
|
-
}),
|
|
274
|
-
valueSelectorActions: {
|
|
275
|
-
display: 'flex',
|
|
276
|
-
justifyContent: 'flex-end',
|
|
277
|
-
gap: token.marginXS,
|
|
278
|
-
padding: 8
|
|
279
|
-
},
|
|
280
|
-
verticalStyle: {
|
|
281
|
-
display: 'flex',
|
|
282
|
-
flexDirection: 'column'
|
|
283
|
-
},
|
|
284
|
-
// 不同宽度样式
|
|
285
|
-
smallSelector: {
|
|
286
|
-
width: 80
|
|
287
|
-
},
|
|
288
|
-
narrowSelector: {
|
|
289
|
-
width: 150
|
|
290
|
-
},
|
|
291
|
-
mediumSelector: {
|
|
292
|
-
width: 280
|
|
293
|
-
},
|
|
294
|
-
wideSelector: {
|
|
295
|
-
width: 350
|
|
296
|
-
}
|
|
297
|
-
};
|
|
298
|
-
});
|
|
299
|
-
// 根据不同类型获取初始值
|
|
300
|
-
var getInitialValue = function getInitialValue(componentType) {
|
|
301
|
-
switch (componentType) {
|
|
302
|
-
case 'checkbox':
|
|
303
|
-
return [];
|
|
304
|
-
case 'switch':
|
|
305
|
-
return false;
|
|
306
|
-
case 'number':
|
|
307
|
-
return undefined;
|
|
308
|
-
// InputNumber 使用 undefined 而不是 null
|
|
309
|
-
default:
|
|
310
|
-
return null;
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
|
-
|
|
314
|
-
// 值选择器组件
|
|
315
|
-
export var CreekSearchValueSelector = function CreekSearchValueSelector(props) {
|
|
316
|
-
var _useStyles = useStyles(),
|
|
317
|
-
styles = _useStyles.styles;
|
|
318
|
-
var searchContext = useSearchContext();
|
|
319
|
-
var selectedColumn = searchContext.selectedColumn,
|
|
320
|
-
tempValue = searchContext.tempValue,
|
|
321
|
-
setTempValue = searchContext.setTempValue,
|
|
322
|
-
confirmAddFilter = searchContext.confirmAddFilter,
|
|
323
|
-
getValueTypeConfig = searchContext.getValueTypeConfig,
|
|
324
|
-
filters = searchContext.filters;
|
|
325
|
-
var onConfirm = props.onConfirm;
|
|
326
|
-
var config = getValueTypeConfig(selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.valueType);
|
|
327
|
-
|
|
328
|
-
// 获取当前过滤器的值
|
|
329
|
-
var currentFilterValue = useMemo(function () {
|
|
330
|
-
var currentFilter = filters.find(function (item) {
|
|
331
|
-
return item.dataIndex === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.dataIndex);
|
|
332
|
-
});
|
|
333
|
-
return currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value;
|
|
334
|
-
}, [filters, selectedColumn]);
|
|
335
|
-
|
|
336
|
-
// 计算实际显示的值
|
|
337
|
-
var actualValue = useMemo(function () {
|
|
338
|
-
// 如果 tempValue 已设置(不是 null 和 undefined),优先使用 tempValue
|
|
339
|
-
if (tempValue !== null && tempValue !== undefined) {
|
|
340
|
-
return tempValue;
|
|
341
|
-
}
|
|
342
|
-
// 否则使用当前过滤器的值,如果也没有则使用初始值
|
|
343
|
-
return currentFilterValue !== null && currentFilterValue !== void 0 ? currentFilterValue : getInitialValue(config.componentType);
|
|
344
|
-
}, [tempValue, currentFilterValue, selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.valueType, config.componentType]);
|
|
345
|
-
|
|
346
|
-
// 当选择的列发生变化时,重置 tempValue 为当前过滤器的值
|
|
347
|
-
useEffect(function () {
|
|
348
|
-
if (selectedColumn) {
|
|
349
|
-
var currentFilter = filters.find(function (item) {
|
|
350
|
-
return item.dataIndex === selectedColumn.dataIndex;
|
|
351
|
-
});
|
|
352
|
-
if ((currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.value) !== undefined) {
|
|
353
|
-
setTempValue(currentFilter.value);
|
|
354
|
-
} else {
|
|
355
|
-
// 如果没有现有的过滤器值,设置为初始值
|
|
356
|
-
setTempValue(getInitialValue(config.componentType));
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
}, [selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.dataIndex]); // 只在 selectedColumn.dataIndex 变化时触发
|
|
360
|
-
|
|
361
|
-
// 根据组件类型获取合适的宽度
|
|
362
|
-
var getPopoverWidth = function getPopoverWidth() {
|
|
363
|
-
switch (config.componentType) {
|
|
364
|
-
case 'select':
|
|
365
|
-
case 'radio':
|
|
366
|
-
case 'checkbox':
|
|
367
|
-
case 'switch':
|
|
368
|
-
return styles.narrowSelector;
|
|
369
|
-
case 'number':
|
|
370
|
-
return styles.mediumSelector;
|
|
371
|
-
case 'date':
|
|
372
|
-
case 'dateRange':
|
|
373
|
-
case 'time':
|
|
374
|
-
case 'timeRange':
|
|
375
|
-
default:
|
|
376
|
-
return styles.wideSelector;
|
|
377
|
-
}
|
|
378
|
-
};
|
|
379
|
-
|
|
380
|
-
// 重置值的处理
|
|
381
|
-
var handleReset = function handleReset() {
|
|
382
|
-
var initialValue = getInitialValue(config.componentType);
|
|
383
|
-
setTempValue(initialValue);
|
|
384
|
-
};
|
|
385
|
-
|
|
386
|
-
// 处理值的变化
|
|
387
|
-
var handleValueChange = function handleValueChange(value) {
|
|
388
|
-
setTempValue(value);
|
|
389
|
-
};
|
|
390
|
-
return selectedColumn ? /*#__PURE__*/_jsxs("div", {
|
|
391
|
-
className: getPopoverWidth(),
|
|
392
|
-
children: [/*#__PURE__*/_jsx("div", {
|
|
393
|
-
className: styles.valueSelectorContent,
|
|
394
|
-
children: /*#__PURE__*/_jsx(ComponentRenderer, {
|
|
395
|
-
column: selectedColumn,
|
|
396
|
-
value: actualValue,
|
|
397
|
-
onChange: handleValueChange,
|
|
398
|
-
className: ['radio', 'checkbox'].includes(config.componentType) ? styles.verticalStyle : ''
|
|
399
|
-
})
|
|
400
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
401
|
-
className: styles.valueSelectorActions,
|
|
402
|
-
children: /*#__PURE__*/_jsxs(Space, {
|
|
403
|
-
size: "small",
|
|
404
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
|
405
|
-
size: "small",
|
|
406
|
-
onClick: handleReset,
|
|
407
|
-
children: "\u91CD\u7F6E"
|
|
408
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
409
|
-
type: "primary",
|
|
410
|
-
size: "small",
|
|
411
|
-
onClick: function onClick() {
|
|
412
|
-
confirmAddFilter();
|
|
413
|
-
if (_.isFunction(onConfirm)) {
|
|
414
|
-
onConfirm();
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
children: "\u786E\u5B9A"
|
|
418
|
-
})]
|
|
419
|
-
})
|
|
420
|
-
})]
|
|
421
|
-
}) : null;
|
|
422
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ParamsType, ProColumnType } from '@ant-design/pro-components';
|
|
2
|
-
import { CreekTableProps } from '../type';
|
|
3
|
-
interface UseAutoAddFilterToColumnsProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> {
|
|
4
|
-
columns: CreekTableProps<T, U, ValueType>['columns'];
|
|
5
|
-
autoAddFilterForColumn?: boolean;
|
|
6
|
-
}
|
|
7
|
-
interface UseAutoAddFilterToColumnsReturn<T extends ParamsType, U extends ParamsType, ValueType> {
|
|
8
|
-
columnsWithFilter: CreekTableProps<T, U, ValueType>['columns'];
|
|
9
|
-
getColumnKey: (column: ProColumnType<T, U>) => string;
|
|
10
|
-
}
|
|
11
|
-
export declare const useAutoAddFilterToColumns: <T extends ParamsType, U extends ParamsType, ValueType = "text">({ columns, autoAddFilterForColumn, }: UseAutoAddFilterToColumnsProps<T, U, ValueType>) => UseAutoAddFilterToColumnsReturn<T, U, ValueType>;
|
|
12
|
-
export {};
|