UNPKG

rn-variant

Version:

Light-weight, type-safe style variants for React Native.

82 lines (79 loc) 2.65 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var index_exports = {}; __export(index_exports, { createVariantStyles: () => createVariantStyles }); module.exports = __toCommonJS(index_exports); // src/create-variant.ts var import_react_native = require("react-native"); function createVariantStyles(config) { const { base = {}, variants, compoundVariants = [] } = config; const styleMap = {}; for (const variantKey in variants) { styleMap[variantKey] = {}; for (const optionKey in variants[variantKey]) { styleMap[variantKey][optionKey] = import_react_native.StyleSheet.create({ style: variants[variantKey][optionKey] }); } } function useVariants(input) { const selected = [base]; for (const variantKey in input) { const value = input[variantKey]; if (value !== void 0 && value !== null) { let resolvedValue; if (typeof value === "boolean") { resolvedValue = value.toString(); } else { resolvedValue = value; } if (styleMap[variantKey]?.[resolvedValue]) { selected.push(styleMap[variantKey][resolvedValue].style); } } } compoundVariants.forEach(({ variants: compound, style }) => { const isMatch = Object.entries(compound).every(([key, value]) => { const inputValue = input[key]; const compoundValue = value; if (typeof inputValue === "boolean") { return inputValue.toString() === compoundValue; } return inputValue === compoundValue; }); if (isMatch) { selected.push(style); } }); return { style: import_react_native.StyleSheet.flatten(selected) }; } return { styles: styleMap, useVariants }; } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { createVariantStyles });