All files / app/components SearchToggle.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71                            1x           1x                         2x     4x 4x       2x                 2x                     2x 1x     2x 1x 1x      
import React from 'react';
import { style } from 'app/styles';
 
// import { SearchInput } from 'app/components/SearchInput';
import { SearchIcon } from 'app/components/SearchIcon';
import { SearchInput } from 'app/components/SearchInput';
 
export interface SearchToggleProps {
  value: string;
  onChange: (value) => void;
  placeholder?: string;
  style?: object;
}
 
const initialState = {
  showSearchInput: false,
};
 
type SearchToggleState = Readonly<typeof initialState>;
 
const iconStyle = {
  _extends: ['selectable'],
  width: 25,
  height: 23,
  textAlign: 'center',
  paddingTop: 6,
  marginRight: 12,
};
 
export class SearchToggle extends React.Component<
  SearchToggleProps,
  SearchToggleState
> {
  readonly state: SearchToggleState = initialState;
 
  render() {
    const { value, onChange } = this.props;
    if (
      (value && value.toString().trim() !== '') ||
      this.state.showSearchInput
    ) {
      return (
        <SearchInput
          value={value}
          onChange={onChange}
          onClear={this.onClose}
          style={style(this.props.style)}
        />
      );
    }
    return (
      <div
        style={style(iconStyle, this.props.style, {
          width: iconStyle.width,
        })}
        onClick={this.onIconClick}
      >
        <SearchIcon width={16} height={16} />
      </div>
    );
  }
  onIconClick = () => {
    this.setState({ showSearchInput: true });
  };
 
  onClose = () => {
    this.setState({ showSearchInput: false });
    this.props.onChange('');
  };
}