react-native-komect-uikit/src/input/Search.js

React Native UI Toolkit

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
  ActivityIndicator,
  View,
  StyleSheet,
  TextInput,
  Platform,
  Text as NativeText,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import colors from '../config/colors';
import normalize from '../helpers/normalizeText';

class Search extends Component {
  focus() {
    const ref = this.props.textInputRef;
    this.refs[ref].focus();
  }

  clearText() {
    if (this.props.onChangeText) {
      this.props.onChangeText('');
    }
    try {
      const ref = this.props.textInputRef;
      this.refs[ref].clear();
    } catch (e) {
      if (__DEV__)
        console.warn(
          'Could not access textInput reference, make sure you supplied the textInputRef'
        );
    }
  }

  render() {
    const {
      containerStyle,
      inputStyle,
      icon,
      noIcon,
      lightTheme,
      round,
      showLoadingIcon,
      loadingIcon,
      clearIcon,
      containerRef,
      textInputRef,
      underlineColorAndroid,
      ...attributes
    } = this.props;
    return (
      <View
        ref={containerRef}
        style={[
          styles.container,
          lightTheme && styles.containerLight,
          containerStyle && containerStyle,
        ]}
      >
        <TextInput
          ref={textInputRef}
          underlineColorAndroid={
            underlineColorAndroid ? underlineColorAndroid : 'transparent'
          }
          style={[
            styles.input,
            lightTheme && styles.inputLight,
            noIcon && { paddingLeft: 9 },
            round && { borderRadius: Platform.OS === 'ios' ? 15 : 20 },
            inputStyle && inputStyle,
            clearIcon && showLoadingIcon && { paddingRight: 50 },
            ((clearIcon && !showLoadingIcon) ||
              (!clearIcon && showLoadingIcon)) && { paddingRight: 30 },
          ]}
          {...attributes}
        />
        {!noIcon &&
          <Icon
            size={16}
            style={[styles.icon, styles.searchIcon, icon.style && icon.style]}
            name={icon.name || 'search'}
            color={icon.color || colors.grey3}
          />}
        {clearIcon &&
          <Icon
            size={16}
            style={[
              styles.icon,
              styles.clearIcon,
              clearIcon.style && clearIcon.style,
            ]}
            name={clearIcon.name || 'close'}
            onPress={this.clearText.bind(this)}
            color={clearIcon.color || colors.grey3}
          />}
        {showLoadingIcon &&
          <ActivityIndicator
            style={[
              styles.loadingIcon,
              loadingIcon.style && loadingIcon.style,
              clearIcon && { right: 35 },
            ]}
            color={icon.color || colors.grey3}
          />}
      </View>
    );
  }
}

Search.propTypes = {
  icon: PropTypes.object,
  noIcon: PropTypes.bool,
  lightTheme: PropTypes.bool,
  containerStyle: View.propTypes.style,
  inputStyle: NativeText.propTypes.style,
  round: PropTypes.bool,
  showLoadingIcon: PropTypes.bool,
  loadingIcon: PropTypes.object,
  clearIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  textInputRef: PropTypes.string,
  containerRef: PropTypes.string,
  underlineColorAndroid: PropTypes.string,
  onChangeText: PropTypes.func,
};

Search.defaultProps = {
  placeholderTextColor: colors.grey3,
  lightTheme: false,
  noIcon: false,
  round: false,
  icon: {},
  showLoadingIcon: false,
  loadingIcon: {},
};

const styles = StyleSheet.create({
  container: {
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    borderTopColor: '#000',
    backgroundColor: colors.grey0,
  },
  containerLight: {
    backgroundColor: colors.grey5,
    borderTopColor: '#e1e1e1',
    borderBottomColor: '#e1e1e1',
  },
  icon: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 15.5,
    ...Platform.select({
      android: {
        top: 20,
      },
    }),
  },
  loadingIcon: {
    backgroundColor: 'transparent',
    position: 'absolute',
    right: 16,
    top: 13,
    ...Platform.select({
      android: {
        top: 18,
      },
    }),
  },
  input: {
    paddingLeft: 26,
    paddingRight: 19,
    margin: 8,
    borderRadius: 3,
    overflow: 'hidden',
    backgroundColor: colors.searchBg,
    fontSize: normalize(14),
    color: colors.grey3,
    height: 40,
    ...Platform.select({
      ios: {
        height: 30,
      },
      android: {
        borderWidth: 0,
      },
    }),
  },
  inputLight: {
    backgroundColor: colors.grey4,
  },
  searchIcon: {
    left: 16,
  },
  clearIcon: {
    right: 16,
  },
});

export default Search;