@audira/carbon-react-native/lib/commonjs/carbon-style-sheet/create.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.create = create;
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _index = require("../_internal/globals/index.js");
var _breakpoint = require("./breakpoint.js");
/**
 * Create style sheet to help using color token of current color scheme and current breakpoint declaratively.  
 * It makes your code way more shorter which doesn't need to create conditional of current color scheme or current breakpoint in the style prop implementation
 * 
 * @example
 * ```tsx
 * import {
 * 	View,
 * } from 'react-native'
 * 
 * import {
 * 	StyleSheet,
 * } from '@audira/carbon-react-native'
 * 
 * export function Component({ children }) {
 * 	return (
 * 		<View style={ style.foo }>
 * 			{ children }
 * 		<View>
 * 	)
 * }
 * 
 * const style = StyleSheet.create({
 * 	foo: {
 * 		backgroundColor: StyleSheet.color.background_inverse,
 * 		// it will be resolved to the `background_inverse` of current color scheme
 * 
 * 		[StyleSheet.breakpoint.medium]: {
 * 			flexDirection: 'row',
 * 			// this style will has row direction of flex box
 * 			// for screen that equal and larger than the medium breakpoint
 * 		},
 * 	},
 * })
 * ```
 */
function create(styles) {
  const normalStyle = {},
    coloredStyle = {},
    breakpointStyle = {};
  let containBreakpointStyle = false;
  for (const name in styles) {
    const style = styles[name];
    for (const styleProp in style) {
      if (_breakpoint.breakpoint[styleProp]) {
        containBreakpointStyle = true;
        breakpointStyle[`${styleProp}${name}`] = style[styleProp];
      } else if (colorStyleProps.indexOf(styleProp) > -1) {
        /**
         * Resolve color string to the Carbon color (if any) for style prop or attribute that contain 'color' in the name like 'color', 'backgroundColor', 'borderColor', etc
         * @see {@link colorStyleProps}
         */

        const coloredStyleName_G10 = `${prefixColorStyleName.gray_10}${name}`,
          coloredStyleName_G100 = `${prefixColorStyleName.gray_100}${name}`;
        if (!coloredStyle[coloredStyleName_G10]) {
          coloredStyle[coloredStyleName_G10] = {};
        }
        if (!coloredStyle[coloredStyleName_G100]) {
          coloredStyle[coloredStyleName_G100] = {};
        }
        const colorStr = style[styleProp];
        coloredStyle[coloredStyleName_G10][styleProp] = _carbonReactNativeElements.Color.Token.gray_10.all[colorStr] || colorStr;
        coloredStyle[coloredStyleName_G100][styleProp] = _carbonReactNativeElements.Color.Token.gray_100.all[colorStr] || colorStr;
      } else {
        normalStyle[name] = style;
      }
    }
  }
  const normalStyleSheet = _reactNative.StyleSheet.create(normalStyle),
    coloredStyleSheet = _reactNative.StyleSheet.create(coloredStyle),
    breakpointStyleSheet = _reactNative.StyleSheet.create(breakpointStyle);
  return Object.keys(styles).reduce((acc, styleName) => {
    Object.defineProperty(acc, styleName, {
      get() {
        const colorScheme = _index.ColorSchemeGlobal.get(),
          breakpoint = _index.BreakpointGlobal.get();
        return [normalStyleSheet[styleName], colorScheme == 'gray_10' ? coloredStyleSheet[`${prefixColorStyleName.gray_10}${styleName}`] : coloredStyleSheet[`${prefixColorStyleName.gray_100}${styleName}`], containBreakpointStyle ? breakpointStyleSheet[`${breakpoint}${styleName}`] || getBreakpointUpStyle(breakpoint, breakpointStyleSheet, styleName) : null];
      }
    });
    return acc;
  }, {});
}
const colorStyleProps = ['backgroundColor', 'borderColor', 'borderEndColor', 'borderStartColor', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderBlockColor', 'borderBlockEndColor', 'borderBlockStartColor', 'color', 'outlineColor', 'overlayColor', 'textDecorationColor', 'textShadowColor', 'tintColor', 'shadowColor'],
  prefixColorStyleName = {
    gray_10: 'gray_10__',
    gray_100: 'gray_100__'
  },
  breakpointDown = ['max', 'x_large', 'large', 'medium', 'small'];
function getBreakpointUpStyle(breakpoint, breakpointStyle, styleName) {
  const bpSliced = breakpointDown.slice(breakpointDown.indexOf(breakpoint));
  let style = null;
  for (let i = 0; i < bpSliced.length; i++) {
    const bpStyle = breakpointStyle[`${bpSliced[i]}${styleName}`];
    if (bpStyle) {
      style = bpStyle;
      break;
    }
  }
  return style;
}
//# sourceMappingURL=create.js.map