ztxkui 3.0.4 → 3.0.7
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/DemoCom/BasicDemo.js +9 -2
- package/dist/DemoCom/TableDemo.js +19 -6
- package/dist/components/InputNumber/input-number.js +2 -2
- package/dist/components/Table/table-enhance-cell.js +12 -1
- package/dist/hooks/useFormatter.d.ts +5 -0
- package/dist/hooks/useFormatter.js +42 -1
- package/package.json +1 -1
|
@@ -2,6 +2,7 @@ import InputNumber from 'components/InputNumber';
|
|
|
2
2
|
import Tag from 'components/Tag';
|
|
3
3
|
import Input from 'components/Input';
|
|
4
4
|
import { FormList, RangePicker, Button } from '../index';
|
|
5
|
+
import { InputNumber as AntInputNumber } from 'antd';
|
|
5
6
|
import GridList from 'components/business/NewList';
|
|
6
7
|
import { useState } from 'react';
|
|
7
8
|
import './style.scss';
|
|
@@ -53,9 +54,15 @@ function BasicDemo() {
|
|
|
53
54
|
]), rangeValue = _b[0], setRangeValue = _b[1];
|
|
54
55
|
return (React.createElement(React.Fragment, null,
|
|
55
56
|
React.createElement(InputNumber, { value: value, onChange: function (value) {
|
|
56
|
-
console.log(value);
|
|
57
|
+
console.log(value, 1);
|
|
57
58
|
setValue(value);
|
|
58
|
-
},
|
|
59
|
+
}, precision: 4, formatterType: "currency", style: { width: '300px' } }),
|
|
60
|
+
React.createElement(AntInputNumber, { value: value, onChange: function (value) {
|
|
61
|
+
console.log(value, 1);
|
|
62
|
+
setValue(value);
|
|
63
|
+
}, formatter: function (value) {
|
|
64
|
+
return ("$ " + value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
65
|
+
}, parser: function (value) { return value.replace(/\$\s?|(,*)/g, ''); }, style: { width: '300px' } }),
|
|
59
66
|
React.createElement("div", null,
|
|
60
67
|
React.createElement(Tag, null, "\u4F60\u597D"),
|
|
61
68
|
React.createElement(Tag, { type: "normal" }, "\u4F60\u597D"),
|
|
@@ -435,14 +435,15 @@ var list1 = [
|
|
|
435
435
|
var TableDemo = function () {
|
|
436
436
|
var _a = useGetTableRecords(), records = _a.records, setRecords = _a.setRecords;
|
|
437
437
|
var _b = useGetSelectList(), list = _b.list, loading = _b.loading, setLoading = _b.setLoading;
|
|
438
|
+
var _c = useState(false), btnLoading = _c[0], setBtnLoading = _c[1];
|
|
438
439
|
// 表格数据引用
|
|
439
440
|
var recordsRef = useRef([]);
|
|
440
441
|
// 初始化渲染,针对配置了editable、editableConfig的列配置
|
|
441
|
-
var
|
|
442
|
+
var _d = useState(false), firstRender = _d[0], setFirstRender = _d[1];
|
|
442
443
|
// 新增删除行改变
|
|
443
|
-
var
|
|
444
|
+
var _e = useState(false), lengthChange = _e[0], setLengthChange = _e[1];
|
|
444
445
|
// 表格行拖拽改变
|
|
445
|
-
var
|
|
446
|
+
var _f = useState(false), moveChange = _f[0], setMoveChange = _f[1];
|
|
446
447
|
useEffect(function () {
|
|
447
448
|
setFirstRender(true);
|
|
448
449
|
}, []);
|
|
@@ -580,12 +581,21 @@ var TableDemo = function () {
|
|
|
580
581
|
return "\u7B2C" + (index + 1) + "\u884C\uFF0C\u8D85\u51FA\u6700\u5927\u503C\uFF0C\u5DF2\u4FEE\u6539\u6210\u6700\u5927\u503C";
|
|
581
582
|
},
|
|
582
583
|
maxHandle: function (record) {
|
|
583
|
-
return
|
|
584
|
+
return 10000;
|
|
584
585
|
},
|
|
585
586
|
lowMinTip: function (record, index) {
|
|
586
587
|
return "\u7B2C" + (index + 1) + "\u884C\uFF0C\u4F4E\u4E8E\u6700\u5C0F\u503C\uFF0C\u5DF2\u4FEE\u6539\u6210\u6700\u5C0F\u503C";
|
|
587
588
|
},
|
|
588
589
|
precision: 3,
|
|
590
|
+
formatterType: 'currency',
|
|
591
|
+
onBlur: function () {
|
|
592
|
+
setBtnLoading(false);
|
|
593
|
+
console.log('失去焦点了');
|
|
594
|
+
},
|
|
595
|
+
onFocus: function () {
|
|
596
|
+
setBtnLoading(true);
|
|
597
|
+
console.log('获得焦点了');
|
|
598
|
+
},
|
|
589
599
|
},
|
|
590
600
|
},
|
|
591
601
|
{
|
|
@@ -714,7 +724,7 @@ var TableDemo = function () {
|
|
|
714
724
|
},
|
|
715
725
|
];
|
|
716
726
|
// 本地偏好设置相关
|
|
717
|
-
var
|
|
727
|
+
var _g = useState(getStorage('test-table') || []), tableLayout = _g[0], setTableLayout = _g[1];
|
|
718
728
|
var onDynamicChange = useCallback(function (tableLayout) {
|
|
719
729
|
// 剔除调一些可能不可序列化的字段,只保留关键数据
|
|
720
730
|
var newTableLayout = tableLayout.map(function (item) { return ({
|
|
@@ -789,7 +799,10 @@ var TableDemo = function () {
|
|
|
789
799
|
// 表格行拖拽
|
|
790
800
|
onMoveRow: onMoveRowHandle }),
|
|
791
801
|
React.createElement("div", null,
|
|
792
|
-
React.createElement("button", { onClick: function () { return console.log(records); } }, "\u83B7\u53D6\u6570\u636E")
|
|
802
|
+
React.createElement("button", { onClick: function () { return console.log(records); } }, "\u83B7\u53D6\u6570\u636E"),
|
|
803
|
+
React.createElement(Button, { loading: btnLoading, onClick: function () {
|
|
804
|
+
console.log(111);
|
|
805
|
+
} }, "\u70B9\u51FB")),
|
|
793
806
|
React.createElement(Empty, null)));
|
|
794
807
|
};
|
|
795
808
|
function getStorage(key) {
|
|
@@ -23,11 +23,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import React, { useRef } from 'react';
|
|
24
24
|
import { InputNumber as AntInputNumber } from 'antd';
|
|
25
25
|
import { message } from '../../index';
|
|
26
|
-
import
|
|
26
|
+
import { getFormatter, } from '../../hooks/useFormatter';
|
|
27
27
|
function InputNumber(props) {
|
|
28
28
|
var formatterType = props.formatterType, currencySymbol = props.currencySymbol, formatter = props.formatter, parser = props.parser, precision = props.precision, max = props.max, min = props.min, onChange = props.onChange, onBlur = props.onBlur, onPressEnter = props.onPressEnter, onOverRange = props.onOverRange, overMaxTip = props.overMaxTip, lowMinTip = props.lowMinTip, restProps = __rest(props, ["formatterType", "currencySymbol", "formatter", "parser", "precision", "max", "min", "onChange", "onBlur", "onPressEnter", "onOverRange", "overMaxTip", "lowMinTip"]);
|
|
29
29
|
var selfValue = useRef();
|
|
30
|
-
var _a =
|
|
30
|
+
var _a = getFormatter(formatterType, currencySymbol), _formatter = _a.formatter, _parser = _a.parser, _precision = _a.precision;
|
|
31
31
|
var onChangeHandle = function (value) {
|
|
32
32
|
selfValue.current = value;
|
|
33
33
|
onChange && onChange(value);
|
|
@@ -180,7 +180,18 @@ var TableEnhanceCell = memo(function (_a) {
|
|
|
180
180
|
}
|
|
181
181
|
else if (type === 'inputNumber') {
|
|
182
182
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
183
|
-
React.createElement(InputNumber, __assign({ autoComplete: "new-password", maxLength: 50 }, inputNumMaxMin, editableProps, inputNumberRangeTip, { disabled: disabledResult, onPressEnter: function () {
|
|
183
|
+
React.createElement(InputNumber, __assign({ autoComplete: "new-password", maxLength: 50 }, inputNumMaxMin, editableProps, inputNumberRangeTip, { disabled: disabledResult, onPressEnter: function (e) {
|
|
184
|
+
var _a;
|
|
185
|
+
editableProps.onPressEnter && ((_a = editableProps.onPressEnter) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
|
|
186
|
+
save({ maxResult: maxResult, minResult: minResult });
|
|
187
|
+
}, onBlur: function (e) {
|
|
188
|
+
var _a;
|
|
189
|
+
editableProps.onBlur && ((_a = editableProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
|
|
190
|
+
save({ maxResult: maxResult, minResult: minResult });
|
|
191
|
+
}, onFocus: function (e) {
|
|
192
|
+
var _a;
|
|
193
|
+
editableProps.onFocus && ((_a = editableProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(editableProps, e));
|
|
194
|
+
} }))));
|
|
184
195
|
}
|
|
185
196
|
else if (type === 'textArea') {
|
|
186
197
|
return (React.createElement(Form.Item, { className: "zt-table__enhance-cell", name: dataIndex },
|
|
@@ -16,4 +16,9 @@ declare function useFormatter(formatterType: IFormatterType | undefined, currenc
|
|
|
16
16
|
parser: IParserFuc;
|
|
17
17
|
precision: number;
|
|
18
18
|
};
|
|
19
|
+
export declare function getFormatter(formatterType: IFormatterType | undefined, currencySymbol?: ICurrencySymbol): {
|
|
20
|
+
formatter: IFormatterFuc;
|
|
21
|
+
parser: IParserFuc;
|
|
22
|
+
precision: number;
|
|
23
|
+
};
|
|
19
24
|
export default useFormatter;
|
|
@@ -20,7 +20,7 @@ function useFormatter(formatterType, currencySymbol) {
|
|
|
20
20
|
// /\$\s?|(,*)/g
|
|
21
21
|
return value
|
|
22
22
|
? // eslint-disable-next-line no-eval
|
|
23
|
-
value.replace(eval("
|
|
23
|
+
value.replace(eval("/${currencySymbol}\\s?|(,*)/g"), '')
|
|
24
24
|
: Number(value);
|
|
25
25
|
};
|
|
26
26
|
setFormatter(function () {
|
|
@@ -64,4 +64,45 @@ function useFormatter(formatterType, currencySymbol) {
|
|
|
64
64
|
precision: precision,
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
+
export function getFormatter(formatterType, currencySymbol) {
|
|
68
|
+
if (currencySymbol === void 0) { currencySymbol = '$'; }
|
|
69
|
+
if (formatterType === 'currency') {
|
|
70
|
+
var formatterFn = function (value) {
|
|
71
|
+
return ("" + value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
72
|
+
};
|
|
73
|
+
var parserFn = function (value) { return value.replace(/(,*)/g, ''); };
|
|
74
|
+
return {
|
|
75
|
+
formatter: formatterFn,
|
|
76
|
+
parser: parserFn,
|
|
77
|
+
precision: MONEY_PRECISION,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
if (formatterType === 'percent') {
|
|
81
|
+
var formatterFn = function (value) { return value + "%"; };
|
|
82
|
+
var parserFn = function (value) {
|
|
83
|
+
return value ? value.replace('%', '') : Number(value);
|
|
84
|
+
};
|
|
85
|
+
return {
|
|
86
|
+
formatter: formatterFn,
|
|
87
|
+
parser: parserFn,
|
|
88
|
+
precision: QUANTITY_PRECISION,
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
if (formatterType === 'thousands') {
|
|
92
|
+
var formatterFn = function (value) { return value + "\u2030"; };
|
|
93
|
+
var parserFn = function (value) {
|
|
94
|
+
return value ? value.replace('‰', '') : Number(value);
|
|
95
|
+
};
|
|
96
|
+
return {
|
|
97
|
+
formatter: formatterFn,
|
|
98
|
+
parser: parserFn,
|
|
99
|
+
precision: QUANTITY_PRECISION,
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
return {
|
|
103
|
+
formatter: undefined,
|
|
104
|
+
parser: undefined,
|
|
105
|
+
precision: undefined,
|
|
106
|
+
};
|
|
107
|
+
}
|
|
67
108
|
export default useFormatter;
|