You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					105 lines
				
				4.5 KiB
			
		
		
			
		
	
	
					105 lines
				
				4.5 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								"use strict";
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								exports.__esModule = true;
							 | 
						||
| 
								 | 
							
								exports["default"] = fluidRange;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _between = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./between"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors"));
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _extends() { _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); }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								/**
							 | 
						||
| 
								 | 
							
								 * Returns a set of media queries that resizes a property (or set of properties) between a provided fromSize and toSize. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px') to constrain the interpolation.
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * @example
							 | 
						||
| 
								 | 
							
								 * // Styles as object usage
							 | 
						||
| 
								 | 
							
								 * const styles = {
							 | 
						||
| 
								 | 
							
								 *   ...fluidRange(
							 | 
						||
| 
								 | 
							
								 *    {
							 | 
						||
| 
								 | 
							
								 *        prop: 'padding',
							 | 
						||
| 
								 | 
							
								 *        fromSize: '20px',
							 | 
						||
| 
								 | 
							
								 *        toSize: '100px',
							 | 
						||
| 
								 | 
							
								 *      },
							 | 
						||
| 
								 | 
							
								 *      '400px',
							 | 
						||
| 
								 | 
							
								 *      '1000px',
							 | 
						||
| 
								 | 
							
								 *    )
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * // styled-components usage
							 | 
						||
| 
								 | 
							
								 * const div = styled.div`
							 | 
						||
| 
								 | 
							
								 *   ${fluidRange(
							 | 
						||
| 
								 | 
							
								 *      {
							 | 
						||
| 
								 | 
							
								 *        prop: 'padding',
							 | 
						||
| 
								 | 
							
								 *        fromSize: '20px',
							 | 
						||
| 
								 | 
							
								 *        toSize: '100px',
							 | 
						||
| 
								 | 
							
								 *      },
							 | 
						||
| 
								 | 
							
								 *      '400px',
							 | 
						||
| 
								 | 
							
								 *      '1000px',
							 | 
						||
| 
								 | 
							
								 *    )}
							 | 
						||
| 
								 | 
							
								 * `
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * // CSS as JS Output
							 | 
						||
| 
								 | 
							
								 *
							 | 
						||
| 
								 | 
							
								 * div: {
							 | 
						||
| 
								 | 
							
								 *   "@media (min-width: 1000px)": Object {
							 | 
						||
| 
								 | 
							
								 *     "padding": "100px",
							 | 
						||
| 
								 | 
							
								 *   },
							 | 
						||
| 
								 | 
							
								 *   "@media (min-width: 400px)": Object {
							 | 
						||
| 
								 | 
							
								 *     "padding": "calc(-33.33333333333334px + 13.333333333333334vw)",
							 | 
						||
| 
								 | 
							
								 *   },
							 | 
						||
| 
								 | 
							
								 *   "padding": "20px",
							 | 
						||
| 
								 | 
							
								 * }
							 | 
						||
| 
								 | 
							
								 */
							 | 
						||
| 
								 | 
							
								function fluidRange(cssProp, minScreen, maxScreen) {
							 | 
						||
| 
								 | 
							
								  if (minScreen === void 0) {
							 | 
						||
| 
								 | 
							
								    minScreen = '320px';
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (maxScreen === void 0) {
							 | 
						||
| 
								 | 
							
								    maxScreen = '1200px';
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (!Array.isArray(cssProp) && typeof cssProp !== 'object' || cssProp === null) {
							 | 
						||
| 
								 | 
							
								    throw new _errors["default"](49);
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  if (Array.isArray(cssProp)) {
							 | 
						||
| 
								 | 
							
								    var mediaQueries = {};
							 | 
						||
| 
								 | 
							
								    var fallbacks = {};
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    for (var _iterator = _createForOfIteratorHelperLoose(cssProp), _step; !(_step = _iterator()).done;) {
							 | 
						||
| 
								 | 
							
								      var _extends2, _extends3;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      var obj = _step.value;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      if (!obj.prop || !obj.fromSize || !obj.toSize) {
							 | 
						||
| 
								 | 
							
								        throw new _errors["default"](50);
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								      fallbacks[obj.prop] = obj.fromSize;
							 | 
						||
| 
								 | 
							
								      mediaQueries["@media (min-width: " + minScreen + ")"] = _extends({}, mediaQueries["@media (min-width: " + minScreen + ")"], (_extends2 = {}, _extends2[obj.prop] = (0, _between["default"])(obj.fromSize, obj.toSize, minScreen, maxScreen), _extends2));
							 | 
						||
| 
								 | 
							
								      mediaQueries["@media (min-width: " + maxScreen + ")"] = _extends({}, mediaQueries["@media (min-width: " + maxScreen + ")"], (_extends3 = {}, _extends3[obj.prop] = obj.toSize, _extends3));
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return _extends({}, fallbacks, mediaQueries);
							 | 
						||
| 
								 | 
							
								  } else {
							 | 
						||
| 
								 | 
							
								    var _ref, _ref2, _ref3;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    if (!cssProp.prop || !cssProp.fromSize || !cssProp.toSize) {
							 | 
						||
| 
								 | 
							
								      throw new _errors["default"](51);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    return _ref3 = {}, _ref3[cssProp.prop] = cssProp.fromSize, _ref3["@media (min-width: " + minScreen + ")"] = (_ref = {}, _ref[cssProp.prop] = (0, _between["default"])(cssProp.fromSize, cssProp.toSize, minScreen, maxScreen), _ref), _ref3["@media (min-width: " + maxScreen + ")"] = (_ref2 = {}, _ref2[cssProp.prop] = cssProp.toSize, _ref2), _ref3;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								module.exports = exports.default;
							 |