@coko/client/dist/toolkit/override.js

Client side common code for coko apps

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _styledComponents = require("styled-components");
var _lodash = require("lodash");
var _themeHelper = require("./themeHelper");
var _templateObject, _templateObject2;
/*
  Helper to write overrides for your styled components.

  This is here so that you don't have to think about compatibility between this:

  cssOverrides.ui.Button = css``

  and this:

  cssOverrides.ui.Button = {
    Root: css``,
    Input: css``
  }

  in your theme.

  -------------------

  Usage:

  const Button = styled.div`
    YOUR CSS HERE

    ${override('ui.Button')};
  `

  Now both of the above scenarios will work.
*/
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/*
  Will be using ui.Button as an example component override to explain the code.
*/
var override = function override(name) {
  var overrideKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'cssOverrides';
  return function (props) {
    // Find (props.theme.cssOverrides.) ui.Button
    var target = (0, _lodash.get)(props.theme[overrideKey], name);

    // ui.Button is not there.
    if (!target) return null;

    // css`` functions from styled components come in as arrays
    var isStyledCss = Array.isArray(target);
    var hasRoot = (0, _lodash.has)(target, 'Root');

    /*
    ui.Button is there, but there is no ui.Button.Root or ui.Button: css``.
     This also covers the case where you only target children of the component,
    eg. if your override looks like ui.Button = { Icon: css`` }.
    In this case, there would be no overrides for ui.Button, but only for
    ui.Button.Icon, which would have its own override.
    */
    if (!isStyledCss && !hasRoot) return null;

    // ui.Button.Root exists
    if (hasRoot) {
      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", ";\n      "])), (0, _themeHelper.th)("".concat(overrideKey, ".").concat(name, ".Root")));
    }

    // ui.Button: css`` exists
    return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      ", ";\n    "])), (0, _themeHelper.th)("".concat(overrideKey, ".").concat(name)));
  };
};
var _default = override;
exports["default"] = _default;