@blocklet/launcher-ux 1.7.56 → 1.7.59
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.
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ProgressMessage;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _smallCircleProgress = _interopRequireDefault(require("../small-circle-progress"));
|
|
15
|
+
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
|
|
18
|
+
const _excluded = ["steps", "stepIndex", "autoGrowth"];
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
+
|
|
26
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
|
+
|
|
28
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
|
+
|
|
30
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
31
|
+
|
|
32
|
+
// autoGrowth 逐渐增长到相应步骤所需的时间
|
|
33
|
+
function ProgressMessage(_ref) {
|
|
34
|
+
let {
|
|
35
|
+
steps,
|
|
36
|
+
stepIndex,
|
|
37
|
+
autoGrowth
|
|
38
|
+
} = _ref,
|
|
39
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
40
|
+
|
|
41
|
+
const [value, setVal] = (0, _react.useState)(0);
|
|
42
|
+
const items = (0, _react.useRef)([]);
|
|
43
|
+
const [textWidth, setTextWidth] = (0, _react.useState)(0);
|
|
44
|
+
|
|
45
|
+
const getClass = index => {
|
|
46
|
+
if (index < stepIndex) {
|
|
47
|
+
return 'message-before';
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (index > stepIndex) {
|
|
51
|
+
return 'message-after';
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return '';
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
58
|
+
const targetItem = items.current[stepIndex];
|
|
59
|
+
setTextWidth(targetItem.clientWidth);
|
|
60
|
+
const currentVal = (stepIndex + 1) / steps.length * 100;
|
|
61
|
+
let timer;
|
|
62
|
+
|
|
63
|
+
if (autoGrowth) {
|
|
64
|
+
const startTime = Date.now();
|
|
65
|
+
timer = setInterval(() => {
|
|
66
|
+
const diffTime = Date.now() - startTime;
|
|
67
|
+
let percentage = diffTime / autoGrowth;
|
|
68
|
+
|
|
69
|
+
if (percentage > 1) {
|
|
70
|
+
percentage = 1;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
setVal((stepIndex + percentage) / steps.length * 100);
|
|
74
|
+
}, 500);
|
|
75
|
+
} else {
|
|
76
|
+
setVal(currentVal);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return () => {
|
|
80
|
+
if (timer) {
|
|
81
|
+
clearInterval(timer);
|
|
82
|
+
}
|
|
83
|
+
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
84
|
+
}, [stepIndex, autoGrowth]);
|
|
85
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({}, rest), {}, {
|
|
86
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
|
|
87
|
+
value: value,
|
|
88
|
+
size: 14
|
|
89
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
90
|
+
className: "progress-message",
|
|
91
|
+
style: {
|
|
92
|
+
width: textWidth
|
|
93
|
+
},
|
|
94
|
+
children: steps.map((text, index) => {
|
|
95
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
96
|
+
className: "progress-message-item ".concat(getClass(index)) // eslint-disable-next-line react/no-array-index-key
|
|
97
|
+
,
|
|
98
|
+
ref: el => {
|
|
99
|
+
items.current[index] = el;
|
|
100
|
+
},
|
|
101
|
+
children: text
|
|
102
|
+
}, "key_".concat(index));
|
|
103
|
+
})
|
|
104
|
+
})]
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
ProgressMessage.propTypes = {
|
|
109
|
+
steps: _propTypes.default.array.isRequired,
|
|
110
|
+
stepIndex: _propTypes.default.number.isRequired,
|
|
111
|
+
autoGrowth: _propTypes.default.number
|
|
112
|
+
};
|
|
113
|
+
ProgressMessage.defaultProps = {
|
|
114
|
+
autoGrowth: 0
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const Container = _styledComponents.default.div.withConfig({
|
|
118
|
+
displayName: "progress-message__Container",
|
|
119
|
+
componentId: "sc-1tg6t5m-0"
|
|
120
|
+
})(["display:flex;width:100%;align-items:center;justify-content:center;.progress-message{position:relative;color:", ";margin-left:8px;font-size:18px;min-height:26px;line-height:26px;font-weight:700;transition:all ease 0.3s;}.progress-message-item{position:absolute;left:0;top:0;white-space:nowrap;transition:all ease 0.3s;z-index:2;&.message-before{transform:translate(-10px,0);opacity:0;z-index:0;pointer-events:none;}&.message-after{transform:translate(10px,0);opacity:0;z-index:0;pointer-events:none;}}"], props => props.theme.palette.primary.main);
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = SmallCircleProgress;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
const _excluded = ["value", "size", "style"];
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
+
|
|
24
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
25
|
+
|
|
26
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
27
|
+
|
|
28
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
29
|
+
|
|
30
|
+
function SmallCircleProgress(_ref) {
|
|
31
|
+
let {
|
|
32
|
+
value,
|
|
33
|
+
size,
|
|
34
|
+
style
|
|
35
|
+
} = _ref,
|
|
36
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
|
|
38
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, _objectSpread(_objectSpread({
|
|
39
|
+
style: _objectSpread({
|
|
40
|
+
width: size,
|
|
41
|
+
height: size
|
|
42
|
+
}, style)
|
|
43
|
+
}, rest), {}, {
|
|
44
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|
|
45
|
+
variant: "determinate",
|
|
46
|
+
role: "progressbar",
|
|
47
|
+
value: 100,
|
|
48
|
+
size: size,
|
|
49
|
+
"aria-label": "decorative progress bar",
|
|
50
|
+
thickness: 10,
|
|
51
|
+
style: {
|
|
52
|
+
color: '#dddddd'
|
|
53
|
+
}
|
|
54
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|
|
55
|
+
variant: "determinate",
|
|
56
|
+
value: value,
|
|
57
|
+
role: "progressbar",
|
|
58
|
+
size: size,
|
|
59
|
+
thickness: 10,
|
|
60
|
+
"aria-label": "main progress bar"
|
|
61
|
+
})]
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
SmallCircleProgress.propTypes = {
|
|
66
|
+
value: _propTypes.default.number.isRequired,
|
|
67
|
+
size: _propTypes.default.number,
|
|
68
|
+
style: _propTypes.default.object
|
|
69
|
+
};
|
|
70
|
+
SmallCircleProgress.defaultProps = {
|
|
71
|
+
size: 10,
|
|
72
|
+
style: {}
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const Content = _styledComponents.default.span.withConfig({
|
|
76
|
+
displayName: "small-circle-progress__Content",
|
|
77
|
+
componentId: "sc-1q02wd1-0"
|
|
78
|
+
})(["display:inline-block;position:relative;> *{position:absolute;left:0;top:0;width:100%;height:100%;}"]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-ux",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.59",
|
|
4
4
|
"description": "Launcher UX lib",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@mui/icons-material": "^5.6.2",
|
|
39
|
+
"@mui/material": "^5.6.4",
|
|
39
40
|
"prop-types": "^15.8.1",
|
|
40
41
|
"react": ">=18.1.0",
|
|
41
42
|
"styled-components": "^5.0.1"
|
|
@@ -45,8 +46,9 @@
|
|
|
45
46
|
"@babel/core": "^7.8.4",
|
|
46
47
|
"@babel/preset-env": "^7.8.4",
|
|
47
48
|
"@babel/preset-react": "^7.8.3",
|
|
49
|
+
"@storybook/react": "^6.5.4",
|
|
48
50
|
"babel-plugin-inline-react-svg": "^2.0.1",
|
|
49
51
|
"babel-plugin-styled-components": "^1.10.7"
|
|
50
52
|
},
|
|
51
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "14edbf56df618b4786ccb98533e8663c461c60ea"
|
|
52
54
|
}
|