@alifd/meet-react/lib/search/search.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _env = require("@uni/env");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _input = _interopRequireDefault(require("../input"));
var _locale = require("../locale");
var _zhCn = _interopRequireDefault(require("../locale/lang/zh-cn"));
var _hooks = require("../utils/hooks");
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var SearchTag = function (props) {
  var children = props.children,
    _props$inForm = props.inForm,
    inForm = _props$inForm === void 0 ? false : _props$inForm,
    _props$onSubmit = props.onSubmit,
    _onSubmit = _props$onSubmit === void 0 ? function () {} : _props$onSubmit,
    others = (0, _tslib.__rest)(props, ["children", "inForm", "onSubmit"]);
  if (_env.isWeb && !inForm) {
    return /*#__PURE__*/(0, _react.createElement)("form", _extends({}, others, {
      action: "#",
      onSubmit: function onSubmit(e) {
        e.preventDefault();
        _onSubmit();
      }
    }), children);
  } else {
    return /*#__PURE__*/(0, _react.createElement)(_view.default, others, children);
  }
};
var Search = function (props, _ref) {
  var _classNames;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    _props$size = props.size,
    size = _props$size === void 0 ? 'medium' : _props$size,
    valueProp = props.value,
    placeholder = props.placeholder,
    defaultValue = props.defaultValue,
    searchText = props.searchText,
    _props$icon = props.icon,
    icon = _props$icon === void 0 ? 'search' : _props$icon,
    _props$keyboardType = props.keyboardType,
    keyboardType = _props$keyboardType === void 0 ? 'web-search' : _props$keyboardType,
    maxLength = props.maxLength,
    _props$enableNative = props.enableNative,
    enableNative = _props$enableNative === void 0 ? false : _props$enableNative,
    _props$focused = props.focused,
    focused = _props$focused === void 0 ? false : _props$focused,
    _props$highlightable = props.highlightable,
    highlightable = _props$highlightable === void 0 ? false : _props$highlightable,
    _props$hasIcon = props.hasIcon,
    hasIcon = _props$hasIcon === void 0 ? true : _props$hasIcon,
    _props$hasClear = props.hasClear,
    hasClear = _props$hasClear === void 0 ? false : _props$hasClear,
    _props$hasCancel = props.hasCancel,
    hasCancel = _props$hasCancel === void 0 ? false : _props$hasCancel,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    className = props.className,
    cancelText = props.cancelText,
    onChange = props.onChange,
    _onConfirm = props.onConfirm,
    _onSearch = props.onSearch,
    _props$onBlur = props.onBlur,
    onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
    _props$onFocus = props.onFocus,
    onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
    _props$onCancel = props.onCancel,
    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
    onClear = props.onClear,
    others = (0, _tslib.__rest)(props, ["prefix", "size", "value", "placeholder", "defaultValue", "searchText", "icon", "keyboardType", "maxLength", "enableNative", "focused", "highlightable", "hasIcon", "hasClear", "hasCancel", "disabled", "className", "cancelText", "onChange", "onConfirm", "onSearch", "onBlur", "onFocus", "onCancel", "onClear"]);
  var clsPrefix = prefix + "search";
  var rcRef = (0, _react.useRef)(null);
  var ref = _ref || rcRef;
  var _useState = (0, _react.useState)(false),
    isFocused = _useState[0],
    setFocused = _useState[1];
  var _useState2 = (0, _react.useState)(true),
    isInForm = _useState2[0],
    setInForm = _useState2[1];
  var locale = (0, _locale.useLocale)('Search', props, _zhCn.default.Search);
  var _useValue = (0, _hooks.useValue)(props, ''),
    value = _useValue[0],
    setValue = _useValue[1],
    isControlled = _useValue[2];
  var clses = {
    search: (0, _classnames.default)(className, (_classNames = {}, _classNames["" + clsPrefix] = true, _classNames[clsPrefix + "--" + size] = true, _classNames[clsPrefix + "--highlighted"] = highlightable && isFocused, _classNames))
  };
  (0, _react.useEffect)(function () {
    if (_env.isWeb && ref && ref.current) {
      var el = ref.current;
      var _inForm = false;
      while (el.parentNode && el.parentNode !== el) {
        if (el.parentNode.tagName && el.parentNode.tagName.toLowerCase() === 'form') {
          _inForm = true;
          break;
        }
        el = el.parentNode;
      }
      setInForm(_inForm);
    }
  }, []);
  var onSearch = (0, _hooks.useDeprecated)('Search', props, 'onConfirm', 'onSearch');
  var handleSubmit = function (v) {
    if (onSearch) {
      onSearch(v);
    }
  };
  var focusProp = Object.assign({}, focused ? {
    focused: true
  } : null);
  return /*#__PURE__*/(0, _react.createElement)(SearchTag, _extends({}, others, {
    inForm: isInForm,
    className: clses.search,
    onSubmit: function handleWebSubmit() {
      if (_env.isWeb) {
        var inputEl = ref.current.getElementsByTagName('input');
        if (inputEl && inputEl[0] && inputEl[0].value) {
          handleSubmit(inputEl[0].value);
        } else {
          handleSubmit('');
        }
      }
    }
  }), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    ref: ref,
    className: (0, _classnames.default)(className, prefix + "search--wrapper")
  }, function renderIcon() {
    var searchIcon = icon;
    if (!hasIcon) {
      searchIcon = null;
    } else if ((0, _utils.isString)(icon)) {
      searchIcon = /*#__PURE__*/(0, _react.createElement)(_icon.default, {
        name: icon,
        className: (0, _classnames.default)(prefix + "search--icon", prefix + "search--icon-" + size)
      });
    }
    return searchIcon;
  }(), /*#__PURE__*/(0, _react.createElement)(_input.default, _extends({}, focusProp, {
    className: (0, _classnames.default)(prefix + "search-input", prefix + "search-input--" + size),
    composition: true,
    confirmType: "search",
    value: value,
    size: size,
    placeholder: placeholder || locale.searchTipText,
    keyboardType: keyboardType,
    disabled: disabled,
    maxLength: maxLength,
    hasClear: hasClear,
    enableNative: enableNative,
    onChange: function handleChange(v, e) {
      if (!isControlled) {
        setValue(v);
      }
      if (onChange) {
        onChange(v, e);
      }
    },
    onConfirm: handleSubmit,
    onFocus: function handleFocus() {
      setFocused(true);
      if ((0, _utils.isFunction)(onFocus)) {
        onFocus();
      }
    },
    onBlur: function handleBlur() {
      setFocused(false);
      if ((0, _utils.isFunction)(onBlur)) {
        onBlur();
      }
    },
    onClear: onClear
  }))), hasCancel ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    onClick: onCancel,
    className: (0, _classnames.default)(prefix + "search--" + size + "-cancel")
  }, cancelText || locale.cancelText) : null);
};
Search.displayName = 'Search';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Search);