react-native-style-tachyons
Version:
functional, maintainable styling for react-native
141 lines (140 loc) • 6.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.options = exports.build = exports.wrap = exports.styles = exports.sizes = void 0;
const lodash_1 = __importDefault(require("lodash"));
const color_1 = __importDefault(require("color"));
const heights_1 = require("./styles/heights");
const widths_1 = require("./styles/widths");
const borders = __importStar(require("./styles/borders"));
const flexbox_1 = __importDefault(require("./styles/flexbox"));
const spacing_1 = __importDefault(require("./styles/spacing"));
const typeScale_1 = __importStar(require("./styles/typeScale"));
const text_1 = __importDefault(require("./styles/text"));
const images_1 = __importDefault(require("./styles/images"));
const fontWeights_1 = __importDefault(require("./styles/fontWeights"));
const opacity_1 = __importDefault(require("./styles/opacity"));
const absolute_1 = __importDefault(require("./styles/absolute"));
const tracked_1 = __importDefault(require("./styles/tracked"));
const reactWrapper_1 = require("./reactWrapper");
const hyphensToUnderscores = (sourceObj) => {
const translated = {};
lodash_1.default.forOwn(sourceObj, (val, key) => {
translated[key.replace(/-/gu, "_")] = val;
});
return translated;
};
const NativeTachyons = {
wrap: reactWrapper_1.ReactWrapper.wrap,
styles: {},
sizes: {},
options: {},
build: function build(options = {}, rnStyleSheet) {
lodash_1.default.defaultsDeep(options, {
rem: 16,
colors: {
palette: {}
},
fonts: {},
typeScale: typeScale_1.defaultTypeScale,
clsPropName: "cls",
customStyles: {}
});
const styleSheet = {};
lodash_1.default.assign(styleSheet, borders.styles);
lodash_1.default.assign(styleSheet, flexbox_1.default);
lodash_1.default.assign(styleSheet, fontWeights_1.default);
lodash_1.default.assign(styleSheet, images_1.default);
lodash_1.default.assign(styleSheet, text_1.default);
lodash_1.default.assign(styleSheet, opacity_1.default);
const typeScale = (0, typeScale_1.default)(options.typeScale);
const sizes = {};
const REM_SCALED = [
heights_1.heights,
heights_1.minHeights,
heights_1.maxHeights,
widths_1.widths,
widths_1.minWidths,
widths_1.maxWidths,
spacing_1.default,
typeScale,
borders.radii,
tracked_1.default
];
REM_SCALED.forEach((subSheet) => {
lodash_1.default.forOwn(subSheet, (styleObj, tachyonsKey) => {
lodash_1.default.forOwn(styleObj, (val, name) => {
var _a;
let { rem } = options;
if (name === "fontSize") {
rem = (_a = options.fontRem) !== null && _a !== void 0 ? _a : options.rem;
}
styleSheet[tachyonsKey] = {
[name]: val * rem
};
sizes[tachyonsKey] = val * rem;
});
});
});
lodash_1.default.assign(styleSheet, (0, absolute_1.default)(options.rem));
lodash_1.default.forOwn(options.colors.palette, (val, name) => {
styleSheet[`bg-${name}`] = { backgroundColor: val };
styleSheet[`${name}`] = { color: val };
styleSheet[`b--${name}`] = { borderColor: val };
styleSheet[`tint-${name}`] = { tintColor: val };
for (let i = 10; i < 100; i += 10) {
const rgbString = new color_1.default(val).alpha(i / 100)
.rgb()
.string();
styleSheet[`bg-${name}-${i}`] = { backgroundColor: rgbString };
styleSheet[`${name}-${i}`] = { color: rgbString };
styleSheet[`b--${name}-${i}`] = { borderColor: rgbString };
}
});
lodash_1.default.forOwn(options.fonts, (val, key) => {
styleSheet[`ff-${key}`] = { fontFamily: val };
});
lodash_1.default.assign(styleSheet, options.customStyles);
lodash_1.default.assign(NativeTachyons.sizes, hyphensToUnderscores(sizes));
lodash_1.default.assign(NativeTachyons.styles, rnStyleSheet.create(hyphensToUnderscores(styleSheet)));
lodash_1.default.assign(NativeTachyons.options, options);
reactWrapper_1.ReactWrapper.configure(exports.styles, options);
}
};
exports.default = NativeTachyons;
exports.sizes = NativeTachyons.sizes, exports.styles = NativeTachyons.styles, exports.wrap = NativeTachyons.wrap, exports.build = NativeTachyons.build, exports.options = NativeTachyons.options;