Select组件添加建议选项

jaywcjlove · Feb 4, 2018 · 832cf09 · 832cf09
1 parent 189bc66
commit 832cf09
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/src/component/Select/index.js b/src/component/Select/index.js
@@ -34,10 +34,26 @@ export default class Select extends Component {
       option: value.length > 0 ? filterData : this.props.option,
     });
   }
+  renderItems(items, value) {
+    return items.map((item, idx) => {
+      return (
+        <div
+          key={idx}
+          className={classNames('item', {
+            selected: item.value === value,
+          })}
+          onClick={this.onSelect.bind(this, item)}
+        >
+          {item.label}
+        </div>
+      );
+    });
+  }
   render() {
-    const { showSearch, className, ...resetProps } = this.props;
+    const { showSearch, className, suggest, ...resetProps } = this.props;
     const { visible, value, option } = this.state;
     const title = this.props.option.filter(item => item.value === value);
+    const suggestItems = this.props.option.filter(item => suggest.includes(item.value));
     delete resetProps.option;
     delete resetProps.onSelect;
     return (
@@ -57,19 +73,9 @@ export default class Select extends Component {
             </div>
           )}
           <div className={styles.optionList}>
-            {option.map((item, idx) => {
-              return (
-                <div
-                  key={idx}
-                  className={classNames('item', {
-                    selected: item.value === value,
-                  })}
-                  onClick={this.onSelect.bind(this, item)}
-                >
-                  {item.label}
-                </div>
-              );
-            })}
+            {this.renderItems(suggestItems, value)}
+            {suggestItems.length > 0 && <div className={styles.divider} />}
+            {this.renderItems(option, value)}
           </div>
         </div>
       </div>
@@ -80,12 +86,14 @@ export default class Select extends Component {
 Select.propsTypes = {
   value: PropTypes.string,
   option: PropTypes.array,
+  suggest: PropTypes.array,
   showSearch: PropTypes.bool,
   onSelect: PropTypes.func,
 };
 
 Select.defaultProps = {
   option: [],
+  suggest: [],
   value: '',
   showSearch: false,
   onSelect() {},

diff --git a/src/component/Select/index.less b/src/component/Select/index.less
@@ -105,6 +105,9 @@
   border-radius: 3px;
   box-shadow: 0 3px 12px rgba(27,31,35,0.15);
   transition: all .3s;
+  .divider {
+    border-bottom: 1px solid #e4e4e4;
+  }
   .optionList {
     max-height: 230px;
     overflow: auto;

diff --git a/src/pages/Github.js b/src/pages/Github.js
@@ -28,6 +28,7 @@ export default class Github extends Component {
         },
       ],
       optionLang,
+      suggest: ['css', 'go', 'html', 'javascript', 'objective-c', 'python', 'swift'],
       since: localStorage.getItem('github-since') || '',
       lang: localStorage.getItem('github-lang') || '',
     };
@@ -99,7 +100,7 @@ export default class Github extends Component {
           <div className={styles.select}>
             <Loading visible={this.state.loading} />
             <Select onSelect={this.onSelect.bind(this, 'since')} value={this.state.since} option={this.state.option} />
-            <Select onSelect={this.onSelect.bind(this, 'lang')} showSearch value={this.state.lang} option={this.state.optionLang} />
+            <Select suggest={this.state.suggest} onSelect={this.onSelect.bind(this, 'lang')} showSearch value={this.state.lang} option={this.state.optionLang} />
           </div>
         </div>
         <div className={styles.list} dangerouslySetInnerHTML={{ __html: this.state.content || 'loading...' }} />