react-loading-skeleton - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

dist/index.js

@@ -42,3 +42,3 @@ 'use strict';
 function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
-    var _a, _b;
+    var _a, _b, _c;
     const contextStyleOptions = React__default["default"].useContext(SkeletonThemeContext);
@@ -69,6 +69,20 @@ const propsStyleOptions = { ...originalPropsStyleOptions };
     const elements = [];
-    // Without the <br />, the skeleton lines will all run together if
-    // `width` is specified
-    for (let i = 0; i < count; i++) {
-        const skeletonSpan = (React__default["default"].createElement("span", { className: className, style: style, key: i }, "\u200C"));
+    const countCeil = Math.ceil(count);
+    for (let i = 0; i < countCeil; i++) {
+        let thisStyle = style;
+        if (countCeil > count && i === countCeil - 1) {
+            // count is not an integer and we've reached the last iteration of
+            // the loop, so add a "fractional" skeleton.
+            //
+            // For example, if count is 3.5, we've already added 3 full
+            // skeletons, so now we add one more skeleton that is 0.5 times the
+            // original width.
+            const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : '100%'; // 100% is the default since that's what's in the CSS
+            const fractionalPart = count % 1;
+            const fractionalWidth = typeof width === 'number'
+                ? width * fractionalPart
+                : `calc(${width} * ${fractionalPart})`;
+            thisStyle = { ...thisStyle, width: fractionalWidth };
+        }
+        const skeletonSpan = (React__default["default"].createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
         if (inline) {
@@ -78,2 +92,4 @@ elements.push(skeletonSpan);
         else {
+            // Without the <br />, the skeleton lines will all run together if
+            // `width` is specified
             elements.push(React__default["default"].createElement(React__default["default"].Fragment, { key: i },
@@ -84,3 +100,3 @@ skeletonSpan,
     }
-    return (React__default["default"].createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_b = styleOptions.enableAnimation) !== null && _b !== void 0 ? _b : defaultEnableAnimation }, Wrapper
+    return (React__default["default"].createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
         ? elements.map((el, i) => React__default["default"].createElement(Wrapper, { key: i }, el))
@@ -87,0 +103,0 @@ : elements));

dist/Skeleton.d.ts

@@ -1,6 +0,6 @@
-import React, { CSSProperties, ReactElement } from 'react';
+import React, { CSSProperties, PropsWithChildren, ReactElement } from 'react';
 import { SkeletonStyleProps } from './SkeletonStyleProps';
 export interface SkeletonProps extends SkeletonStyleProps {
     count?: number;
-    wrapper?: React.FunctionComponent;
+    wrapper?: React.FunctionComponent<PropsWithChildren<unknown>>;
     className?: string;
@@ -7,0 +7,0 @@ containerClassName?: string;

package.json

 {
     "name": "react-loading-skeleton",
-    "version": "3.0.3",
+    "version": "3.1.0",
     "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
@@ -52,39 +52,39 @@ "keywords": [
     "devDependencies": {
-        "@babel/core": "^7.16.0",
-        "@rollup/plugin-typescript": "^8.3.0",
-        "@storybook/addon-essentials": "^6.3.12",
-        "@storybook/addon-links": "^6.3.12",
-        "@storybook/react": "^6.3.12",
-        "@swc/core": "^1.2.111",
-        "@swc/jest": "^0.2.5",
-        "@testing-library/jest-dom": "^5.15.0",
-        "@testing-library/react": "^12.1.2",
-        "@types/react": "^17.0.35",
-        "@types/react-dom": "^17.0.11",
-        "@typescript-eslint/eslint-plugin": "^5.4.0",
-        "@typescript-eslint/parser": "^5.4.0",
-        "babel-loader": "^8.2.3",
-        "eslint": "^8.2.0",
-        "eslint-config-airbnb": "^19.0.0",
-        "eslint-config-airbnb-typescript": "^16.0.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-jest": "^25.2.4",
-        "eslint-plugin-jest-dom": "^3.9.2",
+        "@babel/core": "^7.17.9",
+        "@rollup/plugin-typescript": "^8.3.1",
+        "@storybook/addon-essentials": "^6.4.21",
+        "@storybook/addon-links": "^6.4.21",
+        "@storybook/react": "^6.4.21",
+        "@swc/core": "^1.2.165",
+        "@swc/jest": "^0.2.20",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.0.0",
+        "@types/react": "^18.0.1",
+        "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.18.0",
+        "@typescript-eslint/parser": "^5.18.0",
+        "babel-loader": "^8.2.4",
+        "eslint": "^8.13.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jest": "^26.1.4",
+        "eslint-plugin-jest-dom": "^4.0.1",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.27.1",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-testing-library": "^5.0.0",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.4.0",
+        "eslint-plugin-testing-library": "^5.2.1",
         "husky": "^7.0.4",
-        "jest": "^27.3.1",
-        "lint-staged": "^12.0.3",
-        "prettier": "^2.4.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "jest": "^27.5.1",
+        "lint-staged": "^12.3.7",
+        "prettier": "^2.6.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "rimraf": "^3.0.2",
-        "rollup": "^2.60.0",
+        "rollup": "^2.70.1",
         "rollup-plugin-copy": "^3.4.0",
         "tslib": "^2.3.1",
-        "typescript": "^4.5.2",
-        "webpack": "^5.64.2"
+        "typescript": "^4.6.3",
+        "webpack": "^5.72.0"
     },
@@ -94,3 +94,3 @@ "peerDependencies": {
     },
-    "packageManager": "yarn@3.1.0"
+    "packageManager": "yarn@3.2.0"
 }

README.md

@@ -111,7 +111,12 @@ <div align="center">
             <td><code>count?: number</code></td>
-            <td>The number of lines of skeletons to render.</td>
+            <td>
+                The number of lines of skeletons to render. If 
+                <code>count</code> is a decimal number like 3.5,
+                three full skeletons and one half-width skeleton will be
+                rendered.
+            </td>
             <td><code>1</code></td>
         </tr>
         <tr>
-            <td><code>wrapper?: React.FunctionComponent</code></td>
+            <td><code>wrapper?: React.FunctionComponent <br> &lt;PropsWithChildren&lt;unknown&gt;&gt;</code></td>
             <td>
@@ -118,0 +123,0 @@ A custom wrapper component that goes around the individual skeleton

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25192

increased by9.19%

Lines of code

273

increased by13.28%

Number of lines in readme file

300

increased by1.69%

No dependency changes