From d350d2c9e729fae11f3618b587e48b130641f83b Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Wed, 29 Aug 2018 13:03:51 -0700 Subject: [PATCH 1/2] Converst SearchBar to TS Co-authored-by: Deniz Kusefoglu Co-authored-by: Daniel Campbell --- ui/src/hosts/components/SearchBar.js | 56 ------------------------ ui/src/hosts/components/SearchBar.tsx | 61 +++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 56 deletions(-) delete mode 100644 ui/src/hosts/components/SearchBar.js create mode 100644 ui/src/hosts/components/SearchBar.tsx diff --git a/ui/src/hosts/components/SearchBar.js b/ui/src/hosts/components/SearchBar.js deleted file mode 100644 index 9f23025c7..000000000 --- a/ui/src/hosts/components/SearchBar.js +++ /dev/null @@ -1,56 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import _ from 'lodash' -import {ErrorHandling} from 'src/shared/decorators/errors' - -@ErrorHandling -class SearchBar extends Component { - constructor(props) { - super(props) - this.state = { - searchTerm: '', - } - } - - componentWillMount() { - this.handleSearch = _.debounce(this.handleSearch, 50) - } - - handleSearch = () => { - this.props.onSearch(this.state.searchTerm) - } - - handleChange = () => { - this.setState({searchTerm: this.refs.searchInput.value}, this.handleSearch) - } - - render() { - const {placeholder, width} = this.props - return ( -
- - -
- ) - } -} - -const {func, number, string} = PropTypes - -SearchBar.defaultProps = { - width: 260, -} - -SearchBar.propTypes = { - width: number, - onSearch: func.isRequired, - placeholder: string.isRequired, -} - -export default SearchBar diff --git a/ui/src/hosts/components/SearchBar.tsx b/ui/src/hosts/components/SearchBar.tsx new file mode 100644 index 000000000..f98c600e0 --- /dev/null +++ b/ui/src/hosts/components/SearchBar.tsx @@ -0,0 +1,61 @@ +// Libraries +import React, {PureComponent, ChangeEvent} from 'react' +import _ from 'lodash' + +// Decorators +import {ErrorHandling} from 'src/shared/decorators/errors' + +interface Props { + width?: number + placeholder: string + onSearch: (searchTerm: string) => void +} + +interface State { + searchTerm: string +} + +@ErrorHandling +class SearchBar extends PureComponent { + public static defaultProps: Partial = { + width: 260, + } + + public debouncedHandleSearch: () => void + + constructor(props: Props) { + super(props) + this.state = { + searchTerm: '', + } + } + + public componentWillMount() { + this.debouncedHandleSearch = _.debounce(this.handleSearch, 50) + } + + public render() { + const {placeholder, width} = this.props + return ( +
+ + +
+ ) + } + + private handleSearch = () => { + this.props.onSearch(this.state.searchTerm) + } + + private handleChange = (e: ChangeEvent) => { + this.setState({searchTerm: e.target.value}, this.debouncedHandleSearch) + } +} + +export default SearchBar From 2bc23982bb66fccf393486a874ad7b9a7be2409f Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Wed, 29 Aug 2018 13:39:42 -0700 Subject: [PATCH 2/2] Add searchBar to dashboardStep in connectionWizard. Co-authored-by: Deniz Kusefoglu Co-authored-by: Daniel Campbell --- ui/src/sources/components/DashboardStep.scss | 10 +++++++ ui/src/sources/components/DashboardStep.tsx | 28 +++++++++++++++++--- ui/src/utils/searchMatch.ts | 2 ++ 3 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 ui/src/utils/searchMatch.ts diff --git a/ui/src/sources/components/DashboardStep.scss b/ui/src/sources/components/DashboardStep.scss index 90f02d1a8..2c91a99dd 100644 --- a/ui/src/sources/components/DashboardStep.scss +++ b/ui/src/sources/components/DashboardStep.scss @@ -2,4 +2,14 @@ position: relative; min-width: 100%; min-height: 100%; +} + +.dashboard-step--filter-controls { + margin-bottom: $ix-marg-c; + padding: 0 2px; + box-sizing: border-box; + min-width: 100%; + display: inline-flex; + justify-content: flex-end; + } \ No newline at end of file diff --git a/ui/src/sources/components/DashboardStep.tsx b/ui/src/sources/components/DashboardStep.tsx index ccf035c81..1d4220e45 100644 --- a/ui/src/sources/components/DashboardStep.tsx +++ b/ui/src/sources/components/DashboardStep.tsx @@ -4,16 +4,23 @@ import React, {Component} from 'react' // APIs import {getProtoBoards} from 'src/sources/apis' -// Components +// Decorators import {ErrorHandling} from 'src/shared/decorators/errors' + +// Utils +import {isSearchMatch} from 'src/utils/searchMatch' + +// Components import GridSizer from 'src/reusable_ui/components/grid_sizer/GridSizer' import CardSelectCard from 'src/reusable_ui/components/card_select/CardSelectCard' +import SearchBar from 'src/hosts/components/SearchBar' // Types import {Protoboard} from 'src/types' interface State { selected: object + searchTerm: string protoboards: Protoboard[] } @@ -24,6 +31,7 @@ class DashboardStep extends Component<{}, State> { this.state = { selected: {}, protoboards: [], + searchTerm: '', } } @@ -37,6 +45,12 @@ class DashboardStep extends Component<{}, State> { if (protoboards && protoboards.length) { return (
+
+ +
{this.dashboardCards}
) @@ -44,10 +58,16 @@ class DashboardStep extends Component<{}, State> { return
} - private get dashboardCards() { - const {selected, protoboards} = this.state + private setSearchTerm = searchTerm => { + this.setState({searchTerm}) + } - return protoboards.map((protoboard, i) => { + private get dashboardCards() { + const {selected, protoboards, searchTerm} = this.state + const filteredProtoboards = protoboards.filter(pb => + isSearchMatch(pb.meta.name, searchTerm) + ) + return filteredProtoboards.map((protoboard, i) => { const {meta} = protoboard return ( + input.toLowerCase().includes(searchTerm.toLowerCase())