@ray-js/lamp-style-slider 0.0.3-beta-3 → 0.0.3-beta-5
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/lib/index.config.js +3 -3
- package/lib/index.d.ts +2 -2
- package/lib/index.js +50 -58
- package/lib/props.js +4 -10
- package/lib/utils/index.js +7 -9
- package/package.json +5 -5
package/lib/index.config.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const tuya = {
|
|
2
2
|
backgroundColor: '#f2f4f6',
|
|
3
3
|
navigationBarTitleText: 'Ray 跨端组件'
|
|
4
4
|
};
|
|
5
|
-
export
|
|
5
|
+
export const wechat = {
|
|
6
6
|
backgroundColor: '#f2f4f6',
|
|
7
7
|
navigationBarTitleText: 'Ray 跨端组件'
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export const native = {
|
|
10
10
|
backgroundColor: '#000000',
|
|
11
11
|
isBleOfflineOverlay: false,
|
|
12
12
|
useSafeAreaView: true,
|
package/lib/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { IProps } from './props';
|
|
3
|
-
declare function OpacitySlider(props: IProps): JSX.Element;
|
|
3
|
+
declare function OpacitySlider(props: IProps): React.JSX.Element;
|
|
4
4
|
declare namespace OpacitySlider {
|
|
5
5
|
var defaultProps: IProps;
|
|
6
6
|
}
|
package/lib/index.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import "core-js/modules/es.array.concat.js";
|
|
4
|
-
import "core-js/modules/es.array.slice.js";
|
|
5
2
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
6
3
|
import React, { useRef, useState, useEffect } from 'react';
|
|
7
4
|
import { View, Text } from '@ray-js/ray';
|
|
@@ -12,37 +9,34 @@ import { formatPercent } from './utils';
|
|
|
12
9
|
import styles from './index.module.less';
|
|
13
10
|
import { defaultProps } from './props';
|
|
14
11
|
function OpacitySlider(props) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
min =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var startRefValue = useRef(-1);
|
|
44
|
-
var handTouchMove = useThrottleFn(function (_ref2) {
|
|
45
|
-
var detail = _ref2.detail;
|
|
12
|
+
const preValue = useRef(-1);
|
|
13
|
+
const lastValue = useRef(null);
|
|
14
|
+
const timer = useRef(null);
|
|
15
|
+
const moveTimer = useRef(null);
|
|
16
|
+
const isMove = useRef(false);
|
|
17
|
+
const {
|
|
18
|
+
label,
|
|
19
|
+
min = 0,
|
|
20
|
+
max = 1000,
|
|
21
|
+
rangeOffset = 38,
|
|
22
|
+
value,
|
|
23
|
+
style,
|
|
24
|
+
trackStyle = {},
|
|
25
|
+
thumbStyle = {},
|
|
26
|
+
textValue,
|
|
27
|
+
disable = false,
|
|
28
|
+
valueStyle,
|
|
29
|
+
trackBackgroundColor,
|
|
30
|
+
enableTouch = true,
|
|
31
|
+
onTouchStart,
|
|
32
|
+
onTouchMove,
|
|
33
|
+
onTouchEnd
|
|
34
|
+
} = props;
|
|
35
|
+
const startRefValue = useRef(-1);
|
|
36
|
+
const handTouchMove = useThrottleFn(_ref2 => {
|
|
37
|
+
let {
|
|
38
|
+
detail
|
|
39
|
+
} = _ref2;
|
|
46
40
|
if (!onTouchMove || disable) {
|
|
47
41
|
return;
|
|
48
42
|
}
|
|
@@ -67,25 +61,22 @@ function OpacitySlider(props) {
|
|
|
67
61
|
}, {
|
|
68
62
|
wait: 80
|
|
69
63
|
}).run;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
controllerValue = _useState2[0],
|
|
75
|
-
setControllerValue = _useState2[1];
|
|
76
|
-
useEffect(function () {
|
|
64
|
+
const endRefValue = useRef(-1);
|
|
65
|
+
const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`);
|
|
66
|
+
const [controllerValue, setControllerValue] = useState(-1);
|
|
67
|
+
useEffect(() => {
|
|
77
68
|
if (!isMove.current && value !== controllerValue) {
|
|
78
69
|
updateControlVal(value);
|
|
79
70
|
}
|
|
80
71
|
}, [value]);
|
|
81
|
-
|
|
72
|
+
const updateControlVal = useDebounceFn(val => {
|
|
82
73
|
setControllerValue(val);
|
|
83
74
|
}, {
|
|
84
75
|
wait: 150
|
|
85
76
|
}).run;
|
|
86
77
|
return /*#__PURE__*/React.createElement(View, {
|
|
87
78
|
style: style
|
|
88
|
-
}, label &&
|
|
79
|
+
}, label && (() => {
|
|
89
80
|
return /*#__PURE__*/React.createElement(View, {
|
|
90
81
|
className: styles.textRow
|
|
91
82
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
@@ -98,12 +89,12 @@ function OpacitySlider(props) {
|
|
|
98
89
|
}, "\xB7"), /*#__PURE__*/React.createElement(Text, {
|
|
99
90
|
className: styles.value,
|
|
100
91
|
style: valueStyle
|
|
101
|
-
}, textValue ||
|
|
102
|
-
min
|
|
103
|
-
max
|
|
92
|
+
}, textValue || `${formatPercent(controllerValue, {
|
|
93
|
+
min,
|
|
94
|
+
max,
|
|
104
95
|
minPercent: min
|
|
105
|
-
})
|
|
106
|
-
}(), /*#__PURE__*/React.createElement(View, {
|
|
96
|
+
})}%`));
|
|
97
|
+
})(), /*#__PURE__*/React.createElement(View, {
|
|
107
98
|
style: _objectSpread({
|
|
108
99
|
width: '646rpx',
|
|
109
100
|
height: '56rpx',
|
|
@@ -114,14 +105,13 @@ function OpacitySlider(props) {
|
|
|
114
105
|
instanceId: instanceId.current,
|
|
115
106
|
min: 0,
|
|
116
107
|
max: max - min,
|
|
117
|
-
closed: false,
|
|
118
108
|
disable: disable,
|
|
119
109
|
end: controllerValue - min,
|
|
120
110
|
step: 1,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
111
|
+
bindstart: _ref => {
|
|
112
|
+
let {
|
|
113
|
+
detail
|
|
114
|
+
} = _ref;
|
|
125
115
|
if (!onTouchStart || disable) {
|
|
126
116
|
return;
|
|
127
117
|
}
|
|
@@ -133,8 +123,10 @@ function OpacitySlider(props) {
|
|
|
133
123
|
startRefValue.current = detail.end;
|
|
134
124
|
},
|
|
135
125
|
bindmove: handTouchMove,
|
|
136
|
-
bindend:
|
|
137
|
-
|
|
126
|
+
bindend: _ref3 => {
|
|
127
|
+
let {
|
|
128
|
+
detail
|
|
129
|
+
} = _ref3;
|
|
138
130
|
if (!onTouchEnd || disable) {
|
|
139
131
|
return;
|
|
140
132
|
}
|
|
@@ -142,7 +134,7 @@ function OpacitySlider(props) {
|
|
|
142
134
|
return;
|
|
143
135
|
}
|
|
144
136
|
clearTimeout(moveTimer.current);
|
|
145
|
-
moveTimer.current = setTimeout(
|
|
137
|
+
moveTimer.current = setTimeout(() => {
|
|
146
138
|
isMove.current = false;
|
|
147
139
|
}, 100);
|
|
148
140
|
onTouchEnd && onTouchEnd(detail.end + min);
|
|
@@ -159,13 +151,13 @@ function OpacitySlider(props) {
|
|
|
159
151
|
barStyle: toStyle({
|
|
160
152
|
background: 'transparent'
|
|
161
153
|
}),
|
|
162
|
-
|
|
154
|
+
thumbStyle: toStyle(_objectSpread({
|
|
163
155
|
width: '62rpx',
|
|
164
156
|
height: '62rpx',
|
|
165
157
|
border: '8rpx solid #fff',
|
|
166
158
|
borderRadius: '50%',
|
|
167
159
|
boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
|
|
168
|
-
background:
|
|
160
|
+
background: `${disable ? '#000' : 'transparent'}`
|
|
169
161
|
}, thumbStyle))
|
|
170
162
|
})));
|
|
171
163
|
}
|
package/lib/props.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable prettier/prettier */
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3
3
|
|
|
4
|
-
export
|
|
4
|
+
export const defaultProps = {
|
|
5
5
|
value: 1,
|
|
6
6
|
trackStyle: {},
|
|
7
7
|
enableTouch: true,
|
|
@@ -10,13 +10,7 @@ export var defaultProps = {
|
|
|
10
10
|
style: {},
|
|
11
11
|
min: 0,
|
|
12
12
|
max: 1000,
|
|
13
|
-
onTouchStart:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onTouchMove: function onTouchMove() {
|
|
17
|
-
return null;
|
|
18
|
-
},
|
|
19
|
-
onTouchEnd: function onTouchEnd() {
|
|
20
|
-
return null;
|
|
21
|
-
}
|
|
13
|
+
onTouchStart: () => null,
|
|
14
|
+
onTouchMove: () => null,
|
|
15
|
+
onTouchEnd: () => null
|
|
22
16
|
};
|
package/lib/utils/index.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
_ref$minPercent = _ref.minPercent,
|
|
9
|
-
minPercent = _ref$minPercent === void 0 ? 0 : _ref$minPercent;
|
|
1
|
+
export const formatPercent = function () {
|
|
2
|
+
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
3
|
+
let {
|
|
4
|
+
min = 0,
|
|
5
|
+
max = 1000,
|
|
6
|
+
minPercent = 0
|
|
7
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
10
8
|
return Math.min(100, Math.round((100 - minPercent) * (value - min) / (max - min) + minPercent));
|
|
11
9
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/lamp-style-slider",
|
|
3
|
-
"version": "0.0.3-beta-
|
|
3
|
+
"version": "0.0.3-beta-5",
|
|
4
4
|
"description": "照明样式的基础滑动条",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"files": [
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
|
|
13
13
|
"build": "ray build --type=component",
|
|
14
14
|
"watch": "ray start --type=component",
|
|
15
|
-
"build:tuya": "ray build ./example
|
|
15
|
+
"build:tuya": "ray build ./example",
|
|
16
16
|
"build:wechat": "ray build ./example --target=wechat",
|
|
17
17
|
"build:web": "ray build ./example --target=web",
|
|
18
18
|
"build:native": "ray build ./example --target=native",
|
|
19
19
|
"start:native": "ray start ./example -t native --verbose",
|
|
20
|
-
"start:tuya": "ray start ./example
|
|
20
|
+
"start:tuya": "ray start ./example --verbose",
|
|
21
21
|
"start:wechat": "ray start ./example -t wechat --verbose",
|
|
22
22
|
"start:web": "ray start ./example -t web",
|
|
23
23
|
"prepublishOnly": "yarn build",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"@commitlint/cli": "^7.2.1",
|
|
32
32
|
"@commitlint/config-conventional": "^9.0.1",
|
|
33
33
|
"@ray-js/babel-preset-standard": "^0.6.14",
|
|
34
|
-
"@ray-js/cli": "^0.6.14",
|
|
35
34
|
"@ray-js/panel-sdk": "^1.1.4",
|
|
36
|
-
"@ray-js/
|
|
35
|
+
"@ray-js/cli": "^1.4.9",
|
|
36
|
+
"@ray-js/ray": "^1.4.9",
|
|
37
37
|
"@ray-js/rn-transformer-helper": "^0.5.5",
|
|
38
38
|
"@types/node": "^17.0.43",
|
|
39
39
|
"core-js": "^3.19.1",
|