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.
77 lines
2.6 KiB
77 lines
2.6 KiB
3 years ago
|
"use strict";
|
||
|
|
|
||
|
|
exports.__esModule = true;
|
||
|
|
exports["default"] = between;
|
||
|
|
|
||
|
|
var _getValueAndUnit5 = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../helpers/getValueAndUnit"));
|
||
|
|
|
||
|
|
var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors"));
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* // Styles as object usage
|
||
|
|
* const styles = {
|
||
|
|
* fontSize: between('20px', '100px', '400px', '1000px'),
|
||
|
|
* fontSize: between('20px', '100px')
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* // styled-components usage
|
||
|
|
* const div = styled.div`
|
||
|
|
* fontSize: ${between('20px', '100px', '400px', '1000px')};
|
||
|
|
* fontSize: ${between('20px', '100px')}
|
||
|
|
* `
|
||
|
|
*
|
||
|
|
* // CSS as JS Output
|
||
|
|
*
|
||
|
|
* h1: {
|
||
|
|
* 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
|
||
|
|
* 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
|
||
|
|
* }
|
||
|
|
*/
|
||
|
|
function between(fromSize, toSize, minScreen, maxScreen) {
|
||
|
|
if (minScreen === void 0) {
|
||
|
|
minScreen = '320px';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (maxScreen === void 0) {
|
||
|
|
maxScreen = '1200px';
|
||
|
|
}
|
||
|
|
|
||
|
|
var _getValueAndUnit = (0, _getValueAndUnit5["default"])(fromSize),
|
||
|
|
unitlessFromSize = _getValueAndUnit[0],
|
||
|
|
fromSizeUnit = _getValueAndUnit[1];
|
||
|
|
|
||
|
|
var _getValueAndUnit2 = (0, _getValueAndUnit5["default"])(toSize),
|
||
|
|
unitlessToSize = _getValueAndUnit2[0],
|
||
|
|
toSizeUnit = _getValueAndUnit2[1];
|
||
|
|
|
||
|
|
var _getValueAndUnit3 = (0, _getValueAndUnit5["default"])(minScreen),
|
||
|
|
unitlessMinScreen = _getValueAndUnit3[0],
|
||
|
|
minScreenUnit = _getValueAndUnit3[1];
|
||
|
|
|
||
|
|
var _getValueAndUnit4 = (0, _getValueAndUnit5["default"])(maxScreen),
|
||
|
|
unitlessMaxScreen = _getValueAndUnit4[0],
|
||
|
|
maxScreenUnit = _getValueAndUnit4[1];
|
||
|
|
|
||
|
|
if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) {
|
||
|
|
throw new _errors["default"](47);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof unitlessFromSize !== 'number' || typeof unitlessToSize !== 'number' || fromSizeUnit !== toSizeUnit) {
|
||
|
|
throw new _errors["default"](48);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
|
||
|
|
throw new _errors["default"](75);
|
||
|
|
}
|
||
|
|
|
||
|
|
var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);
|
||
|
|
var base = unitlessToSize - slope * unitlessMaxScreen;
|
||
|
|
return "calc(" + base.toFixed(2) + (fromSizeUnit || '') + " + " + (100 * slope).toFixed(2) + "vw)";
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = exports.default;
|