calcite-react
Version:
Calcite components for React
254 lines (198 loc) • 8.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useContextState = exports.rtlPlacement = exports.getAccessibleOnClickHandlers = exports.getChildType = exports.transition = exports.backgroundGradient = exports.subNavLinkActive = exports.subNavUnderline = exports.fontSize = exports.clearfix = exports.unitCalc = void 0;
var _react = require("react");
var _polished = require("polished");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var unitCalc = function unitCalc(left, right, operator) {
var leftUnit, rightUnit;
if (typeof left === 'string') {
leftUnit = left.replace(parseFloat(left), '');
left = parseFloat(left);
}
if (typeof right === 'string') {
rightUnit = right.replace(parseFloat(right), '');
right = parseFloat(right);
}
var unit = leftUnit || rightUnit;
switch (operator) {
case '+':
return left + right + unit;
case '-':
return left - right + unit;
case '*':
return left * right + unit;
case '/':
return left / right + unit;
case '%':
return left % right + unit;
default:
console.warn('unitCalc only supports the following operators: +, -, *, /, %');
return left;
}
}; // const unitCompare = (compare1, compare2, operator) => {
// const compare1Value = parseFloat(compare1);
// const compare2Value = parseFloat(compare2);
//
// let value = window.eval(compare1Value + operator + compare2Value); // eslint-disable-line no-eval
//
// return value;
// };
exports.unitCalc = unitCalc;
var clearfix = function clearfix() {
return "\n &::after {\n content: '';\n display: table;\n clear: both;\n }\n ";
}; // const modularScale = (increment, theme) => {
// const ratio = theme.type.ratio;
// const bodySize = theme.type.bodySize;
// let v1 = bodySize;
// let v2 = theme.type.smallSize;
// let value = v1;
//
// while (unitCompare(v2 > v1)) {
// v2 = unitCalc(v2, ratio, '/'); // will be off-by-1
// }
//
// while (unitCompare(v2 < v1)) {
// v2 = unitCalc(v2, ratio, '*'); // will fix off-by-1
// }
//
// const doubleStranded = unitCompare(v2, v1, '>');
//
// if (increment > 0) {
// for (var i = 1; i < increment; i++) {
// if (doubleStranded && unitCalc(v1, ratio, '*') > v2) {
// value = v2;
// v2 = unitCalc(v2, ratio, '*');
// } else {
// v1 = unitCalc(v1, ratio, '*');
// value = v1;
// }
// }
// }
//
// if (increment < 0) {
// const unit = unitCalc(bodySize, 16, '/');
// const decriment = unitCalc(increment, unit, '*');
// value = unitCalc(bodySize, decriment, '+');
// }
//
// return value;
// };
exports.clearfix = clearfix;
var fontSize = function fontSize(scale, theme) {
// let fontSizeVal = modularScale(scale, theme);
// let lineHeightVal;
//
// if (scale > 7) {
// lineHeightVal = 2.5 * theme.baseline;
// } else if (scale <= 7 && scale > 4) {
// lineHeightVal = 2 * theme.baseline;
// } else if (scale <= 4 && scale > 2) {
// lineHeightVal = 1.5 * theme.baseline;
// } else if (scale <= 2) {
// lineHeightVal = theme.baseline;
// }
switch (scale) {
case -3:
return "\n font-size: 0.8125rem;\n line-height: 1.55rem;\n ";
case -2:
return "\n font-size: 0.875rem;\n line-height: 1.55rem;\n ";
case -1:
return "\n font-size: 0.9375rem;\n line-height: 1.55rem;\n ";
case 0:
return "\n font-size: 1rem;\n line-height: 1.55rem;\n ";
case 1:
return "\n font-size: 1.2019rem;\n line-height: 1.55rem;\n ";
case 2:
return "\n font-size: 1.414rem;\n line-height: 1.55rem;\n ";
case 3:
return "\n font-size: 1.69949rem;\n line-height: 2.325rem;\n ";
case 4:
return "\n font-size: 1.9994rem;\n line-height: 2.325rem;\n ";
case 5:
return "\n font-size: 2.40307rem;\n line-height: 3.1rem;\n ";
case 6:
return "\n font-size: 2.82715rem;\n line-height: 3.1rem;\n ";
case 7:
return "\n font-size: 3.39795rem;\n line-height: 3.1rem;\n ";
case 8:
return "\n font-size: 3.99758rem;\n line-height: 3.875rem;\n ";
default:
return "\n font-size: 1rem;\n line-height: 1.55rem;\n ";
}
};
exports.fontSize = fontSize;
var subNavUnderline = function subNavUnderline(props) {
return "\n background-image: linear-gradient(to top, transparent 94%, ".concat(props.theme.palette.white, " 96%, ").concat(props.theme.palette.white, " 100%);\n ");
};
exports.subNavUnderline = subNavUnderline;
var backgroundGradient = function backgroundGradient(img, fromColor, toColor, addOverlayGradient) {
if (!fromColor || !toColor) {
return "\n background: url(".concat(img, ") no-repeat top center;\n background-size: cover;\n ");
} else {
if (addOverlayGradient) {
return "\n background: linear-gradient(to right, ".concat((0, _polished.transparentize)(0.3, fromColor), " 0%, ").concat((0, _polished.transparentize)(0.3, toColor), " 100%), url(").concat(img, ") no-repeat center center, linear-gradient(to right, ").concat(fromColor, " 0%, ").concat(toColor, " 100%);\n background-size: cover;\n ");
} else {
return "\n background: url(".concat(img, ") no-repeat center center, linear-gradient(to right, ").concat(fromColor, " 0%, ").concat(toColor, " 100%);\n background-size: cover;\n ");
}
}
};
exports.backgroundGradient = backgroundGradient;
var transition = function transition(delayTime) {
if (delayTime) {
return "\n ".concat(_CalciteThemeProvider.CalciteTheme.transitionDuration, " ").concat(delayTime, " ").concat(_CalciteThemeProvider.CalciteTheme.easingFunc, "\n ");
}
return "\n ".concat(_CalciteThemeProvider.CalciteTheme.transitionDuration, " ").concat(_CalciteThemeProvider.CalciteTheme.easingFunc, "\n ");
};
exports.transition = transition;
var getChildType = function getChildType(child) {
return child.type && child.type.target && child.type.target.displayName || child.type && child.type.displayName;
};
exports.getChildType = getChildType;
var getAccessibleOnClickHandlers = function getAccessibleOnClickHandlers(onClick) {
return onClick ? {
onClick: onClick,
onKeyPress: onClick && function (event) {
if (event.key === 'Enter' || event.key === 'Space') {
onClick();
}
}
} : undefined;
};
exports.getAccessibleOnClickHandlers = getAccessibleOnClickHandlers;
var rtlPlacement = function rtlPlacement(placement) {
if (placement && document && document.documentElement.dir === 'rtl') {
var hash = {
end: 'start',
start: 'end',
left: 'right',
right: 'left'
};
placement = placement.replace(/start|end|right|left/g, function (matched) {
return hash[matched];
});
}
return placement;
};
exports.rtlPlacement = rtlPlacement;
var subNavLinkActive = function subNavLinkActive(props) {
return "\n background-color: rgba(0,0,0,.25);\n color: ".concat(props.theme.palette.white, ";\n text-decoration: none;\n border-bottom-color: rgba(0, 0, 0, 0.4);\n ");
};
exports.subNavLinkActive = subNavLinkActive;
var useContextState = function useContextState(contextProps) {
var _useState = (0, _react.useState)(contextProps),
_useState2 = _slicedToArray(_useState, 2),
contextState = _useState2[0],
setContextState = _useState2[1];
(0, _react.useEffect)(function () {
setContextState(contextProps);
}, Object.values(contextProps));
return contextState;
};
exports.useContextState = useContextState;