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.
@@ -1,181 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _inheritsLoose = require('@babel/runtime/helpers/esm/inheritsLoose');
6
- var React = require('react');
7
- var ReactAlpContext = require('react-alp-context');
8
-
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
10
-
11
- var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
- var ReactAlpContext__default = /*#__PURE__*/_interopDefaultLegacy(ReactAlpContext);
14
-
15
- /*
16
- Example with antd:
17
- import { Progress } from 'antd';
18
-
19
- const LoadingBarComponent = ({ progress }) => (
20
- <Progress
21
- type="line"
22
- status="active"
23
- percent={progress}
24
- showInfo={false}
25
- />
26
- );
27
- */
28
-
29
- /* number between 0 and 1 */
30
-
31
- var random = function random() {
32
- return Math.ceil(Math.random() * 100) / 100;
33
- };
34
- /**
35
- * around:
36
- * at 100ms 20%
37
- * at 1s 40%
38
- * at 2s 60%
39
- * at 3s 80%
40
- */
41
-
42
-
43
- var calculatePercent = function calculatePercent(percent) {
44
- if (percent < 60) return percent + random() * 10 + 5;
45
- 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;
46
- };
47
-
48
- var LoadingBar = /*#__PURE__*/function (_PureComponent) {
49
- _inheritsLoose__default(LoadingBar, _PureComponent);
50
-
51
- function LoadingBar() {
52
- var _this, _len, args, _key;
53
-
54
- for (_len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
55
- args[_key] = arguments[_key];
56
- }
57
-
58
- _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
59
- _this.state = {
60
- loading: true,
61
- hidden: true,
62
- progress: 1
63
- };
64
- return _this;
65
- }
66
-
67
- var _proto = LoadingBar.prototype;
68
-
69
- _proto.componentDidMount = function componentDidMount() {
70
- var _this2 = this;
71
-
72
- var websocket = this.getWebsocket();
73
-
74
- if (websocket.isConnected()) {
75
- this.setState(function (prevState) {
76
- return {
77
- loading: false,
78
- progress: 100,
79
- hidden: prevState.hidden || prevState.progress === 100
80
- };
81
- });
82
- }
83
-
84
- websocket.on('connect', function () {
85
- _this2.setState({
86
- loading: false
87
- });
88
- });
89
- websocket.on('disconnect', function () {
90
- _this2.setState({
91
- loading: true,
92
- progress: 1,
93
- hidden: false
94
- });
95
- });
96
- };
97
-
98
- _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
99
- if (this.state.loading !== prevState.loading) {
100
- if (this.state.loading) {
101
- this.showBar();
102
- } else {
103
- this.hideBar();
104
- }
105
- }
106
- };
107
-
108
- _proto.componentWillUnmount = function componentWillUnmount() {
109
- clearTimeout(this.fadeOffTimeout);
110
- clearTimeout(this.resetTimeout);
111
- clearTimeout(this.first20Timeout);
112
- clearInterval(this.progressTimer);
113
- };
114
-
115
- _proto.getWebsocket = function getWebsocket() {
116
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
117
- return this.context.app.websocket;
118
- };
119
-
120
- _proto.showBar = function showBar() {
121
- var _this3 = this;
122
-
123
- clearTimeout(this.fadeOffTimeout);
124
- clearTimeout(this.resetTimeout);
125
- this.first20Timeout = setTimeout(function () {
126
- _this3.setState({
127
- progress: 20
128
- });
129
- }, 100);
130
- this.progressTimer = setInterval(function () {
131
- _this3.setState(function (prevState) {
132
- var newValue = calculatePercent(prevState.progress);
133
- return {
134
- progress: newValue
135
- };
136
- });
137
- }, 500);
138
- };
139
-
140
- _proto.hideBar = function hideBar() {
141
- var _this4 = this;
142
-
143
- clearTimeout(this.first20Timeout);
144
- clearInterval(this.progressTimer);
145
- this.fadeOffTimeout = setTimeout(function () {
146
- _this4.setState({
147
- progress: 100
148
- });
149
- }, 500);
150
- this.resetTimeout = setTimeout(function () {
151
- _this4.setState({
152
- hidden: true,
153
- progress: 1
154
- });
155
- }, 1000);
156
- };
157
-
158
- _proto.render = function render() {
159
- var LoadingBarComponent = this.props.LoadingBarComponent;
160
- return /*#__PURE__*/React__default.createElement("div", {
161
- hidden: this.state.hidden,
162
- style: {
163
- position: 'fixed',
164
- top: 0,
165
- left: 0,
166
- right: 0,
167
- zIndex: 4,
168
- pointerEvents: 'none'
169
- }
170
- }, /*#__PURE__*/React__default.createElement(LoadingBarComponent, {
171
- progress: this.state.progress
172
- }));
173
- };
174
-
175
- return LoadingBar;
176
- }(React.PureComponent);
177
-
178
- LoadingBar.contextType = ReactAlpContext__default;
179
-
180
- exports.default = LoadingBar;
181
- //# sourceMappingURL=index-browser.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-browser.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","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","PureComponent","contextType","ReactAlpContext"],"mappings":"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"}
@@ -1,147 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import ReactAlpContext from 'react-alp-context';
3
-
4
- /*
5
- Example with antd:
6
- import { Progress } from 'antd';
7
-
8
- const LoadingBarComponent = ({ progress }) => (
9
- <Progress
10
- type="line"
11
- status="active"
12
- percent={progress}
13
- showInfo={false}
14
- />
15
- );
16
- */
17
-
18
- /* number between 0 and 1 */
19
-
20
- const random = () => Math.ceil(Math.random() * 100) / 100;
21
- /**
22
- * around:
23
- * at 100ms 20%
24
- * at 1s 40%
25
- * at 2s 60%
26
- * at 3s 80%
27
- */
28
-
29
-
30
- const calculatePercent = percent => {
31
- if (percent < 60) return percent + random() * 10 + 5;
32
- 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;
33
- };
34
-
35
- class LoadingBar extends PureComponent {
36
- constructor(...args) {
37
- super(...args);
38
- this.state = {
39
- loading: true,
40
- hidden: true,
41
- progress: 1
42
- };
43
- }
44
-
45
- componentDidMount() {
46
- const websocket = this.getWebsocket();
47
-
48
- if (websocket.isConnected()) {
49
- this.setState(prevState => ({
50
- loading: false,
51
- progress: 100,
52
- hidden: prevState.hidden || prevState.progress === 100
53
- }));
54
- }
55
-
56
- websocket.on('connect', () => {
57
- this.setState({
58
- loading: false
59
- });
60
- });
61
- websocket.on('disconnect', () => {
62
- this.setState({
63
- loading: true,
64
- progress: 1,
65
- hidden: false
66
- });
67
- });
68
- }
69
-
70
- componentDidUpdate(prevProps, prevState) {
71
- if (this.state.loading !== prevState.loading) {
72
- if (this.state.loading) {
73
- this.showBar();
74
- } else {
75
- this.hideBar();
76
- }
77
- }
78
- }
79
-
80
- componentWillUnmount() {
81
- clearTimeout(this.fadeOffTimeout);
82
- clearTimeout(this.resetTimeout);
83
- clearTimeout(this.first20Timeout);
84
- clearInterval(this.progressTimer);
85
- }
86
-
87
- getWebsocket() {
88
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
89
- return this.context.app.websocket;
90
- }
91
-
92
- showBar() {
93
- clearTimeout(this.fadeOffTimeout);
94
- clearTimeout(this.resetTimeout);
95
- this.first20Timeout = setTimeout(() => {
96
- this.setState({
97
- progress: 20
98
- });
99
- }, 100);
100
- this.progressTimer = setInterval(() => {
101
- this.setState(prevState => {
102
- const newValue = calculatePercent(prevState.progress);
103
- return {
104
- progress: newValue
105
- };
106
- });
107
- }, 500);
108
- }
109
-
110
- hideBar() {
111
- clearTimeout(this.first20Timeout);
112
- clearInterval(this.progressTimer);
113
- this.fadeOffTimeout = setTimeout(() => {
114
- this.setState({
115
- progress: 100
116
- });
117
- }, 500);
118
- this.resetTimeout = setTimeout(() => {
119
- this.setState({
120
- hidden: true,
121
- progress: 1
122
- });
123
- }, 1000);
124
- }
125
-
126
- render() {
127
- const LoadingBarComponent = this.props.LoadingBarComponent;
128
- return /*#__PURE__*/React.createElement("div", {
129
- hidden: this.state.hidden,
130
- style: {
131
- position: 'fixed',
132
- top: 0,
133
- left: 0,
134
- right: 0,
135
- zIndex: 4,
136
- pointerEvents: 'none'
137
- }
138
- }, /*#__PURE__*/React.createElement(LoadingBarComponent, {
139
- progress: this.state.progress
140
- }));
141
- }
142
-
143
- }
144
- LoadingBar.contextType = ReactAlpContext;
145
-
146
- export default LoadingBar;
147
- //# sourceMappingURL=index-browsermodern-dev.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-browsermodern-dev.es.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","position","top","left","right","zIndex","pointerEvents","contextType","ReactAlpContext"],"mappings":"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"}
@@ -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-dev.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-node12-dev.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,147 +0,0 @@
1
- import React, { PureComponent } from 'react';
2
- import ReactAlpContext from 'react-alp-context';
3
-
4
- /*
5
- Example with antd:
6
- import { Progress } from 'antd';
7
-
8
- const LoadingBarComponent = ({ progress }) => (
9
- <Progress
10
- type="line"
11
- status="active"
12
- percent={progress}
13
- showInfo={false}
14
- />
15
- );
16
- */
17
-
18
- /* number between 0 and 1 */
19
-
20
- const random = () => Math.ceil(Math.random() * 100) / 100;
21
- /**
22
- * around:
23
- * at 100ms 20%
24
- * at 1s 40%
25
- * at 2s 60%
26
- * at 3s 80%
27
- */
28
-
29
-
30
- const calculatePercent = percent => {
31
- if (percent < 60) return percent + random() * 10 + 5;
32
- 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;
33
- };
34
-
35
- class LoadingBar extends PureComponent {
36
- constructor(...args) {
37
- super(...args);
38
- this.state = {
39
- loading: true,
40
- hidden: true,
41
- progress: 1
42
- };
43
- }
44
-
45
- componentDidMount() {
46
- const websocket = this.getWebsocket();
47
-
48
- if (websocket.isConnected()) {
49
- this.setState(prevState => ({
50
- loading: false,
51
- progress: 100,
52
- hidden: prevState.hidden || prevState.progress === 100
53
- }));
54
- }
55
-
56
- websocket.on('connect', () => {
57
- this.setState({
58
- loading: false
59
- });
60
- });
61
- websocket.on('disconnect', () => {
62
- this.setState({
63
- loading: true,
64
- progress: 1,
65
- hidden: false
66
- });
67
- });
68
- }
69
-
70
- componentDidUpdate(prevProps, prevState) {
71
- if (this.state.loading !== prevState.loading) {
72
- if (this.state.loading) {
73
- this.showBar();
74
- } else {
75
- this.hideBar();
76
- }
77
- }
78
- }
79
-
80
- componentWillUnmount() {
81
- clearTimeout(this.fadeOffTimeout);
82
- clearTimeout(this.resetTimeout);
83
- clearTimeout(this.first20Timeout);
84
- clearInterval(this.progressTimer);
85
- }
86
-
87
- getWebsocket() {
88
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
89
- return this.context.app.websocket;
90
- }
91
-
92
- showBar() {
93
- clearTimeout(this.fadeOffTimeout);
94
- clearTimeout(this.resetTimeout);
95
- this.first20Timeout = setTimeout(() => {
96
- this.setState({
97
- progress: 20
98
- });
99
- }, 100);
100
- this.progressTimer = setInterval(() => {
101
- this.setState(prevState => {
102
- const newValue = calculatePercent(prevState.progress);
103
- return {
104
- progress: newValue
105
- };
106
- });
107
- }, 500);
108
- }
109
-
110
- hideBar() {
111
- clearTimeout(this.first20Timeout);
112
- clearInterval(this.progressTimer);
113
- this.fadeOffTimeout = setTimeout(() => {
114
- this.setState({
115
- progress: 100
116
- });
117
- }, 500);
118
- this.resetTimeout = setTimeout(() => {
119
- this.setState({
120
- hidden: true,
121
- progress: 1
122
- });
123
- }, 1000);
124
- }
125
-
126
- render() {
127
- const LoadingBarComponent = this.props.LoadingBarComponent;
128
- return /*#__PURE__*/React.createElement("div", {
129
- hidden: this.state.hidden,
130
- style: {
131
- position: 'fixed',
132
- top: 0,
133
- left: 0,
134
- right: 0,
135
- zIndex: 4,
136
- pointerEvents: 'none'
137
- }
138
- }, /*#__PURE__*/React.createElement(LoadingBarComponent, {
139
- progress: this.state.progress
140
- }));
141
- }
142
-
143
- }
144
- LoadingBar.contextType = ReactAlpContext;
145
-
146
- export default LoadingBar;
147
- //# sourceMappingURL=index-node12-dev.mjs.map