twrnc
Version:
simple, expressive API for tailwindcss + react-native
113 lines (112 loc) • 4.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.borderRadius = exports.border = void 0;
const helpers_1 = require("../helpers");
const color_1 = require("./color");
function border(value, theme) {
let [rest, direction] = (0, helpers_1.parseAndConsumeDirection)(value);
const widthUtilityMatch = rest.match(/^(-?(\d)+)?$/);
if (widthUtilityMatch) {
return borderWidth(rest, direction, theme === null || theme === void 0 ? void 0 : theme.borderWidth);
}
rest = rest.replace(/^-/, ``);
if ([`dashed`, `solid`, `dotted`].includes(rest)) {
return (0, helpers_1.complete)({ borderStyle: rest });
}
let colorType = `border`;
switch (direction) {
case `Bottom`:
colorType = `borderBottom`;
break;
case `Top`:
colorType = `borderTop`;
break;
case `Left`:
colorType = `borderLeft`;
break;
case `Right`:
colorType = `borderRight`;
break;
}
const colorStyle = (0, color_1.color)(colorType, rest, theme === null || theme === void 0 ? void 0 : theme.borderColor);
if (colorStyle) {
return colorStyle;
}
// Finally Handling Arbitrary Width Case
// border-[20px] or border-[2.5rem]
const prop = `border${direction === `All` ? `` : direction}Width`;
rest = rest.replace(/^-/, ``);
const numericValue = rest.slice(1, -1);
const arbitraryWidth = (0, helpers_1.unconfiggedStyle)(prop, numericValue);
// can't use % for border-radius in RN
if (typeof (arbitraryWidth === null || arbitraryWidth === void 0 ? void 0 : arbitraryWidth.style[prop]) !== `number`) {
return null;
}
return arbitraryWidth;
}
exports.border = border;
function borderWidth(value, direction, config) {
if (!config) {
return null;
}
value = value.replace(/^-/, ``);
const key = value === `` ? `DEFAULT` : value;
const configValue = config[key];
if (configValue === undefined) {
return null;
}
const prop = `border${direction === `All` ? `` : direction}Width`;
return (0, helpers_1.getCompleteStyle)(prop, configValue);
}
function borderRadius(value, config) {
if (!config) {
return null;
}
let [rest, direction] = (0, helpers_1.parseAndConsumeDirection)(value);
rest = rest.replace(/^-/, ``);
if (rest === ``) {
rest = `DEFAULT`;
}
const prop = `border${direction === `All` ? `` : direction}Radius`;
const configValue = config[rest];
if (configValue) {
return expand((0, helpers_1.getCompleteStyle)(prop, configValue));
}
const arbitrary = (0, helpers_1.unconfiggedStyle)(prop, rest);
// can't use % for border-radius in RN
if (typeof (arbitrary === null || arbitrary === void 0 ? void 0 : arbitrary.style[prop]) !== `number`) {
return null;
}
return expand(arbitrary);
}
exports.borderRadius = borderRadius;
// RN only supports `borderRadius` + `border(top|bottom)(left|right)Radius`
function expand(ir) {
if ((ir === null || ir === void 0 ? void 0 : ir.kind) !== `complete`)
return ir;
const top = ir.style.borderTopRadius;
if (top !== undefined) {
ir.style.borderTopLeftRadius = top;
ir.style.borderTopRightRadius = top;
delete ir.style.borderTopRadius;
}
const bottom = ir.style.borderBottomRadius;
if (bottom !== undefined) {
ir.style.borderBottomLeftRadius = bottom;
ir.style.borderBottomRightRadius = bottom;
delete ir.style.borderBottomRadius;
}
const left = ir.style.borderLeftRadius;
if (left !== undefined) {
ir.style.borderBottomLeftRadius = left;
ir.style.borderTopLeftRadius = left;
delete ir.style.borderLeftRadius;
}
const right = ir.style.borderRightRadius;
if (right !== undefined) {
ir.style.borderBottomRightRadius = right;
ir.style.borderTopRightRadius = right;
delete ir.style.borderRightRadius;
}
return ir;
}