@para-ui/core 4.0.46 → 4.0.48
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/Badge/index.d.ts +2 -0
- package/Badge/index.js +29 -5
- package/Cascader/index.js +4 -5
- package/ComboSelect/index.js +3 -3
- package/CycleSelector/index.js +1 -4
- package/DatePicker/index.js +1 -4
- package/DynamicMultiBox/index.js +3 -3
- package/Form/index.js +4 -4
- package/FormItem/index.js +4 -4
- package/Image/index.js +2 -3
- package/README.md +10 -0
- package/ScrollBar/index.d.ts +27 -0
- package/ScrollBar/index.js +153 -0
- package/SingleBox/index.js +2 -2
- package/Stepper/index.js +1 -1
- package/Table/index.js +111 -22
- package/Table/interface.d.ts +2 -0
- package/Table/tableBodyInterface.d.ts +4 -0
- package/Table/tableElement/index.d.ts +1 -0
- package/Tag/index.js +55 -87
- package/TimePicker/index.js +1 -4
- package/Timeline/index.js +1 -2
- package/ToggleButton/index.js +1 -2
- package/Tree/index.js +3 -4
- package/Upload/index.js +2 -3
- package/_verture/{Portal-f9bedb3a.js → Portal-42560ff0.js} +1 -2
- package/_verture/{defineProperty-6f62bb2a.js → defineProperty-f0e15205.js} +10 -2
- package/_verture/{index-972707a5.js → index-063009f8.js} +2 -3
- package/_verture/{index-6647cbf6.js → index-72981a9e.js} +1 -2
- package/index.d.ts +2 -0
- package/index.js +6 -6
- package/package.json +1 -1
- package/umd/Badge.js +1 -1
- package/umd/ComboSelect.js +9 -9
- package/umd/DynamicMultiBox.js +2 -2
- package/umd/Form.js +5 -5
- package/umd/FormItem.js +5 -5
- package/umd/ScrollBar.js +1 -0
- package/umd/Table.js +5 -5
- package/_verture/typeof-adeedc13.js +0 -11
- /package/_verture/{index-bc7b7394.js → index-caffc0da.js} +0 -0
package/Badge/index.d.ts
CHANGED
|
@@ -20,6 +20,8 @@ export interface BadgeProps {
|
|
|
20
20
|
color?: string;
|
|
21
21
|
/** 偏移量 */
|
|
22
22
|
offset?: [number, number];
|
|
23
|
+
/** 定位方向 默认 top-right */
|
|
24
|
+
placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
23
25
|
}
|
|
24
26
|
export declare const Badge: FunctionComponent<BadgeProps>;
|
|
25
27
|
export default Badge;
|
package/Badge/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef } from 'react';
|
|
2
3
|
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
3
4
|
import clsx from 'clsx';
|
|
4
5
|
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
5
6
|
|
|
6
|
-
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-badge {\n display: inline-block;\n line-height: 1;\n position: relative;\n}\n.paraui-v4-badge > .pos-box {\n position: absolute;\n
|
|
7
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-badge {\n display: inline-block;\n line-height: 1;\n position: relative;\n}\n.paraui-v4-badge > .pos-box {\n position: absolute;\n height: 12px;\n display: inline-block;\n background-color: rgb(244, 66, 66);\n color: rgb(255, 255, 255);\n}\n.paraui-v4-badge > .pos-box.dot {\n border-radius: 50%;\n width: 8px;\n height: 8px;\n}\n.paraui-v4-badge > .pos-box.number, .paraui-v4-badge > .pos-box.text {\n border-radius: 8px;\n font-size: 12px;\n min-width: 12px;\n text-align: center;\n line-height: 12px;\n padding: 0 3px;\n max-width: 60px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v4-badge > .pos-box.number > span, .paraui-v4-badge > .pos-box.text > span {\n transform: scale(0.8);\n display: inline-block;\n}\n.paraui-v4-badge.paraui-v4-badge-top-left > .pos-box {\n top: 0;\n left: 0;\n transform: translate(-50%, -50%);\n}\n.paraui-v4-badge.paraui-v4-badge-top-right > .pos-box {\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n}\n.paraui-v4-badge.paraui-v4-badge-bottom-left > .pos-box {\n bottom: 0;\n left: 0;\n transform: translate(-50%, 50%);\n}\n.paraui-v4-badge.paraui-v4-badge-bottom-right > .pos-box {\n bottom: 0;\n right: 0;\n transform: translate(50%, 50%);\n}";
|
|
7
8
|
styleInject(css_248z);
|
|
8
9
|
|
|
9
10
|
const Badge = props => {
|
|
@@ -14,8 +15,29 @@ const Badge = props => {
|
|
|
14
15
|
sign,
|
|
15
16
|
backgroundColor,
|
|
16
17
|
color,
|
|
17
|
-
offset
|
|
18
|
+
offset,
|
|
19
|
+
placement = 'top-right'
|
|
18
20
|
} = props;
|
|
21
|
+
const constData = useRef({
|
|
22
|
+
offsetPos: {
|
|
23
|
+
'top-left': {
|
|
24
|
+
offsetX: 'left',
|
|
25
|
+
offsetY: 'top'
|
|
26
|
+
},
|
|
27
|
+
'top-right': {
|
|
28
|
+
offsetX: 'right',
|
|
29
|
+
offsetY: 'top'
|
|
30
|
+
},
|
|
31
|
+
'bottom-left': {
|
|
32
|
+
offsetX: 'left',
|
|
33
|
+
offsetY: 'bottom'
|
|
34
|
+
},
|
|
35
|
+
'bottom-right': {
|
|
36
|
+
offsetX: 'right',
|
|
37
|
+
offsetY: 'bottom'
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
19
41
|
// 判断数据类型
|
|
20
42
|
const handleType = () => {
|
|
21
43
|
const type = typeof sign;
|
|
@@ -35,8 +57,10 @@ const Badge = props => {
|
|
|
35
57
|
color
|
|
36
58
|
};
|
|
37
59
|
if (offset) {
|
|
38
|
-
|
|
39
|
-
|
|
60
|
+
const offsetX = constData.current.offsetPos[placement].offsetX;
|
|
61
|
+
const offsetY = constData.current.offsetPos[placement].offsetY;
|
|
62
|
+
styleSign[offsetX] = -offset[0] + 'px';
|
|
63
|
+
styleSign[offsetY] = offset[1] + 'px';
|
|
40
64
|
}
|
|
41
65
|
return jsxs("span", Object.assign({
|
|
42
66
|
className: "pos-box ".concat(type),
|
|
@@ -55,7 +79,7 @@ const Badge = props => {
|
|
|
55
79
|
return sign;
|
|
56
80
|
};
|
|
57
81
|
return jsxs("span", Object.assign({
|
|
58
|
-
className: clsx("".concat($prefixCls, "-badge"), "".concat($prefixCls, "-badge-").concat(
|
|
82
|
+
className: clsx("".concat($prefixCls, "-badge ").concat($prefixCls, "-badge-").concat(type, " ").concat($prefixCls, "-badge-").concat(placement), className),
|
|
59
83
|
style: style
|
|
60
84
|
}, {
|
|
61
85
|
children: [children, handleSign()]
|
package/Cascader/index.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { C as Cascader } from '../_verture/index-
|
|
2
|
-
export { C as default } from '../_verture/index-
|
|
1
|
+
import { C as Cascader } from '../_verture/index-063009f8.js';
|
|
2
|
+
export { C as default } from '../_verture/index-063009f8.js';
|
|
3
3
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
|
-
import '../_verture/Portal-
|
|
5
|
+
import '../_verture/Portal-42560ff0.js';
|
|
6
6
|
import '../_verture/slicedToArray-75fa4188.js';
|
|
7
7
|
import 'react';
|
|
8
8
|
import 'react-dom';
|
|
9
|
-
import '../_verture/
|
|
9
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
10
10
|
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
11
|
-
import '../_verture/defineProperty-6f62bb2a.js';
|
|
12
11
|
import 'rc-motion';
|
|
13
12
|
import 'clsx';
|
|
14
13
|
import '../_verture/typeof-6ec38efd.js';
|
package/ComboSelect/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import SearchIcon from '@para-ui/icons/Search';
|
|
|
6
6
|
import Close from '@para-ui/icons/Close';
|
|
7
7
|
import CloseCircleF from '@para-ui/icons/CloseCircleF';
|
|
8
8
|
import Table from '../Table/index.js';
|
|
9
|
-
import { T as Tree } from '../_verture/index-
|
|
9
|
+
import { T as Tree } from '../_verture/index-72981a9e.js';
|
|
10
10
|
import { Button } from '../Button/index.js';
|
|
11
11
|
import { D as Dropdown } from '../_verture/index-bde7aabe.js';
|
|
12
12
|
import { Popover } from '../Popover/index.js';
|
|
@@ -59,10 +59,10 @@ import 'rc-pagination';
|
|
|
59
59
|
import '@para-ui/icons/Right';
|
|
60
60
|
import '@para-ui/icons/DoubleLeft';
|
|
61
61
|
import '@para-ui/icons/DoubleRight';
|
|
62
|
+
import '../ScrollBar/index.js';
|
|
62
63
|
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
63
64
|
import '../_verture/slicedToArray-75fa4188.js';
|
|
64
|
-
import '../_verture/defineProperty-
|
|
65
|
-
import '../_verture/typeof-adeedc13.js';
|
|
65
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
66
66
|
import '../_verture/index-8ac46bd9.js';
|
|
67
67
|
import '../_verture/typeof-6ec38efd.js';
|
|
68
68
|
import 'rc-tree';
|
package/CycleSelector/index.js
CHANGED
|
@@ -19,9 +19,6 @@ import 'rc-picker/es/generate/dayjs';
|
|
|
19
19
|
import '../Tag/index.js';
|
|
20
20
|
import '../_verture/tslib.es6-55ed4bd2.js';
|
|
21
21
|
import '@para-ui/icons/EditOutline';
|
|
22
|
-
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
23
|
-
import '../_verture/slicedToArray-75fa4188.js';
|
|
24
|
-
import '../_verture/typeof-adeedc13.js';
|
|
25
22
|
import '../AutoTips/index.js';
|
|
26
23
|
import '../Tooltip/index.js';
|
|
27
24
|
import 'rc-tooltip';
|
|
@@ -31,7 +28,7 @@ import '@paraview/lib';
|
|
|
31
28
|
import '../_verture/tinycolor-ece3542d.js';
|
|
32
29
|
import '../_verture/useGlobalProps-4ae1a007.js';
|
|
33
30
|
import '@para-ui/icons/Plus';
|
|
34
|
-
import '../_verture/defineProperty-
|
|
31
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
35
32
|
import 'rc-picker';
|
|
36
33
|
import '@para-ui/icons/CloseCircleF';
|
|
37
34
|
import '@para-ui/icons/Calendar';
|
package/DatePicker/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
|
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { Button } from '../Button/index.js';
|
|
4
4
|
import { Tag } from '../Tag/index.js';
|
|
5
|
-
import {
|
|
5
|
+
import { a as _defineProperty } from '../_verture/defineProperty-f0e15205.js';
|
|
6
6
|
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
7
7
|
import React__default, { forwardRef, useImperativeHandle } from 'react';
|
|
8
8
|
import clsx from 'clsx';
|
|
@@ -33,9 +33,6 @@ import '../_verture/usePopupContainer-635f66f4.js';
|
|
|
33
33
|
import 'dayjs';
|
|
34
34
|
import '@para-ui/icons/Close';
|
|
35
35
|
import '@para-ui/icons/EditOutline';
|
|
36
|
-
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
37
|
-
import '../_verture/slicedToArray-75fa4188.js';
|
|
38
|
-
import '../_verture/typeof-adeedc13.js';
|
|
39
36
|
import '../_verture/tinycolor-ece3542d.js';
|
|
40
37
|
import '../_verture/useGlobalProps-4ae1a007.js';
|
|
41
38
|
import '@para-ui/icons/Plus';
|
package/DynamicMultiBox/index.js
CHANGED
|
@@ -70,11 +70,11 @@ import 'rc-pagination';
|
|
|
70
70
|
import '@para-ui/icons/Right';
|
|
71
71
|
import '@para-ui/icons/DoubleLeft';
|
|
72
72
|
import '@para-ui/icons/DoubleRight';
|
|
73
|
-
import '../
|
|
73
|
+
import '../ScrollBar/index.js';
|
|
74
|
+
import '../_verture/index-72981a9e.js';
|
|
74
75
|
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
75
76
|
import '../_verture/slicedToArray-75fa4188.js';
|
|
76
|
-
import '../_verture/defineProperty-
|
|
77
|
-
import '../_verture/typeof-adeedc13.js';
|
|
77
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
78
78
|
import '../_verture/index-8ac46bd9.js';
|
|
79
79
|
import '../_verture/typeof-6ec38efd.js';
|
|
80
80
|
import 'rc-tree';
|
package/Form/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { DeepClone } from '@paraview/lib';
|
|
3
3
|
import React__default from 'react';
|
|
4
|
-
import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-
|
|
4
|
+
import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-caffc0da.js';
|
|
5
5
|
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
6
6
|
import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
|
|
7
7
|
import '../TextField/index.js';
|
|
@@ -71,10 +71,10 @@ import 'rc-pagination';
|
|
|
71
71
|
import '@para-ui/icons/Right';
|
|
72
72
|
import '@para-ui/icons/DoubleLeft';
|
|
73
73
|
import '@para-ui/icons/DoubleRight';
|
|
74
|
-
import '../
|
|
74
|
+
import '../ScrollBar/index.js';
|
|
75
|
+
import '../_verture/index-72981a9e.js';
|
|
75
76
|
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
76
|
-
import '../_verture/defineProperty-
|
|
77
|
-
import '../_verture/typeof-adeedc13.js';
|
|
77
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
78
78
|
import '../_verture/index-8ac46bd9.js';
|
|
79
79
|
import '../_verture/typeof-6ec38efd.js';
|
|
80
80
|
import 'rc-tree';
|
package/FormItem/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import 'react/jsx-runtime';
|
|
2
2
|
import 'react';
|
|
3
|
-
export { F as default } from '../_verture/index-
|
|
3
|
+
export { F as default } from '../_verture/index-caffc0da.js';
|
|
4
4
|
import 'clsx';
|
|
5
5
|
import '../Label/index.js';
|
|
6
6
|
import '../_verture/constant-5317fc89.js';
|
|
@@ -71,10 +71,10 @@ import 'rc-pagination';
|
|
|
71
71
|
import '@para-ui/icons/Right';
|
|
72
72
|
import '@para-ui/icons/DoubleLeft';
|
|
73
73
|
import '@para-ui/icons/DoubleRight';
|
|
74
|
-
import '../
|
|
74
|
+
import '../ScrollBar/index.js';
|
|
75
|
+
import '../_verture/index-72981a9e.js';
|
|
75
76
|
import '../_verture/toConsumableArray-c7a8028f.js';
|
|
76
|
-
import '../_verture/defineProperty-
|
|
77
|
-
import '../_verture/typeof-adeedc13.js';
|
|
77
|
+
import '../_verture/defineProperty-f0e15205.js';
|
|
78
78
|
import '../_verture/index-8ac46bd9.js';
|
|
79
79
|
import '../_verture/typeof-6ec38efd.js';
|
|
80
80
|
import 'rc-tree';
|
package/Image/index.js
CHANGED
|
@@ -2,10 +2,9 @@ import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { useState, useRef, useEffect, useContext, useMemo } from 'react';
|
|
5
|
-
import { i as warningOnce, d as wrapperRaf, _ as _objectSpread2, w as warning, c as clsx, P as Portal, K as KeyCode, b as _objectWithoutProperties, a as _extends, j as useMergedState } from '../_verture/Portal-
|
|
6
|
-
import { _ as _defineProperty } from '../_verture/defineProperty-
|
|
5
|
+
import { i as warningOnce, d as wrapperRaf, _ as _objectSpread2, w as warning, c as clsx, P as Portal, K as KeyCode, b as _objectWithoutProperties, a as _extends, j as useMergedState } from '../_verture/Portal-42560ff0.js';
|
|
6
|
+
import { _ as _typeof, a as _defineProperty } from '../_verture/defineProperty-f0e15205.js';
|
|
7
7
|
import { _ as _slicedToArray } from '../_verture/slicedToArray-75fa4188.js';
|
|
8
|
-
import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
|
|
9
8
|
import Dialog from 'rc-dialog';
|
|
10
9
|
import ReactDOM from 'react-dom';
|
|
11
10
|
import CSSMotion from 'rc-motion';
|
package/README.md
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author linhd
|
|
3
|
+
* @date 2024/12/13 11:15
|
|
4
|
+
* @description 自定义滚动条
|
|
5
|
+
*/
|
|
6
|
+
import React, { FunctionComponent } from 'react';
|
|
7
|
+
import './index.scss';
|
|
8
|
+
interface Props {
|
|
9
|
+
/** 样式class */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** style */
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
/** 模式 横 竖 */
|
|
14
|
+
type?: 'horizontal' | 'vertical';
|
|
15
|
+
/** 滚动总长 */
|
|
16
|
+
scrollTotalLength?: number;
|
|
17
|
+
/** 大小 */
|
|
18
|
+
size?: 'small' | 'medium' | 'large';
|
|
19
|
+
/** 颜色 */
|
|
20
|
+
color?: 'deep' | 'light';
|
|
21
|
+
/** 外部滚动距离 */
|
|
22
|
+
scrollLength?: number;
|
|
23
|
+
/** 滚动事件 */
|
|
24
|
+
onScroll?: (val: number) => void;
|
|
25
|
+
}
|
|
26
|
+
declare const ScrollBar: FunctionComponent<Props>;
|
|
27
|
+
export default ScrollBar;
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
|
|
5
|
+
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
|
|
6
|
+
|
|
7
|
+
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-scroll-bar {\n overflow: hidden;\n position: relative;\n}\n.paraui-v4-scroll-bar > .slider {\n position: relative;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal {\n width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal > .slider {\n height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical {\n height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical > .slider {\n width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small > .slider, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium > .slider {\n border-radius: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-horizontal, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-horizontal {\n height: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-vertical, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-vertical {\n width: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large > .slider {\n border-radius: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-horizontal {\n height: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-vertical {\n width: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light {\n background-color: rgb(234, 236, 241);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider {\n background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider:hover {\n background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light.paraui-v4-scroll-bar-move > .slider {\n background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep {\n background-color: rgb(92, 101, 115);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider {\n background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider:hover {\n background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep.paraui-v4-scroll-bar-move > .slider {\n background-color: rgb(161, 168, 179);\n}";
|
|
8
|
+
styleInject(css_248z);
|
|
9
|
+
|
|
10
|
+
const ScrollBar = props => {
|
|
11
|
+
const {
|
|
12
|
+
className,
|
|
13
|
+
style,
|
|
14
|
+
type = 'vertical',
|
|
15
|
+
size = 'large',
|
|
16
|
+
color = 'light',
|
|
17
|
+
scrollTotalLength,
|
|
18
|
+
scrollLength,
|
|
19
|
+
onScroll
|
|
20
|
+
} = props;
|
|
21
|
+
const boxRef = useRef(null);
|
|
22
|
+
const sliderRef = useRef(null);
|
|
23
|
+
const constData = useRef({
|
|
24
|
+
typeMap: {
|
|
25
|
+
vertical: {
|
|
26
|
+
length: 'height',
|
|
27
|
+
movePage: 'pageY',
|
|
28
|
+
pos: 'top',
|
|
29
|
+
startPos: 'offsetTop'
|
|
30
|
+
},
|
|
31
|
+
horizontal: {
|
|
32
|
+
length: 'width',
|
|
33
|
+
movePage: 'pageX',
|
|
34
|
+
pos: 'left',
|
|
35
|
+
startPos: 'offsetLeft'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
moveMaxLength: 0,
|
|
39
|
+
startLength: 0,
|
|
40
|
+
visualWindowLength: 0,
|
|
41
|
+
scrollTotalLength: 0,
|
|
42
|
+
sliderLength: 0,
|
|
43
|
+
scrollLength: 0
|
|
44
|
+
});
|
|
45
|
+
constData.current.scrollTotalLength = scrollTotalLength;
|
|
46
|
+
constData.current.scrollLength = scrollLength;
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
intl();
|
|
49
|
+
window.addEventListener('resize', resize);
|
|
50
|
+
return () => {
|
|
51
|
+
window.removeEventListener("resize", resize);
|
|
52
|
+
};
|
|
53
|
+
}, []);
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
handleSliderLength();
|
|
56
|
+
handleTop();
|
|
57
|
+
}, [scrollLength, scrollTotalLength]);
|
|
58
|
+
const resize = () => {
|
|
59
|
+
handleSliderLength();
|
|
60
|
+
handleTop();
|
|
61
|
+
};
|
|
62
|
+
// 计算滑块的 宽 高
|
|
63
|
+
const handleSliderLength = () => {
|
|
64
|
+
const boxRefEle = boxRef.current;
|
|
65
|
+
const sliderRefEle = sliderRef.current;
|
|
66
|
+
if (!scrollTotalLength || !boxRefEle || !sliderRefEle) return;
|
|
67
|
+
const boxRefEleRect = boxRefEle.getBoundingClientRect();
|
|
68
|
+
const lengthName = constData.current.typeMap[type].length;
|
|
69
|
+
const visualWindowLengthCom = boxRefEleRect[lengthName];
|
|
70
|
+
// 可视窗口长度 / 总长 * 可视窗口长度
|
|
71
|
+
let sliderLength = visualWindowLengthCom / scrollTotalLength * visualWindowLengthCom;
|
|
72
|
+
if (sliderLength < 16) sliderLength = 16;
|
|
73
|
+
sliderRefEle.style[lengthName] = sliderLength / visualWindowLengthCom * 100 + '%';
|
|
74
|
+
constData.current.moveMaxLength = visualWindowLengthCom - sliderLength;
|
|
75
|
+
constData.current.visualWindowLength = visualWindowLengthCom;
|
|
76
|
+
constData.current.sliderLength = sliderLength;
|
|
77
|
+
};
|
|
78
|
+
// 初始化
|
|
79
|
+
const intl = () => {
|
|
80
|
+
const boxRefEle = boxRef.current;
|
|
81
|
+
const sliderRefEle = sliderRef.current;
|
|
82
|
+
if (!boxRefEle || !sliderRefEle) return;
|
|
83
|
+
const pos = constData.current.typeMap[type].pos;
|
|
84
|
+
const startPos = constData.current.typeMap[type].startPos;
|
|
85
|
+
const movePage = constData.current.typeMap[type].movePage;
|
|
86
|
+
// 移动
|
|
87
|
+
const moveFunc = (event, e) => {
|
|
88
|
+
let moveLength = event[movePage] - e[movePage]; // 鼠标移动的距离
|
|
89
|
+
moveLength = constData.current.startLength + moveLength;
|
|
90
|
+
if (moveLength < 0) moveLength = 0;
|
|
91
|
+
if (moveLength > constData.current.moveMaxLength) moveLength = constData.current.moveMaxLength;
|
|
92
|
+
sliderRefEle.style[pos] = moveLength / constData.current.visualWindowLength * 100 + '%';
|
|
93
|
+
onScroll && onScroll(moveLength / constData.current.moveMaxLength * constData.current.scrollTotalLength);
|
|
94
|
+
};
|
|
95
|
+
// 抬起
|
|
96
|
+
const endFunc = () => {
|
|
97
|
+
boxRefEle.classList.remove("".concat($prefixCls, "-scroll-bar-move"));
|
|
98
|
+
};
|
|
99
|
+
boxRefEle.onmousedown = e => {
|
|
100
|
+
boxRefEle.classList.add("".concat($prefixCls, "-scroll-bar-move"));
|
|
101
|
+
constData.current.startLength = sliderRefEle[startPos];
|
|
102
|
+
document.onmousemove = event => {
|
|
103
|
+
moveFunc(event, e);
|
|
104
|
+
};
|
|
105
|
+
document.onmouseup = () => {
|
|
106
|
+
document.onmousemove = null;
|
|
107
|
+
document.onmouseup = null;
|
|
108
|
+
endFunc();
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
boxRefEle.ontouchstart = touchE => {
|
|
112
|
+
touchE.preventDefault();
|
|
113
|
+
const e = touchE.touches[0];
|
|
114
|
+
constData.current.startLength = sliderRefEle[startPos];
|
|
115
|
+
document.ontouchmove = touchEvent => {
|
|
116
|
+
touchEvent.preventDefault();
|
|
117
|
+
const event = touchEvent.touches[0];
|
|
118
|
+
moveFunc(event, e);
|
|
119
|
+
return false;
|
|
120
|
+
};
|
|
121
|
+
// 鼠标抬起
|
|
122
|
+
document.ontouchend = () => {
|
|
123
|
+
document.ontouchmove = null;
|
|
124
|
+
document.ontouchend = null;
|
|
125
|
+
endFunc();
|
|
126
|
+
};
|
|
127
|
+
return false;
|
|
128
|
+
};
|
|
129
|
+
};
|
|
130
|
+
// 处理鼠标滚轮滚动top定位
|
|
131
|
+
const handleTop = () => {
|
|
132
|
+
const sliderRefEle = sliderRef.current;
|
|
133
|
+
if (!sliderRefEle) return;
|
|
134
|
+
const pos = constData.current.typeMap[type].pos;
|
|
135
|
+
// 当前组件滚动总长与总长比
|
|
136
|
+
const a = constData.current.moveMaxLength / constData.current.visualWindowLength;
|
|
137
|
+
// 真实滚动总长与总长比
|
|
138
|
+
let b = Number(constData.current.scrollLength) / constData.current.scrollTotalLength;
|
|
139
|
+
sliderRefEle.style[pos] = a * b * 100 + '%';
|
|
140
|
+
};
|
|
141
|
+
return jsx("div", Object.assign({
|
|
142
|
+
className: clsx("".concat($prefixCls, "-scroll-bar ").concat($prefixCls, "-scroll-bar-").concat(type, " ").concat($prefixCls, "-scroll-bar-").concat(size, " ").concat($prefixCls, "-scroll-bar-").concat(color), className),
|
|
143
|
+
style: style,
|
|
144
|
+
ref: boxRef
|
|
145
|
+
}, {
|
|
146
|
+
children: jsx("div", {
|
|
147
|
+
ref: sliderRef,
|
|
148
|
+
className: 'slider'
|
|
149
|
+
})
|
|
150
|
+
}));
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
export { ScrollBar as default };
|
package/SingleBox/index.js
CHANGED
|
@@ -39,8 +39,8 @@ var zh = {
|
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
var localeJson = {
|
|
42
|
-
zh,
|
|
43
|
-
en
|
|
42
|
+
zh: zh,
|
|
43
|
+
en: en
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-single-box {\n display: inline-block;\n width: 100%;\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n}\n.paraui-v4-single-box > .single-box-content {\n line-height: 0;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item {\n display: flex;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box {\n flex: 1;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box .single-box-text-field .paraui-v4-helper-text {\n min-height: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box {\n display: flex;\n align-items: center;\n margin-left: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n color: rgb(87, 131, 235);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n font-size: 20px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box > .single-box-add {\n text-align: center;\n border: 1px dashed;\n border-color: rgb(212, 218, 227);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n cursor: pointer;\n background-color: rgb(247, 248, 250);\n color: rgb(46, 101, 230);\n font-size: 14px;\n}\n.paraui-v4-single-box > .single-box-add > svg {\n font-size: 16px;\n color: rgb(46, 101, 230);\n margin-right: 4px;\n}\n.paraui-v4-single-box > .single-box-add:hover {\n border-color: rgb(87, 131, 235);\n background-color: rgb(240, 245, 255);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n cursor: not-allowed;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n background-color: transparent;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add {\n border-color: rgb(212, 218, 227);\n cursor: not-allowed;\n background-color: rgb(247, 248, 250);\n color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add > svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add:hover {\n border-color: rgb(212, 218, 227);\n color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n width: 28px;\n height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-add {\n height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n width: 32px;\n height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-add {\n height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n width: 32px;\n height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-add {\n height: 32px;\n}";
|