@appbuckets/react-ui/utils/getSharedClassNames.js

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var clsx = require('clsx');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

function isValue(value) {
  if (typeof value === 'string' || typeof value === 'number') {
    return 'is-'.concat(value.toString().replace(/\s/g, '-'));
  }
  return undefined;
}
function classByPattern(value, pattern, replacer) {
  if (replacer === void 0) {
    replacer = '%value%';
  }
  if (typeof value === 'string' || typeof value === 'number') {
    return pattern.replace(
      new RegExp(replacer, 'g'),
      value.toString().replace(/\s/g, '-')
    );
  }
  return undefined;
}
function fallBackTrueValue(original) {
  if (original === true) {
    return 'true';
  }
  return original;
}
/**
 * Some prop can be responsive, so can be computed
 * differently if they are primitive, or an object of value
 *
 * @param prop Prop to Compute
 * @param pattern Pattern to Use to build className
 */
function computeResponsiveClassName(prop, pattern) {
  // Assert prop is a valid computable prop
  if (prop == null || prop === false) {
    return undefined;
  }
  // If prop is not an object, return as master class
  if (typeof prop !== 'object') {
    return classByPattern(fallBackTrueValue(prop), pattern);
  }
  return clsx__default['default'](
    classByPattern(
      fallBackTrueValue(prop.phoneUp),
      'on-phone-'.concat(pattern)
    ),
    classByPattern(
      fallBackTrueValue(prop.tabletUp),
      'on-tablet-'.concat(pattern)
    ),
    classByPattern(
      fallBackTrueValue(prop.desktopUp),
      'on-desktop-'.concat(pattern)
    ),
    classByPattern(
      fallBackTrueValue(prop.largeDesktopUp),
      'on-large-desktop-'.concat(pattern)
    )
  );
}
function getSharedClassNames(props) {
  props.as;
  var backgroundColor = props.backgroundColor,
    className = props.className,
    columnsAlign = props.columnsAlign,
    display = props.display,
    fontWeight = props.fontWeight,
    width = props.width,
    offsetBy = props.offsetBy,
    size = props.size,
    textAlign = props.textAlign,
    textColor = props.textColor,
    verticalAlign = props.verticalAlign,
    withoutGap = props.withoutGap,
    rest = tslib.__rest(props, [
      'as',
      'backgroundColor',
      'className',
      'columnsAlign',
      'display',
      'fontWeight',
      'width',
      'offsetBy',
      'size',
      'textAlign',
      'textColor',
      'verticalAlign',
      'withoutGap',
    ]);
  // Build Classes
  var classes = clsx__default['default'](
    // The background color
    classByPattern(backgroundColor, 'has-background-%value%'),
    // Main text Color
    classByPattern(textColor, 'has-text-%value%'),
    // Main font weight
    classByPattern(fontWeight, 'has-font-%value%'),
    // Content Size
    isValue(size),
    // Text Align
    classByPattern(textAlign, 'has-text-%value%'),
    // Responsive Props
    computeResponsiveClassName(columnsAlign, '%value%'),
    computeResponsiveClassName(display, 'is-%value%'),
    computeResponsiveClassName(width, 'is-%value%'),
    computeResponsiveClassName(offsetBy, 'offset-by-%value%'),
    computeResponsiveClassName(verticalAlign, '%value%'),
    computeResponsiveClassName(withoutGap, 'without-gap'),
    // User defined classes
    className
  );
  return { className: classes, rest: rest };
}

module.exports = getSharedClassNames;