@fruits-chain/react-native-xiaoshu/lib/module/search/index.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || 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); }

import isUndefined from 'lodash/isUndefined';
import noop from 'lodash/noop';
import React, { useRef, useCallback, memo, forwardRef } from 'react';
import { View } from 'react-native';
import Button from '../button';
import { getDefaultValue } from '../helpers';
import { usePersistFn, useDebounceFn } from '../hooks';
import ArrowLeftOutline from '../icon/arrow-left';
import SearchOutline from '../icon/search';
import Locale from '../locale';
import TextInput from '../text-input';
import { varCreator as varCreatorTextInput } from '../text-input/style';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';
/**
 * 搜索
 */

const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    iconSize = 20,
    iconColor,
    onSearch,
    showBack = false,
    onPressBack,
    autoSearch = false,
    onSearchDebounceWait = 300,
    searchText,
    value,
    defaultValue,
    placeholder,
    placeholderTextColor,
    autoFocus,
    onChangeText,
    style,
    ...restProps
  } = _ref;
  const locale = Locale.useLocale().Search;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const CV_TEXT_INPUT = Theme.createVar(TOKENS, varCreatorTextInput);
  const STYLES = Theme.createStyle(CV, styleCreator);
  const onChangeTextPersistFn = usePersistFn(onChangeText || noop);
  const {
    run: runOnSearch
  } = useDebounceFn(onSearch || noop, {
    wait: onSearchDebounceWait
  });
  /** 输入框内部的值，不维护状态，避免没必要的更新 */

  const SearchText = useRef(!isUndefined(value) ? value : defaultValue);
  placeholderTextColor = getDefaultValue(placeholderTextColor, CV_TEXT_INPUT.text_input_placeholder_text_color);
  iconColor = getDefaultValue(iconColor, placeholderTextColor);
  const onChange = useCallback(v => {
    SearchText.current = v;

    if (autoSearch) {
      runOnSearch(v);
    }
  }, [autoSearch, runOnSearch]);

  const _onChangeText = useCallback(v => {
    SearchText.current = v;
    onChangeTextPersistFn(v);

    if (autoSearch) {
      runOnSearch(v);
    }
  }, [autoSearch, onChangeTextPersistFn, runOnSearch]);

  const onPress = useCallback(() => {
    runOnSearch(SearchText.current);
  }, [runOnSearch]);
  return /*#__PURE__*/React.createElement(View, _extends({}, restProps, {
    style: [STYLES.search, showBack ? STYLES.search_back : null, style]
  }), showBack ? /*#__PURE__*/React.createElement(ArrowLeftOutline, {
    onPress: onPressBack,
    color: CV.search_back_icon_color,
    size: 24,
    style: STYLES.icon_back
  }) : null, /*#__PURE__*/React.createElement(TextInput, {
    ref: ref,
    clearable: true,
    fixGroupStyle: STYLES.text_input_group,
    style: STYLES.text_input,
    defaultValue: defaultValue,
    value: value,
    placeholder: placeholder,
    placeholderTextColor: placeholderTextColor,
    prefix: /*#__PURE__*/React.createElement(SearchOutline, {
      color: iconColor,
      size: iconSize
    }),
    onChange: onChange,
    onChangeText: _onChangeText,
    autoFocus: autoFocus
  }), /*#__PURE__*/React.createElement(Button, {
    text: searchText || locale.searchText,
    type: "primary",
    size: "s",
    onPress: onPress
  }));
});
export default /*#__PURE__*/memo(Search);
//# sourceMappingURL=index.js.map