react-alp-loading-bar 3.1.3 → 4.0.3
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/.eslintrc.json +1 -1
- package/CHANGELOG.md +48 -0
- package/dist/index-browser.es.js +17 -31
- package/dist/index-browser.es.js.map +1 -1
- package/dist/index-browsermodern.es.js +23 -40
- package/dist/index-browsermodern.es.js.map +1 -1
- package/dist/{index-node12.mjs → index-node14.mjs} +24 -41
- package/dist/index-node14.mjs.map +1 -0
- package/dist/index.d.ts +6 -8
- package/dist/index.d.ts.map +1 -1
- package/package.json +28 -50
- package/rollup.config.mjs +5 -0
- package/src/.eslintrc.json +19 -2
- package/src/index.tsx +13 -15
- package/tsconfig.eslint.json +7 -0
- package/dist/index-browser-dev.cjs.js +0 -181
- package/dist/index-browser-dev.cjs.js.map +0 -1
- package/dist/index-browser-dev.es.js +0 -171
- package/dist/index-browser-dev.es.js.map +0 -1
- package/dist/index-browser.cjs.js +0 -181
- package/dist/index-browser.cjs.js.map +0 -1
- package/dist/index-browsermodern-dev.es.js +0 -147
- package/dist/index-browsermodern-dev.es.js.map +0 -1
- package/dist/index-node12-dev.cjs.js +0 -156
- package/dist/index-node12-dev.cjs.js.map +0 -1
- package/dist/index-node12-dev.mjs +0 -147
- package/dist/index-node12-dev.mjs.map +0 -1
- package/dist/index-node12.cjs.js +0 -156
- package/dist/index-node12.cjs.js.map +0 -1
- package/dist/index-node12.mjs.map +0 -1
- package/index.js +0 -6
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-node12-dev.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n context!: React.ContextType<typeof ReactAlpContext>;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: any;\n\n resetTimeout?: any;\n\n first20Timeout?: any;\n\n progressTimer?: any;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return this.context.app.websocket;\n }\n\n private showBar(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","clearTimeout","fadeOffTimeout","resetTimeout","first20Timeout","clearInterval","progressTimer","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents","contextType","ReactAlpContext"],"mappings":"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"}
|
package/dist/index-node12.cjs.js
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const React = require('react');
|
|
6
|
-
const ReactAlpContext = require('react-alp-context');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
|
|
9
|
-
|
|
10
|
-
const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
const ReactAlpContext__default = /*#__PURE__*/_interopDefaultLegacy(ReactAlpContext);
|
|
12
|
-
|
|
13
|
-
/*
|
|
14
|
-
Example with antd:
|
|
15
|
-
import { Progress } from 'antd';
|
|
16
|
-
|
|
17
|
-
const LoadingBarComponent = ({ progress }) => (
|
|
18
|
-
<Progress
|
|
19
|
-
type="line"
|
|
20
|
-
status="active"
|
|
21
|
-
percent={progress}
|
|
22
|
-
showInfo={false}
|
|
23
|
-
/>
|
|
24
|
-
);
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
/* number between 0 and 1 */
|
|
28
|
-
|
|
29
|
-
const random = () => Math.ceil(Math.random() * 100) / 100;
|
|
30
|
-
/**
|
|
31
|
-
* around:
|
|
32
|
-
* at 100ms 20%
|
|
33
|
-
* at 1s 40%
|
|
34
|
-
* at 2s 60%
|
|
35
|
-
* at 3s 80%
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const calculatePercent = percent => {
|
|
40
|
-
if (percent < 60) return percent + random() * 10 + 5;
|
|
41
|
-
if (percent < 70) return percent + random() * 10 + 3;else if (percent < 80) return percent + random() + 5;else if (percent < 90) return percent + random() + 1;else if (percent < 95) return percent + 0.1;else return percent;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
class LoadingBar extends React.PureComponent {
|
|
45
|
-
constructor(...args) {
|
|
46
|
-
super(...args);
|
|
47
|
-
this.state = {
|
|
48
|
-
loading: true,
|
|
49
|
-
hidden: true,
|
|
50
|
-
progress: 1
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
componentDidMount() {
|
|
55
|
-
const websocket = this.getWebsocket();
|
|
56
|
-
|
|
57
|
-
if (websocket.isConnected()) {
|
|
58
|
-
this.setState(prevState => ({
|
|
59
|
-
loading: false,
|
|
60
|
-
progress: 100,
|
|
61
|
-
hidden: prevState.hidden || prevState.progress === 100
|
|
62
|
-
}));
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
websocket.on('connect', () => {
|
|
66
|
-
this.setState({
|
|
67
|
-
loading: false
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
websocket.on('disconnect', () => {
|
|
71
|
-
this.setState({
|
|
72
|
-
loading: true,
|
|
73
|
-
progress: 1,
|
|
74
|
-
hidden: false
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
componentDidUpdate(prevProps, prevState) {
|
|
80
|
-
if (this.state.loading !== prevState.loading) {
|
|
81
|
-
if (this.state.loading) {
|
|
82
|
-
this.showBar();
|
|
83
|
-
} else {
|
|
84
|
-
this.hideBar();
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
componentWillUnmount() {
|
|
90
|
-
clearTimeout(this.fadeOffTimeout);
|
|
91
|
-
clearTimeout(this.resetTimeout);
|
|
92
|
-
clearTimeout(this.first20Timeout);
|
|
93
|
-
clearInterval(this.progressTimer);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
getWebsocket() {
|
|
97
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
|
|
98
|
-
return this.context.app.websocket;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
showBar() {
|
|
102
|
-
clearTimeout(this.fadeOffTimeout);
|
|
103
|
-
clearTimeout(this.resetTimeout);
|
|
104
|
-
this.first20Timeout = setTimeout(() => {
|
|
105
|
-
this.setState({
|
|
106
|
-
progress: 20
|
|
107
|
-
});
|
|
108
|
-
}, 100);
|
|
109
|
-
this.progressTimer = setInterval(() => {
|
|
110
|
-
this.setState(prevState => {
|
|
111
|
-
const newValue = calculatePercent(prevState.progress);
|
|
112
|
-
return {
|
|
113
|
-
progress: newValue
|
|
114
|
-
};
|
|
115
|
-
});
|
|
116
|
-
}, 500);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
hideBar() {
|
|
120
|
-
clearTimeout(this.first20Timeout);
|
|
121
|
-
clearInterval(this.progressTimer);
|
|
122
|
-
this.fadeOffTimeout = setTimeout(() => {
|
|
123
|
-
this.setState({
|
|
124
|
-
progress: 100
|
|
125
|
-
});
|
|
126
|
-
}, 500);
|
|
127
|
-
this.resetTimeout = setTimeout(() => {
|
|
128
|
-
this.setState({
|
|
129
|
-
hidden: true,
|
|
130
|
-
progress: 1
|
|
131
|
-
});
|
|
132
|
-
}, 1000);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
render() {
|
|
136
|
-
const LoadingBarComponent = this.props.LoadingBarComponent;
|
|
137
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
138
|
-
hidden: this.state.hidden,
|
|
139
|
-
style: {
|
|
140
|
-
position: 'fixed',
|
|
141
|
-
top: 0,
|
|
142
|
-
left: 0,
|
|
143
|
-
right: 0,
|
|
144
|
-
zIndex: 4,
|
|
145
|
-
pointerEvents: 'none'
|
|
146
|
-
}
|
|
147
|
-
}, /*#__PURE__*/React__default.createElement(LoadingBarComponent, {
|
|
148
|
-
progress: this.state.progress
|
|
149
|
-
}));
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
}
|
|
153
|
-
LoadingBar.contextType = ReactAlpContext__default;
|
|
154
|
-
|
|
155
|
-
exports.default = LoadingBar;
|
|
156
|
-
//# sourceMappingURL=index-node12.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-node12.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n context!: React.ContextType<typeof ReactAlpContext>;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: any;\n\n resetTimeout?: any;\n\n first20Timeout?: any;\n\n progressTimer?: any;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return this.context.app.websocket;\n }\n\n private showBar(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","clearTimeout","fadeOffTimeout","resetTimeout","first20Timeout","clearInterval","progressTimer","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","React","position","top","left","right","zIndex","pointerEvents","contextType","ReactAlpContext"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-node12.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n context!: React.ContextType<typeof ReactAlpContext>;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: any;\n\n resetTimeout?: any;\n\n first20Timeout?: any;\n\n progressTimer?: any;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return this.context.app.websocket;\n }\n\n private showBar(): void {\n clearTimeout(this.fadeOffTimeout);\n clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n clearTimeout(this.first20Timeout);\n clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","clearTimeout","fadeOffTimeout","resetTimeout","first20Timeout","clearInterval","progressTimer","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","position","top","left","right","zIndex","pointerEvents","contextType","ReactAlpContext"],"mappings":"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"}
|