@enact/core/kind/styles.js

Enact is an open source JavaScript framework containing everything you need to create a fast, scalable mobile or web application.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = exports["default"] = void 0;
var _bind = _interopRequireDefault(require("classnames/bind"));
var _util = require("../util");
var _util2 = require("./util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * Merges external and internal CSS classes and style objects. Internal CSS classes can be
 * optionally mapped to alternate names (e.g. those generated by CSS modules) by including a
 * `css` parameter.
 *
 * Example:
 * ```
 *	const stylesConfig = {
 *		css: {
 *			button: 'unambiguous-button-class-name',
 *			client: 'unambiguous-button-class-name-client'
 *		},
 *		className: 'button global-class',
 *		style: {
 *			color: 'red'
 *		}
 *	};
 *
 *	const props = {
 *		className: 'my-button',
 *		style: {
 *			display: 'none'
 *		}
 *	};
 *
 *	const renderStyles = styles(stylesConfig);
 *	const renderStyles(props); // {className: 'unambiguous-button-class-name global-class', styles: {color: 'red', display: 'none'}}
 * ```
 *
 * @method styles
 * @param   {Object}    cfg  Configuration object containing one of `css`, `className`,
 *                           `publicClassNames`, and/or `style`
 *
 * @returns {Function}       Function that accepts a props object and mutates it to merge class
 *                           names and style objects and provide the `styler` utility function and
 *                           `css` merged class name map
 * @private
 */
var styles = exports.styles = function styles(cfg, optProps) {
  var className = cfg.className,
    configCss = cfg.css,
    _cfg$prop = cfg.prop,
    prop = _cfg$prop === void 0 ? 'className' : _cfg$prop,
    style = cfg.style;
  var allowedClassNames = cfg.publicClassNames;
  if (configCss && allowedClassNames === true) {
    allowedClassNames = Object.keys(configCss);
  } else if (typeof allowedClassNames === 'string') {
    allowedClassNames = allowedClassNames.split(/\s+/);
  }
  var renderStyles = function renderStyles(props) {
    var css = configCss;
    if (style) {
      props.style = Object.assign({}, style, props.style);
    }

    // if the props includes a css map, merge them together now
    if (css && allowedClassNames && props.css) {
      css = (0, _util.mergeClassNameMaps)(css, props.css, allowedClassNames);
    }
    var cn = css ? _bind["default"].bind(css) : _bind["default"];
    var joinedClassName = props[prop] = (0, _bind["default"])(className ? cn(className.split(' ')) : null, props.className);
    (0, _util2.addInternalProp)(props, 'css', css);
    (0, _util2.addInternalProp)(props, 'styler', {
      join: cn,
      append: function append() {
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }
        return cn.apply(void 0, [joinedClassName].concat(args));
      }
    });
    return props;
  };
  if (optProps) {
    return renderStyles(optProps);
  }
  return renderStyles;
};
var _default = exports["default"] = styles;