Dropdown.react.js

// import PropTypes from 'prop-types';
// import R, {omit} from 'ramda';
// import React, {Component} from 'react';
// import ReactDropdown from 'react-virtualized-select';
// import createFilterOptions from 'react-select-fast-filter-options';
//
// // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
// const REGEX = /\s+/; // Split on spaces
// const TOKENIZER = {
//   tokenize(text) {
//     return text
//       .split(REGEX)
//       .filter(
//         (text) => text // Filter empty tokens
//       );
//   }
// }
//
// const DELIMETER = ',';
//
// /**
//  * Dropdown is an interactive dropdown element for selecting one or more
//  * items.
//  * The values and labels of the dropdown items are specified in the `options`
//  * property and the selected item(s) are specified with the `value` property.
//  *
//  * Use a dropdown when you have many options (more than 5) or when you are
//  * constrained for space. Otherwise, you can use RadioItems or a Checklist,
//  * which have the benefit of showing the users all of the items at once.
//  */
// export default class Dropdown extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             value: props.value,
//             filterOptions: createFilterOptions({
//                 options: props.options,
//                 tokenizer: TOKENIZER
//             })
//         };
//     }
//
//     componentWillReceiveProps(newProps) {
//         this.setState({value: newProps.value});
//         if (newProps.options !== this.props.options) {
//             this.setState({
//                 filterOptions: createFilterOptions({
//                     options: newProps.options,
//                     tokenizer: TOKENIZER
//                 })
//             });
//         }
//     }
//
//     render() {
//         const {
//             id, fireEvent, multi, options, setProps, style
//         } = this.props;
//         const {filterOptions, value} = this.state;
//         let selectedValue;
//         if (R.type(value) === 'array') {
//             selectedValue = value.join(DELIMETER);
//         } else {
//             selectedValue = value;
//         }
//         return (
//             <div id={id} style={style}>
//                 <ReactDropdown
//                     filterOptions={filterOptions}
//                     options={options}
//                     value={selectedValue}
//                     onChange={selectedOption => {
//                         if (multi) {
//                             let value;
//                             if (R.isNil(selectedOption)) {
//                                 value = []
//                             } else {
//                                 value = R.pluck('value', selectedOption);
//                             }
//                             this.setState({value});
//                             if (setProps) setProps({value});
//                         } else {
//                             let value;
//                             if (R.isNil(selectedOption)) {
//                                 value = null
//                             } else {
//                                 value = selectedOption.value;
//                             }
//                             this.setState({value});
//                             if (setProps) setProps({value});
//                         }
//                         if (fireEvent) fireEvent('change');
//                     }}
//                     {...omit(['fireEvent', 'setProps', 'value'], this.props)}
//                 />
//             </div>
//         );
//     }
// }
//
// Dropdown.propTypes = {
//     id: PropTypes.string,
//
//     /**
//      * An array of options
//      */
//      options: PropTypes.arrayOf(
//          PropTypes.shape({
//             /**
//              * The checkbox's label
//              */
//             label: PropTypes.string,
//
//             /**
//              * The value of the checkbox. This value
//              * corresponds to the items specified in the
//              * `values` property.
//              */
//             value: PropTypes.string,
//
//             /**
//              * If true, this checkbox is disabled and can't be clicked on.
//              */
//             disabled: PropTypes.bool
//         })
//     ),
//
//     /**
//      * The value of the input. If `multi` is false (the default)
//      * then value is just a string that corresponds to the values
//      * provided in the `options` property. If `multi` is true, then
//      * multiple values can be selected at once, and `value` is an
//      * array of items with values corresponding to those in the
//      * `options` prop.
//      */
//     value: PropTypes.oneOfType([
//         PropTypes.string,
//         PropTypes.arrayOf(PropTypes.string)
//     ]),
//
//     /**
//      * className of the dropdown element
//      */
//     className: PropTypes.string,
//
//
//     /**
//      * Whether or not the dropdown is "clearable", that is, whether or
//      * not a small "x" appears on the right of the dropdown that removes
//      * the selected value.
//      */
//     clearable: PropTypes.bool,
//
//     /**
//      * If true, the option is disabled
//      */
//     disabled: PropTypes.bool,
//
//     /**
//      * If true, the user can select multiple values
//      */
//     multi: PropTypes.bool,
//
//     /**
//      * The grey, default text shown when no option is selected
//      */
//     placeholder: PropTypes.string,
//
//     /**
//      * Whether to enable the searching feature or not
//      */
//     searchable: PropTypes.bool,
//
//     /**
//      * Dash-assigned callback that gets fired when the input changes
//      */
//     setProps: PropTypes.func,
//
//     dashEvents: PropTypes.oneOf(['change'])
// };
//
// Dropdown.defaultProps = {
//     clearable: true,
//     disabled: false,
//     multi: false,
//     searchable: true
// };