@td-design/react-native/lib/module/search-bar/useSearchBar.js

react-native UI组件库

import { useEffect, useRef } from 'react';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
export default function useSearchBar(_ref) {
  let {
    autoFocus = false,
    defaultValue,
    onChange,
    onSearch
  } = _ref;
  const inputRef = useRef(null);
  const [keywords, setKeywords] = useSafeState();
  const [focused, setFocused] = useSafeState(autoFocus);
  useEffect(() => {
    setKeywords(defaultValue);
  }, [defaultValue]);
  useEffect(() => {
    if (autoFocus) {
      var _inputRef$current;
      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
      setFocused(true);
    }
  }, [autoFocus]);

  /** 聚焦 */
  const onFocus = () => {
    var _inputRef$current2;
    setFocused(true);
    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
  };

  /** 失焦 */
  const onBlur = () => {
    var _inputRef$current3;
    setFocused(false);
    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.blur();
  };
  const onCancel = () => {
    var _inputRef$current4, _inputRef$current5;
    (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.clear();
    (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.blur();
    setFocused(false);
    setKeywords('');
    onChange === null || onChange === void 0 ? void 0 : onChange('');
    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
  };
  return {
    onFocus: useMemoizedFn(onFocus),
    onBlur: useMemoizedFn(onBlur),
    onCancel: useMemoizedFn(onCancel),
    setKeywords,
    inputRef,
    focused,
    keywords
  };
}
//# sourceMappingURL=useSearchBar.js.map