@nutui/nutui-react/dist/esm/SearchBar.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import React__default, { useRef, useState, useEffect } from "react";
import { Search, ArrowLeft, MaskClose } from "@nutui/icons-react";
import { useConfig } from "./ConfigProvider.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { placeholder: "", shape: "square", disabled: false, maxLength: 9999, clearable: true, readOnly: false, autoFocus: false, backable: false, left: "", right: "", rightIn: "", leftIn: React__default.createElement(Search, { width: "16", height: "16" }) });
const SearchBar = (props) => {
  const classPrefix = "nut-searchbar";
  const { locale } = useConfig();
  const searchRef = useRef(null);
  const { value: outerValue, style, placeholder, shape, className, disabled, maxLength, clearable, readOnly, autoFocus, backable, right, left, leftIn, rightIn, onChange, onFocus, onBlur, onClear, onSearch, onInputClick } = Object.assign(Object.assign({}, defaultProps), props);
  const [value, setValue] = useState(() => outerValue);
  const forceFocus = () => {
    const searchSelf = searchRef.current;
    searchSelf && searchSelf.focus();
  };
  const change = (event) => {
    const { value: value2 } = event.target;
    onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value2, event));
    setValue(value2);
  };
  const focus = (event) => {
    const { value: value2 } = event.target;
    onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value2, event));
  };
  const blur = (event) => {
    const searchSelf = searchRef.current;
    searchSelf && searchSelf.blur();
    const { value: value2 } = event.target;
    onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value2, event));
  };
  useEffect(() => {
    setValue(outerValue);
  }, [outerValue]);
  useEffect(() => {
    autoFocus && forceFocus();
  }, [autoFocus]);
  const renderField = () => {
    return React__default.createElement("input", { className: `${classPrefix}-input ${clearable ? `${classPrefix}-input-clear` : ""}`, ref: searchRef, style, value: value || "", placeholder: placeholder || locale.placeholder, disabled, readOnly, maxLength, onKeyDown: onKeydown, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) });
  };
  const clickInput = (e) => {
    onInputClick && onInputClick(e);
  };
  const renderLeftIn = () => {
    if (!leftIn)
      return null;
    return React__default.createElement("div", { className: `${classPrefix}-leftin ${classPrefix}-icon` }, leftIn);
  };
  const renderLeft = () => {
    if (!backable && !left)
      return null;
    return React__default.createElement("div", { className: `${classPrefix}-left` }, backable ? React__default.createElement(ArrowLeft, { width: "16", height: "16" }) : left);
  };
  const renderRightIn = () => {
    if (!rightIn)
      return null;
    return React__default.createElement("div", { className: `${classPrefix}-rightin ${classPrefix}-icon` }, rightIn);
  };
  const renderRight = () => {
    if (!right)
      return null;
    return React__default.createElement("div", { className: `${classPrefix}-right` }, right);
  };
  const handleClear = () => {
    return React__default.createElement(
      "div",
      { className: `${classPrefix}-clear ${classPrefix}-icon`, onClick: (e) => clearaVal(e) },
      React__default.createElement(MaskClose, null)
    );
  };
  const clearaVal = (event) => {
    if (disabled || readOnly) {
      return;
    }
    setValue("");
    onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(""));
    onClear && onClear(event);
    forceFocus();
  };
  const onKeydown = (e) => {
    if (e.key === "Enter") {
      const event = e.nativeEvent;
      if (typeof event.cancelable !== "boolean" || event.cancelable) {
        event.preventDefault();
      }
      onSearch && onSearch(value);
    }
  };
  return React__default.createElement(
    "div",
    { className: `${classPrefix} ${disabled ? `${classPrefix}-disabled` : ""}  ${className || ""}`, style },
    renderLeft(),
    React__default.createElement(
      "div",
      { className: `${classPrefix}-content ${shape === "round" ? `${classPrefix}-round` : ""}` },
      renderLeftIn(),
      renderField(),
      clearable && !value && renderRightIn(),
      clearable && value && handleClear()
    ),
    renderRight()
  );
};
SearchBar.displayName = "NutSearchBar";
export {
  SearchBar as default
};