@empoleon/spotlight/cjs/SpotlightAction.cjs

Command center components for react and Empoleon

'use strict';

var web = require('solid-js/web');
var solidJs = require('solid-js');
var core = require('@empoleon/core');
var Spotlight_context = require('./Spotlight.context.cjs');
var spotlight_store = require('./spotlight.store.cjs');
var Spotlight_module = require('./Spotlight.module.css.cjs');

var _tmpl$ = /*#__PURE__*/web.template(`<span>`),
  _tmpl$2 = /*#__PURE__*/web.template(`<span><span>`);
const defaultProps = {
  dimmedSections: true,
  highlightQuery: false
};
const SpotlightAction = core.factory(_props => {
  const props = core.useProps("SpotlightAction", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["className", "style", "classNames", "styles", "id", "description", "label", "leftSection", "rightSection", "children", "dimmedSections", "highlightQuery", "highlightColor", "closeSpotlightOnTrigger", "onClick", "onMouseDown", "keywords", "vars", "ref"]);
  const ctx = Spotlight_context.useSpotlightContext();
  const stylesApi = {
    classNames: local.classNames,
    styles: local.styles
  };
  const labelNode = local.highlightQuery && typeof local.label === "string" ? web.createComponent(core.Highlight, web.mergeProps({
    component: "span",
    get highlight() {
      return ctx.query;
    },
    get color() {
      return local.highlightColor;
    }
  }, () => ctx.getStyles("actionLabel", stylesApi), {
    get children() {
      return local.label;
    }
  })) : (() => {
    var _el$ = _tmpl$();
    web.spread(_el$, web.mergeProps(() => ctx.getStyles("actionLabel", stylesApi)), false, true);
    web.insert(_el$, () => local.label);
    return _el$;
  })();
  return web.createComponent(core.UnstyledButton, web.mergeProps({
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    "data-action": true
  }, () => ctx.getStyles("action", {
    className: local.className,
    style: local.style,
    ...stylesApi
  }), others, {
    onMouseDown: event => {
      event.preventDefault();
      typeof local.onMouseDown === "function" && local.onMouseDown?.(event);
    },
    onClick: event => {
      typeof local.onClick === "function" && local.onClick?.(event);
      if (local.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) {
        spotlight_store.spotlightActions.close(ctx.store);
      }
    },
    tabIndex: -1,
    get children() {
      return local.children || [web.memo(() => web.memo(() => !!local.leftSection)() && web.createComponent(core.Box, web.mergeProps({
        component: "span",
        get mod() {
          return {
            position: "left",
            dimmed: local.dimmedSections
          };
        }
      }, () => ctx.getStyles("actionSection", stylesApi), {
        get children() {
          return local.leftSection;
        }
      }))), (() => {
        var _el$2 = _tmpl$2(),
          _el$3 = _el$2.firstChild;
        web.spread(_el$2, web.mergeProps(() => ctx.getStyles("actionBody", stylesApi)), false, true);
        web.insert(_el$2, labelNode, _el$3);
        web.spread(_el$3, web.mergeProps(() => ctx.getStyles("actionDescription", stylesApi)), false, true);
        web.insert(_el$3, () => local.description);
        return _el$2;
      })(), web.memo(() => web.memo(() => !!local.rightSection)() && web.createComponent(core.Box, web.mergeProps({
        component: "span",
        get mod() {
          return {
            position: "right",
            dimmed: local.dimmedSections
          };
        }
      }, () => ctx.getStyles("actionSection", stylesApi), {
        get children() {
          return local.rightSection;
        }
      })))];
    }
  }));
});
SpotlightAction.classes = Spotlight_module;
SpotlightAction.displayName = "@empoleon/spotlight/SpotlightAction";

exports.SpotlightAction = SpotlightAction;
//# sourceMappingURL=SpotlightAction.cjs.map