@zykj2024/much-library 1.1.8 → 1.1.9-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/McContainer/demo/generic.d.ts +8 -0
- package/dist/McContainer/demo/generic.js +91 -0
- package/dist/McContainer/index.d.ts +147 -108
- package/dist/McContainer/index.js +16 -7
- package/dist/McGroupPanel/index.css +8 -3
- package/dist/McGroupPanel/index.d.ts +1 -0
- package/dist/McGroupPanel/index.js +156 -141
- package/dist/McInput/Input.js +1 -1
- package/dist/McInput/Search.js +1 -1
- package/dist/McInput/TextArea.js +1 -1
- package/dist/McInputNumber/index.d.ts +3 -0
- package/dist/McInputNumber/index.js +16 -9
- package/dist/McThemeConfig/layoutStyle.d.ts +1 -1
- package/dist/McThemeConfig/layoutStyle.js +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
/**
|
|
3
|
+
* title: 泛型
|
|
4
|
+
* description: 更好的代码提示及类型推断
|
|
5
|
+
* transform: true
|
|
6
|
+
* compact: true
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import { McContainer, McInput } from "../..";
|
|
10
|
+
import { useRef, useState } from 'react';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
var tableData = Array.from({
|
|
14
|
+
length: 5
|
|
15
|
+
}, function (_, index) {
|
|
16
|
+
return {
|
|
17
|
+
id: index + 1,
|
|
18
|
+
name: "\u59D3\u540D".concat(index + 1),
|
|
19
|
+
age: 18 + index
|
|
20
|
+
};
|
|
21
|
+
});
|
|
22
|
+
export default (function () {
|
|
23
|
+
var _useState = useState(tableData),
|
|
24
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
25
|
+
dataSource = _useState2[0],
|
|
26
|
+
setDataSource = _useState2[1];
|
|
27
|
+
var _useState3 = useState(false),
|
|
28
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
29
|
+
loading = _useState4[0],
|
|
30
|
+
setLoading = _useState4[1];
|
|
31
|
+
var mcContainerRef = useRef(null);
|
|
32
|
+
var columns = [{
|
|
33
|
+
title: 'ID',
|
|
34
|
+
dataIndex: 'id'
|
|
35
|
+
}, {
|
|
36
|
+
title: '姓名',
|
|
37
|
+
dataIndex: 'name'
|
|
38
|
+
}, {
|
|
39
|
+
title: '年龄',
|
|
40
|
+
dataIndex: 'age'
|
|
41
|
+
}, {
|
|
42
|
+
title: '操作',
|
|
43
|
+
dataIndex: 'id',
|
|
44
|
+
width: 100,
|
|
45
|
+
render: function render() {
|
|
46
|
+
return /*#__PURE__*/_jsx("a", {
|
|
47
|
+
children: "\u7F16\u8F91"
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
}];
|
|
51
|
+
var queryItems = /*#__PURE__*/_jsx(_Fragment, {
|
|
52
|
+
children: /*#__PURE__*/_jsx(McInput, {
|
|
53
|
+
label: "\u59D3\u540D",
|
|
54
|
+
name: "name",
|
|
55
|
+
style: {
|
|
56
|
+
width: 270
|
|
57
|
+
}
|
|
58
|
+
})
|
|
59
|
+
});
|
|
60
|
+
var onQuery = function onQuery(data) {
|
|
61
|
+
var _mcContainerRef$curre;
|
|
62
|
+
var queryData = (_mcContainerRef$curre = mcContainerRef.current) === null || _mcContainerRef$curre === void 0 ? void 0 : _mcContainerRef$curre.getQueryParams();
|
|
63
|
+
// 加了泛型后，data. queryData.就会有类型推断
|
|
64
|
+
console.log(data.a, queryData === null || queryData === void 0 ? void 0 : queryData.a);
|
|
65
|
+
return new Promise(function (resolve) {
|
|
66
|
+
setLoading(true);
|
|
67
|
+
setTimeout(function () {
|
|
68
|
+
setDataSource(tableData);
|
|
69
|
+
setLoading(false);
|
|
70
|
+
resolve();
|
|
71
|
+
}, 1000);
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
return (
|
|
75
|
+
/*#__PURE__*/
|
|
76
|
+
// 添加泛型后，组件下写的第一个属性会没有代码提示。
|
|
77
|
+
_jsx(McContainer, {
|
|
78
|
+
ref: mcContainerRef,
|
|
79
|
+
height: "100%",
|
|
80
|
+
immediateQuery: false,
|
|
81
|
+
loading: loading,
|
|
82
|
+
onQuery: onQuery,
|
|
83
|
+
queryItems: queryItems,
|
|
84
|
+
tableProps: {
|
|
85
|
+
columns: columns,
|
|
86
|
+
dataSource: dataSource,
|
|
87
|
+
rowKey: 'id'
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
);
|
|
91
|
+
});
|
|
@@ -1,153 +1,192 @@
|
|
|
1
1
|
import { ButtonProps, TableProps } from 'antd';
|
|
2
|
-
import { CSSProperties,
|
|
2
|
+
import { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
3
3
|
import './index.less';
|
|
4
|
-
|
|
4
|
+
/** 请求参数 */
|
|
5
|
+
type QueryParamsType<T = any> = {
|
|
6
|
+
/** 当前页码 */
|
|
7
|
+
current: number;
|
|
8
|
+
/** 每页显示的记录数 */
|
|
9
|
+
pageSize: number;
|
|
10
|
+
} & T;
|
|
11
|
+
/** 批量操作配置接口 */
|
|
12
|
+
interface BatchConfig {
|
|
13
|
+
/** 是否显示批量操作按钮 */
|
|
14
|
+
show?: boolean;
|
|
15
|
+
/** 批量操作按钮的文本 */
|
|
16
|
+
buttonText?: string;
|
|
17
|
+
/** 批量操作按钮的属性 */
|
|
18
|
+
buttonProps?: ButtonProps;
|
|
19
|
+
/** 批量操作按钮在操作栏中的位置 */
|
|
20
|
+
order?: number;
|
|
21
|
+
}
|
|
22
|
+
/** McContainer 组件 Props 类型定义 */
|
|
23
|
+
export interface McContainerProps<T> {
|
|
24
|
+
/** 组件的自定义样式 */
|
|
5
25
|
style?: CSSProperties;
|
|
26
|
+
/** 组件的自定义类名 */
|
|
6
27
|
className?: string;
|
|
7
|
-
/**
|
|
28
|
+
/**
|
|
29
|
+
* 页面容器的高度
|
|
30
|
+
* @default 'calc(100vh - 88px)' 即视口高度-菜单header高度56px-页面上下内边距16px*2
|
|
31
|
+
*/
|
|
8
32
|
height?: string;
|
|
9
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* 页面容器的背景色
|
|
35
|
+
* @default '#ffffff'
|
|
36
|
+
*/
|
|
10
37
|
backgroundColor?: string;
|
|
11
38
|
/**
|
|
12
|
-
*
|
|
39
|
+
* 是否展示头部遮罩
|
|
40
|
+
* @default true
|
|
13
41
|
*/
|
|
14
42
|
showCell?: boolean;
|
|
15
43
|
/**
|
|
16
|
-
*
|
|
17
|
-
|
|
18
|
-
|
|
44
|
+
* 是否触发首次查询
|
|
45
|
+
* @description 若使用场景为需自定义默认查询参数，可将该属性设置为false，
|
|
46
|
+
* 并手动调用setDefaultQueryParams方法重新设置默认查询参数，而后调用query方法触发查询
|
|
47
|
+
* @default true
|
|
48
|
+
*/
|
|
19
49
|
immediateQuery?: boolean;
|
|
20
|
-
/**
|
|
50
|
+
/**
|
|
51
|
+
* 加载中状态（已覆盖table组件的loading）
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
21
54
|
loading?: boolean;
|
|
22
55
|
/** 加载loading下方的文案，默认为测试中 */
|
|
23
56
|
loadingText?: string;
|
|
24
57
|
/**
|
|
25
58
|
* 查询项（不受展开、收起按钮控制显示隐藏的查询项）
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<>
|
|
29
|
-
<McSelect
|
|
30
|
-
label="下拉选择器"
|
|
31
|
-
name="name1"
|
|
32
|
-
/>
|
|
33
|
-
<McCascader
|
|
34
|
-
label="级联选择器"
|
|
35
|
-
name="name2"
|
|
36
|
-
/>
|
|
37
|
-
<McDateRange
|
|
38
|
-
label="日期范围选择器"
|
|
39
|
-
name="name3"
|
|
40
|
-
/>
|
|
41
|
-
<McInput.Search
|
|
42
|
-
name="name4"
|
|
43
|
-
onSearch={() => mcContainerRef.current?.query({ current: 1 })}
|
|
44
|
-
/>
|
|
45
|
-
</>
|
|
46
|
-
*/
|
|
59
|
+
* @description 建议结合 McSelect、McCascader、McDateRange、McInput 等组件使用
|
|
60
|
+
*/
|
|
47
61
|
queryItems?: ReactElement;
|
|
48
|
-
/**
|
|
62
|
+
/**
|
|
63
|
+
* 是否显示查询按钮
|
|
64
|
+
* @default true
|
|
65
|
+
*/
|
|
49
66
|
showQuery?: boolean;
|
|
50
|
-
/**
|
|
67
|
+
/**
|
|
68
|
+
* 是否显示重置按钮
|
|
69
|
+
* @default true
|
|
70
|
+
*/
|
|
51
71
|
showReset?: boolean;
|
|
52
|
-
/**
|
|
72
|
+
/**
|
|
73
|
+
* 是否显示展开、收起按钮
|
|
74
|
+
* @default false
|
|
75
|
+
*/
|
|
53
76
|
showCollapse?: boolean;
|
|
54
|
-
/**
|
|
77
|
+
/** 可折叠的查询项（可通过展开、收起按钮控制显示隐藏的查询项） */
|
|
55
78
|
collapsibleQueryItems?: ReactElement;
|
|
56
|
-
/**
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
[key: string]: any;
|
|
79
|
+
/**
|
|
80
|
+
* 查询回调事件
|
|
81
|
+
* @param params - 分页参数
|
|
82
|
+
* @param filters - 过滤条件
|
|
83
|
+
* @param sorter - 排序条件
|
|
84
|
+
* @param extra - 额外信息，包含当前数据源和触发的操作类型
|
|
85
|
+
*/
|
|
86
|
+
onQuery?: (params: QueryParamsType<T>, filters?: Record<string, any>, sorter?: Record<string, any>, extra?: {
|
|
87
|
+
currentDataSource: any[];
|
|
88
|
+
action: 'paginate' | 'sort' | 'filter';
|
|
67
89
|
}) => void;
|
|
68
|
-
/**
|
|
90
|
+
/**
|
|
91
|
+
* 重置按钮回调事件
|
|
92
|
+
* @description 若设置该属性，则在点击重置按钮时不再触发onQuery事件
|
|
93
|
+
*/
|
|
94
|
+
onReset?: (params?: QueryParamsType<T>) => void;
|
|
95
|
+
/**
|
|
96
|
+
* 查询区自定义渲染
|
|
97
|
+
* @description 若设置为null，则不显示查询区
|
|
98
|
+
*/
|
|
69
99
|
queryRender?: ReactNode;
|
|
70
100
|
/**
|
|
71
|
-
*
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<Button type="primary">操作1</Button>
|
|
75
|
-
<Button>操作2</Button>
|
|
76
|
-
</>
|
|
77
|
-
*/
|
|
101
|
+
* 操作栏
|
|
102
|
+
* @description 若未设置该项，则不显示
|
|
103
|
+
*/
|
|
78
104
|
actionBar?: ReactElement;
|
|
79
105
|
/**
|
|
80
|
-
*
|
|
106
|
+
* 操作栏自定义渲染
|
|
81
107
|
* @param batchEl - 批量操作按钮实例
|
|
82
|
-
* @returns 操作栏元素
|
|
83
108
|
*/
|
|
84
109
|
actionBarRender?: (batchEl: ReactNode) => ReactNode;
|
|
85
|
-
/**
|
|
110
|
+
/**
|
|
111
|
+
* 批量操作已选项数量
|
|
112
|
+
* @description 当数量大于0时，显示批量操作栏
|
|
113
|
+
*/
|
|
86
114
|
batchNum?: number;
|
|
87
115
|
/**
|
|
88
|
-
*
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<Button>批量操作1</Button>
|
|
92
|
-
<Button>批量操作2</Button>
|
|
93
|
-
</>
|
|
94
|
-
*/
|
|
116
|
+
* 批量操作按钮区
|
|
117
|
+
* @description 若未设置该项，则不显示
|
|
118
|
+
*/
|
|
95
119
|
batchBtns?: ReactNode;
|
|
96
|
-
/**
|
|
97
|
-
|
|
98
|
-
* @param show - 是否显示批量操作按钮（默认不显示 false）
|
|
99
|
-
* @param buttonText - 批量操作按钮文字
|
|
100
|
-
* @param buttonProps - 批量操作按钮属性
|
|
101
|
-
* @param order - 批量操作按钮在操作栏中的位置（默认为最后一个）
|
|
102
|
-
*/
|
|
103
|
-
batch?: {
|
|
104
|
-
show?: boolean;
|
|
105
|
-
buttonText?: string;
|
|
106
|
-
buttonProps?: ButtonProps;
|
|
107
|
-
order?: number;
|
|
108
|
-
};
|
|
120
|
+
/** 批量操作按钮配置 */
|
|
121
|
+
batch?: BatchConfig;
|
|
109
122
|
/** 批量操作取消按钮回调事件 */
|
|
110
123
|
onCancel?: () => void;
|
|
111
124
|
/** 表格组件属性 */
|
|
112
125
|
tableProps?: TableProps<any>;
|
|
113
|
-
/**
|
|
126
|
+
/**
|
|
127
|
+
* 数据表格区自定义渲染
|
|
128
|
+
* @description 若设置为null，则不显示数据表格区
|
|
129
|
+
*/
|
|
114
130
|
tableRender?: ReactNode;
|
|
115
|
-
/**
|
|
131
|
+
/**
|
|
132
|
+
* 当前分页数据为空且非第一页时，是否自动会退到上一个分页
|
|
133
|
+
* @default false
|
|
134
|
+
*/
|
|
116
135
|
autoBackPagination?: boolean;
|
|
117
|
-
/**
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
136
|
+
/**
|
|
137
|
+
* 折叠事件的回调
|
|
138
|
+
* @param collapsed - 是否折叠
|
|
139
|
+
*/
|
|
140
|
+
onCollapse?: (collapsed: boolean) => void;
|
|
141
|
+
}
|
|
142
|
+
/** McContainer 组件 Ref 类型定义 */
|
|
143
|
+
export interface McContainerRef<T = any> {
|
|
122
144
|
/**
|
|
123
145
|
* 调用查询的方法
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
146
|
+
* @description 可通过传参更新查询参数的状态后触发查询，所设置的属性仅会覆盖原查询参数对应的属性
|
|
147
|
+
* @param params - 查询参数，仅支持设置过name属性的查询项
|
|
148
|
+
*/
|
|
149
|
+
query: (params?: QueryParamsType<T>) => void;
|
|
150
|
+
/**
|
|
151
|
+
* 调用重置的方法
|
|
152
|
+
* @description 重置查询参数为默认值
|
|
153
|
+
*/
|
|
132
154
|
reset: () => void;
|
|
133
155
|
/**
|
|
134
156
|
* 设置默认查询参数
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
157
|
+
* @description 用于重置使用，仅对设置过name属性的查询项有效
|
|
158
|
+
* 仅对设置过name属性的查询项（和current、pageSize）有效，查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理；
|
|
159
|
+
* 可通过该方法配置默认查询的分页参数；
|
|
160
|
+
* 设置的查询参数将覆盖原有默认值，如：setDefaultQueryParams({pageSize: 10, status: 1})，设置后的默认查询参数为{current: 1, pageSize: 10, status: 1}
|
|
161
|
+
* 原有默认值 {current: 1, pageSize: 20}（若未开启分页功能，默认值为{}
|
|
162
|
+
* @param params - 默认查询参数
|
|
163
|
+
*/
|
|
164
|
+
setDefaultQueryParams: (params: QueryParamsType<T>) => void;
|
|
165
|
+
/**
|
|
166
|
+
* 设置单个查询项的参数
|
|
167
|
+
* @description 仅支持设置过name属性的查询项
|
|
168
|
+
* @param name - 查询项名称
|
|
169
|
+
* @param value - 查询项值
|
|
170
|
+
*/
|
|
171
|
+
setQueryParam: (name: keyof QueryParamsType<T>, value: any) => void;
|
|
172
|
+
/**
|
|
173
|
+
* 获取单个查询项的参数
|
|
174
|
+
* @description 仅支持设置过name属性的查询项
|
|
175
|
+
* @param name - 查询项名称
|
|
176
|
+
*/
|
|
177
|
+
getQueryParam: (name: keyof QueryParamsType<T>) => any;
|
|
178
|
+
/**
|
|
179
|
+
* 获取所有查询项的参数
|
|
180
|
+
* @returns 当前可见的查询项的参数集
|
|
181
|
+
*/
|
|
182
|
+
getQueryParams: () => QueryParamsType<T>;
|
|
183
|
+
/**
|
|
184
|
+
* 重置查询参数
|
|
185
|
+
* @description 重置为默认查询参数
|
|
186
|
+
*/
|
|
150
187
|
resetQueryParams: () => void;
|
|
151
|
-
}
|
|
152
|
-
declare const McContainer:
|
|
188
|
+
}
|
|
189
|
+
declare const McContainer: <T>(props: McContainerProps<T> & {
|
|
190
|
+
ref?: React.ForwardedRef<McContainerRef<T>>;
|
|
191
|
+
}) => JSX.Element;
|
|
153
192
|
export default McContainer;
|
|
@@ -7,10 +7,22 @@ import { isNumber } from 'lodash';
|
|
|
7
7
|
import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
|
|
8
8
|
import { Children, cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
9
9
|
import "./index.css";
|
|
10
|
+
|
|
11
|
+
/** 请求参数 */
|
|
12
|
+
|
|
13
|
+
/** 批量操作配置接口 */
|
|
14
|
+
|
|
15
|
+
/** McContainer 组件 Props 类型定义 */
|
|
16
|
+
|
|
17
|
+
/** McContainer 组件 Ref 类型定义 */
|
|
10
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
19
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
|
|
21
|
+
/**
|
|
22
|
+
* McContainer 组件
|
|
23
|
+
* @description 一个通用的容器组件，支持查询、表格、批量操作等功能
|
|
24
|
+
*/
|
|
25
|
+
var ContainerPanel = function ContainerPanel(props, ref) {
|
|
14
26
|
var _tableProps$dataSourc;
|
|
15
27
|
var style = props.style,
|
|
16
28
|
className = props.className,
|
|
@@ -171,15 +183,13 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
171
183
|
};
|
|
172
184
|
|
|
173
185
|
// 格式化查询参数（返回当前可见的查询项的参数集）
|
|
174
|
-
var formatQueryParams = function formatQueryParams() {
|
|
186
|
+
var formatQueryParams = function formatQueryParams(params) {
|
|
175
187
|
var _tableProps$paginatio;
|
|
176
|
-
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
177
188
|
var _params = tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false || tableProps !== null && tableProps !== void 0 && (_tableProps$paginatio = tableProps.pagination) !== null && _tableProps$paginatio !== void 0 && _tableProps$paginatio.hasOwnProperty('onChange') || tableProps !== null && tableProps !== void 0 && tableProps.hasOwnProperty('onChange') ? {} : {
|
|
178
189
|
current: params.current,
|
|
179
190
|
pageSize: params.pageSize
|
|
180
191
|
};
|
|
181
192
|
var fn = function fn(items) {
|
|
182
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
183
193
|
items && Children.map(items.props.children ? items.props.children : items, function (item) {
|
|
184
194
|
if (item !== null && item !== void 0 && item.props) {
|
|
185
195
|
var _item$props2;
|
|
@@ -199,7 +209,6 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
199
209
|
var query = function query(params) {
|
|
200
210
|
if (params) {
|
|
201
211
|
var _params = _objectSpread({}, queryParamsRef.current);
|
|
202
|
-
// 仅支持设置过name属性的查询项（和current、pageSize）
|
|
203
212
|
Object.entries(params).forEach(function (_ref2) {
|
|
204
213
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
205
214
|
key = _ref3[0],
|
|
@@ -255,7 +264,6 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
255
264
|
Object.keys(_params).forEach(function (k) {
|
|
256
265
|
return !allNamesRef.current.includes(k) && allNamesRef.current.push(k);
|
|
257
266
|
});
|
|
258
|
-
// 仅支持设置过name属性的查询项（和current、pageSize）
|
|
259
267
|
Object.entries(params).forEach(function (_ref4) {
|
|
260
268
|
var _ref5 = _slicedToArray(_ref4, 2),
|
|
261
269
|
key = _ref5[0],
|
|
@@ -509,5 +517,6 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
509
517
|
})]
|
|
510
518
|
})
|
|
511
519
|
});
|
|
512
|
-
}
|
|
520
|
+
};
|
|
521
|
+
var McContainer = /*#__PURE__*/forwardRef(ContainerPanel);
|
|
513
522
|
export default McContainer;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.mc-group-panel {
|
|
2
2
|
width: 100%;
|
|
3
|
-
height:
|
|
3
|
+
height: 341px;
|
|
4
4
|
display: -webkit-box;
|
|
5
5
|
display: -ms-flexbox;
|
|
6
6
|
display: flex;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
.mc-group-panel__card-header {
|
|
13
13
|
height: 40px;
|
|
14
14
|
background: #fafafa;
|
|
15
|
-
padding: 0
|
|
15
|
+
padding: 0 8px;
|
|
16
16
|
display: -webkit-box;
|
|
17
17
|
display: -ms-flexbox;
|
|
18
18
|
display: flex;
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
.mc-group-panel__card-title {
|
|
27
27
|
color: rgba(0, 0, 0, 0.847);
|
|
28
28
|
font-weight: 600;
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
}
|
|
31
|
+
.mc-group-panel__card-icon {
|
|
32
|
+
color: #8c8c8c;
|
|
29
33
|
}
|
|
30
34
|
.mc-group-panel__card-body {
|
|
31
35
|
height: calc(100% - 40px);
|
|
@@ -58,13 +62,14 @@
|
|
|
58
62
|
flex: 1 1 56%;
|
|
59
63
|
border-left: 1px solid #ebebeb;
|
|
60
64
|
overflow: auto;
|
|
65
|
+
padding-bottom: 20px;
|
|
61
66
|
}
|
|
62
67
|
.mc-group-panel__options-list {
|
|
63
68
|
height: calc(100% - 40px);
|
|
64
69
|
overflow: auto;
|
|
65
70
|
}
|
|
66
71
|
.mc-group-panel__search-bar {
|
|
67
|
-
padding: 0
|
|
72
|
+
padding: 0 12px;
|
|
68
73
|
}
|
|
69
74
|
.mc-group-panel__checkbox-wrapper {
|
|
70
75
|
width: 100%;
|
|
@@ -22,6 +22,8 @@ var McGroupPanel = function McGroupPanel(props) {
|
|
|
22
22
|
_props$inexistent = props.inexistent,
|
|
23
23
|
inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
|
|
24
24
|
sortable = props.sortable,
|
|
25
|
+
_props$title = props.title,
|
|
26
|
+
title = _props$title === void 0 ? '标题' : _props$title,
|
|
25
27
|
value = props.value,
|
|
26
28
|
onChange = props.onChange;
|
|
27
29
|
var _ref = typeof inexistent === 'boolean' ? {} : inexistent,
|
|
@@ -179,172 +181,181 @@ var McGroupPanel = function McGroupPanel(props) {
|
|
|
179
181
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
180
182
|
className: "mc-group-panel__options",
|
|
181
183
|
children: [/*#__PURE__*/_jsx("div", {
|
|
182
|
-
className: "mc-group-panel__card-header mc-group-panel__search-bar",
|
|
183
|
-
children:
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
}) && allValues.some(function (v) {
|
|
208
|
-
return selected.includes(v);
|
|
209
|
-
}),
|
|
210
|
-
onChange: function onChange(e) {
|
|
211
|
-
return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(allValues)))) : reserved ? selected.filter(function (i) {
|
|
212
|
-
return !itemMap[i];
|
|
213
|
-
}) : []);
|
|
214
|
-
},
|
|
215
|
-
disabled: disabled,
|
|
216
|
-
children: "\u5168\u9009"
|
|
217
|
-
})
|
|
218
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
219
|
-
className: "mc-group-panel__options-list",
|
|
220
|
-
children: _options.map(function (item) {
|
|
221
|
-
var _groupMap$item$value, _groupMap$item$value2;
|
|
222
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
223
|
-
className: "mc-group-panel__checkbox-wrapper",
|
|
224
|
-
style: {
|
|
225
|
-
background: activeGroup === item.value ? '#EAEEFE' : ''
|
|
226
|
-
},
|
|
227
|
-
onClick: function onClick() {
|
|
228
|
-
return setActiveGroup(item.value);
|
|
229
|
-
},
|
|
230
|
-
children: [/*#__PURE__*/_jsx(Checkbox, {
|
|
231
|
-
checked: ((_groupMap$item$value = groupMap[item.value]) === null || _groupMap$item$value === void 0 ? void 0 : _groupMap$item$value.length) > 0 && groupMap[item.value].every(function (_ref2) {
|
|
232
|
-
var value = _ref2.value;
|
|
233
|
-
return selected.includes(value);
|
|
234
|
-
}),
|
|
235
|
-
indeterminate: ((_groupMap$item$value2 = groupMap[item.value]) === null || _groupMap$item$value2 === void 0 ? void 0 : _groupMap$item$value2.length) > 0 && !groupMap[item.value].every(function (_ref3) {
|
|
236
|
-
var value = _ref3.value;
|
|
237
|
-
return selected.includes(value);
|
|
238
|
-
}) && groupMap[item.value].some(function (_ref4) {
|
|
239
|
-
var value = _ref4.value;
|
|
240
|
-
return selected.includes(value);
|
|
241
|
-
}),
|
|
242
|
-
onChange: function onChange(e) {
|
|
243
|
-
var _groupMap$item$value3;
|
|
244
|
-
return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(((_groupMap$item$value3 = groupMap[item.value]) === null || _groupMap$item$value3 === void 0 ? void 0 : _groupMap$item$value3.map(function (_ref5) {
|
|
245
|
-
var value = _ref5.value;
|
|
246
|
-
return value;
|
|
247
|
-
})) || [])))) : selected.filter(function (i) {
|
|
248
|
-
var _groupMap$item$value4;
|
|
249
|
-
return !((_groupMap$item$value4 = groupMap[item.value]) !== null && _groupMap$item$value4 !== void 0 && _groupMap$item$value4.some(function (_ref6) {
|
|
250
|
-
var value = _ref6.value;
|
|
251
|
-
return value === i;
|
|
252
|
-
}));
|
|
253
|
-
}));
|
|
254
|
-
},
|
|
255
|
-
disabled: disabled,
|
|
256
|
-
onClick: function onClick(e) {
|
|
257
|
-
return e.stopPropagation();
|
|
258
|
-
}
|
|
259
|
-
}), /*#__PURE__*/_jsx(Typography.Paragraph, {
|
|
260
|
-
style: {
|
|
261
|
-
margin: '0 0 0 8px'
|
|
262
|
-
},
|
|
263
|
-
ellipsis: {
|
|
264
|
-
tooltip: item.label
|
|
265
|
-
},
|
|
266
|
-
children: item.label
|
|
267
|
-
})]
|
|
268
|
-
}, item.value);
|
|
269
|
-
})
|
|
270
|
-
})]
|
|
271
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
272
|
-
className: "mc-group-panel__options-items",
|
|
273
|
-
children: ((_groupMap$activeGroup = groupMap[activeGroup]) === null || _groupMap$activeGroup === void 0 ? void 0 : _groupMap$activeGroup.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
184
|
+
className: "mc-group-panel__card-title mc-group-panel__card-header mc-group-panel__search-bar",
|
|
185
|
+
children: title
|
|
186
|
+
}), /*#__PURE__*/_jsxs(_Fragment, {
|
|
187
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
188
|
+
style: {
|
|
189
|
+
padding: 12
|
|
190
|
+
},
|
|
191
|
+
children: /*#__PURE__*/_jsx(Input, {
|
|
192
|
+
prefix: /*#__PURE__*/_jsx(SearchOutlined, {
|
|
193
|
+
className: "mc-group-panel__card-icon"
|
|
194
|
+
}),
|
|
195
|
+
placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
|
|
196
|
+
allowClear: true,
|
|
197
|
+
autoComplete: "off",
|
|
198
|
+
value: searchValue,
|
|
199
|
+
onChange: function onChange(e) {
|
|
200
|
+
var v = e.target.value.trim();
|
|
201
|
+
setSearchValue(v);
|
|
202
|
+
v !== searchValue && debounceSearch(v);
|
|
203
|
+
}
|
|
204
|
+
})
|
|
205
|
+
}), _options.length > 0 ? /*#__PURE__*/_jsxs("div", {
|
|
206
|
+
className: "mc-group-panel__options-wrapper",
|
|
207
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
208
|
+
className: "mc-group-panel__options-groups",
|
|
274
209
|
children: [/*#__PURE__*/_jsx("div", {
|
|
275
210
|
className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
|
|
276
211
|
children: /*#__PURE__*/_jsx(Checkbox, {
|
|
277
|
-
checked:
|
|
278
|
-
|
|
279
|
-
return selected.includes(value);
|
|
212
|
+
checked: allValues.length > 0 && allValues.every(function (v) {
|
|
213
|
+
return selected.includes(v);
|
|
280
214
|
}),
|
|
281
|
-
indeterminate:
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
var value = _ref9.value;
|
|
286
|
-
return selected.includes(value);
|
|
215
|
+
indeterminate: allValues.length > 0 && !allValues.every(function (v) {
|
|
216
|
+
return selected.includes(v);
|
|
217
|
+
}) && allValues.some(function (v) {
|
|
218
|
+
return selected.includes(v);
|
|
287
219
|
}),
|
|
288
220
|
onChange: function onChange(e) {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
return value;
|
|
293
|
-
})) || [])))) : selected.filter(function (i) {
|
|
294
|
-
var _groupMap$activeGroup5;
|
|
295
|
-
return !((_groupMap$activeGroup5 = groupMap[activeGroup]) !== null && _groupMap$activeGroup5 !== void 0 && _groupMap$activeGroup5.some(function (_ref11) {
|
|
296
|
-
var value = _ref11.value;
|
|
297
|
-
return value === i;
|
|
298
|
-
}));
|
|
299
|
-
}));
|
|
221
|
+
return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(allValues)))) : reserved ? selected.filter(function (i) {
|
|
222
|
+
return !itemMap[i];
|
|
223
|
+
}) : []);
|
|
300
224
|
},
|
|
301
225
|
disabled: disabled,
|
|
302
226
|
children: "\u5168\u9009"
|
|
303
227
|
})
|
|
304
228
|
}), /*#__PURE__*/_jsx("div", {
|
|
305
229
|
className: "mc-group-panel__options-list",
|
|
306
|
-
children:
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
return i !== item.value;
|
|
313
|
-
}));
|
|
230
|
+
children: _options.map(function (item) {
|
|
231
|
+
var _groupMap$item$value, _groupMap$item$value2;
|
|
232
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
233
|
+
className: "mc-group-panel__checkbox-wrapper",
|
|
234
|
+
style: {
|
|
235
|
+
background: activeGroup === item.value ? '#EAEEFE' : ''
|
|
314
236
|
},
|
|
315
|
-
|
|
316
|
-
|
|
237
|
+
onClick: function onClick() {
|
|
238
|
+
return setActiveGroup(item.value);
|
|
239
|
+
},
|
|
240
|
+
children: [/*#__PURE__*/_jsx(Checkbox, {
|
|
241
|
+
checked: ((_groupMap$item$value = groupMap[item.value]) === null || _groupMap$item$value === void 0 ? void 0 : _groupMap$item$value.length) > 0 && groupMap[item.value].every(function (_ref2) {
|
|
242
|
+
var value = _ref2.value;
|
|
243
|
+
return selected.includes(value);
|
|
244
|
+
}),
|
|
245
|
+
indeterminate: ((_groupMap$item$value2 = groupMap[item.value]) === null || _groupMap$item$value2 === void 0 ? void 0 : _groupMap$item$value2.length) > 0 && !groupMap[item.value].every(function (_ref3) {
|
|
246
|
+
var value = _ref3.value;
|
|
247
|
+
return selected.includes(value);
|
|
248
|
+
}) && groupMap[item.value].some(function (_ref4) {
|
|
249
|
+
var value = _ref4.value;
|
|
250
|
+
return selected.includes(value);
|
|
251
|
+
}),
|
|
252
|
+
onChange: function onChange(e) {
|
|
253
|
+
var _groupMap$item$value3;
|
|
254
|
+
return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(((_groupMap$item$value3 = groupMap[item.value]) === null || _groupMap$item$value3 === void 0 ? void 0 : _groupMap$item$value3.map(function (_ref5) {
|
|
255
|
+
var value = _ref5.value;
|
|
256
|
+
return value;
|
|
257
|
+
})) || [])))) : selected.filter(function (i) {
|
|
258
|
+
var _groupMap$item$value4;
|
|
259
|
+
return !((_groupMap$item$value4 = groupMap[item.value]) !== null && _groupMap$item$value4 !== void 0 && _groupMap$item$value4.some(function (_ref6) {
|
|
260
|
+
var value = _ref6.value;
|
|
261
|
+
return value === i;
|
|
262
|
+
}));
|
|
263
|
+
}));
|
|
264
|
+
},
|
|
265
|
+
disabled: disabled,
|
|
266
|
+
onClick: function onClick(e) {
|
|
267
|
+
return e.stopPropagation();
|
|
268
|
+
}
|
|
269
|
+
}), /*#__PURE__*/_jsx(Typography.Paragraph, {
|
|
317
270
|
style: {
|
|
318
|
-
margin: 0
|
|
271
|
+
margin: '0 0 0 8px'
|
|
319
272
|
},
|
|
320
273
|
ellipsis: {
|
|
321
274
|
tooltip: item.label
|
|
322
275
|
},
|
|
323
276
|
children: item.label
|
|
324
|
-
})
|
|
277
|
+
})]
|
|
325
278
|
}, item.value);
|
|
326
279
|
})
|
|
327
280
|
})]
|
|
328
|
-
})
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
281
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
282
|
+
className: "mc-group-panel__options-items",
|
|
283
|
+
children: ((_groupMap$activeGroup = groupMap[activeGroup]) === null || _groupMap$activeGroup === void 0 ? void 0 : _groupMap$activeGroup.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
284
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
285
|
+
className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
|
|
286
|
+
children: /*#__PURE__*/_jsx(Checkbox, {
|
|
287
|
+
checked: ((_groupMap$activeGroup2 = groupMap[activeGroup]) === null || _groupMap$activeGroup2 === void 0 ? void 0 : _groupMap$activeGroup2.length) > 0 && groupMap[activeGroup].every(function (_ref7) {
|
|
288
|
+
var value = _ref7.value;
|
|
289
|
+
return selected.includes(value);
|
|
290
|
+
}),
|
|
291
|
+
indeterminate: ((_groupMap$activeGroup3 = groupMap[activeGroup]) === null || _groupMap$activeGroup3 === void 0 ? void 0 : _groupMap$activeGroup3.length) > 0 && !groupMap[activeGroup].every(function (_ref8) {
|
|
292
|
+
var value = _ref8.value;
|
|
293
|
+
return selected.includes(value);
|
|
294
|
+
}) && groupMap[activeGroup].some(function (_ref9) {
|
|
295
|
+
var value = _ref9.value;
|
|
296
|
+
return selected.includes(value);
|
|
297
|
+
}),
|
|
298
|
+
onChange: function onChange(e) {
|
|
299
|
+
var _groupMap$activeGroup4;
|
|
300
|
+
return changeHandle(e.target.checked ? Array.from(new Set([].concat(_toConsumableArray(selected), _toConsumableArray(((_groupMap$activeGroup4 = groupMap[activeGroup]) === null || _groupMap$activeGroup4 === void 0 ? void 0 : _groupMap$activeGroup4.map(function (_ref10) {
|
|
301
|
+
var value = _ref10.value;
|
|
302
|
+
return value;
|
|
303
|
+
})) || [])))) : selected.filter(function (i) {
|
|
304
|
+
var _groupMap$activeGroup5;
|
|
305
|
+
return !((_groupMap$activeGroup5 = groupMap[activeGroup]) !== null && _groupMap$activeGroup5 !== void 0 && _groupMap$activeGroup5.some(function (_ref11) {
|
|
306
|
+
var value = _ref11.value;
|
|
307
|
+
return value === i;
|
|
308
|
+
}));
|
|
309
|
+
}));
|
|
310
|
+
},
|
|
311
|
+
disabled: disabled,
|
|
312
|
+
children: "\u5168\u9009"
|
|
313
|
+
})
|
|
314
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
315
|
+
className: "mc-group-panel__options-list",
|
|
316
|
+
children: groupMap[activeGroup].map(function (item) {
|
|
317
|
+
return /*#__PURE__*/_jsx(Checkbox, {
|
|
318
|
+
className: "mc-group-panel__checkbox",
|
|
319
|
+
checked: selected.includes(item.value),
|
|
320
|
+
onChange: function onChange(e) {
|
|
321
|
+
return changeHandle(e.target.checked ? [].concat(_toConsumableArray(selected), [item.value]) : selected.filter(function (i) {
|
|
322
|
+
return i !== item.value;
|
|
323
|
+
}));
|
|
324
|
+
},
|
|
325
|
+
disabled: disabled,
|
|
326
|
+
children: /*#__PURE__*/_jsx(Typography.Paragraph, {
|
|
327
|
+
style: {
|
|
328
|
+
margin: 0
|
|
329
|
+
},
|
|
330
|
+
ellipsis: {
|
|
331
|
+
tooltip: item.label
|
|
332
|
+
},
|
|
333
|
+
children: item.label
|
|
334
|
+
})
|
|
335
|
+
}, item.value);
|
|
336
|
+
})
|
|
337
|
+
})]
|
|
338
|
+
}) : /*#__PURE__*/_jsx("div", {
|
|
339
|
+
style: {
|
|
340
|
+
height: '100%',
|
|
341
|
+
display: 'grid',
|
|
342
|
+
placeItems: 'center'
|
|
343
|
+
},
|
|
344
|
+
children: /*#__PURE__*/_jsx(Empty, {
|
|
345
|
+
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
346
|
+
})
|
|
336
347
|
})
|
|
348
|
+
})]
|
|
349
|
+
}) : /*#__PURE__*/_jsx("div", {
|
|
350
|
+
style: {
|
|
351
|
+
height: 'calc(100% - 40px)',
|
|
352
|
+
display: 'grid',
|
|
353
|
+
placeItems: 'center'
|
|
354
|
+
},
|
|
355
|
+
children: /*#__PURE__*/_jsx(Empty, {
|
|
356
|
+
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
337
357
|
})
|
|
338
358
|
})]
|
|
339
|
-
}) : /*#__PURE__*/_jsx("div", {
|
|
340
|
-
style: {
|
|
341
|
-
height: 'calc(100% - 40px)',
|
|
342
|
-
display: 'grid',
|
|
343
|
-
placeItems: 'center'
|
|
344
|
-
},
|
|
345
|
-
children: /*#__PURE__*/_jsx(Empty, {
|
|
346
|
-
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
347
|
-
})
|
|
348
359
|
})]
|
|
349
360
|
}), /*#__PURE__*/_jsxs("div", {
|
|
350
361
|
className: "mc-group-panel__selected",
|
|
@@ -354,6 +365,10 @@ var McGroupPanel = function McGroupPanel(props) {
|
|
|
354
365
|
className: "mc-group-panel__card-title",
|
|
355
366
|
children: ["\u5DF2\u9009", selected.length, "\u9879"]
|
|
356
367
|
}), /*#__PURE__*/_jsx(Button, {
|
|
368
|
+
className: "mc-group-panel__card-button",
|
|
369
|
+
style: {
|
|
370
|
+
padding: 0
|
|
371
|
+
},
|
|
357
372
|
type: "link",
|
|
358
373
|
onClick: function onClick() {
|
|
359
374
|
return changeHandle(reserved ? selected.filter(function (i) {
|
package/dist/McInput/Input.js
CHANGED
|
@@ -33,7 +33,7 @@ var McInput = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
33
33
|
onChange: function onChange(e) {
|
|
34
34
|
var v = isTrim ? e.target.value.trim() : e.target.value;
|
|
35
35
|
if (v !== inputValue) {
|
|
36
|
-
_onChange === null || _onChange === void 0 || _onChange(v, e);
|
|
36
|
+
_onChange === null || _onChange === void 0 || _onChange(v || undefined, e);
|
|
37
37
|
}
|
|
38
38
|
setInputValue(v);
|
|
39
39
|
},
|
package/dist/McInput/Search.js
CHANGED
|
@@ -42,7 +42,7 @@ var McSearch = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
42
42
|
onChange: function onChange(e) {
|
|
43
43
|
var v = isTrim ? e.target.value.trim() : e.target.value;
|
|
44
44
|
if (v !== inputValue) {
|
|
45
|
-
_onChange === null || _onChange === void 0 || _onChange(v, e);
|
|
45
|
+
_onChange === null || _onChange === void 0 || _onChange(v || undefined, e);
|
|
46
46
|
}
|
|
47
47
|
setInputValue(v);
|
|
48
48
|
},
|
package/dist/McInput/TextArea.js
CHANGED
|
@@ -25,7 +25,7 @@ var McTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
25
25
|
onChange: function onChange(e) {
|
|
26
26
|
var v = isTrim ? e.target.value.trim() : e.target.value;
|
|
27
27
|
if (v !== inputValue) {
|
|
28
|
-
_onChange === null || _onChange === void 0 || _onChange(v, e);
|
|
28
|
+
_onChange === null || _onChange === void 0 || _onChange(v || undefined, e);
|
|
29
29
|
}
|
|
30
30
|
setInputValue(v);
|
|
31
31
|
},
|
|
@@ -2,8 +2,11 @@ import { InputNumberProps } from 'antd';
|
|
|
2
2
|
import { FC, ReactNode } from 'react';
|
|
3
3
|
import './index.less';
|
|
4
4
|
type McInputNumberProps = Omit<InputNumberProps, 'precision' | 'value' | 'onChange'> & {
|
|
5
|
+
/** 查询项的字段名（配合McContainer组件的查询功能使用） */
|
|
5
6
|
name?: string;
|
|
7
|
+
/** 查询项的标签文字（若未设置，样式为表单项形态） */
|
|
6
8
|
label?: ReactNode;
|
|
9
|
+
/** 最多保留多少位小数，默认0 */
|
|
7
10
|
precision?: number;
|
|
8
11
|
value?: number | null;
|
|
9
12
|
onChange?: (value?: number | null) => void;
|
|
@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["label", "precision", "value", "onChange", "className"];
|
|
5
5
|
import { InputNumber } from 'antd';
|
|
6
|
+
import NP from 'number-precision';
|
|
6
7
|
import { forwardRef, useEffect, useState } from 'react';
|
|
7
8
|
import "./index.css";
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -11,7 +12,7 @@ var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
11
12
|
_props$precision = props.precision,
|
|
12
13
|
precision = _props$precision === void 0 ? 0 : _props$precision,
|
|
13
14
|
value = props.value,
|
|
14
|
-
|
|
15
|
+
onChange = props.onChange,
|
|
15
16
|
className = props.className,
|
|
16
17
|
rest = _objectWithoutProperties(props, _excluded);
|
|
17
18
|
var _useState = useState(null),
|
|
@@ -21,6 +22,19 @@ var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
21
22
|
useEffect(function () {
|
|
22
23
|
setInputNumberValue(typeof value === 'number' ? value : null);
|
|
23
24
|
}, [value]);
|
|
25
|
+
var handleChange = function handleChange(v) {
|
|
26
|
+
var formattedValue = null;
|
|
27
|
+
if (v !== null && v !== '') {
|
|
28
|
+
var num = typeof v === 'string' ? parseFloat(v) : v;
|
|
29
|
+
if (!isNaN(num)) {
|
|
30
|
+
formattedValue = NP.round(num, precision);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
if (!props.hasOwnProperty('value')) {
|
|
34
|
+
setInputNumberValue(formattedValue);
|
|
35
|
+
}
|
|
36
|
+
onChange === null || onChange === void 0 || onChange(formattedValue);
|
|
37
|
+
};
|
|
24
38
|
return /*#__PURE__*/_jsx(InputNumber, _objectSpread({
|
|
25
39
|
ref: ref,
|
|
26
40
|
className: "mc-input-number ".concat(className || ''),
|
|
@@ -29,14 +43,7 @@ var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
29
43
|
children: label
|
|
30
44
|
}),
|
|
31
45
|
value: inputNumberValue,
|
|
32
|
-
onChange:
|
|
33
|
-
// 检查是否为数字，并格式化为最多保留precision位小数，否则清空
|
|
34
|
-
var _v = typeof v === 'number' ? parseFloat(v.toFixed(precision)) : null;
|
|
35
|
-
if (!props.hasOwnProperty('value')) {
|
|
36
|
-
setInputNumberValue(_v);
|
|
37
|
-
}
|
|
38
|
-
_onChange === null || _onChange === void 0 || _onChange(_v);
|
|
39
|
-
},
|
|
46
|
+
onChange: handleChange,
|
|
40
47
|
placeholder: "\u8BF7\u8F93\u5165"
|
|
41
48
|
}, rest));
|
|
42
49
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "\n/* =========== 布局样式 =========== */\n.ant-pro-layout {\n
|
|
1
|
+
declare const _default: "\n/* =========== 布局样式 =========== */\n.ant-pro-layout {\n /* 侧边菜单 */\n .ant-pro-sider {\n padding: 8px 0 16px 16px;\n background: transparent !important;\n\n .ant-layout-sider-children {\n background: #f0f4f9;\n border-radius: 12px 0 0 12px;\n padding: 0;\n border-right: 0;\n margin-right: 0;\n overflow: hidden;\n\n .ant-pro-sider-menu {\n .ant-pro-base-menu-inline-item-icon .anticon {\n font-size: 18px;\n color: #8c8c8c;\n }\n\n [class*='-selected'] .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n\n a {\n transition: color 0s;\n }\n\n & > .ant-menu-item {\n color: #262626;\n font-weight: 500;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:not(.ant-menu-item-selected):hover {\n color: #325cf7;\n background: transparent !important;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n\n &.ant-menu-item-selected {\n color: #325cf7;\n background: #ffffff;\n }\n }\n\n .ant-menu-submenu {\n .ant-menu-submenu-title {\n color: #262626;\n font-weight: 500;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n\n &:hover {\n color: #325cf7;\n background: transparent;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n\n &:first-of-type .ant-menu-submenu-title {\n margin-top: 0;\n }\n\n &.ant-menu-submenu-selected {\n .ant-menu-submenu-title {\n color: #325cf7;\n }\n }\n\n .ant-menu-sub {\n padding: 0;\n\n .ant-menu-item {\n color: #595959;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n padding-left: 44px !important;\n\n &:hover {\n color: #325cf7;\n background: transparent;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n\n &.ant-menu-item-selected {\n color: #325cf7;\n font-weight: 500;\n background: #ffffff;\n }\n }\n }\n }\n }\n\n .ant-pro-sider-footer {\n text-align: right;\n padding: 0 12px 16px;\n\n .menu-footer-collapse-btn {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n padding: 0;\n border: 0;\n\n .ant-btn-icon .anticon {\n font-size: 21px;\n color: #b3b3b3;\n }\n\n &:not(:hover) {\n background: #ffffff;\n }\n }\n }\n }\n\n &.ant-layout-sider-collapsed .ant-layout-sider-children .ant-pro-sider-menu {\n margin-top: -4px;\n\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #8c8c8c;\n }\n\n .ant-menu-item {\n &:hover {\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n\n .ant-menu-item.ant-menu-item-selected,\n .ant-menu-submenu.ant-menu-submenu-selected .ant-menu-submenu-title {\n background: #ffffff;\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n }\n\n /* 头部区header */\n .ant-pro-layout-container .ant-pro-layout-header {\n border-bottom: 0 !important;\n\n .ant-pro-top-nav-header-main {\n padding-left: 0;\n\n .ant-pro-top-nav-header-menu {\n padding: 0;\n line-height: 48px;\n\n .ant-menu-overflow-item-rest {\n margin: 8px;\n\n &:hover {\n background: rgba(50, 92, 247, 0.1);\n }\n }\n\n .ant-menu-item {\n padding: 0 28px;\n margin: 8px 0;\n\n &:hover {\n font-weight: 500;\n background: rgba(50, 92, 247, 0.1);\n }\n\n &.ant-menu-item-selected {\n font-weight: bold;\n\n &:hover {\n background: rgba(50, 92, 247, 0.1);\n }\n\n &::after {\n content: '';\n display: block;\n width: 21px;\n height: 4px;\n border-radius: 4px;\n background: #325cf7;\n position: absolute;\n bottom: 0;\n left: calc((100% - 21px) / 2);\n }\n }\n }\n }\n }\n }\n\n /* 内容区main */\n .ant-pro-layout-container .ant-pro-layout-content {\n width: calc(100% - 32px);\n margin: 8px 16px 16px;\n padding: 0;\n height: calc(100vh - 88px);\n overflow: auto;\n border-radius: 12px;\n }\n\n .ant-layout-has-sider .ant-pro-layout-container .ant-pro-layout-content {\n width: calc(100% - 16px);\n margin-left: 0;\n border-radius: 0 12px 12px 0;\n }\n}";
|
|
2
2
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default "\n/* =========== \u5E03\u5C40\u6837\u5F0F =========== */\n.ant-pro-layout {\n
|
|
1
|
+
export default "\n/* =========== \u5E03\u5C40\u6837\u5F0F =========== */\n.ant-pro-layout {\n /* \u4FA7\u8FB9\u83DC\u5355 */\n .ant-pro-sider {\n padding: 8px 0 16px 16px;\n background: transparent !important;\n\n .ant-layout-sider-children {\n background: #f0f4f9;\n border-radius: 12px 0 0 12px;\n padding: 0;\n border-right: 0;\n margin-right: 0;\n overflow: hidden;\n\n .ant-pro-sider-menu {\n .ant-pro-base-menu-inline-item-icon .anticon {\n font-size: 18px;\n color: #8c8c8c;\n }\n\n [class*='-selected'] .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n\n a {\n transition: color 0s;\n }\n\n & > .ant-menu-item {\n color: #262626;\n font-weight: 500;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:not(.ant-menu-item-selected):hover {\n color: #325cf7;\n background: transparent !important;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n\n &.ant-menu-item-selected {\n color: #325cf7;\n background: #ffffff;\n }\n }\n\n .ant-menu-submenu {\n .ant-menu-submenu-title {\n color: #262626;\n font-weight: 500;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n\n &:hover {\n color: #325cf7;\n background: transparent;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n\n &:first-of-type .ant-menu-submenu-title {\n margin-top: 0;\n }\n\n &.ant-menu-submenu-selected {\n .ant-menu-submenu-title {\n color: #325cf7;\n }\n }\n\n .ant-menu-sub {\n padding: 0;\n\n .ant-menu-item {\n color: #595959;\n margin: 0;\n margin-bottom: 8px;\n width: 100%;\n border-radius: 4px 0 0 4px;\n padding-left: 44px !important;\n\n &:hover {\n color: #325cf7;\n background: transparent;\n\n .ant-pro-base-menu-inline-item-icon .anticon {\n color: #325cf7;\n }\n }\n\n &.ant-menu-item-selected {\n color: #325cf7;\n font-weight: 500;\n background: #ffffff;\n }\n }\n }\n }\n }\n\n .ant-pro-sider-footer {\n text-align: right;\n padding: 0 12px 16px;\n\n .menu-footer-collapse-btn {\n width: 24px;\n height: 24px;\n border-radius: 6px;\n padding: 0;\n border: 0;\n\n .ant-btn-icon .anticon {\n font-size: 21px;\n color: #b3b3b3;\n }\n\n &:not(:hover) {\n background: #ffffff;\n }\n }\n }\n }\n\n &.ant-layout-sider-collapsed .ant-layout-sider-children .ant-pro-sider-menu {\n margin-top: -4px;\n\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #8c8c8c;\n }\n\n .ant-menu-item {\n &:hover {\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n\n .ant-menu-item.ant-menu-item-selected,\n .ant-menu-submenu.ant-menu-submenu-selected .ant-menu-submenu-title {\n background: #ffffff;\n .ant-pro-base-menu-vertical-item-icon .anticon {\n color: #325cf7;\n }\n }\n }\n }\n\n /* \u5934\u90E8\u533Aheader */\n .ant-pro-layout-container .ant-pro-layout-header {\n border-bottom: 0 !important;\n\n .ant-pro-top-nav-header-main {\n padding-left: 0;\n\n .ant-pro-top-nav-header-menu {\n padding: 0;\n line-height: 48px;\n\n .ant-menu-overflow-item-rest {\n margin: 8px;\n\n &:hover {\n background: rgba(50, 92, 247, 0.1);\n }\n }\n\n .ant-menu-item {\n padding: 0 28px;\n margin: 8px 0;\n\n &:hover {\n font-weight: 500;\n background: rgba(50, 92, 247, 0.1);\n }\n\n &.ant-menu-item-selected {\n font-weight: bold;\n\n &:hover {\n background: rgba(50, 92, 247, 0.1);\n }\n\n &::after {\n content: '';\n display: block;\n width: 21px;\n height: 4px;\n border-radius: 4px;\n background: #325cf7;\n position: absolute;\n bottom: 0;\n left: calc((100% - 21px) / 2);\n }\n }\n }\n }\n }\n }\n\n /* \u5185\u5BB9\u533Amain */\n .ant-pro-layout-container .ant-pro-layout-content {\n width: calc(100% - 32px);\n margin: 8px 16px 16px;\n padding: 0;\n height: calc(100vh - 88px);\n overflow: auto;\n border-radius: 12px;\n }\n\n .ant-layout-has-sider .ant-pro-layout-container .ant-pro-layout-content {\n width: calc(100% - 16px);\n margin-left: 0;\n border-radius: 0 12px 12px 0;\n }\n}";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zykj2024/much-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9-beta.1",
|
|
4
4
|
"description": "react library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
"dayjs": "^1.11.12",
|
|
61
61
|
"lodash": "^4.17.21",
|
|
62
62
|
"much-icons": "1.0.5",
|
|
63
|
+
"number-precision": "^1.6.0",
|
|
63
64
|
"postcss-import": "^16.1.0",
|
|
64
65
|
"postcss-less": "^6.0.0",
|
|
65
66
|
"typescript-react-svg-icon-generator": "^1.1.9"
|