Merge pull request #34 from xsnippet/filter-syntaxes

Get relevant syntax from list by user interaction

Author: lotrien

src/components/Syntaxes.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 import { connect } from 'react-redux';
 
-import Input from './common/Input';
+import regExpEscape from './../helpers';
 import * as actions from '../actions';
 
-class Syntaxes extends React.Component {
+class Syntaxes extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { activeIndex: -1 };
     this.onClickHandler = this.onClickHandler.bind(this);
+    this.onSyntaxSearch = this.onSyntaxSearch.bind(this);
   }
 
   componentDidMount() {
@@ -24,30 +25,51 @@ class Syntaxes extends React.Component {
     this.props.onClick(syntax);
   }
 
-  render() {
+  onSyntaxSearch(e) {
+    this.setState({ searchSyntax: e.target.value.trim() });
+  }
+
+  getSyntaxes() {
+    let { syntaxes } = this.props;
+
+    if (this.state.searchSyntax) {
+      syntaxes = this.filterSyntaxes(regExpEscape(this.state.searchSyntax));
+    }
+
+    return syntaxes.map((syntax, index) => {
+      const active = this.state.activeIndex === index ? 'active' : '';
+      return (
+        <li
+          className={`new-snippet-lang-item ${active}`}
+          data-syntax={syntax}
+          data-index={index}
+          key={syntax}
+        >
+          {syntax}
+        </li>
+      );
+    });
+  }
+
+  filterSyntaxes(searchSyntax) {
     const { syntaxes } = this.props;
+    const regExp = new RegExp(searchSyntax, 'gi');
+    return syntaxes.filter(syntax => syntax.match(regExp));
+  }
+
+  render() {
+    const syntaxes = this.getSyntaxes();
 
     return (
       [
         <div className="new-snippet-lang-header" key="Syntax input">
-          <Input placeholder="Type to search..." />
+          <input className="input" placeholder="Type to search..." onChange={this.onSyntaxSearch} />
         </div>,
         <div className="new-snippet-lang-list-wrapper" key="Syntax list">
+          {syntaxes.size ? null : <div className="new-snippet-lang-empty">No results found</div>}
           <Scrollbars>
             <ul className="new-snippet-lang-list" onClick={this.onClickHandler} role="presentation">
-              {syntaxes.map((syntax, index) => {
-                const active = this.state.activeIndex === index ? 'active' : '';
-                return (
-                  <li
-                    className={`new-snippet-lang-item ${active}`}
-                    data-syntax={syntax}
-                    data-index={index}
-                    key={syntax}
-                  >
-                    {syntax}
-                  </li>
-                  );
-                })}
+              {syntaxes}
             </ul>
           </Scrollbars>
         </div>,

src/helpers/index.js

@@ -0,0 +1,3 @@
+const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
+
+export default regExpEscape;

src/styles/NewSnippet.styl

@@ -70,6 +70,11 @@ lang-bar-width = 230px
       height: 100%
       &-wrapper
         flex: 1
+    &-empty
+      padding: 13px 15px
+      font-size: 14px
+      font-weight: 300
+      color: text-grey
     &-item
       font-size: 14px
       padding: 13px 15px