Code Monkey home page Code Monkey logo

select's Introduction

rc-select


React Select

NPM version npm download build status Codecov bundle size dumi

Screenshots

Feature

  • support IE11+,Chrome,Firefox,Safari

Keyboard

  • Open select (focus input || focus and click)
  • KeyDown/KeyUp/Enter to navigate menu

install

rc-select

Usage

basic use

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

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 {}
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 }
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'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
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.

select's People

Contributors

07akioni avatar afc163 avatar benjycui avatar boyyangzai avatar chenshuai2144 avatar damiangreen avatar danedavid avatar ddcat1115 avatar dependabot-preview[bot] avatar dependabot[bot] avatar eternalsky avatar heskeybaozi avatar jljsj33 avatar kerm1it avatar l-x-c avatar li-jia-nan avatar longhaoo avatar madccc avatar madocto avatar muxinfeng avatar picodoth avatar raohai avatar redjue avatar shaodahong avatar warmhug avatar xrkffgg avatar yesmeck avatar yiminghe avatar yutingzhao1991 avatar zombiej avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

select's Issues

对于搜索内容的疑问

为什么搜索匹配的是Option的value,而不是展示出来的文字?

<Option value="1">测试一</Option>

我在搜索框中输入“测试”,搜索不到内容,输入“1”,能搜到“测试一”

不再支持 require 的使用方式了吗?

#75 的问题并没有解决

问题不是出在 没有挂变量,而是多于一个 export 时,add-module-exports 是没有效果,这导致 lib/index.js 里最后是没有那句 module.exports = export['default'].

Bad export.

The way export now is a bad example.
Instead of this:

import Select from './Select';
import Option from './Option';
import OptGroup from './OptGroup';
Select.Option = Option;
Select.OptGroup = OptGroup;
export default Select;

Should be like this:

import Select from './Select';
import Option from './Option';
import OptGroup from './OptGroup';
export { Select, Option, OptGroup}

With bad export, it makes impossible to use your module correctly in Typescript language.

disabled 属性在 IE8/9/10 下失效

目前 disabled 依赖样式 pointer-events: none; 实现,有两个问题:

  1. pointer-events IE11 才支持。
  2. 无法设置鼠标手型为 not-allowed.

4.3.0

new props

renderDropdownToBody

default false

dropdownMatchSelectWidth

defaults to true

dropdownStyle

style applied to dropdown

为什么使用绝对定位而不是相对定位来添加 DOM.

发现一个问题, 当点击出下拉菜单后, 这个菜单 DOM 时直接 append 到 body 中, 并且计算了一个绝对定位来搞定位置问题的.

那么问题来了, 如果我本来就是一个绝对定位的 box, 在里面要使用 Select 的话就会变得比较麻烦. 每次移动都要去计算它对于 body 来说的绝对定位位置. (因为实际上这个 box 是没有移动的, 比较典型的场景是 Modal)

rc-calendar 中暴露了一个 align 参数使用 dom-align 用来解决这个问题, 这个配置相当繁琐(需要配合 DOM id). 而且在 rc-select 也没有提供相应的接口. 那如果遇到这个情况应该如何处理呢? 像上面说的不停的手动计算吗?

所以, 为什么 rc-select 以及 rc-calendar 不直接把内容 append 到 触发的input DOM 的后面呢? 这样只需要相对于父元素定位就可以了, 因为 input 和 rc-xxx 的父元素相同, 定位是相当方便的.

谢谢.

release 4.0.0

new

onSearch

support monitor search input

defaultValue

support defaultValue prop for select

optionLabelProp

#10

<Select optionLabelProp="label">
<Option value="heihei" labe={<i>!</i>}>haha</Option>
</Select>

filterOption

support filterOption as function

filterOption(inputValue,child):Boolean

optionFilterProp

prop of Option used as filter if filterOption is true

onSelect

support option as second parameter

onSelect(value,option)

placeholder/searchPlaceholder

#8

backspace on mutilple mode

#5

combobox中的notFoundContent参数无效

解决方法是Select.jsx中174行改为数组

    if (!sel.length && showNotFound && props.notFoundContent) {
      sel = [<MenuItem disabled value='NOT_FOUND'>{props.notFoundContent}</MenuItem>];
    }

Filter null child

