@tds/util-helpers - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.4.0](https://github.com/telus/tds-core/compare/@tds/util-helpers@1.3.0...@tds/util-helpers@1.4.0) (2020-01-23)
+
+
+### Features
+
+* **util-helpers:** add generateResponsiveStyles helper ([d4fb9a8](https://github.com/telus/tds-core/commit/d4fb9a8))
+
+
+
+
+
 # [1.3.0](https://github.com/telus/tds-core/compare/@tds/util-helpers@1.2.0...@tds/util-helpers@1.3.0) (2020-01-22)
@@ -8,0 +19,0 @@

dist/index.cjs.js

@@ -6,2 +6,3 @@ 'use strict';
 var react = require('react');
+var coreResponsive = require('@tds/core-responsive');
 
@@ -78,7 +79,142 @@ var getCopy = function getCopy(dictionary, copy) {
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+});
+
+var BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+var isResponsiveProp = function isResponsiveProp(prop) {
+  return prop && BREAKPOINTS.find(function (breakpoint) {
+    return Object.prototype.hasOwnProperty.call(prop, breakpoint);
+  });
+};
+
+var getResponsiveProps = function getResponsiveProps(props) {
+  return Object.keys(props).filter(function (prop) {
+    return isResponsiveProp(props[prop]);
+  });
+};
+
+var getStaticProps = function getStaticProps(props) {
+  return Object.keys(props).filter(function (prop) {
+    return !isResponsiveProp(props[prop]);
+  });
+};
+
+var sortBreakpointAsc = function sortBreakpointAsc(a, b) {
+  if (BREAKPOINTS.indexOf(a.from) > BREAKPOINTS.indexOf(b.from)) {
+    return 1;
+  }
+
+  if (BREAKPOINTS.indexOf(a.from) < BREAKPOINTS.indexOf(b.from)) {
+    return -1;
+  }
+
+  return 0;
+};
+
+var collectBreakpoints = function collectBreakpoints(props) {
+  return function (breakpoint) {
+    var o = {
+      from: breakpoint,
+      until: undefined,
+      props: Object.assign({}, getStaticProps(props).reduce(function (acc, staticProp) {
+        if (typeof props[staticProp] !== 'undefined') {
+          acc[staticProp] = props[staticProp];
+        }
+
+        return acc;
+      }, {}), getResponsiveProps(props).reduce(function (acc, responsiveProp) {
+        if (typeof props[responsiveProp][breakpoint] !== 'undefined') {
+          acc[responsiveProp] = props[responsiveProp][breakpoint];
+        }
+
+        return acc;
+      }, {}))
+    };
+    return o;
+  };
+};
+
+var inheritAndPopulateUntil = function inheritAndPopulateUntil(bp, index, src) {
+  var breakpoint = bp;
+
+  if (index !== 0) {
+    breakpoint.props = Object.assign({}, src[index - 1].props, bp.props);
+  }
+
+  if (index < src.length - 1) {
+    breakpoint.until = src[index + 1].from;
+  }
+
+  return breakpoint;
+};
+
+var prepareArray = function prepareArray(props) {
+  // gather all breakpoints
+  var responsivePropNames = getResponsiveProps(props);
+  var breakpoints = [];
+  responsivePropNames.forEach(function (responsivePropName) {
+    Object.keys(props[responsivePropName]).forEach(function (breakpoint) {
+      if (breakpoints.indexOf(breakpoint) === -1) {
+        breakpoints.push(breakpoint);
+      }
+    });
+  }); // build object
+
+  if (breakpoints.length === 0) {
+    breakpoints.push('xs');
+  }
+
+  var preparedArray = breakpoints.map(collectBreakpoints(props)).sort(sortBreakpointAsc).map(inheritAndPopulateUntil);
+  return preparedArray;
+};
+var generateStyles = function generateStyles(breakpoints, style) {
+  var styles = breakpoints.reduce(function (acc, breakpoint) {
+    var props = breakpoint.props;
+
+    if (!(typeof breakpoint.from === 'undefined' && typeof breakpoint.until === 'undefined')) {
+      var result = coreResponsive.media.from(breakpoint.from === 'xs' ? undefined : breakpoint.from).until(breakpoint.until === 'xl' ? undefined : breakpoint.until).css(typeof style === 'function' ? style(props, breakpoint.from, breakpoint.until) : style);
+      return _extends_1({}, acc, result);
+    }
+
+    return acc;
+  }, {});
+  return styles;
+};
+var generateResponsiveStyles = function generateResponsiveStyles(props, styleFn) {
+  var breakpoints = prepareArray(props);
+  return generateStyles(breakpoints, styleFn);
+};
+
 /* eslint-disable import/prefer-default-export */
 
 exports.DependentIconSizeContext = DependentIconSizeContext;
+exports.generateResponsiveStyles = generateResponsiveStyles;
+exports.generateStyles = generateStyles;
 exports.getCopy = getCopy;
+exports.prepareArray = prepareArray;
 exports.safeRest = safeRest;
 exports.uniqueId = uniqueId;

dist/index.es.js

 import { createContext } from 'react';
+import { media } from '@tds/core-responsive';
 
@@ -73,4 +74,136 @@ var getCopy = function getCopy(dictionary, copy) {
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+});
+
+var BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+var isResponsiveProp = function isResponsiveProp(prop) {
+  return prop && BREAKPOINTS.find(function (breakpoint) {
+    return Object.prototype.hasOwnProperty.call(prop, breakpoint);
+  });
+};
+
+var getResponsiveProps = function getResponsiveProps(props) {
+  return Object.keys(props).filter(function (prop) {
+    return isResponsiveProp(props[prop]);
+  });
+};
+
+var getStaticProps = function getStaticProps(props) {
+  return Object.keys(props).filter(function (prop) {
+    return !isResponsiveProp(props[prop]);
+  });
+};
+
+var sortBreakpointAsc = function sortBreakpointAsc(a, b) {
+  if (BREAKPOINTS.indexOf(a.from) > BREAKPOINTS.indexOf(b.from)) {
+    return 1;
+  }
+
+  if (BREAKPOINTS.indexOf(a.from) < BREAKPOINTS.indexOf(b.from)) {
+    return -1;
+  }
+
+  return 0;
+};
+
+var collectBreakpoints = function collectBreakpoints(props) {
+  return function (breakpoint) {
+    var o = {
+      from: breakpoint,
+      until: undefined,
+      props: Object.assign({}, getStaticProps(props).reduce(function (acc, staticProp) {
+        if (typeof props[staticProp] !== 'undefined') {
+          acc[staticProp] = props[staticProp];
+        }
+
+        return acc;
+      }, {}), getResponsiveProps(props).reduce(function (acc, responsiveProp) {
+        if (typeof props[responsiveProp][breakpoint] !== 'undefined') {
+          acc[responsiveProp] = props[responsiveProp][breakpoint];
+        }
+
+        return acc;
+      }, {}))
+    };
+    return o;
+  };
+};
+
+var inheritAndPopulateUntil = function inheritAndPopulateUntil(bp, index, src) {
+  var breakpoint = bp;
+
+  if (index !== 0) {
+    breakpoint.props = Object.assign({}, src[index - 1].props, bp.props);
+  }
+
+  if (index < src.length - 1) {
+    breakpoint.until = src[index + 1].from;
+  }
+
+  return breakpoint;
+};
+
+var prepareArray = function prepareArray(props) {
+  // gather all breakpoints
+  var responsivePropNames = getResponsiveProps(props);
+  var breakpoints = [];
+  responsivePropNames.forEach(function (responsivePropName) {
+    Object.keys(props[responsivePropName]).forEach(function (breakpoint) {
+      if (breakpoints.indexOf(breakpoint) === -1) {
+        breakpoints.push(breakpoint);
+      }
+    });
+  }); // build object
+
+  if (breakpoints.length === 0) {
+    breakpoints.push('xs');
+  }
+
+  var preparedArray = breakpoints.map(collectBreakpoints(props)).sort(sortBreakpointAsc).map(inheritAndPopulateUntil);
+  return preparedArray;
+};
+var generateStyles = function generateStyles(breakpoints, style) {
+  var styles = breakpoints.reduce(function (acc, breakpoint) {
+    var props = breakpoint.props;
+
+    if (!(typeof breakpoint.from === 'undefined' && typeof breakpoint.until === 'undefined')) {
+      var result = media.from(breakpoint.from === 'xs' ? undefined : breakpoint.from).until(breakpoint.until === 'xl' ? undefined : breakpoint.until).css(typeof style === 'function' ? style(props, breakpoint.from, breakpoint.until) : style);
+      return _extends_1({}, acc, result);
+    }
+
+    return acc;
+  }, {});
+  return styles;
+};
+var generateResponsiveStyles = function generateResponsiveStyles(props, styleFn) {
+  var breakpoints = prepareArray(props);
+  return generateStyles(breakpoints, styleFn);
+};
+
 /* eslint-disable import/prefer-default-export */
 
-export { DependentIconSizeContext, getCopy, safeRest, uniqueId };
+export { DependentIconSizeContext, generateResponsiveStyles, generateStyles, getCopy, prepareArray, safeRest, uniqueId };

index.js

@@ -6,1 +6,6 @@ /* eslint-disable import/prefer-default-export */
 export { default as DependentIconSizeContext } from './DependentIconSizeContext'
+export {
+  default as generateResponsiveStyles,
+  prepareArray,
+  generateStyles,
+} from './generateResponsiveStyles'

package.json

 {
   "name": "@tds/util-helpers",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "TDS helpers",
@@ -23,3 +23,6 @@ "main": "index.cjs.js",
   "homepage": "http://tds.telus.com",
-  "gitHead": "f4f83511c3f9559e7dbe15006223fc62a0b0b160"
+  "dependencies": {
+    "@tds/core-responsive": "^1.3.2"
+  },
+  "gitHead": "7c09912bd00064e2ec1a1425e40f5acfaa1af1d7"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

28289

increased by214.08%

Number of package files

18

increased by12.5%

Lines of code

838

increased by348.13%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@tds/core-responsive@^1.3.2

• + Added@babel/runtime@7.26.0(transitive)

• + Added@tds/core-responsive@1.3.7(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjson2mq@0.2.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-media@1.10.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedsass-mq@5.0.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addedstring-convert@0.2.1(transitive)