lucid-ui
Version:
A UI component library from AppNexus.
70 lines (69 loc) • 2.55 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { SearchableSingleSelect } from '../../../index';
const { Option } = SearchableSingleSelect;
const allData = {
100: { name: 'Rita Daniel' },
101: { name: 'Meghan Mcgowan' },
102: { name: 'Latisha Kent' },
103: { name: 'Jeannine Horton' },
104: { name: 'Noreen Joyner' },
105: { name: 'Angelique Head' },
106: { name: 'Kim Salinas' },
107: { name: 'Alexis Small' },
108: { name: 'Fernandez Singleton' },
109: { name: 'Jacqueline Alvarado' },
110: { name: 'Cornelia Roman' },
111: { name: 'John Gonzales' },
112: { name: 'Mcleod Hodge' },
113: { name: 'Fry Barrera' },
114: { name: 'Jannie Compton' },
115: { name: 'June Odom' },
116: { name: 'Rose Foster' },
117: { name: 'Kathryn Prince' },
118: { name: 'Hebert Bowman' },
119: { name: 'Shawn Burgess' },
};
export default createClass({
getInitialState() {
return {
selectedId: null,
visibleIds: [],
isLoading: false,
};
},
componentDidMount() {
this.handleSearch('');
},
handleSearch(searchText) {
this.setState({ isLoading: true });
// Fake an API call
setTimeout(() => {
const visibleIds = _.reduce(allData, (acc, { name }, id) => {
return _.includes(name.toLowerCase(), searchText.toLowerCase())
? acc.concat(id)
: acc;
}, []);
this.setState({
visibleIds,
isLoading: false,
});
}, 750);
},
handleSelect(index, event) {
this.setState({
selectedId: _.get(event, 'props.callbackId', null),
});
},
render() {
const { isLoading, visibleIds, selectedId } = this.state;
const selectedIndex = _.indexOf(visibleIds, selectedId) === -1
? null
: _.indexOf(visibleIds, selectedId);
return (React.createElement("section", null,
React.createElement(SearchableSingleSelect, { hasSelections: false, isLoading: isLoading, onSelect: this.handleSelect, onSearch: this.handleSearch, selectedIndex: selectedIndex, optionFilter: _.constant(true), SearchField: {
placeholder: 'Type here to simulate an API backed search',
} }, _.map(visibleIds, id => (React.createElement(Option, { key: id, callbackId: id }, allData[id].name))))));
},
});