gxxc-ui 1.0.66 → 1.0.68
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/AmountCellUI/index.js +83 -49
- package/dist/AnchorUI/demo/anchor-button.js +65 -33
- package/dist/AnchorUI/demo/use-anchor.js +57 -33
- package/dist/AnchorUI/index.js +29 -27
- package/dist/BackUI/index.js +34 -16
- package/dist/BroadcastUI/index.js +53 -20
- package/dist/ButtonUI/index.js +13 -10
- package/dist/CellUI/index.js +45 -26
- package/dist/Components/index.js +4 -8
- package/dist/DateUI/index.js +76 -50
- package/dist/DescriptionsUI/index.js +57 -15
- package/dist/EmptyUI/emptyImage.js +9 -9
- package/dist/EmptyUI/index.js +11 -9
- package/dist/FilterUI/index.js +147 -65
- package/dist/FormUI/index.js +41 -14
- package/dist/HtmlTemplateRenderer/index.js +17 -20
- package/dist/IconUI/index.js +16 -10
- package/dist/IconUI/material/dictionary.js +43 -13
- package/dist/IconUI/material/material.js +468 -121
- package/dist/IconUI/material/rally.js +33 -252
- package/dist/ImageUI/index.js +170 -49
- package/dist/InputUI/index.js +64 -46
- package/dist/LoadingUI/index.js +12 -9
- package/dist/MessageUI/index.js +3 -7
- package/dist/ModalUI/index.js +62 -42
- package/dist/NotificationUI/index.js +12 -13
- package/dist/PasswordStrongUI/index.js +51 -20
- package/dist/RichEditorUI/index.js +38 -27
- package/dist/SearchNumberUI/index.js +32 -29
- package/dist/SearchUI/index.js +31 -27
- package/dist/SelectUI/index.js +56 -41
- package/dist/StatisticUI/index.js +45 -28
- package/dist/SwitchUI/index.js +17 -11
- package/dist/TableUI/demo/setting.js +70 -34
- package/dist/TableUI/index.js +64 -47
- package/dist/TableUI/material/Button/index.js +17 -9
- package/dist/TableUI/material/HideMultipleLines/index.js +46 -21
- package/dist/TableUI/material/MultiLine/index.js +18 -9
- package/dist/TableUI/material/Operate/index.js +33 -24
- package/dist/TableUI/material/Setting/index.js +151 -100
- package/dist/TagUI/index.js +100 -37
- package/dist/TestUI/index.js +4 -8
- package/dist/TextUI/index.js +13 -9
- package/dist/Tiga/demo/demoQuick.js +85 -32
- package/dist/Tiga/demo/demoQuickType.js +89 -29
- package/dist/Tiga/index.js +34 -31
- package/dist/Tiga/material/quickType.js +43 -33
- package/dist/UploadUI/index.js +218 -115
- package/dist/UploadUI/type.js +27 -15
- package/dist/VesselUI/index.js +100 -73
- package/dist/VesselUI/type.js +1 -0
- package/dist/VideoPreviewUI/index.js +26 -14
- package/dist/assets/index.js +1 -0
- package/dist/index.js +36 -181
- package/package.json +1 -2
|
@@ -1,19 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
import { Tooltip } from
|
|
3
|
-
import lodash from
|
|
4
|
-
import React from
|
|
5
|
-
import CountUp from
|
|
6
|
-
import { num_expand } from
|
|
7
|
-
function AmountCellUI(props) {
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import { Tooltip } from 'antd';
|
|
3
|
+
import lodash from 'lodash';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import CountUp from 'react-countup';
|
|
6
|
+
import { num_expand } from 'gxxc-util';
|
|
7
|
+
export default function AmountCellUI(props) {
|
|
8
|
+
const {
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
11
|
+
animation = false,
|
|
12
|
+
rawValue = false,
|
|
13
|
+
forceRender = false,
|
|
14
|
+
separator = '',
|
|
15
|
+
...otherProps
|
|
16
|
+
} = props;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* 判断传入值是否为合法数字(包括字符串形式的数字)
|
|
20
|
+
*/
|
|
21
|
+
const isNumeric = value => {
|
|
22
|
+
if (value === null || value === undefined) return false;
|
|
12
23
|
let num;
|
|
13
24
|
if (lodash.isString(value)) {
|
|
14
25
|
const trimmed = value.trim();
|
|
15
|
-
if (!/^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(trimmed))
|
|
16
|
-
return false;
|
|
26
|
+
if (!/^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?$/.test(trimmed)) return false;
|
|
17
27
|
num = Number(trimmed);
|
|
18
28
|
} else if (lodash.isNumber(value)) {
|
|
19
29
|
num = value;
|
|
@@ -22,63 +32,87 @@ function AmountCellUI(props) {
|
|
|
22
32
|
}
|
|
23
33
|
return lodash.isFinite(num);
|
|
24
34
|
};
|
|
25
|
-
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* 将传入值转换为有限数字,失败返回 null
|
|
38
|
+
*/
|
|
39
|
+
const toFiniteNumber = value => {
|
|
26
40
|
if (isNumeric(value)) {
|
|
27
41
|
return Number(value);
|
|
28
42
|
}
|
|
29
43
|
return null;
|
|
30
44
|
};
|
|
31
|
-
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* 获取传入值的小数位数(忽略末尾为 0 的情况,如 1.00 返回 0)
|
|
48
|
+
*/
|
|
49
|
+
const getDecimalsIfNumber = value => {
|
|
32
50
|
const num = toFiniteNumber(value);
|
|
33
|
-
if (num === null || !isNumeric(value))
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
if (decimalIndex === -1)
|
|
40
|
-
return 0;
|
|
41
|
-
const fractionalPart = str.slice(decimalIndex + 1).replace(/[^0-9]/g, "");
|
|
51
|
+
if (num === null || !isNumeric(value)) return 0;
|
|
52
|
+
if (Number.isInteger(num)) return 0;
|
|
53
|
+
const str = num.toPrecision(); // 更稳定地获取数值字符串
|
|
54
|
+
const decimalIndex = str.indexOf('.');
|
|
55
|
+
if (decimalIndex === -1) return 0;
|
|
56
|
+
const fractionalPart = str.slice(decimalIndex + 1).replace(/[^0-9]/g, '');
|
|
42
57
|
return fractionalPart.length;
|
|
43
58
|
};
|
|
44
|
-
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* 对金额进行格式化:
|
|
62
|
+
* - 大于等于 1 亿:显示为 "X 亿"
|
|
63
|
+
* - 大于等于 1 万:显示为 "X 万"
|
|
64
|
+
* - 否则原样展示
|
|
65
|
+
*/
|
|
66
|
+
const getFormatAmount = amount => {
|
|
45
67
|
const num = toFiniteNumber(amount);
|
|
46
|
-
if (num === null)
|
|
47
|
-
|
|
48
|
-
|
|
68
|
+
if (num === null) return {
|
|
69
|
+
value: amount,
|
|
70
|
+
suffix: ''
|
|
71
|
+
};
|
|
72
|
+
if (Math.abs(num) >= 100000000) {
|
|
49
73
|
return {
|
|
50
|
-
value: num_expand(amount,
|
|
51
|
-
suffix:
|
|
74
|
+
value: num_expand(amount, 100000000),
|
|
75
|
+
suffix: '亿'
|
|
52
76
|
};
|
|
53
|
-
} else if (Math.abs(num) >=
|
|
77
|
+
} else if (Math.abs(num) >= 10000) {
|
|
54
78
|
return {
|
|
55
|
-
value: num_expand(amount,
|
|
56
|
-
suffix:
|
|
79
|
+
value: num_expand(amount, 10000),
|
|
80
|
+
suffix: '万'
|
|
57
81
|
};
|
|
58
82
|
} else {
|
|
59
83
|
return {
|
|
60
84
|
value: amount,
|
|
61
|
-
suffix:
|
|
85
|
+
suffix: ''
|
|
62
86
|
};
|
|
63
87
|
}
|
|
64
88
|
};
|
|
89
|
+
|
|
90
|
+
// ================= 组件渲染逻辑 ================= //
|
|
91
|
+
// 如果强制渲染,直接返回内容
|
|
65
92
|
if (forceRender) {
|
|
66
|
-
return
|
|
93
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
94
|
+
className: `amountCellUI ${className ?? ''}`
|
|
95
|
+
}, otherProps), children);
|
|
67
96
|
}
|
|
97
|
+
|
|
98
|
+
// 如果不是合法数字,直接返回 '--'
|
|
68
99
|
if (!isNumeric(children)) {
|
|
69
|
-
return
|
|
100
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
101
|
+
className: `amountCellUI ${className ?? ''}`
|
|
102
|
+
}, otherProps), '--');
|
|
70
103
|
}
|
|
104
|
+
|
|
105
|
+
// 提前计算格式化结果,避免重复调用
|
|
71
106
|
const formattedAmount = getFormatAmount(children);
|
|
72
|
-
return
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
};
|
|
107
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
108
|
+
className: `amountCellUI ${className ?? ''}`
|
|
109
|
+
}, otherProps), /*#__PURE__*/React.createElement(Tooltip, {
|
|
110
|
+
placement: "right",
|
|
111
|
+
title: children
|
|
112
|
+
}, animation ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CountUp, {
|
|
113
|
+
end: rawValue ? Number(children) : Number(formattedAmount?.value),
|
|
114
|
+
decimals: rawValue ? getDecimalsIfNumber(children) : getDecimalsIfNumber(formattedAmount?.value),
|
|
115
|
+
suffix: rawValue ? '' : formattedAmount?.suffix,
|
|
116
|
+
separator: separator
|
|
117
|
+
})) : /*#__PURE__*/React.createElement("span", null, rawValue ? Number(children) : Number(formattedAmount?.value) + formattedAmount?.suffix)));
|
|
118
|
+
}
|
|
@@ -1,36 +1,68 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useRef, useState } from "react";
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
3
2
|
import { AnchorUI, ButtonUI } from "../..";
|
|
4
|
-
|
|
3
|
+
export default (() => {
|
|
5
4
|
const ref = useRef(null);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
key: "part-3",
|
|
22
|
-
title: "项目信息"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
key: "part-4",
|
|
26
|
-
title: "风控信息"
|
|
27
|
-
}
|
|
28
|
-
],
|
|
29
|
-
anchorActive,
|
|
30
|
-
setAnchorActive
|
|
5
|
+
//当前导航项
|
|
6
|
+
const [anchorActive, setAnchorActive] = useState('');
|
|
7
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonUI, {
|
|
8
|
+
onClick: () => setAnchorActive('part-1')
|
|
9
|
+
}, "\u70B9\u51FB\u5230\u4E3B\u4F53\u8D44\u8D28"), /*#__PURE__*/React.createElement(ButtonUI, {
|
|
10
|
+
onClick: () => setAnchorActive('part-2')
|
|
11
|
+
}, "\u70B9\u51FB\u5230\u5BA2\u6237\u6765\u6E90"), /*#__PURE__*/React.createElement(ButtonUI, {
|
|
12
|
+
onClick: () => setAnchorActive('part-3')
|
|
13
|
+
}, "\u70B9\u51FB\u5230\u9879\u76EE\u4FE1\u606F"), /*#__PURE__*/React.createElement(ButtonUI, {
|
|
14
|
+
onClick: () => setAnchorActive('part-4')
|
|
15
|
+
}, "\u70B9\u51FB\u5230\u98CE\u63A7\u4FE1\u606F"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
|
|
16
|
+
style: {
|
|
17
|
+
display: 'flex'
|
|
31
18
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
19
|
+
}, /*#__PURE__*/React.createElement(AnchorUI, {
|
|
20
|
+
anchoruiRef: ref,
|
|
21
|
+
items: [{
|
|
22
|
+
key: 'part-1',
|
|
23
|
+
title: '主体资质'
|
|
24
|
+
}, {
|
|
25
|
+
key: 'part-2',
|
|
26
|
+
title: '客户来源'
|
|
27
|
+
}, {
|
|
28
|
+
key: 'part-3',
|
|
29
|
+
title: '项目信息'
|
|
30
|
+
}, {
|
|
31
|
+
key: 'part-4',
|
|
32
|
+
title: '风控信息'
|
|
33
|
+
}],
|
|
34
|
+
anchorActive: anchorActive,
|
|
35
|
+
setAnchorActive: setAnchorActive
|
|
36
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
style: {
|
|
38
|
+
flex: 1,
|
|
39
|
+
overflow: 'scroll',
|
|
40
|
+
height: 400
|
|
41
|
+
},
|
|
42
|
+
ref: ref
|
|
43
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
id: "part-1",
|
|
45
|
+
style: {
|
|
46
|
+
height: '200px',
|
|
47
|
+
backgroundColor: 'rgba(255,0,0,0.2)'
|
|
48
|
+
}
|
|
49
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
id: "part-2",
|
|
51
|
+
style: {
|
|
52
|
+
height: '200px',
|
|
53
|
+
backgroundColor: 'rgba(0,255,0,0.2)'
|
|
54
|
+
}
|
|
55
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
id: "part-3",
|
|
57
|
+
style: {
|
|
58
|
+
height: '200px',
|
|
59
|
+
backgroundColor: 'rgba(0,0,255,0.2)'
|
|
60
|
+
}
|
|
61
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
id: "part-4",
|
|
63
|
+
style: {
|
|
64
|
+
height: '200px',
|
|
65
|
+
backgroundColor: 'rgba(0,0,125,0.2)'
|
|
66
|
+
}
|
|
67
|
+
}))));
|
|
68
|
+
});
|
|
@@ -1,36 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useRef, useState } from "react";
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
3
2
|
import { AnchorUI } from "../..";
|
|
4
|
-
|
|
3
|
+
export default (() => {
|
|
5
4
|
const ref = useRef(null);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
items: [
|
|
12
|
-
{
|
|
13
|
-
key: "part-a",
|
|
14
|
-
title: "主体资质"
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
key: "part-b",
|
|
18
|
-
title: "客户来源"
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
key: "part-c",
|
|
22
|
-
title: "项目信息"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
key: "part-d",
|
|
26
|
-
title: "风控信息"
|
|
27
|
-
}
|
|
28
|
-
],
|
|
29
|
-
anchorActive,
|
|
30
|
-
setAnchorActive
|
|
5
|
+
//当前导航项
|
|
6
|
+
const [anchorActive, setAnchorActive] = useState('');
|
|
7
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
8
|
+
style: {
|
|
9
|
+
display: 'flex'
|
|
31
10
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
11
|
+
}, /*#__PURE__*/React.createElement(AnchorUI, {
|
|
12
|
+
anchoruiRef: ref,
|
|
13
|
+
items: [{
|
|
14
|
+
key: 'part-a',
|
|
15
|
+
title: '主体资质'
|
|
16
|
+
}, {
|
|
17
|
+
key: 'part-b',
|
|
18
|
+
title: '客户来源'
|
|
19
|
+
}, {
|
|
20
|
+
key: 'part-c',
|
|
21
|
+
title: '项目信息'
|
|
22
|
+
}, {
|
|
23
|
+
key: 'part-d',
|
|
24
|
+
title: '风控信息'
|
|
25
|
+
}],
|
|
26
|
+
anchorActive: anchorActive,
|
|
27
|
+
setAnchorActive: setAnchorActive
|
|
28
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
style: {
|
|
30
|
+
flex: 1,
|
|
31
|
+
overflow: 'scroll',
|
|
32
|
+
height: 400
|
|
33
|
+
},
|
|
34
|
+
ref: ref
|
|
35
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
36
|
+
id: "part-a",
|
|
37
|
+
style: {
|
|
38
|
+
height: '200px',
|
|
39
|
+
backgroundColor: 'rgba(255,0,0,0.2)'
|
|
40
|
+
}
|
|
41
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
id: "part-b",
|
|
43
|
+
style: {
|
|
44
|
+
height: '200px',
|
|
45
|
+
backgroundColor: 'rgba(0,255,0,0.2)'
|
|
46
|
+
}
|
|
47
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
id: "part-c",
|
|
49
|
+
style: {
|
|
50
|
+
height: '200px',
|
|
51
|
+
backgroundColor: 'rgba(0,0,255,0.2)'
|
|
52
|
+
}
|
|
53
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
id: "part-d",
|
|
55
|
+
style: {
|
|
56
|
+
height: '200px',
|
|
57
|
+
backgroundColor: 'rgba(0,0,125,0.2)'
|
|
58
|
+
}
|
|
59
|
+
})));
|
|
60
|
+
});
|
package/dist/AnchorUI/index.js
CHANGED
|
@@ -1,41 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import React, { useEffect, useState } from "react";
|
|
1
|
+
import { Anchor } from 'antd';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
4
3
|
import "./index.scss";
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
|
|
4
|
+
const AnchorUI = props => {
|
|
5
|
+
const {
|
|
6
|
+
className,
|
|
7
|
+
anchoruiRef,
|
|
8
|
+
items,
|
|
9
|
+
anchorActive,
|
|
10
|
+
setAnchorActive
|
|
11
|
+
} = props;
|
|
12
|
+
// 当前聚焦id
|
|
13
|
+
const [activeId, setActiveId] = useState('');
|
|
8
14
|
useEffect(() => {
|
|
9
15
|
if (anchorActive) {
|
|
10
|
-
|
|
16
|
+
//判断是否点击的是当前聚焦项
|
|
17
|
+
if ('#' + anchorActive !== activeId) {
|
|
11
18
|
const targetElement = document.getElementById(anchorActive);
|
|
12
|
-
if (targetElement)
|
|
13
|
-
|
|
19
|
+
if (targetElement) targetElement.scrollIntoView({
|
|
20
|
+
behavior: 'auto'
|
|
21
|
+
});
|
|
14
22
|
}
|
|
15
|
-
|
|
16
|
-
|
|
23
|
+
//重置父级指定聚焦项 防止重复点击无效
|
|
24
|
+
if (setAnchorActive) setAnchorActive('');
|
|
17
25
|
}
|
|
18
26
|
}, [anchorActive]);
|
|
19
|
-
const newItems = items.map(
|
|
27
|
+
const newItems = items.map(item => {
|
|
20
28
|
return {
|
|
21
29
|
key: item.key,
|
|
22
30
|
title: item.title,
|
|
23
31
|
href: `#${item.key}`
|
|
24
32
|
};
|
|
25
33
|
});
|
|
26
|
-
return
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
onChange: (e) => setActiveId(e)
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
var AnchorUI_default = AnchorUI;
|
|
39
|
-
export {
|
|
40
|
-
AnchorUI_default as default
|
|
34
|
+
return /*#__PURE__*/React.createElement(Anchor, {
|
|
35
|
+
className: `anchoraUI ${className ?? ''}`,
|
|
36
|
+
items: newItems,
|
|
37
|
+
affix: false,
|
|
38
|
+
getContainer: () => anchoruiRef?.current,
|
|
39
|
+
onClick: e => e.preventDefault(),
|
|
40
|
+
onChange: e => setActiveId(e)
|
|
41
|
+
});
|
|
41
42
|
};
|
|
43
|
+
export default AnchorUI;
|
package/dist/BackUI/index.js
CHANGED
|
@@ -1,23 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
import React from
|
|
3
|
-
import { useNavigate } from
|
|
4
|
-
import { IconUI } from "
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useNavigate } from 'react-router-dom';
|
|
4
|
+
import { IconUI } from "./..";
|
|
5
5
|
import "./index.scss";
|
|
6
|
-
|
|
7
|
-
const {
|
|
6
|
+
const BackUI = props => {
|
|
7
|
+
const {
|
|
8
|
+
to = -1,
|
|
9
|
+
before,
|
|
10
|
+
current,
|
|
11
|
+
className,
|
|
12
|
+
children,
|
|
13
|
+
backClick,
|
|
14
|
+
...otherProps
|
|
15
|
+
} = props;
|
|
8
16
|
const navigate = useNavigate();
|
|
9
17
|
const handleClick = () => {
|
|
10
18
|
navigate(to ?? -1);
|
|
11
19
|
};
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
21
|
+
className: `sic-backui ${className ?? ''}`
|
|
22
|
+
}, otherProps), /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: "sic-backui-button",
|
|
24
|
+
onClick: () => {
|
|
25
|
+
if (backClick) {
|
|
26
|
+
backClick(handleClick);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
handleClick();
|
|
16
30
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
31
|
+
}, /*#__PURE__*/React.createElement(IconUI, {
|
|
32
|
+
name: "Return"
|
|
33
|
+
}), /*#__PURE__*/React.createElement("div", null, "\u8FD4\u56DE")), /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: "sic-backui-text"
|
|
35
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
36
|
+
className: "sic-backui-text-before"
|
|
37
|
+
}, before), /*#__PURE__*/React.createElement("div", null, "/"), /*#__PURE__*/React.createElement("div", null, current)), /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: "sic-backui-content"
|
|
39
|
+
}, children));
|
|
23
40
|
};
|
|
41
|
+
export default BackUI;
|
|
@@ -1,23 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { IconUI } from "..";
|
|
1
|
+
import { Carousel, Popover } from 'antd';
|
|
2
|
+
import React, { useRef } from 'react';
|
|
3
|
+
import { IconUI } from "./..";
|
|
5
4
|
import "./index.scss";
|
|
6
|
-
|
|
5
|
+
const BroadcastUI = props => {
|
|
7
6
|
const ref = useRef(null);
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
7
|
+
const {
|
|
8
|
+
items = [],
|
|
9
|
+
width,
|
|
10
|
+
textAlign = 'left'
|
|
11
|
+
} = props;
|
|
12
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
13
|
+
className: "sicBroadcastui",
|
|
14
|
+
style: {
|
|
15
|
+
width: width
|
|
16
|
+
}
|
|
17
|
+
}, /*#__PURE__*/React.createElement(IconUI, {
|
|
18
|
+
name: "Help",
|
|
19
|
+
theme: "filled",
|
|
20
|
+
fill: "var(--red)",
|
|
21
|
+
size: "18"
|
|
22
|
+
}), items?.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: "sicBroadcastui-content"
|
|
24
|
+
}, /*#__PURE__*/React.createElement(Carousel, {
|
|
25
|
+
autoplay: items?.length > 1,
|
|
26
|
+
dots: false,
|
|
27
|
+
dotPosition: "left",
|
|
28
|
+
autoplaySpeed: 5000,
|
|
29
|
+
adaptiveHeight: true
|
|
30
|
+
}, items.map((item, index) => /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: "sicBroadcastui-content-item",
|
|
32
|
+
key: index
|
|
33
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: "sicBroadcastui-content-item-text",
|
|
35
|
+
style: {
|
|
36
|
+
textAlign: textAlign
|
|
37
|
+
}
|
|
38
|
+
}, item))))), items?.length > 1 && /*#__PURE__*/React.createElement(Popover, {
|
|
39
|
+
color: "rgba(0, 0, 0, 0.85)",
|
|
40
|
+
placement: "bottomRight",
|
|
41
|
+
getPopupContainer: () => ref.current || document.body,
|
|
42
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: "sicBroadcastui-popover",
|
|
44
|
+
style: {
|
|
45
|
+
width: width ? width - 20 : 'auto'
|
|
46
|
+
}
|
|
47
|
+
}, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
className: "sicBroadcastui-popover-item",
|
|
49
|
+
key: index
|
|
50
|
+
}, item)))
|
|
51
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
52
|
+
className: "sicBroadcastui-more",
|
|
53
|
+
ref: ref
|
|
54
|
+
}, "\u67E5\u770B")));
|
|
23
55
|
};
|
|
56
|
+
export default BroadcastUI;
|
package/dist/ButtonUI/index.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
import { Button } from
|
|
3
|
-
import React from
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import { Button } from 'antd';
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import "./index.scss";
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
const ButtonUI = props => {
|
|
6
|
+
const {
|
|
7
|
+
children,
|
|
8
|
+
iconPosition = 'end',
|
|
9
|
+
...otherProps
|
|
10
|
+
} = props;
|
|
11
|
+
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
12
|
+
iconPosition: iconPosition
|
|
13
|
+
}, otherProps), children);
|
|
12
14
|
};
|
|
15
|
+
export default ButtonUI;
|