支持multiple选择的最大数目

examples/multiple.js

@@ -10,6 +10,8 @@ for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>中文{i}</Option>);
 }
 
+const maxValueCountSelect = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 26];
+
 function onSelect() {
   console.log(arguments);
 }
@@ -22,6 +24,7 @@ const Test = React.createClass({
   getInitialState() {
     return {
       useAnim: 0,
+      maxValueCount: 0,
       value: [],
     };
   },
@@ -31,6 +34,11 @@ const Test = React.createClass({
       value,
     });
   },
+  onMaxValueCountChange(e) {
+    this.setState({
+      maxValueCount: +e.target.value,
+    });
+  },
   useAnim(e) {
     this.setState({
       useAnim: e.target.checked,
@@ -50,6 +58,14 @@ const Test = React.createClass({
             anim
             <input checked={this.state.useAnim} type="checkbox" onChange={this.useAnim}/>
           </label>
+          <label style={{ marginLeft: '2em' }}>
+            maxValueCount
+            <select onChange={this.onMaxValueCountChange} defaultValue={this.state.maxValueCount}>
+              {
+                maxValueCountSelect.map(i => <option key={i} value={i}>{i}</option>)
+              }
+            </select>
+          </label>
         </p>
 
         <div style={{ width: 300 }}>
@@ -60,6 +76,7 @@ const Test = React.createClass({
             dropdownMenuStyle={dropdownMenuStyle}
             style={{ width: 500 }}
             multiple
+            maxValueCount={this.state.maxValueCount}
             optionFilterProp="children"
             optionLabelProp="children"
             onSelect={onSelect}

examples/tags.js

@@ -9,11 +9,13 @@ const children = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
+const maxValueCountSelect = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 26];
 
 const Test = React.createClass({
   getInitialState() {
     return {
       disabled: false,
+      maxValueCount: 0,
       value: ['name2', 'name3'],
     };
   },
@@ -23,6 +25,11 @@ const Test = React.createClass({
       value,
     });
   },
+  onMaxValueCountChange(e) {
+    this.setState({
+      maxValueCount: +e.target.value,
+    });
+  },
   toggleDisabled() {
     this.setState({
       disabled: !this.state.disabled,
@@ -33,6 +40,16 @@ const Test = React.createClass({
       <div>
         <h2>tags select（scroll the menu）</h2>
 
+        <p>
+          <label>
+            maxValueCount
+            <select onChange={this.onMaxValueCountChange} defaultValue={this.state.maxValueCount}>
+              {
+                maxValueCountSelect.map(i => <option key={i} value={i}>{i}</option>)
+              }
+            </select>
+          </label>
+        </p>
         <div>
           <Select
             placeholder="placeholder"
@@ -41,6 +58,7 @@ const Test = React.createClass({
             style={{ width: 500 }}
             disabled={this.state.disabled}
             maxTagTextLength={10}
+            maxValueCount={this.state.maxValueCount}
             value={this.state.value}
             onChange={this.onChange}
           >

src/Select.jsx

@@ -11,6 +11,7 @@ import {
   isSingleMode, toArray, findIndexInValueByKey,
   UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE,
   preventDefaultEvent, findFirstMenuItem,
+  isExceededMaxCount,
 } from './util';
 import SelectTrigger from './SelectTrigger';
 import FilterMixin from './FilterMixin';
@@ -54,6 +55,7 @@ const Select = React.createClass({
     defaultValue: PropTypes.any,
     dropdownStyle: PropTypes.object,
     maxTagTextLength: PropTypes.number,
+    maxValueCount: PropTypes.number,
   },
 
   mixins: [FilterMixin],
@@ -92,13 +94,19 @@ const Select = React.createClass({
     } else {
       value = toArray(props.defaultValue);
     }
+    let open = props.open;
+    if (isExceededMaxCount(props, value.length)) {
+      value = value.slice(0, props.maxValueCount);
+      if (open) {
+        open = false;
+      }
+    }
     value = this.addLabelToValue(props, value);
     let inputValue = '';
     if (props.combobox) {
       inputValue = value.length ? String(value[0].key) : '';
     }
     this.saveInputRef = saveRef.bind(this, 'inputInstance');
-    let open = props.open;
     if (open === undefined) {
       open = props.defaultOpen;
     }
@@ -112,6 +120,11 @@ const Select = React.createClass({
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       let value = toArray(nextProps.value);
+      let fireChange = false;
+      if (isExceededMaxCount(nextProps, value.length - 1)) {
+        value = value.slice(0, nextProps.maxValueCount);
+        fireChange = true;
+      }
       value = this.addLabelToValue(nextProps, value);
       this.setState({
         value,
@@ -121,12 +134,19 @@ const Select = React.createClass({
           inputValue: value.length ? String(value[0].key) : '',
         });
       }
+      if (fireChange) {
+        this.fireChange(value);
+      }
+    } else {
+      if (isExceededMaxCount(nextProps, this.state.value.length - 1)) {
+        this.fireChange(this.state.value.slice(0, nextProps.maxValueCount));
+      }
     }
   },
 
   componentDidUpdate() {
     const { state, props } = this;
-    if (state.open && isMultipleOrTags(props)) {
+    if (state.open && isMultipleOrTags(props) && !isExceededMaxCount(props, state.value.length)) {
       const inputNode = this.getInputDOMNode();
       if (inputNode.value) {
         inputNode.style.width = '';
@@ -450,6 +470,7 @@ const Select = React.createClass({
 
   setOpenState(open, needFocus) {
     const { props, state } = this;
+    open = open && !isExceededMaxCount(props, state.value.length);
     if (state.open === open) {
       this.maybeFocus(open, needFocus);
       return;
@@ -556,10 +577,20 @@ const Select = React.createClass({
 
   fireChange(value) {
     const props = this.props;
+    const exceededMaxCount = isExceededMaxCount(props, value.length);
     if (!('value' in props)) {
-      this.setState({
-        value,
-      });
+      if (exceededMaxCount) {
+        this.setState({
+          value,
+          open: false,
+        });
+      } else {
+        this.setState({
+          value,
+        });
+      }
+    } else if (exceededMaxCount) {
+      this.setState({ open: false });
     }
     props.onChange(this.getVLForOnChange(value));
   },
@@ -642,12 +673,14 @@ const Select = React.createClass({
           );
         });
       }
-      selectedValueNodes.push(<li
-        className={`${prefixCls}-search ${prefixCls}-search--inline`}
-        key="__input"
-      >
-        {this.getInputElement()}
-      </li>);
+      if (!isExceededMaxCount(props, value.length)) {
+        selectedValueNodes.push(<li
+          className={`${prefixCls}-search ${prefixCls}-search--inline`}
+          key="__input"
+        >
+          {this.getInputElement()}
+        </li>);
+      }
 
       if (isMultipleOrTags(props) && choiceTransitionName) {
         innerNode = (<Animate

src/util.js

@@ -31,6 +31,10 @@ export function isMultipleOrTagsOrCombobox(props) {
   return isMultipleOrTags(props) || isCombobox(props);
 }
 
+export function isExceededMaxCount(props, count) {
+  return isMultipleOrTags(props) && props.maxValueCount && count >= props.maxValueCount;
+}
+
 export function isSingleMode(props) {
   return !isMultipleOrTagsOrCombobox(props);
 }

tests/Select.spec.js

@@ -102,6 +102,25 @@ describe('Select', () => {
     });
   });
 
+  it('should limit multiple items', (done) => {
+    instance = ReactDOM.render(
+      <Select multiple value={['2', '3', '4', '1']} maxValueCount={3}>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+        <Option value="3">3</Option>
+        <Option value="4">4</Option>
+      </Select>, div);
+    instance.setState({
+      open: true,
+    }, () => {
+      expect(instance.getPopupMenuComponent().instanceArray[0].props.selected).to.be(false);
+      expect(instance.getPopupMenuComponent().instanceArray[1].props.selected).to.be(true);
+      expect(instance.getPopupMenuComponent().instanceArray[2].props.selected).to.be(true);
+      expect(instance.getPopupMenuComponent().instanceArray[3].props.selected).to.be(true);
+      done();
+    });
+  });
+
   it('should have clear button', () => {
     instance = ReactDOM.render(
       <Select allowClear>