Skip to content

Commit 04dbea6

Browse files
barisatesbarisates
authored
Merge pull request #1 from TRA-Tech/react18-update
Upgraded to react 18
2 parents 412f1d4 + 12c895c commit 04dbea6

File tree

7 files changed

+159
-200
lines changed

7 files changed

+159
-200
lines changed

‎demo/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"react": "^16.9.0",
7-
"react-dom": "^16.9.0",
6+
"react": "^18.2.0",
7+
"react-dom": "^18.2.0",
88
"react-loading-ui": "latest",
99
"react-scripts": "3.1.1"
1010
},

‎demo/src/App.js

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,55 @@
1-
import React, { Component } from 'react';
1+
import React, { useRef, useState } from 'react';
22
import { Loading, Progress, SetDefault } from 'react-loading-ui'
33
import './App.css';
44

55
let interval = null;
66

7-
class App extends Component {
8-
constructor() {
9-
super()
7+
const App =() =>{
8+
const progress = useRef(1);
9+
const [theme, setTheme] = useState("dark");
1010

11-
this.state = {
12-
progress: 1,
13-
theme: "dark"
14-
}
15-
16-
}
17-
DefaultLoading() {
11+
const DefaultLoading = () => {
1812
Loading();
1913
setTimeout(() => { Loading() }, 3000);
2014
}
21-
TopbarLoading() {
15+
const TopbarLoading = () => {
2216
Loading({ topBar: true });
2317
setTimeout(() => { Loading() }, 3000);
2418
}
25-
LoadingProgress() {
26-
19+
const LoadingProgress = () => {
2720
Loading({
2821
progress: true,
2922
progressedClose: true
3023
});
3124

3225
interval = setInterval(() => {
33-
34-
this.setState(
35-
{ progress: this.state.progress + 4 },
36-
() => {
37-
38-
// Set Progress Value
39-
Progress(this.state.progress);
40-
41-
if (this.state.progress >= 100) {
42-
this.setState({ progress: 0 });
43-
clearInterval(interval);
44-
}
45-
46-
47-
});
48-
26+
progress.current = progress.current + 4;
27+
Progress(progress.current);
28+
if (progress.current >= 100) {
29+
progress.current = 0;
30+
clearInterval(interval);
31+
}
4932
}, 100);
5033

5134
}
52-
render() {
5335
return (
5436
<div className="App">
5537
<header className="App-header">
5638
<h5 className="mb-3">React Loaing Component</h5>
5739
<div>
58-
<button type="button" className="btn btn-sm btn-dark mr-4" onClick={(e) => this.DefaultLoading()}>Show Loading</button>
59-
<button type="button" className="btn btn-sm btn-dark mr-4" onClick={(e) => this.TopbarLoading()}>Show Top Bar Loading</button>
60-
<button type="button" className="btn btn-sm btn-dark" onClick={(e) => this.LoadingProgress()}>Show Progress</button> <br />
61-
<button type="button" className="btn btn-sm btn-light" onClick={(e) => {
62-
SetDefault({ theme: this.state.theme });
63-
this.setState({ theme: (this.state.theme === "light" ? "dark" : "light") })
64-
}}>Set Default Theme: {this.state.theme}</button>
40+
<button type="button" className="btn btn-sm btn-dark mr-4" onClick={DefaultLoading}>Show Loading</button>
41+
<button type="button" className="btn btn-sm btn-dark mr-4" onClick={TopbarLoading}>Show Top Bar Loading</button>
42+
<button type="button" className="btn btn-sm btn-dark" onClick={LoadingProgress}>Show Progress</button> <br />
43+
<button type="button" className="btn btn-sm btn-light" onClick={() => {
44+
SetDefault({ theme: theme });
45+
setTheme(theme === "light" ? "dark" : "light")
46+
}}>Set Default Theme: {theme}</button>
6547
</div>
6648
<div className="author">
6749
<a href="https://github.com/barisates" target="_blank" rel="noopener noreferrer">barisates</a>
6850
</div>
6951
</header>
7052
</div>)
71-
}
7253
}
7354

7455

‎demo/src/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import App from './App';
55
import * as serviceWorker from './serviceWorker';
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
ReactDOM.createRoot(document.getElementById('root')).render(
8+
<App />,
9+
);
810

911
// If you want your app to work offline and load faster, you can change
1012
// unregister() to register() below. Note this comes with some pitfalls.

‎index.js

Lines changed: 90 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
55
});
66
exports.SetDefault = SetDefault;
77
exports.Loading = Loading;
8+
exports.ShowLoading = ShowLoading;
9+
exports.HideLoading = HideLoading;
810
exports.Progress = Progress;
911

1012
var _react = _interopRequireWildcard(require("react"));
1113

12-
var _reactDom = require("react-dom");
14+
var _client = _interopRequireDefault(require("react-dom/client"));
1315

1416
require("./index.css");
1517

18+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19+
1620
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
1721

1822
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,23 +27,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
2327

2428
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; }
2529

26-
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
27-
28-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
29-
30-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
31-
32-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
33-
34-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
30+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
3531

36-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
32+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
3733

38-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
34+
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
3935

40-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
41-
42-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
36+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
4337

4438
var defaultProps = {
4539
title: "Page Loading",
@@ -54,6 +48,7 @@ var defaultProps = {
5448
};
5549
var Props = defaultProps;
5650
var Element = {
51+
root: null,
5752
Create: function Create(props) {
5853
var div = document.getElementById('loading-ui');
5954

@@ -63,101 +58,71 @@ var Element = {
6358
document.body.appendChild(div);
6459
}
6560

66-
(0, _reactDom.render)(_react["default"].createElement(LoadingComponent, props), div);
61+
Element.root = _client["default"].createRoot(div);
62+
Element.root.render(_react["default"].createElement(LoadingComponent, props));
6763
},
6864
Remove: function Remove() {
6965
var div = document.getElementById('loading-ui');
70-
(0, _reactDom.unmountComponentAtNode)(div);
66+
Element.root.unmount();
7167
div.parentNode.removeChild(div);
7268
}
7369
};
7470

75-
var LoadingComponent =
76-
/*#__PURE__*/
77-
function (_Component) {
78-
_inherits(LoadingComponent, _Component);
79-
80-
function LoadingComponent(props) {
81-
var _this;
82-
83-
_classCallCheck(this, LoadingComponent);
84-
85-
_this = _possibleConstructorReturn(this, _getPrototypeOf(LoadingComponent).call(this, props));
86-
_this.state = {
87-
width: "0%"
88-
};
89-
return _this;
90-
}
91-
92-
_createClass(LoadingComponent, [{
93-
key: "componentDidMount",
94-
value: function componentDidMount() {
95-
var _this2 = this;
96-
97-
setTimeout(function () {
98-
var percentage = Math.random() * 30 + 10;
99-
100-
_this2.TopBarProgress(percentage);
101-
}, 100);
71+
var LoadingComponent = function LoadingComponent(_ref) {
72+
var theme = _ref.theme,
73+
title = _ref.title,
74+
text = _ref.text,
75+
progress = _ref.progress,
76+
progressValue = _ref.progressValue,
77+
topBar = _ref.topBar,
78+
topBarColor = _ref.topBarColor;
79+
80+
var _useState = (0, _react.useState)("0%"),
81+
_useState2 = _slicedToArray(_useState, 2),
82+
width = _useState2[0],
83+
setWidth = _useState2[1];
84+
85+
var TopBarProgress = (0, _react.useCallback)(function (percentage) {
86+
setWidth("".concat(percentage, "%"));
87+
setTimeout(function () {
88+
var per = Math.random() * ((100 - percentage) / 2) + percentage;
89+
TopBarProgress(per);
90+
}, 500);
91+
}, []);
92+
(0, _react.useEffect)(function () {
93+
setTimeout(function () {
94+
var percentage = Math.random() * 30 + 10;
95+
TopBarProgress(percentage);
96+
}, 100);
97+
}, [TopBarProgress]);
98+
return _react["default"].createElement("div", {
99+
className: "loading-ui-overlay ".concat(theme, " ").concat(topBar && 'topbar')
100+
}, topBar ? _react["default"].createElement("div", {
101+
className: "loading-ui-topbar",
102+
id: "loading-ui-topbar",
103+
style: {
104+
width: width,
105+
backgroundColor: topBarColor
102106
}
103-
}, {
104-
key: "TopBarProgress",
105-
value: function TopBarProgress(percentage) {
106-
var _this3 = this;
107-
108-
this.setState({
109-
width: "".concat(percentage, "%")
110-
}, function () {
111-
setTimeout(function () {
112-
var per = Math.random() * ((100 - percentage) / 2) + percentage;
113-
114-
_this3.TopBarProgress(per);
115-
}, 500);
116-
});
107+
}) : _react["default"].createElement("div", {
108+
className: "loading-ui-wrapper"
109+
}, _react["default"].createElement("div", {
110+
className: "loading-ui-body"
111+
}, _react["default"].createElement("h4", {
112+
className: "loading-ui-title"
113+
}, title), _react["default"].createElement("p", {
114+
className: "loading-ui-text"
115+
}, text), progress ? _react["default"].createElement("div", {
116+
className: "loading-ui-progress"
117+
}, _react["default"].createElement("div", {
118+
className: "loading-ui-progress-bar",
119+
style: {
120+
width: progressValue + "%"
117121
}
118-
}, {
119-
key: "render",
120-
value: function render() {
121-
var _this$props = this.props,
122-
theme = _this$props.theme,
123-
title = _this$props.title,
124-
text = _this$props.text,
125-
progress = _this$props.progress,
126-
progressValue = _this$props.progressValue,
127-
topBar = _this$props.topBar,
128-
topBarColor = _this$props.topBarColor;
129-
return _react["default"].createElement("div", {
130-
className: "loading-ui-overlay ".concat(theme, " ").concat(topBar && 'topbar')
131-
}, topBar ? _react["default"].createElement("div", {
132-
className: "loading-ui-topbar",
133-
id: "loading-ui-topbar",
134-
style: {
135-
width: this.state.width,
136-
backgroundColor: topBarColor
137-
}
138-
}) : _react["default"].createElement("div", {
139-
className: "loading-ui-wrapper"
140-
}, _react["default"].createElement("div", {
141-
className: "loading-ui-body"
142-
}, _react["default"].createElement("h4", {
143-
className: "loading-ui-title"
144-
}, title), _react["default"].createElement("p", {
145-
className: "loading-ui-text"
146-
}, text), progress ? _react["default"].createElement("div", {
147-
className: "loading-ui-progress"
148-
}, _react["default"].createElement("div", {
149-
className: "loading-ui-progress-bar",
150-
style: {
151-
width: progressValue + "%"
152-
}
153-
})) : _react["default"].createElement("div", {
154-
className: "loading-ui-spinner"
155-
}))));
156-
}
157-
}]);
158-
159-
return LoadingComponent;
160-
}(_react.Component);
122+
})) : _react["default"].createElement("div", {
123+
className: "loading-ui-spinner"
124+
}))));
125+
};
161126

162127
LoadingComponent.defaultProps = defaultProps;
163128
/**
@@ -201,6 +166,29 @@ function Loading(props) {
201166
Element.Remove();
202167
}
203168
}
169+
/**
170+
* @param {object} props
171+
* @param {string} [props.title]
172+
* @param {string} [props.text]
173+
* @param {bool} [props.progress]
174+
* @param {boolean} [props.progressedClose]
175+
* @param {string} [props.theme]
176+
* @param {bool} [props.topBar]
177+
* @param {string} [props.topBarColor]
178+
*/
179+
180+
181+
function ShowLoading(props) {
182+
if (!document.getElementById('loading-ui')) {
183+
Loading(props);
184+
}
185+
}
186+
187+
function HideLoading() {
188+
if (document.getElementById('loading-ui')) {
189+
Loading();
190+
}
191+
}
204192
/**
205193
* @param {number} progress
206194
*/
@@ -211,7 +199,7 @@ function Progress(progress) {
211199

212200
if (div && progress < 100) {
213201
Props.progressValue = progress;
214-
(0, _reactDom.render)(_react["default"].createElement(LoadingComponent, Props), div);
202+
Element.root.render(_react["default"].createElement(LoadingComponent, Props));
215203
} else if (progress >= 100 && Props.progressedClose && div) {
216204
Element.Remove();
217205
}

0 commit comments

Comments
 (0)