@tdb/util
Version:
Shared helpers and utilities.
295 lines • 9.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var libs_1 = require("../../libs");
var value_1 = require("../value");
var glamor_1 = require("glamor");
var util_1 = require("./util");
tslib_1.__exportStar(require("./util"), exports);
exports.MEDIA_QUERY_RETINA = "@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
exports.image = function (image1x, image2x, options) {
if (options === void 0) { options = { width: 10, height: 10 }; }
if (!image1x) {
throw new Error('Must have at least a 1x image.');
}
var width = options.width, height = options.height;
var result = {
width: width,
height: height,
backgroundImage: "url(" + image1x + ")",
backgroundSize: width + "px " + height + "px",
backgroundRepeat: 'no-repeat',
};
if (image2x) {
result[exports.MEDIA_QUERY_RETINA] = {
backgroundImage: "url(" + image2x + ")",
};
}
return result;
};
var mergeAndReplace = function (key, value, target) {
Object.assign(target, value);
delete target[key];
return target;
};
var formatImage = function (key, value, target) {
var image1x = value[0], image2x = value[1], width = value[2], height = value[3];
if (libs_1.R.is(Number, image2x)) {
height = width;
width = image2x;
image2x = undefined;
}
var options = {
width: width,
height: height,
};
var style = exports.image(image1x, image2x, options);
mergeAndReplace(key, style, target);
};
exports.toPositionEdges = function (key, value) {
if (value === void 0) { value = undefined; }
var edges = util_1.arrayToEdges(value);
if (!edges) {
return undefined;
}
var left = edges.left, top = edges.top, right = edges.right, bottom = edges.bottom;
if (top === undefined &&
right === undefined &&
bottom === undefined &&
left === undefined) {
return undefined;
}
return {
position: key.toLowerCase(),
top: top,
right: right,
bottom: bottom,
left: left,
};
};
exports.formatPositionEdges = function (key, target) {
var styles = exports.toPositionEdges(key, target[key]);
mergeAndReplace(key, styles, target);
};
var formatAbsoluteCenter = function (key, value, target) {
if (value === true) {
value = 'xy';
}
if (value === false || value === undefined || value === null) {
return;
}
var styles = {
position: 'absolute',
left: target.left,
top: target.top,
transform: '',
};
var stringValue = value
.toString()
.trim()
.toLowerCase();
if (stringValue.includes('x')) {
styles.left = '50%';
}
if (stringValue.includes('y')) {
styles.top = '50%';
}
var transform;
switch (value) {
case 'yx':
case 'xy':
transform = 'translate(-50%, -50%)';
break;
case 'x':
transform = 'translateX(-50%)';
break;
case 'y':
transform = 'translateY(-50%)';
break;
default:
throw new Error("AbsoluteCenter value '" + value + "' not supported.");
}
styles.transform = ((target.transform || '') + " " + transform).trim();
mergeAndReplace(key, styles, target);
};
function formatSpacingPlane(plane, prefix, key, value, target) {
var styles = {};
var edges = util_1.arrayToEdges(value);
if (edges && plane.includes('x')) {
styles[prefix + "Left"] = edges.left;
styles[prefix + "Right"] = edges.right;
}
if (edges && plane.includes('y')) {
styles[prefix + "Top"] = edges.top;
styles[prefix + "Bottom"] = edges.bottom;
}
mergeAndReplace(key, styles, target);
}
function formatScroll(key, value, target) {
if (value === true) {
var styles = {
overflowX: 'hidden',
overflowY: 'scroll',
WebkitOverflowScrolling: 'touch',
};
mergeAndReplace(key, styles, target);
}
if (value === false) {
var styles = {
overflow: 'hidden',
};
mergeAndReplace(key, styles, target);
}
}
var AlignMap = {
center: 'center',
left: 'flex-start',
top: 'flex-start',
start: 'flex-start',
right: 'flex-end',
bottom: 'flex-end',
end: 'flex-end',
full: 'stretch',
stretch: 'stretch',
baseline: 'baseline',
};
function convertCrossAlignToFlex(token) {
return AlignMap[token] || undefined;
}
var MainAlignMap = {
center: 'center',
left: 'flex-start',
top: 'flex-start',
start: 'flex-start',
right: 'flex-end',
bottom: 'flex-end',
end: 'flex-end',
spaceBetween: 'space-between',
spaceAround: 'space-around',
spaceEvenly: 'space-evenly',
};
function convertMainAlignToFlex(token) {
return MainAlignMap[token] || undefined;
}
function formatFlexPosition(key, value, target) {
var direction;
var mainAlignment;
var crossAlignment;
var tokens = value.split('-').map(function (token) { return token.trim(); });
tokens.map(function (token) {
var tokenIsOneOf = function (options) { return options.includes(token); };
if (direction == null && tokenIsOneOf(['horizontal', 'vertical'])) {
direction = token === 'vertical' ? 'column' : 'row';
return;
}
if (tokenIsOneOf([
'center',
'start',
'end',
'left',
'right',
'top',
'bottom',
'full',
'baseline',
])) {
if (crossAlignment == null) {
if (direction == null && tokenIsOneOf(['left', 'right'])) {
direction = 'column';
}
if (direction == null && tokenIsOneOf(['top', 'bottom'])) {
direction = 'row';
}
crossAlignment = convertCrossAlignToFlex(token);
return;
}
mainAlignment = convertMainAlignToFlex(token);
return;
}
if (tokenIsOneOf(['spaceAround', 'spaceBetween', 'spaceEvenly'])) {
mainAlignment = convertMainAlignToFlex(token);
return;
}
});
var styles = {
display: 'flex',
flexDirection: direction,
alignItems: crossAlignment,
justifyContent: mainAlignment,
};
mergeAndReplace(key, styles, target);
}
exports.transformStyle = function (style) {
if (style === void 0) { style = {}; }
if (style == null) {
return {};
}
if (style === false) {
return {};
}
if (!libs_1.R.is(Object, style)) {
return style;
}
Object.keys(style).forEach(function (key) {
var value = style[key];
if (value === false || libs_1.R.isNil(value)) {
delete style[key];
}
else if (value_1.value.isPlainObject(value)) {
style[key] = exports.transformStyle(value);
}
else {
switch (key) {
case 'Image':
formatImage(key, value, style);
break;
case 'Absolute':
exports.formatPositionEdges(key, style);
break;
case 'Fixed':
exports.formatPositionEdges(key, style);
break;
case 'AbsoluteCenter':
formatAbsoluteCenter(key, value, style);
break;
case 'Margin':
formatSpacingPlane('xy', 'margin', key, value, style);
break;
case 'MarginX':
formatSpacingPlane('x', 'margin', key, value, style);
break;
case 'MarginY':
formatSpacingPlane('y', 'margin', key, value, style);
break;
case 'Padding':
formatSpacingPlane('xy', 'padding', key, value, style);
break;
case 'PaddingX':
formatSpacingPlane('x', 'padding', key, value, style);
break;
case 'PaddingY':
formatSpacingPlane('y', 'padding', key, value, style);
break;
case 'Flex':
formatFlexPosition(key, value, style);
break;
case 'Scroll':
formatScroll(key, value, style);
break;
default:
}
}
});
return style;
};
var formatCss = function () {
var styles = [];
for (var _i = 0; _i < arguments.length; _i++) {
styles[_i] = arguments[_i];
}
var newStyles = styles.map(exports.transformStyle);
return glamor_1.css.apply(void 0, newStyles);
};
formatCss.image = exports.image;
exports.format = formatCss;
//# sourceMappingURL=css.js.map