feat: add sorting functionality (#558)

* feat: add sorting functionality

* feat: replace sort and sortOrder to filterSort and sorting only works for search filter

* fix: test case and demo

* refactor: immutable array sort

* fix: typescript error

* chore: Show scrollbar when open (#557)

* chore: Show scrollbar when open

* fix logic

* 11.4.2

* chore: Use github action

* chore: RM circle ci

* docs: Update badge

Co-authored-by: n0ruSh <[email protected]>
Co-authored-by: 二货机器人 <[email protected]>

Author: 3 people

README.md

@@ -100,6 +100,7 @@ export default () => (
 | disabled | whether disabled select | bool | false |
 | filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | bool | true/Function(inputValue:string, option:Option) |
 | optionFilterProp | which prop value of option will be used for filter if filterOption is true | String | 'value' |
+| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. | Function(optionA:Option, optionB: Option) | - |
 | optionLabelProp | render option value or option children as content of select | String: 'value'/'children' | 'value' |
 | defaultValue | initial selected option(s) | String/Array<String> | - |
 | value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |

examples/filterSort.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Select from '../src';
+import '../assets/index.less';
+
+const incidencesStateResource = [
+  { value: 4, label: 'Not Identified' },
+  { value: 3, label: 'Closed' },
+  { value: 2, label: 'Communicated' },
+  { value: 6, label: 'Identified' },
+  { value: 1, label: 'Resolved' },
+  { value: 5, label: 'Cancelled' },
+];
+
+const sorterByLabel = (optionA, optionB) => optionA.label.localeCompare(optionB.label);
+
+const Test = () => (
+  <div>
+    <h3> with filter sort </h3>
+    <Select
+      showSearch
+      style={{ width: 500 }}
+      filterSort={sorterByLabel}
+      optionFilterProp="label"
+      options={incidencesStateResource}
+    ></Select>
+    <h3> without filter sort </h3>
+    <Select
+      showSearch
+      style={{ width: 500 }}
+      optionFilterProp="label"
+      options={incidencesStateResource}
+    />
+  </div>
+);
+
+export default Test;

src/generate.tsx

@@ -85,6 +85,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
    * It's by design.
    */
   filterOption?: boolean | FilterFunc<OptionsType[number]>;
+  filterSort?: (optionA: OptionsType[number], optionB: OptionsType[number]) => number;
   showSearch?: boolean;
   autoClearSearchValue?: boolean;
   onSearch?: (value: string) => void;
@@ -187,7 +188,7 @@ export interface GenerateConfig<OptionsType extends object[]> {
   /** Convert single raw value into { label, value } format. Will be called by each value */
   getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
   filterOptions: FilterOptions<OptionsType>;
-  findValueOption: // Need still support legacy ts api
+  findValueOption:// Need still support legacy ts api
     | ((values: RawValueType[], options: FlattenOptionsType<OptionsType>) => OptionsType)
     // New API add prevValueOptions support
     | ((
@@ -258,6 +259,7 @@ export default function generateSelector<
       inputValue,
       searchValue,
       filterOption,
+      filterSort,
       optionFilterProp = 'value',
       autoClearSearchValue = true,
       onSearch,
@@ -443,9 +445,12 @@ export default function generateSelector<
           key: '__RC_SELECT_TAG_PLACEHOLDER__',
         });
       }
+      if (filterSort && Array.isArray(filteredOptions)) {
+        return ([...filteredOptions] as OptionsType).sort(filterSort);
+      }
 
       return filteredOptions;
-    }, [mergedOptions, mergedSearchValue, mode, mergedShowSearch]);
+    }, [mergedOptions, mergedSearchValue, mode, mergedShowSearch, filterSort]);
 
     const displayFlattenOptions: FlattenOptionsType<OptionsType> = useMemo(
       () => flattenOptions(displayOptions, props),

tests/Select.test.tsx

@@ -1624,4 +1624,30 @@ describe('Select.Basic', () => {
       .first()
       .simulate('mouseenter');
   });
+
+  it('filterSort should work', () => {
+    const wrapper = mount(
+      <Select
+        showSearch
+        filterSort={(optionA, optionB) =>
+          (optionA.label as string).localeCompare(optionB.label as string)
+        }
+        optionFilterProp="label"
+        options={[
+          { value: 4, label: 'Not Identified' },
+          { value: 3, label: 'Closed' },
+          { value: 2, label: 'Communicated' },
+          { value: 5, label: 'Cancelled' },
+        ]}
+      />,
+    );
+
+    wrapper.find('input').simulate('change', { target: { value: 'i' } });
+    expect(
+      wrapper
+        .find('.rc-select-item-option-content')
+        .first()
+        .text(),
+    ).toBe('Communicated');
+  });
 });