@empoleon/spotlight/cjs/Spotlight.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 hooks = require('@empoleon/hooks');
var defaultSpotlightFilter = require('./default-spotlight-filter.cjs');
var isActionsGroup = require('./is-actions-group.cjs');
var limitActions = require('./limit-actions.cjs');
var spotlight_store = require('./spotlight.store.cjs');
var SpotlightAction = require('./SpotlightAction.cjs');
var SpotlightActionsGroup = require('./SpotlightActionsGroup.cjs');
var SpotlightActionsList = require('./SpotlightActionsList.cjs');
var SpotlightEmpty = require('./SpotlightEmpty.cjs');
var SpotlightFooter = require('./SpotlightFooter.cjs');
var SpotlightRoot = require('./SpotlightRoot.cjs');
var SpotlightSearch = require('./SpotlightSearch.cjs');
var Spotlight_module = require('./Spotlight.module.css.cjs');

const defaultProps = {
  size: 600,
  yOffset: "80px",
  limit: Infinity,
  zIndex: core.getDefaultZIndex("max"),
  overlayProps: {
    backgroundOpacity: 0.35,
    blur: 7
  },
  transitionProps: {
    duration: 200,
    transition: "pop"
  },
  store: spotlight_store.spotlightStore,
  filter: defaultSpotlightFilter.defaultSpotlightFilter,
  clearQueryOnClose: true,
  closeOnActionTrigger: true,
  shortcut: "mod + K",
  highlightQuery: false
};
const Spotlight = core.factory(_props => {
  const props = core.useProps("Spotlight", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["searchProps", "filter", "query", "onQueryChange", "actions", "nothingFound", "highlightQuery", "limit", "ref"]);
  const [_query, setQuery] = hooks.useUncontrolled({
    value: () => local.query,
    defaultValue: "",
    finalValue: "",
    onChange: local.onQueryChange
  });
  const filteredActions = () => web.createComponent(solidJs.For, {
    get each() {
      return limitActions.limitActions(local.filter(_query(), local.actions), local.limit);
    },
    children: item => {
      if (isActionsGroup.isActionsGroup(item)) {
        return web.createComponent(SpotlightActionsGroup.SpotlightActionsGroup, {
          get label() {
            return item.group;
          },
          get children() {
            return web.createComponent(solidJs.For, {
              get each() {
                return item.actions;
              },
              children: _ref => {
                let {
                  id,
                  ...actionData
                } = _ref;
                return web.createComponent(SpotlightAction.SpotlightAction, web.mergeProps({
                  get highlightQuery() {
                    return local.highlightQuery;
                  }
                }, actionData));
              }
            });
          }
        });
      }
      return web.createComponent(SpotlightAction.SpotlightAction, web.mergeProps({
        get highlightQuery() {
          return local.highlightQuery;
        }
      }, item));
    }
  });
  return web.createComponent(SpotlightRoot.SpotlightRoot, web.mergeProps(others, {
    get query() {
      return _query();
    },
    onQueryChange: setQuery,
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    get children() {
      return [web.createComponent(SpotlightSearch.SpotlightSearch, web.mergeProps(() => local.searchProps)), web.createComponent(SpotlightActionsList.SpotlightActionsList, {
        get children() {
          return [web.memo(() => filteredActions()), web.memo(() => web.memo(() => !!(filteredActions.length === 0 && local.nothingFound))() && web.createComponent(SpotlightEmpty.SpotlightEmpty, {
            get children() {
              return local.nothingFound;
            }
          }))];
        }
      })];
    }
  }));
});
Spotlight.classes = Spotlight_module;
Spotlight.displayName = "@empoleon/spotlight/Spotlight";
Spotlight.Search = SpotlightSearch.SpotlightSearch;
Spotlight.ActionsList = SpotlightActionsList.SpotlightActionsList;
Spotlight.Action = SpotlightAction.SpotlightAction;
Spotlight.Empty = SpotlightEmpty.SpotlightEmpty;
Spotlight.ActionsGroup = SpotlightActionsGroup.SpotlightActionsGroup;
Spotlight.Footer = SpotlightFooter.SpotlightFooter;
Spotlight.Root = SpotlightRoot.SpotlightRoot;
Spotlight.open = spotlight_store.spotlight.open;
Spotlight.close = spotlight_store.spotlight.close;
Spotlight.toggle = spotlight_store.spotlight.toggle;

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