If children include a null child, this line will raise error.

Consider following situation, if showJack is null, rc-select should filter the null child.

<Select defaultValue="lucy" style={{ width: 120 }}>
  { showJack && <Option value="jack">Jack</Option> }
  <Option value="lucy">Lucy</Option>
</Select>

不再支持 require 的使用方式了吗?

Select.jsx 里面还是有加 module.exports = exports['default'] 的,应该是有在用 add-module-exports ,但 index 的 export 方式会导致 add-module-exports 失效。

export { Option, OptGroup };
export default Select;

但这样不会

export.Option = Option;
export.OptGroup = OptGroup;
export default Select

需求讨论

业务中有这种需求:在 tags input select 里,想直接输入一串如 name1,name2,name3,name4,nam5,.... 这样比较长的内容(预先准备好的人员列表),组件自动根据分隔符(例如这里的逗号),split 出来,然后分别验证这些条目是否合法(如果分别发Ajax将会很多、不可行),再转换为一个个 tag。

这种需求一般是单独做一个「导入」文件或组的功能来实现,但放到 tags-input 组件或 select 组件里,感觉也有一定合理性。

在 select2 的 Automatic tokenization example 里输入 red,blue,green, 这串特定分割的字符串,会自动根据逗号 split 出三个 tag 出来。select2 这个还能输入更多自动保存到选择list里,也不涉及到发Ajax操作。

Disabled Prop Issue

Seems as though there is a bug if you have the component go from disabled={false} to disabled={true} and then back to disabled={false}. I'm investigating the issue further to see if I can make a pull request.

支持label和value的区分

正常的select应该是这样的:

[
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two' }
]

选择one的时候,input显示的是One,显示的是label的值。value是one,两个还是不一样的。现在select展示的就是value的值。

https://github.com/JedWatson/react-select 这个select就是这种符合原生select模式的。

组件联动存在问题

修改了一个输入框A的值,如果焦点没有离开输入框,就点了另外一个输入框B的增加或减少按钮,输入框A的改动不会生效

Single Select 时宽度固定

当组件就是普通的 select 控件的时候,select 的宽度会随着选择的 option 的值的宽度而变化,是不是考虑能取到最大 option 的宽度赋到 select 上?我看了系统默认控件的系统就是这样的。

不支持 react 0.13.3?

目前开发使用的是 0.13.3 的 react,安装这个总是失败,是否有支持 0.13 的版本?

support filterOption/onSelect props

var Search = React.createClass({
  getInitialState() {
    return {
      data: []
    }
  },

  fetchData(value) {
    jsonp('http://suggest.taobao.com/sug?' + querystring.encode({
      code: 'utf-8',
      q: value
    }), (err, d) => {
      var result = d.result;
      var data = [];
      result.forEach((r)=> {
        data.push({
          value: r[0],
          text: r[0]
        });
      });
      this.setState({
        data: data
      });
    });
  },

  handleSelect(value) {
    console.log('select ', value);
  },

  render() {
    var data = this.state.data;
    var options = data.map((d) => {
      return <Option value={d.value}>{d.text}</Option>;
    });
    return <div>
      <h1>suggest</h1>
      <div style={{width: 300}}>
        <Select combobox onChange={this.fetchData} onSelect={this.handleSelect} filterOption={false}>
        {options}
        </Select>
      </div>
    </div>;
  }
});

placeholder

貌似新版取消了 placeholder 属性?看了下参数列表里好像也没有 placeholder 了,是换新属性名称了么?

input 的 keyDown 事件如何获取

想使用 combo 模式来做搜索框,目前的问题是无法通过组件的 props 来获取 keyDown 事件,来完成比如回车进行搜索 (input 的 keyDown 全都内部处理掉了),关于这个这边推荐的处理方式是什么样的~

删除 onSelect / onDeselect

tree-select 中确定只有 onChange 监听整个所有的变化;onSearch 监听输入框的变化。

select 组件也 删除掉 onSelect / onDeselect ,会有什么问题?

Add support to remove selected className if another option is active

Please add support to remove .rc-select-dropdown-menu-item-selected from the selected item if another item has .rc-select-dropdown-menu-item-active.

The reason is that I would like the select dropdown to behave as in native <select> where only a single item of a dropdown is highlighted at a time.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.