Filter.tsx

Filter.tsx

import * as React from "react";
import styled from "styled-components";
import { Input, Icon } from "antd";

const Container = styled.div`
  margin: 10px auto;
  padding: 0 10px;
`;

export interface IFilterProps {
  filter?: string;
  width?: number;
  onChange?: (filter: string) => void;
}

export default class Filter extends React.Component<IFilterProps> {
  render() {
    const { filter, width, onChange } = this.props;
    return (
      <Container style={{ width }}>
        <Input
          defaultValue={filter}
          suffix={
            filter ? (
              <Icon
                type="close"
                onClick={() => {
                  onChange("");
                }}
              />
            ) : null
          }
          onChange={e => {
            onChange(e.target.value);
          }}
        />
      </Container>
    );
  }
}