Sorting filter select options

We needed to sort the <options> used in selectFilter, but because the existing code uses Object.keys() to do this there was no way to ensure a sort order.

We also had to create boilerplate code to share options between selectFilter, which took options in the form{ value: label, ...} versus the the editor Type.Select which took them as [ { value, label }, ...].

We solved this by extending selectFilter to just use the same method as editor, which preserves the sort order that you create the options with. Here is the file we used to do it:

import React from 'react';
import PropTypes from 'prop-types';
import SelectFilter from 'react-bootstrap-table2-filter/lib/src/components/select';

// Modified version of code to allow for custom sorting
// https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-filter/src/components/select.js#L61-L73
class SortedSelectFilter extends SelectFilter {
  // We have to modify this one as we changed it
  static propTypes = {
    ...SelectFilter.propTypes,
    options: PropTypes.array.isRequired,
  };

  getOptions() {
    const optionTags = [];
    const { options, placeholder, column, withoutEmptyOption } = this.props;
    if (!withoutEmptyOption) {
      optionTags.push(
        <option key="-1" value="">
          {placeholder || `Select ${column.text}...`}
        </option>,
      );
    }

    options.forEach(({ value, label }) => {
      optionTags.push(
        <option key={value} value={value}>
          {label}
        </option>,
      );
    });

    return optionTags;
  }
}

const sortedSelectFilter = (props = {}) => ({
  Filter: SortedSelectFilter,
  props,
});

export default sortedSelectFilter;

[AllenFang]

The proper way maybe we make the options accept an object or an array. If array given, we can promise the order will be the preserve.

[AllenFang]

RELEASE NOTE

Example

Please tag me if the issue still remain @jehartzog