@gechiui/components/build-module/search-control/index.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { useInstanceId } from '@gechiui/compose';
import { __ } from '@gechiui/i18n';
import { Icon, search, closeSmall } from '@gechiui/icons';
import { forwardRef } from '@gechiui/element';
/**
 * Internal dependencies
 */

import { Button } from '../';
import BaseControl from '../base-control';
import { useCombinedRef } from '../utils';

function SearchControl(_ref, ref) {
  let {
    className,
    onChange,
    onKeyDown,
    value,
    label,
    placeholder = __('搜索'),
    hideLabelFromVision = true,
    help,
    onClose
  } = _ref;
  const instanceId = useInstanceId(SearchControl);
  const searchInput = useCombinedRef(ref);
  const id = `components-search-control-${instanceId}`;

  const renderRightButton = () => {
    if (onClose) {
      return createElement(Button, {
        icon: closeSmall,
        label: __('关闭搜索'),
        onClick: onClose
      });
    }

    if (!!value) {
      return createElement(Button, {
        icon: closeSmall,
        label: __('重置搜索'),
        onClick: () => {
          onChange('');
          searchInput.current.focus();
        }
      });
    }

    return createElement(Icon, {
      icon: search
    });
  };

  return createElement(BaseControl, {
    label: label,
    id: id,
    hideLabelFromVision: hideLabelFromVision,
    help: help,
    className: classnames(className, 'components-search-control')
  }, createElement("div", {
    className: "components-search-control__input-wrapper"
  }, createElement("input", {
    ref: searchInput,
    className: "components-search-control__input",
    id: id,
    type: "search",
    placeholder: placeholder,
    onChange: event => onChange(event.target.value),
    onKeyDown: onKeyDown,
    autoComplete: "off",
    value: value || ''
  }), createElement("div", {
    className: "components-search-control__icon"
  }, renderRightButton())));
}

export default forwardRef(SearchControl);
//# sourceMappingURL=index.js.map