@rc-component/select 1.0.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present alipay.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,191 @@
+# rc-select
+
+---
+
+React Select Component.
+
+<!-- prettier-ignore -->
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square
+[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
+[github-actions-image]: https://github.com/react-component/select/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/select/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square
+[codecov-url]: https://app.codecov.io/gh/react-component/select
+[david-url]: https://david-dm.org/react-component/select
+[david-image]: https://david-dm.org/react-component/select/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/select?type=dev
+[david-dev-image]: https://david-dm.org/react-component/select/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-select
+[bundlephobia-url]: https://bundlephobia.com/package/rc-select
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+
+## Screenshots
+
+<img src="https://gw.alipayobjects.com/zos/antfincdn/d13eUZlgdJ/tupian.png" />
+
+## Feature
+
+- support IE11+,Chrome,Firefox,Safari
+
+### Keyboard
+
+- Open select (focus input || focus and click)
+- KeyDown/KeyUp/Enter to navigate menu
+
+## install
+
+[![rc-select](https://nodei.co/npm/rc-select.png)](https://npmjs.org/package/rc-select)
+
+## Usage
+
+### basic use
+
+```jsx | pure
+import Select, { Option } from 'rc-select';
+import 'rc-select/assets/index.css';
+
+export default () => (
+  <Select>
+    <Option value="jack">jack</Option>
+    <Option value="lucy">lucy</Option>
+    <Option value="yiminghe">yiminghe</Option>
+  </Select>
+);
+```
+
+## API
+
+### Select props
+
+<!-- prettier-ignore -->
+| name | description | type | default |
+| --- | --- | --- | --- |
+| id | html id to set on the component wrapper | String | '' |
+| className | additional css class of root dom node | String | '' |
+| data-\* | html data attributes to set on the component wrapper | String | '' |
+| prefixCls | prefix class | String | '' |
+| animation | dropdown animation name. only support slide-up now | String | '' |
+| transitionName | dropdown css animation name | String | '' |
+| choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
+| dropdownMatchSelectWidth | whether dropdown's width is same with select | boolean | true |
+| dropdownClassName | additional className applied to dropdown | String | - |
+| dropdownStyle | additional style applied to dropdown | React.CSSProperties | {} |
+| dropdownAlign | additional align applied to dropdown | [AlignType](https://github.com/react-component/trigger/blob/728d7e92394aa4b3214650f743fc47e1382dfa68/src/interface.ts#L25-L80) | {} |
+| dropdownMenuStyle | additional style applied to dropdown menu | Object | React.CSSProperties |
+| notFoundContent | specify content to show when no result matches. | ReactNode | 'Not Found' |
+| tokenSeparators | separator used to tokenize on tag/multiple mode | string[]? |  |
+| open | control select open | boolean |  |
+| defaultOpen | control select default open | boolean |  |
+| placeholder | select placeholder | React Node |  |
+| showSearch | whether show search input in single mode | boolean | true |
+| allowClear | whether allowClear | boolean | { clearIcon?: ReactNode } | false |
+| tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean | false |
+| tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
+| maxTagTextLength | max tag text length to show | number | - |
+| maxTagCount | max tag count to show | number | - |
+| maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
+| combobox | enable combobox mode(can not set multiple at the same time) | boolean | false |
+| multiple | whether multiple select | boolean | false |
+| disabled | whether disabled select | boolean | false |
+| filterOption | whether filter options by input value. default filter by option's optionFilterProp prop's value | boolean | 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 \| String[] | - |
+| value | current selected option(s) | String \| String[] \| {key:String, label:React.Node} \| {key:String, label:React.Node}[] | - |
+| labelInValue | whether to embed label in value, see above value type. Not support `combobox` mode | boolean | false |
+| backfill | whether backfill select option to search input (Only works in single and combobox mode) | boolean | false |
+| onChange | called when select an option or input value change(combobox) | function(value, option:Option \| Option[]) | - |
+| onSearch | called when input changed | function | - |
+| onBlur | called when blur | function | - |
+| onFocus | called when focus | function | - |
+| onPopupScroll | called when menu is scrolled | function | - |
+| onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
+| onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
+| onInputKeyDown | called when key down on input | Function(event) | - |
+| defaultActiveFirstOption | whether active first option by default | boolean | true |
+| getPopupContainer | container which popup select menu rendered into | function(trigger:Node):Node | function(){return document.body;} |
+| getInputElement | customize input element | function(): Element | - |
+| showAction | actions trigger the dropdown to show | String[]? | - |
+| autoFocus | focus select after mount | boolean | - |
+| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true |
+| prefix | specify the select prefix icon or text | ReactNode | - |
+| suffixIcon | specify the select arrow icon | ReactNode | - |
+| clearIcon | specify the clear icon | ReactNode | - |
+| removeIcon | specify the remove icon | ReactNode | - |
+| menuItemSelectedIcon | specify the item selected icon | ReactNode \| (props: MenuItemProps) => ReactNode | - |
+| dropdownRender | render custom dropdown menu | (menu: React.Node) => ReactNode | - |
+| loading | show loading icon in arrow | boolean | false |
+| virtual | Disable virtual scroll | boolean | true |
+| direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
+| optionRender | Custom rendering options | (oriOption: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - |
+| labelRender  | Custom rendering label   |  (props: LabelInValueType) => React.ReactNode   | - |
+| maxCount | The max number of items can be selected | number | - |
+
+### Methods
+
+| name  | description               | parameters | return |
+| ----- | ------------------------- | ---------- | ------ |
+| focus | focus select programmably | -          | -      |
+| blur  | blur select programmably  | -          | -      |
+
+### Option props
+
+| name | description | type | default |
+| --- | --- | --- | --- |
+| className | additional class to option | String | '' |
+| disabled | no effect for click or keydown for this item | boolean | false |
+| key | if react want you to set key, then key is same as value, you can omit value | String/number | - |
+| value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String/number | - |
+| title | if you are not satisfied with auto-generated `title` which is show while hovering on selected value, you can customize it with this property | String | - |
+
+### OptGroup props
+
+| name | description | type | default |
+| --- | --- | --- | --- |
+| label | group label | String/React.Element | - |
+| key | - | String | - |
+| value | default filter by this attribute. if react want you to set key, then key is same as value, you can omit value | String | - |
+| className | same as `Option props` | String | '' |
+| title | same as `Option props` | String | - |
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## Example
+
+local example: http://localhost:9001/
+
+online example: http://select.react-component.now.sh/
+
+## Test Case
+
+```
+npm test
+```
+
+## Coverage
+
+```
+npm run coverage
+```
+
+## License
+
+rc-select is released under the MIT license.

package/assets/index.css

@@ -0,0 +1,306 @@
+* {
+  box-sizing: border-box;
+}
+.rc-select {
+  display: inline-block;
+  font-size: 12px;
+  width: 100px;
+  position: relative;
+}
+.rc-select-disabled,
+.rc-select-disabled input {
+  cursor: not-allowed;
+}
+.rc-select-disabled .rc-select-selector {
+  opacity: 0.3;
+}
+.rc-select-show-arrow.rc-select-loading .rc-select-arrow-icon::after {
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  border-radius: 100%;
+  border: 2px solid #999;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  transform: none;
+  margin-top: 4px;
+  animation: rcSelectLoadingIcon 0.5s infinite;
+}
+.rc-select .rc-select-selection-placeholder {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.rc-select .rc-select-selection-search-input {
+  appearance: none;
+}
+.rc-select .rc-select-selection-search-input::-webkit-search-cancel-button {
+  display: none;
+  appearance: none;
+}
+.rc-select-single .rc-select-selector {
+  display: flex;
+  position: relative;
+}
+.rc-select-single .rc-select-selector .rc-select-selection-wrap {
+  width: 100%;
+  position: relative;
+}
+.rc-select-single .rc-select-selector .rc-select-selection-search {
+  width: 100%;
+  position: relative;
+}
+.rc-select-single .rc-select-selector .rc-select-selection-search-input {
+  width: 100%;
+}
+.rc-select-single .rc-select-selector .rc-select-selection-item,
+.rc-select-single .rc-select-selector .rc-select-selection-placeholder {
+  position: absolute;
+  top: 1px;
+  left: 3px;
+  pointer-events: none;
+  font-weight: normal;
+}
+.rc-select-single:not(.rc-select-customize-input) .rc-select-selector {
+  padding: 1px;
+  border: 1px solid #000;
+}
+.rc-select-single:not(.rc-select-customize-input) .rc-select-selector .rc-select-selection-search-input {
+  border: none;
+  outline: none;
+  background: rgba(255, 0, 0, 0.2);
+  width: 100%;
+}
+.rc-select-multiple .rc-select-selector {
+  display: flex;
+  padding: 1px;
+  border: 1px solid #000;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-item {
+  flex: none;
+  background: #bbb;
+  border-radius: 4px;
+  margin-right: 2px;
+  padding: 0 8px;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-item-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-overflow {
+  display: flex;
+  flex-wrap: wrap;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-overflow-item {
+  flex: none;
+  max-width: 100%;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-search {
+  position: relative;
+  max-width: 100%;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-search-input,
+.rc-select-multiple .rc-select-selector .rc-select-selection-search-mirror {
+  padding: 1px;
+  font-family: system-ui;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-search-mirror {
+  position: absolute;
+  z-index: 999;
+  white-space: nowrap;
+  position: none;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+}
+.rc-select-multiple .rc-select-selector .rc-select-selection-search-input {
+  border: none;
+  outline: none;
+  background: rgba(255, 0, 0, 0.2);
+  width: 100%;
+}
+.rc-select-allow-clear.rc-select-multiple .rc-select-selector {
+  padding-right: 20px;
+}
+.rc-select-allow-clear .rc-select-clear {
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
+.rc-select-show-arrow.rc-select-multiple .rc-select-selector {
+  padding-right: 20px;
+}
+.rc-select-show-arrow .rc-select-arrow {
+  pointer-events: none;
+  position: absolute;
+  right: 5px;
+  top: 0;
+}
+.rc-select-show-arrow .rc-select-arrow-icon::after {
+  content: '';
+  border: 5px solid transparent;
+  width: 0;
+  height: 0;
+  display: inline-block;
+  border-top-color: #999;
+  transform: translateY(5px);
+}
+.rc-select-focused .rc-select-selector {
+  border-color: blue !important;
+}
+.rc-select-dropdown {
+  border: 1px solid green;
+  min-height: 100px;
+  position: absolute;
+  background: #fff;
+}
+.rc-select-dropdown-hidden {
+  display: none;
+}
+.rc-select-item {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 4px 16px;
+}
+.rc-select-item-group {
+  color: #999;
+  font-weight: bold;
+  font-size: 80%;
+}
+.rc-select-item-option {
+  position: relative;
+}
+.rc-select-item-option-grouped {
+  padding-left: 24px;
+}
+.rc-select-item-option .rc-select-item-option-state {
+  position: absolute;
+  right: 0;
+  top: 4px;
+  pointer-events: none;
+}
+.rc-select-item-option-active {
+  background: #ddd;
+}
+.rc-select-item-option-disabled {
+  color: #999;
+}
+.rc-select-item-empty {
+  text-align: center;
+  color: #999;
+}
+.rc-select-selection__choice-zoom {
+  transition: all 0.3s;
+}
+.rc-select-selection__choice-zoom-appear {
+  opacity: 0;
+  transform: scale(0.5);
+}
+.rc-select-selection__choice-zoom-appear.rc-select-selection__choice-zoom-appear-active {
+  opacity: 1;
+  transform: scale(1);
+}
+.rc-select-selection__choice-zoom-leave {
+  opacity: 1;
+  transform: scale(1);
+}
+.rc-select-selection__choice-zoom-leave.rc-select-selection__choice-zoom-leave-active {
+  opacity: 0;
+  transform: scale(0.5);
+}
+.rc-select-dropdown-slide-up-enter,
+.rc-select-dropdown-slide-up-appear {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-play-state: paused;
+}
+.rc-select-dropdown-slide-up-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  transform-origin: 0 0;
+  opacity: 1;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  animation-play-state: paused;
+}
+.rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-bottomLeft,
+.rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-bottomLeft,
+.rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-bottomRight,
+.rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-bottomRight {
+  animation-name: rcSelectDropdownSlideUpIn;
+  animation-play-state: running;
+}
+.rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-bottomLeft,
+.rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-bottomRight {
+  animation-name: rcSelectDropdownSlideUpOut;
+  animation-play-state: running;
+}
+.rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-topLeft,
+.rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-topLeft,
+.rc-select-dropdown-slide-up-enter.rc-select-dropdown-slide-up-enter-active.rc-select-dropdown-placement-topRight,
+.rc-select-dropdown-slide-up-appear.rc-select-dropdown-slide-up-appear-active.rc-select-dropdown-placement-topRight {
+  animation-name: rcSelectDropdownSlideDownIn;
+  animation-play-state: running;
+}
+.rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-topLeft,
+.rc-select-dropdown-slide-up-leave.rc-select-dropdown-slide-up-leave-active.rc-select-dropdown-placement-topRight {
+  animation-name: rcSelectDropdownSlideDownOut;
+  animation-play-state: running;
+}
+@keyframes rcSelectDropdownSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+@keyframes rcSelectDropdownSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+@keyframes rcSelectDropdownSlideDownIn {
+  0% {
+    transform: scaleY(0);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@keyframes rcSelectDropdownSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+@keyframes rcSelectLoadingIcon {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}