Merge af6597f into 68250f8

react-component · Nov 8, 2016 · 7b10376 · 7b10376
2 parents 68250f8 + af6597f
commit 7b10376
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,7 @@ React.render(c, container);
 |disabled | no effect for click or keydown for this item | bool | false |
 |key | if react want you to set key, then key is same as value, you can omit value | 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 | - |
+|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

diff --git a/examples/multiple.js b/examples/multiple.js
@@ -7,7 +7,11 @@ import ReactDOM from 'react-dom';
 
 const children = [];
 for (let i = 10; i < 36; i++) {
-  children.push(<Option key={i.toString(36) + i} disabled={i === 10}>中文{i}</Option>);
+  children.push(
+    <Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
+      中文{i}
+    </Option>
+  );
 }
 
 function onSelect() {

diff --git a/examples/single.js b/examples/single.js
@@ -63,7 +63,7 @@ const Test = React.createClass({
             optionFilterProp="text"
             onChange={this.onChange}
           >
-            <Option value="01" text="jack">
+            <Option value="01" text="jack" title="jack">
               <b
                 style={{
                   color: 'red',

diff --git a/src/Select.jsx b/src/Select.jsx
@@ -117,6 +117,7 @@ const Select = React.createClass({
       value = toArray(props.defaultValue);
     }
     value = this.addLabelToValue(props, value);
+    value = this.addTitleToValue(props, value);
     let inputValue = '';
     if (props.combobox) {
       inputValue = value.length ? String(value[0].key) : '';
@@ -138,6 +139,7 @@ const Select = React.createClass({
     if ('value' in nextProps) {
       let value = toArray(nextProps.value);
       value = this.addLabelToValue(nextProps, value);
+      value = this.addTitleToValue(nextProps, value);
       this.setState({
         value,
       });
@@ -267,13 +269,15 @@ const Select = React.createClass({
       };
     }
     props.onSelect(event, item);
+    const selectedTitle = item.props.title;
     if (isMultipleOrTags(props)) {
       if (findIndexInValueByKey(value, selectedValue) !== -1) {
         return;
       }
       value = value.concat([{
         key: selectedValue,
         label: selectedLabel,
+        title: selectedTitle,
       }]);
     } else {
       if (value.length && value[0].key === selectedValue) {
@@ -283,6 +287,7 @@ const Select = React.createClass({
       value = [{
         key: selectedValue,
         label: selectedLabel,
+        title: selectedTitle,
       }];
       this.setOpenState(false, true);
     }
@@ -428,6 +433,8 @@ const Select = React.createClass({
     if (vls !== undefined) {
       if (!this.props.labelInValue) {
         vls = vls.map(v => v.key);
+      } else {
+        vls = vls.map(vl => ({ key: vl.key, label: vl.label }));
       }
       return isMultipleOrTags(this.props) ? vls : vls[0];
     }
@@ -596,6 +603,23 @@ const Select = React.createClass({
     return value;
   },
 
+  addTitleToValue(props, values) {
+    let nextValues = values;
+    const keys = values.map(v => v.key);
+    React.Children.forEach(props.children, (child) => {
+      if (child.type === OptGroup) {
+        nextValues = this.addTitleToValue(child.props, nextValues);
+      } else {
+        const value = getValuePropValue(child);
+        const valueIndex = keys.indexOf(value);
+        if (valueIndex > -1) {
+          nextValues[valueIndex].title = child.props.title;
+        }
+      }
+    });
+    return nextValues;
+  },
+
   removeSelected(selectedKey) {
     const props = this.props;
     if (props.disabled || this.isChildDisabled(selectedKey)) {
@@ -690,11 +714,12 @@ const Select = React.createClass({
             showSelectedValue = true;
           }
         }
+        const singleValue = value[0];
         selectedValue = (
           <div
             key="value"
             className={`${prefixCls}-selection-selected-value`}
-            title={value[0].label}
+            title={singleValue.title || singleValue.label}
             style={{
               display: showSelectedValue ? 'block' : 'none',
               opacity,
@@ -721,7 +746,7 @@ const Select = React.createClass({
       if (isMultipleOrTags(props)) {
         selectedValueNodes = value.map((singleValue) => {
           let content = singleValue.label;
-          const title = content;
+          const title = singleValue.title || content;
           if (maxTagTextLength &&
             typeof content === 'string' &&
             content.length > maxTagTextLength) {