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

react-native UI组件库

import React, { useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import InputItem from '../input/InputItem';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
import useSearchBar from './useSearchBar';
const {
  ONE_PIXEL
} = helpers;
const SearchBar = props => {
  const {
    placeholder = '搜索',
    showCancelButton = true,
    allowClear = true,
    disabled = false,
    defaultValue,
    autoFocus = false,
    cancelText = '取消',
    returnKeyType = 'search',
    keyboardType = 'default',
    style,
    inputStyle,
    onChange,
    onSearch,
    children,
    activeOpacity = 0.6
  } = props;
  const theme = useTheme();
  const {
    inputRef,
    focused,
    keywords,
    onFocus,
    onBlur,
    onCancel,
    setKeywords
  } = useSearchBar({
    autoFocus,
    defaultValue,
    onChange,
    onSearch
  });
  const styles = StyleSheet.create({
    container: {
      overflow: 'hidden',
      paddingVertical: theme.spacing.x1,
      backgroundColor: theme.colors.gray50
    },
    textInput: {
      flex: 1,
      textAlign: 'left',
      borderBottomWidth: 0
    }
  });
  const CancelBtn = useMemo(() => {
    if (!showCancelButton || !focused) return null;
    return /*#__PURE__*/React.createElement(Pressable, {
      onPress: onCancel,
      activeOpacity: activeOpacity,
      style: {
        marginLeft: allowClear ? 0 : theme.spacing.x1,
        marginRight: theme.spacing.x1
      }
    }, /*#__PURE__*/React.createElement(Text, {
      variant: "p0",
      color: "primary200"
    }, cancelText));
  }, [showCancelButton, focused, activeOpacity, theme.spacing.x1, cancelText, onCancel, allowClear]);
  return /*#__PURE__*/React.createElement(Flex, {
    style: [styles.container, style]
  }, !!children && /*#__PURE__*/React.createElement(Box, {
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 'x1',
    borderRightWidth: ONE_PIXEL,
    borderRightColor: 'gray500'
  }, children), /*#__PURE__*/React.createElement(SvgIcon, {
    name: "search",
    color: theme.colors.icon,
    style: {
      marginHorizontal: theme.spacing.x1
    }
  }), /*#__PURE__*/React.createElement(InputItem, {
    ref: inputRef,
    style: styles.textInput,
    inputStyle: inputStyle,
    placeholder: placeholder,
    editable: !disabled,
    autoFocus: autoFocus,
    value: keywords,
    returnKeyType: returnKeyType,
    keyboardType: keyboardType,
    allowClear: allowClear,
    onFocus: onFocus,
    onBlur: onBlur,
    onChange: setKeywords,
    onSubmitEditing: e => onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.nativeEvent.text),
    onClear: onCancel
  }), CancelBtn);
};
SearchBar.displayName = 'SearchBar';
export default SearchBar;
//# sourceMappingURL=index.js.map