feat: add sorting functionality

.github/workflows/main.yml

@@ -0,0 +1,114 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+
+      - name: cache package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only
+
+      - name: hack for singe file
+        run: |
+          if [ ! -d "package-temp-dir" ]; then
+            mkdir package-temp-dir
+          fi
+          cp package-lock.json package-temp-dir
+
+      - name: cache node_modules
+        id: node_modules_cache_id
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install
+        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: npm ci
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: lint
+        run: npm run lint
+
+    needs: setup
+
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: compile
+        run: npm run compile
+
+    needs: setup
+
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: coverage
+        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
+
+    needs: setup

README.md

@@ -6,7 +6,7 @@ React Select
 
 [![NPM version][npm-image]][npm-url]
 [![npm download][download-image]][download-url]
-[![build status][circleci-image]][circleci-url]
+[![build status][github-actions-image]][github-actions-url]
 [![Test coverage][coveralls-image]][coveralls-url]
 [![Dependencies][david-image]](david-url)
 [![DevDependencies][david-dev-image]][david-dev-url]
@@ -16,8 +16,8 @@ React Select
 [npm-url]: http://npmjs.org/package/rc-select
 [travis-image]: https://img.shields.io/travis/react-component/select/master?style=flat-square
 [travis-url]: https://travis-ci.com/react-component/select
-[circleci-image]: https://img.shields.io/circleci/build/github/react-component/select.svg?style=flat-square
-[circleci-url]: https://circleci.com/gh/react-component/select
+[github-actions-image]: https://github.com/react-component/select/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/select/actions
 [coveralls-image]: https://img.shields.io/coveralls/react-component/select.svg?style=flat-square
 [coveralls-url]: https://coveralls.io/r/react-component/select?branch=master
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square
@@ -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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "11.4.1",
+  "version": "11.4.2",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
@@ -48,7 +48,7 @@
     "rc-motion": "^2.0.1",
     "rc-trigger": "^5.0.4",
     "rc-util": "^5.0.1",
-    "rc-virtual-list": "^3.0.3",
+    "rc-virtual-list": "^3.2.0",
     "warning": "^4.0.3"
   },
   "devDependencies": {

src/OptionList.tsx

@@ -154,6 +154,11 @@ const OptionList: React.RefForwardingComponent<
       }
     });
 
+    // Force trigger scrollbar visible when open
+    if (open) {
+      listRef.current?.scrollTo(undefined);
+    }
+
     return () => clearTimeout(timeoutId);
   }, [open]);
 

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');
+  });
 });