lucid-ui
Version:
A UI component library from AppNexus.
87 lines • 4.02 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
var Option = index_1.SearchableMultiSelect.Option;
var 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' },
};
exports.default = create_react_class_1.default({
getInitialState: function () {
return {
selectedIds: [],
visibleIds: [],
isLoading: false,
};
},
componentDidMount: function () {
this.handleSearch('');
},
handleSearch: function (searchText) {
var _this = this;
this.setState({ isLoading: true });
// Fake an API call
setTimeout(function () {
var visibleIds = lodash_1.default.reduce(allData, function (acc, _a, id) {
var name = _a.name;
return lodash_1.default.includes(name.toLowerCase(), searchText.toLowerCase())
? acc.concat(id)
: acc;
}, []);
_this.setState({
visibleIds: visibleIds,
isLoading: false,
});
}, 750);
},
handleRemove: function (_a) {
var callbackId = _a.props.callbackId;
this.setState({
selectedIds: lodash_1.default.without(this.state.selectedIds, callbackId),
});
},
handleSelect: function (index, _a) {
var callbackId = _a.props.callbackId;
this.setState({
selectedIds: lodash_1.default.xor(this.state.selectedIds, [callbackId]),
});
},
render: function () {
var _this = this;
var _a = this.state, isLoading = _a.isLoading, visibleIds = _a.visibleIds, selectedIds = _a.selectedIds;
// Calculate selected indices based on selected ids
var selectedIndices = lodash_1.default.reduce(visibleIds, function (acc, id, index) {
return lodash_1.default.includes(selectedIds, id) ? acc.concat(index) : acc;
}, []);
return (react_1.default.createElement("section", null,
react_1.default.createElement(index_1.SearchableMultiSelect, { hasSelections: false, isLoading: isLoading, onSelect: this.handleSelect, onSearch: this.handleSearch, selectedIndices: selectedIndices, optionFilter: lodash_1.default.constant(true), SearchField: {
placeholder: 'Type here to simulate an API backed search',
} }, lodash_1.default.map(visibleIds, function (id) { return (react_1.default.createElement(Option, { key: id, callbackId: id }, allData[id].name)); })),
!lodash_1.default.isEmpty(selectedIds) ? (react_1.default.createElement(index_1.Selection, { isBold: true, hasBackground: true, Label: 'Selected', kind: 'container', isRemovable: false }, lodash_1.default.map(selectedIds, function (id) { return (react_1.default.createElement(index_1.Selection, { key: id, Label: allData[id].name, callbackId: id, onRemove: _this.handleRemove })); }))) : null));
},
});
//# sourceMappingURL=03.asynchronous.js.map