lucid-ui/lib/util/style-helpers.js

A UI component library from AppNexus.

import _uniqueId from "lodash/uniqueId";
import _assign from "lodash/assign";
import _map from "lodash/map";
import _random from "lodash/random";
import classNames from 'classnames';

var RANDOM_INTEGER = _random(0, Number.MAX_SAFE_INTEGER);
/**
 * bindClassNames
 *
 * Returns a version of the `classnames` functions where `&` is bound to a given
 * value. The returned functions can be further bound to more specific values for
 * `&` which allows your bound classnames to look closer to style selector.
 *
 * Examples:
 *   bindClassNames('lucid')('&-Button') === 'lucid-Button'
 *   bindClassNames('lucid').bind('&-Button')('&-active') === 'lucid-Button-active'
 */


export function bindClassNames() {
  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var variable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : /&/g;

  // We left `any` here because the classNames @types package doesn't export
  // the right types for us to be able to use. It accepts a fairly wide range
  // of input.
  function cx() {
    return _map(classNames.apply(void 0, arguments).split(' '), function (className) {
      return className.replace(variable, value);
    }).join(' ');
  }

  return _assign(cx, {
    bind: function bind() {
      var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value;

      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      return bindClassNames.apply(void 0, [nextValue.replace(variable, value)].concat(args));
    }
  });
} // LUCID_CSS_NAMESPACE is a placeholder that webpack's DefinePlugin can
// overwrite at compile time. Paired with the `prefix` LESS variable, consumers
// are able to scope all class names to something custom. This is a really rare
// use-case. We needed it becuase we sometimes run two copies of the library on
// a single page and need the styles not to step on each other.

export var NAMESPACE = typeof LUCID_CSS_NAMESPACE !== 'undefined' ? LUCID_CSS_NAMESPACE : 'lucid'; // eslint-disable-line no-undef

/**
 * Exports a lucid-bound version of classnames, which can be make more specific
 * to a component.
 *
 * Example:
 *   const cx = lucidClassNames.bind('&-Button')
 *
 *   cx('&',{
 *     '&-active': true
 *   }, ['custom-classname']) === 'lucid-Button lucid-Button-active custom-classname'
 */

export var lucidClassNames = bindClassNames(NAMESPACE);
export function uniqueName(prefix) {
  return _uniqueId("".concat(RANDOM_INTEGER, "-").concat(prefix));
}