zmp-react/esm/components/searchbar.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { classNames, getExtraAttrs, getSlots, noUndefinedProps, emit } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';


var Searchbar = /*#__PURE__*/forwardRef(function (props, ref) {
  var _zmpSearchbar = useRef(null);

  var className = props.className,
      id = props.id,
      style = props.style,
      noShadow = props.noShadow,
      noHairline = props.noHairline,
      _props$form = props.form,
      form = _props$form === void 0 ? true : _props$form,
      _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === void 0 ? 'Search' : _props$placeholder,
      spellcheck = props.spellcheck,
      _props$disableButton = props.disableButton,
      disableButton = _props$disableButton === void 0 ? true : _props$disableButton,
      _props$disableButtonT = props.disableButtonText,
      disableButtonText = _props$disableButtonT === void 0 ? 'Cancel' : _props$disableButtonT,
      _props$clearButton = props.clearButton,
      clearButton = _props$clearButton === void 0 ? true : _props$clearButton,
      value = props.value,
      _props$inputEvents = props.inputEvents,
      inputEvents = _props$inputEvents === void 0 ? 'change input compositionend' : _props$inputEvents,
      expandable = props.expandable,
      inline = props.inline,
      searchContainer = props.searchContainer,
      _props$searchIn = props.searchIn,
      searchIn = _props$searchIn === void 0 ? '.item-title' : _props$searchIn,
      _props$searchItem = props.searchItem,
      searchItem = _props$searchItem === void 0 ? 'li' : _props$searchItem,
      _props$searchGroup = props.searchGroup,
      searchGroup = _props$searchGroup === void 0 ? '.list-group' : _props$searchGroup,
      _props$searchGroupTit = props.searchGroupTitle,
      searchGroupTitle = _props$searchGroupTit === void 0 ? '.item-divider, .list-group-title' : _props$searchGroupTit,
      _props$foundEl = props.foundEl,
      foundEl = _props$foundEl === void 0 ? '.searchbar-found' : _props$foundEl,
      _props$notFoundEl = props.notFoundEl,
      notFoundEl = _props$notFoundEl === void 0 ? '.searchbar-not-found' : _props$notFoundEl,
      backdrop = props.backdrop,
      backdropEl = props.backdropEl,
      _props$hideOnEnableEl = props.hideOnEnableEl,
      hideOnEnableEl = _props$hideOnEnableEl === void 0 ? '.searchbar-hide-on-enable' : _props$hideOnEnableEl,
      _props$hideOnSearchEl = props.hideOnSearchEl,
      hideOnSearchEl = _props$hideOnSearchEl === void 0 ? '.searchbar-hide-on-search' : _props$hideOnSearchEl,
      _props$ignore = props.ignore,
      ignore = _props$ignore === void 0 ? '.searchbar-ignore' : _props$ignore,
      _props$customSearch = props.customSearch,
      customSearch = _props$customSearch === void 0 ? false : _props$customSearch,
      _props$removeDiacriti = props.removeDiacritics,
      removeDiacritics = _props$removeDiacriti === void 0 ? false : _props$removeDiacriti,
      _props$hideDividers = props.hideDividers,
      hideDividers = _props$hideDividers === void 0 ? true : _props$hideDividers,
      _props$hideGroups = props.hideGroups,
      hideGroups = _props$hideGroups === void 0 ? true : _props$hideGroups,
      _props$init = props.init,
      init = _props$init === void 0 ? true : _props$init;
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);
  var inputRef = useRef(null);

  var search = function search(query) {
    if (!_zmpSearchbar.current) return undefined;
    return _zmpSearchbar.current.search(query);
  };

  var enable = function enable() {
    if (!_zmpSearchbar.current) return undefined;
    return _zmpSearchbar.current.enable();
  };

  var disable = function disable() {
    if (!_zmpSearchbar.current) return undefined;
    return _zmpSearchbar.current.disable();
  };

  var toggle = function toggle() {
    if (!_zmpSearchbar.current) return undefined;
    return _zmpSearchbar.current.toggle();
  };

  var clear = function clear() {
    if (!_zmpSearchbar.current) return undefined;
    return _zmpSearchbar.current.clear();
  };

  var onChange = function onChange(event) {
    emit(props, 'change', event);
  };

  var onInput = function onInput(event) {
    emit(props, 'input', event);
  };

  var onFocus = function onFocus(event) {
    emit(props, 'focus', event);
  };

  var onBlur = function onBlur(event) {
    emit(props, 'blur', event);
  };

  var onSubmit = function onSubmit(event) {
    emit(props, 'submit', event);
  };

  var onClearButtonClick = function onClearButtonClick(event) {
    emit(props, 'click:clear clickClear', event);
  };

  var onDisableButtonClick = function onDisableButtonClick(event) {
    emit(props, 'click:disable clickDisable', event);
  };

  useImperativeHandle(ref, function () {
    return {
      el: elRef.current,
      input: inputRef.current,
      zmpSearchbar: function zmpSearchbar() {
        return _zmpSearchbar.current;
      },
      search: search,
      enable: enable,
      disable: disable,
      toggle: toggle,
      clear: clear
    };
  });

  var onMount = function onMount() {
    if (!init) return;
    zmpready(function () {
      var params = noUndefinedProps({
        el: elRef.current,
        inputEvents: inputEvents,
        searchContainer: searchContainer,
        searchIn: searchIn,
        searchItem: searchItem,
        searchGroup: searchGroup,
        searchGroupTitle: searchGroupTitle,
        hideOnEnableEl: hideOnEnableEl,
        hideOnSearchEl: hideOnSearchEl,
        foundEl: foundEl,
        notFoundEl: notFoundEl,
        backdrop: backdrop,
        backdropEl: backdropEl,
        disableButton: disableButton,
        ignore: ignore,
        customSearch: customSearch,
        removeDiacritics: removeDiacritics,
        hideDividers: hideDividers,
        hideGroups: hideGroups,
        expandable: expandable,
        inline: inline,
        on: {
          search: function search(searchbar, query, previousQuery) {
            emit(props, 'searchbarSearch', searchbar, query, previousQuery);
          },
          clear: function clear(searchbar, previousQuery) {
            emit(props, 'searchbarClear', searchbar, previousQuery);
          },
          enable: function enable(searchbar) {
            emit(props, 'searchbarEnable', searchbar);
          },
          disable: function disable(searchbar) {
            emit(props, 'searchbarDisable', searchbar);
          }
        }
      });
      Object.keys(params).forEach(function (key) {
        if (params[key] === '') {
          delete params[key];
        }
      });
      _zmpSearchbar.current = zmp.searchbar.create(params);
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpSearchbar.current && _zmpSearchbar.current.destroy) _zmpSearchbar.current.destroy();
    _zmpSearchbar.current = null;
  };

  useIsomorphicLayoutEffect(function () {
    onMount();
    return onDestroy;
  }, []);
  var clearEl;
  var disableEl;

  if (clearButton) {
    clearEl = /*#__PURE__*/React.createElement("span", {
      className: "input-clear-button",
      onClick: onClearButtonClick
    });
  }

  if (disableButton) {
    disableEl = /*#__PURE__*/React.createElement("span", {
      className: "searchbar-disable-button",
      onClick: onDisableButtonClick
    }, disableButtonText);
  }

  var SearchbarTag = form ? 'form' : 'div';
  var classes = classNames(className, 'searchbar', {
    'searchbar-inline': inline,
    'no-shadow': noShadow,
    'no-hairline': noHairline,
    'searchbar-expandable': expandable
  }, colorClasses(props));
  var slots = getSlots(props);
  return /*#__PURE__*/React.createElement(SearchbarTag, _extends({
    ref: elRef,
    id: id,
    style: style,
    className: classes
  }, extraAttrs, {
    onSubmit: onSubmit
  }), slots['before-inner'], /*#__PURE__*/React.createElement("div", {
    className: "searchbar-inner"
  }, slots['inner-start'], /*#__PURE__*/React.createElement("div", {
    className: "searchbar-input-wrap"
  }, slots['input-wrap-start'], /*#__PURE__*/React.createElement("input", {
    ref: inputRef,
    value: value,
    placeholder: placeholder,
    spellCheck: spellcheck,
    type: "search",
    onInput: onInput,
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur
  }), /*#__PURE__*/React.createElement("i", {
    className: "searchbar-icon"
  }), clearEl, slots['input-wrap-end']), disableEl, slots['inner-end'], slots.default), slots['after-inner']);
});
Searchbar.displayName = 'zmp-searchbar';
export default Searchbar;