qbs-react-grid 1.1.30 → 1.1.32

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.
Files changed (6) hide show
  1. package/es/Loader.d.ts +1 -1
  2. package/es/Loader.js +9 -2
  3. package/lib/Loader.d.ts +1 -1
  4. package/lib/Loader.js +9 -2
  5. package/package.json +1 -1
  6. package/src/Loader.tsx +20 -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<unknown>>;
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
@@ -20,12 +24,15 @@ var Loader = /*#__PURE__*/React.forwardRef(function (props) {
20
24
  }, function (_, index) {
21
25
  return /*#__PURE__*/React.createElement("div", {
22
26
  key: index,
27
+ style: {
28
+ minWidth: window.innerWidth / colLength
29
+ },
23
30
  className: "skeleton-cell"
24
31
  });
25
32
  })), (keyind + 1) % 5 === 0 && keyind !== 14 && /*#__PURE__*/React.createElement("div", {
26
33
  className: "skeleton-divider"
27
34
  }));
28
- }));
35
+ })));
29
36
  };
30
37
 
31
38
  // 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<unknown>>;
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
@@ -25,12 +29,15 @@ var Loader = /*#__PURE__*/_react["default"].forwardRef(function (props) {
25
29
  }, function (_, index) {
26
30
  return /*#__PURE__*/_react["default"].createElement("div", {
27
31
  key: index,
32
+ style: {
33
+ minWidth: window.innerWidth / colLength
34
+ },
28
35
  className: "skeleton-cell"
29
36
  });
30
37
  })), (keyind + 1) % 5 === 0 && keyind !== 14 && /*#__PURE__*/_react["default"].createElement("div", {
31
38
  className: "skeleton-divider"
32
39
  }));
33
- }));
40
+ })));
34
41
  };
35
42
 
36
43
  // Custom render a loader
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.1.30",
3
+ "version": "1.1.32",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/Loader.tsx CHANGED
@@ -11,21 +11,28 @@ 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="skeleton-table">
19
- {Array.from({ length: 15 }, (_, keyind) => (
20
- <React.Fragment key={keyind}>
21
- <div className="skeleton-row">
22
- {Array.from({ length: colLength }, (_, index) => (
23
- <div key={index} className="skeleton-cell"></div>
24
- ))}
25
- </div>
26
- {(keyind + 1) % 5 === 0 && keyind !== 14 && <div className="skeleton-divider"></div>}
27
- </React.Fragment>
28
- ))}
18
+ <div ref={ref} className={addPrefix('loader-wrapper')}>
19
+ <div className="skeleton-table">
20
+ {Array.from({ length: 15 }, (_, keyind) => (
21
+ <React.Fragment key={keyind}>
22
+ <div className="skeleton-row">
23
+ {Array.from({ length: colLength }, (_, index) => (
24
+ <div
25
+ key={index}
26
+ style={{ minWidth: window.innerWidth / colLength }}
27
+ className="skeleton-cell"
28
+ ></div>
29
+ ))}
30
+ </div>
31
+ {(keyind + 1) % 5 === 0 && keyind !== 14 && <div className="skeleton-divider"></div>}
32
+ </React.Fragment>
33
+ ))}
34
+ </div>
35
+ {/* </div> */}
29
36
  </div>
30
37
  );
31
38
  };