@trainline/react-skeletor - npm Package Compare versions

Comparing version 0.1.8 to 1.0.0

lib/createSkeletonElement.d.ts

 import * as React from 'react';
-export declare const createSkeletonElement: <P, T extends React.Component<P, React.ComponentState>, C extends React.ComponentClass<P>>(type: string | React.ClassType<P, T, C>, pendingStyle?: string | React.CSSProperties | (() => React.CSSProperties) | undefined) => React.StatelessComponent<any>;
+export interface InjectedProps {
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    'aria-hidden'?: boolean;
+}
+export declare const createSkeletonElement: <T = any>(type: string | React.StatelessComponent<T>, pendingStyle?: string | React.CSSProperties | (() => string | React.CSSProperties) | undefined) => React.StatelessComponent<T>;

lib/createSkeletonElement.js

@@ -18,6 +18,10 @@ "use strict";
 var createStyle = function (styles) {
-    return styles.filter(Boolean).reduce(function (acc, next) { return (__assign({}, acc, next)); }, {});
+    return styles
+        .filter(function (style) { return !!style; })
+        .reduce(function (acc, next) { return (__assign({}, acc, next)); }, {});
 };
 var createClassName = function (classnames) {
-    return classnames.filter(Boolean).join(' ');
+    return classnames
+        .filter(Boolean)
+        .join(' ');
 };
@@ -33,7 +37,5 @@ var unwrapStyle = function (style) {
 };
