SearchableAddressBook: change to be a function component.

master
Tom Hacohen 4 years ago
parent c1b57eecfd
commit 2eaa9b503a

@ -13,57 +13,37 @@ import { ContactType } from "../pim-types";
import AddressBook from "../components/AddressBook"; import AddressBook from "../components/AddressBook";
class SearchableAddressBook extends React.PureComponent { interface PropsType {
public props: { entries: ContactType[];
entries: ContactType[]; onItemClick: (contact: ContactType) => void;
onItemClick: (contact: ContactType) => void;
};
public state: {
searchQuery: string;
};
constructor(props: any) {
super(props);
this.state = { searchQuery: "" };
this.handleInputChange = this.handleInputChange.bind(this);
}
public handleInputChange(event: React.ChangeEvent<any>) {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value,
});
}
public render() {
const {
entries,
...rest
} = this.props;
const reg = new RegExp(this.state.searchQuery, "i");
return (
<React.Fragment>
<TextField
name="searchQuery"
value={this.state.searchQuery}
style={{ fontSize: "120%", marginLeft: 20 }}
placeholder="Find Contacts"
onChange={this.handleInputChange}
/>
{this.state.searchQuery &&
<IconButton onClick={() => this.setState({ searchQuery: "" })}>
<IconClear />
</IconButton>
}
<IconSearch />
<AddressBook entries={entries} filter={(ent: ContactType) => ent.fn?.match(reg)} {...rest} />
</React.Fragment>
);
}
} }
export default SearchableAddressBook; export default function SearchableAddressBook(props: PropsType) {
const [searchQuery, setSearchQuery] = React.useState("");
const {
entries,
...rest
} = props;
const reg = new RegExp(searchQuery, "i");
return (
<React.Fragment>
<TextField
name="searchQuery"
value={searchQuery}
style={{ fontSize: "120%", marginLeft: 20 }}
placeholder="Find Contacts"
onChange={(event) => setSearchQuery(event.target.value)}
/>
{searchQuery &&
<IconButton onClick={() => setSearchQuery("")}>
<IconClear />
</IconButton>
}
<IconSearch />
<AddressBook entries={entries} filter={(ent: ContactType) => ent.fn?.match(reg)} {...rest} />
</React.Fragment>
);
}

Loading…
Cancel
Save