lucid-ui
Version:
A UI component library from AppNexus.
29 lines (28 loc) • 2.35 kB
JavaScript
import React from 'react';
import _ from 'lodash';
import { SearchableSingleSelect, Underline } from '../../../index';
// eslint-disable-next-line react/prop-types
const OptionCols = ({ col1, col2, col3, textMatch, }) => (React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", { style: { width: 100 } },
React.createElement(Underline, { match: textMatch }, col1)),
React.createElement("div", { style: { width: 100 } },
React.createElement(Underline, { match: textMatch }, col2)),
React.createElement("div", { style: { width: 200 } },
React.createElement(Underline, { match: textMatch }, col3))));
const optionFilter = (searchText, { filterText }) => {
if (filterText) {
return new RegExp(_.escapeRegExp(searchText), 'i').test(filterText);
}
return true;
};
export default class extends React.Component {
render() {
return (React.createElement(SearchableSingleSelect, { optionFilter: optionFilter },
React.createElement(SearchableSingleSelect.OptionGroup, null,
React.createElement(OptionCols, { col1: 'ID', col2: 'NAME', col3: 'DESCRIPTION' }),
React.createElement(SearchableSingleSelect.Option, { filterText: '13 Drone lorem ipsum dolor sit', Selected: 'Drone (13)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '13', col2: 'Drone', col3: 'lorem ipsum dolor sit', textMatch: searchText }))),
React.createElement(SearchableSingleSelect.Option, { filterText: '14 Appa dolor sit amet consectetur', Selected: 'Appa (14)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '14', col2: 'Appa', col3: 'dolor sit amet consectetur', textMatch: searchText }))),
React.createElement(SearchableSingleSelect.Option, { filterText: '15 Breakfast amet consectetur adipiscing elit', Selected: 'Breakfast (14)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '14', col2: 'Breakfast', col3: 'amet consectetur adipiscing elit', textMatch: searchText }))),
React.createElement(SearchableSingleSelect.Option, { filterText: '16 Scout adipiscing elit sed do', Selected: 'Scout (15)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '15', col2: 'Scout', col3: 'adipiscing elit sed do', textMatch: searchText }))))));
}
}