@empoleon/spotlight/cjs/SpotlightSearch.cjs

Command center components for react and Empoleon

'use strict';

var web = require('solid-js/web');
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 solidJs = require('solid-js');

const defaultProps = {
  size: "lg"
};
const SpotlightSearch = core.factory(_props => {
  const props = core.useProps("SpotlightSearch", defaultProps, _props);
  const [local, others] = solidJs.splitProps(props, ["classNames", "styles", "onKeyDown", "onChange", "vars", "value", "ref"]);
  const ctx = Spotlight_context.useSpotlightContext();
  const inputStyles = ctx.getStyles("search");
  const [isComposing, setIsComposing] = solidJs.createSignal(false);
  const handleKeyDown = event => {
    typeof local.onKeyDown === "function" && local.onKeyDown?.(event);
    if (isComposing()) {
      return;
    }
    if (event.code === "ArrowDown") {
      event.preventDefault();
      spotlight_store.spotlightActions.selectNextAction(ctx.store);
    }
    if (event.code === "ArrowUp") {
      event.preventDefault();
      spotlight_store.spotlightActions.selectPreviousAction(ctx.store);
    }
    if (event.code === "Enter" || event.code === "NumpadEnter") {
      event.preventDefault();
      spotlight_store.spotlightActions.triggerSelectedAction(ctx.store);
    }
  };
  return web.createComponent(core.Input, web.mergeProps({
    ref(r$) {
      var _ref$ = local.ref;
      typeof _ref$ === "function" ? _ref$(r$) : local.ref = r$;
    },
    get classNames() {
      return [{
        input: inputStyles.className
      }, local.classNames];
    },
    get styles() {
      return [{
        input: inputStyles.style
      }, local.styles];
    }
  }, others, {
    get value() {
      return local.value ?? ctx.query;
    },
    onChange: event => {
      ctx.setQuery(event.currentTarget.value);
      typeof local.onChange === "function" && local.onChange?.(event);
    },
    onKeyDown: handleKeyDown,
    onCompositionStart: () => setIsComposing(true),
    onCompositionEnd: () => setIsComposing(false)
  }));
});
SpotlightSearch.classes = Spotlight_module;
SpotlightSearch.displayName = "@empoleon/spotlight/SpotlightSearch";

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