+// tslint:disable-next-line:no-any
 exports.createSkeletonElement = function (type, pendingStyle) {
-    // tslint:disable-next-line:no-any
-    var ExportedComponent = function (
-        // tslint:disable-next-line:no-any
-        props, _a) {
+    var ExportedComponent = function (props, _a) {
         var skeletor = _a.skeletor;
@@ -46,2 +48,3 @@ var isPending;
         }
+        // tslint:disable-next-line:no-any
         var newProps = __assign({}, props);
@@ -63,3 +66,2 @@ if (isPending) {
         }
-        // tslint:disable-next-line:no-any
         return React.createElement(type, newProps);
@@ -66,0 +68,0 @@ };

lib/createSkeletonProvider.d.ts

@@ -0,4 +1,3 @@
+import * as React from 'react';
 import { Styling } from './utils';
-export declare type DummyFn<TProps> = (props: TProps) => TProps;
-export declare type DummyData<TProps> = TProps | DummyFn<TProps>;
-export declare function createSkeletonProvider<TPendingProps, TProps extends TPendingProps = TPendingProps>(dummyData: DummyData<TPendingProps>, predicate: (props: TPendingProps) => boolean, styling?: Styling): (WrappedComponent: any) => any;
+export declare function createSkeletonProvider<U>(dummyData: Partial<U> | ((props: Partial<U>) => Partial<U>), predicate: (props: Partial<U>) => boolean, styling?: Styling): <T extends Partial<U>>(WrappedComponent: React.StatelessComponent<T>) => React.ComponentClass<T>;

lib/createSkeletonProvider.js

@@ -28,8 +28,3 @@ "use strict";
 function createSkeletonProvider(dummyData, predicate, styling) {
-    return function (
-        // tslint:disable-next-line:max-line-length
-        // tslint:disable-next-line:no-any
-        WrappedComponent
-        // tslint:disable-next-line:no-any
-    ) {
+    return function (WrappedComponent) {
         var ExportedComponent = /** @class */ (function (_super) {
@@ -39,20 +34,14 @@ __extends(ExportedComponent, _super);
                 var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.getChildContext = function () { return ({
-                    skeletor: {
-                        isPending: predicate(_this.props),
-                        styling: styling
-                    }
-                }); };
+                _this.getChildContext = function () { return ({ skeletor: { isPending: predicate(_this.props), styling: styling } }); };
                 return _this;
             }
             ExportedComponent.prototype.render = function () {
-                var props = this.props;
                 // Append dummy data only if the condition defined by the predicate are met,
                 // by default if there is no predicate, append the data.
-                if (predicate ? predicate(props) : true) {
+                if (predicate ? predicate(this.props) : true) {
                     // Either call the dummyData as a function or assign dummyData to data
-                    var data = typeof dummyData === 'function' ? dummyData(props) : dummyData;
-                    return React.createElement(WrappedComponent, __assign({}, props, data));
+                    var data = typeof dummyData === 'function' ? dummyData(this.props) : dummyData;
+                    return React.createElement(WrappedComponent, __assign({}, this.props, data));
                 }
-                return React.createElement(WrappedComponent, __assign({}, props));
+                return React.createElement(WrappedComponent, __assign({}, this.props));
             };
@@ -59,0 +48,0 @@ ExportedComponent.childContextTypes = utils_1.contextTypes;

lib/index.d.ts

 import { createSkeletonElement } from './createSkeletonElement';
 export { createSkeletonProvider } from './createSkeletonProvider';
 export { createSkeletonElement } from './createSkeletonElement';
-export declare const Div: React.StatelessComponent<any>;
-export declare const Span: React.StatelessComponent<any>;
-export declare const H1: React.StatelessComponent<any>;
-export declare const H2: React.StatelessComponent<any>;
-export declare const H3: React.StatelessComponent<any>;
-export declare const P: React.StatelessComponent<any>;
-export declare const Img: React.StatelessComponent<any>;
 export default createSkeletonElement;

lib/index.js

@@ -12,10 +12,3 @@ "use strict";
 exports.createSkeletonElement = createSkeletonElement_2.createSkeletonElement;
-exports.Div = createSkeletonElement_1.createSkeletonElement('div');
-exports.Span = createSkeletonElement_1.createSkeletonElement('span');
-exports.H1 = createSkeletonElement_1.createSkeletonElement('h1');
-exports.H2 = createSkeletonElement_1.createSkeletonElement('h2');
-exports.H3 = createSkeletonElement_1.createSkeletonElement('h3');
-exports.P = createSkeletonElement_1.createSkeletonElement('p');
-exports.Img = createSkeletonElement_1.createSkeletonElement('img');
 exports.default = createSkeletonElement_1.createSkeletonElement;
 //# sourceMappingURL=index.js.map

lib/utils.d.ts

 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-export declare type Styling = (() => React.CSSProperties) | React.CSSProperties | string;
+export declare type Styling = (() => (React.CSSProperties | string)) | React.CSSProperties | string;
 export interface Pendable {
@@ -9,3 +9,3 @@ isPending: boolean;
     isPending: boolean;
-    styling: () => React.CSSProperties | string;
+    styling: Styling;
 }
@@ -12,0 +12,0 @@ export interface Context {

package.json

 {
   "name": "@trainline/react-skeletor",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "Make your application look nice when its loading!",
@@ -53,4 +53,7 @@ "main": "lib/index.js",
     "@types/jest": "^19.2.2",
+    "@types/prettier": "^1.7.0",
     "@types/prop-types": "^15.5.1",
     "@types/react": "^16.0.7",
+    "@types/react-dom": "^16.0.0",
+    "@types/react-test-renderer": "^15.5.4",
     "@types/recompose": "^0.22.0",
@@ -70,4 +73,4 @@ "enzyme": "^3.0.0",
     "tslint-react": "^3.0.0",
-    "typescript": "^2.5.3"
+    "typescript": "^2.6.1"
   }
 }

README.md

@@ -46,8 +46,10 @@ [![npm](https://img.shields.io/npm/v/@trainline/react-skeletor.svg)](https://www.npmjs.com/package/@trainline/react-skeletor)
   {
-    firstName: '_____',
-    lastName: '________'
+    user: {
+      firstName: '_____',
+      lastName: '________'
+    }
   },
-  // Predicate specifying whether or not the data is loaded
+  // Predicate that returns true if component is in a loading state
   ({ user }) => user === undefined,
-  // Define the placeholder design for the children elements,
+  // Define the placeholder styling for the children elements,
   () => ({
@@ -54,0 +56,0 @@ color: 'grey',

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

86

increased by2.38%

Worsened metrics

Total package byte prevSize

16390

decreased by-7.55%

Dev dependency count

22

increased by15.79%

Lines of code

182

decreased by-9.9%

No dependency changes