qbs-react-grid 1.1.30 → 1.1.31
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/es/Loader.d.ts +1 -1
- package/es/Loader.js +6 -2
- package/lib/Loader.d.ts +1 -1
- package/lib/Loader.js +6 -2
- package/package.json +1 -1
- package/src/Loader.tsx +18 -13
package/es/Loader.d.ts
CHANGED
|
@@ -8,5 +8,5 @@ interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
renderLoading?: (loading: React.ReactNode) => any;
|
|
9
9
|
colLength?: number;
|
|
10
10
|
}
|
|
11
|
-
declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<
|
|
11
|
+
declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
export default Loader;
|
package/es/Loader.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
var Loader = /*#__PURE__*/React.forwardRef(function (props) {
|
|
2
|
+
var Loader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3
3
|
var loadAnimation = props.loadAnimation,
|
|
4
4
|
loading = props.loading,
|
|
5
5
|
_props$colLength = props.colLength,
|
|
6
6
|
colLength = _props$colLength === void 0 ? 10 : _props$colLength,
|
|
7
|
+
addPrefix = props.addPrefix,
|
|
7
8
|
renderLoading = props.renderLoading;
|
|
8
9
|
var loadingElement = function loadingElement() {
|
|
9
10
|
return /*#__PURE__*/React.createElement("div", {
|
|
11
|
+
ref: ref,
|
|
12
|
+
className: addPrefix('loader-wrapper')
|
|
13
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
10
14
|
className: "skeleton-table"
|
|
11
15
|
}, Array.from({
|
|
12
16
|
length: 15
|
|
@@ -25,7 +29,7 @@ var Loader = /*#__PURE__*/React.forwardRef(function (props) {
|
|
|
25
29
|
})), (keyind + 1) % 5 === 0 && keyind !== 14 && /*#__PURE__*/React.createElement("div", {
|
|
26
30
|
className: "skeleton-divider"
|
|
27
31
|
}));
|
|
28
|
-
}));
|
|
32
|
+
})));
|
|
29
33
|
};
|
|
30
34
|
|
|
31
35
|
// Custom render a loader
|
package/lib/Loader.d.ts
CHANGED
|
@@ -8,5 +8,5 @@ interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
8
8
|
renderLoading?: (loading: React.ReactNode) => any;
|
|
9
9
|
colLength?: number;
|
|
10
10
|
}
|
|
11
|
-
declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<
|
|
11
|
+
declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
12
|
export default Loader;
|
package/lib/Loader.js
CHANGED
|
@@ -4,14 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
exports.__esModule = true;
|
|
5
5
|
exports["default"] = void 0;
|
|
6
6
|
var _react = _interopRequireDefault(require("react"));
|
|
7
|
-
var Loader = /*#__PURE__*/_react["default"].forwardRef(function (props) {
|
|
7
|
+
var Loader = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
8
8
|
var loadAnimation = props.loadAnimation,
|
|
9
9
|
loading = props.loading,
|
|
10
10
|
_props$colLength = props.colLength,
|
|
11
11
|
colLength = _props$colLength === void 0 ? 10 : _props$colLength,
|
|
12
|
+
addPrefix = props.addPrefix,
|
|
12
13
|
renderLoading = props.renderLoading;
|
|
13
14
|
var loadingElement = function loadingElement() {
|
|
14
15
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
16
|
+
ref: ref,
|
|
17
|
+
className: addPrefix('loader-wrapper')
|
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
15
19
|
className: "skeleton-table"
|
|
16
20
|
}, Array.from({
|
|
17
21
|
length: 15
|
|
@@ -30,7 +34,7 @@ var Loader = /*#__PURE__*/_react["default"].forwardRef(function (props) {
|
|
|
30
34
|
})), (keyind + 1) % 5 === 0 && keyind !== 14 && /*#__PURE__*/_react["default"].createElement("div", {
|
|
31
35
|
className: "skeleton-divider"
|
|
32
36
|
}));
|
|
33
|
-
}));
|
|
37
|
+
})));
|
|
34
38
|
};
|
|
35
39
|
|
|
36
40
|
// Custom render a loader
|
package/package.json
CHANGED
package/src/Loader.tsx
CHANGED
|
@@ -11,21 +11,26 @@ interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
11
11
|
colLength?: number;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
const Loader = React.forwardRef((props: LoaderProps) => {
|
|
15
|
-
const { loadAnimation, loading, colLength = 10, renderLoading } = props;
|
|
14
|
+
const Loader = React.forwardRef((props: LoaderProps, ref: React.Ref<HTMLDivElement>) => {
|
|
15
|
+
const { loadAnimation, loading, colLength = 10, addPrefix, renderLoading } = props;
|
|
16
16
|
const loadingElement = () => {
|
|
17
17
|
return (
|
|
18
|
-
<div className=
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
18
|
+
<div ref={ref} className={addPrefix('loader-wrapper')}>
|
|
19
|
+
{/* <div className={addPrefix('loader')}> */}
|
|
20
|
+
{/* <i className={addPrefix('loader-icon')} /> */}
|
|
21
|
+
<div className="skeleton-table">
|
|
22
|
+
{Array.from({ length: 15 }, (_, keyind) => (
|
|
23
|
+
<React.Fragment key={keyind}>
|
|
24
|
+
<div className="skeleton-row">
|
|
25
|
+
{Array.from({ length: colLength }, (_, index) => (
|
|
26
|
+
<div key={index} className="skeleton-cell"></div>
|
|
27
|
+
))}
|
|
28
|
+
</div>
|
|
29
|
+
{(keyind + 1) % 5 === 0 && keyind !== 14 && <div className="skeleton-divider"></div>}
|
|
30
|
+
</React.Fragment>
|
|
31
|
+
))}
|
|
32
|
+
</div>
|
|
33
|
+
{/* </div> */}
|
|
29
34
|
</div>
|
|
30
35
|
);
|
|
31
36
|
};
|