Merge pull request #48 from xsnippet/syntaxes

Make Plain text as default and fix active index on search

Author: ikalnytskyi

src/components/ListBox.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+class ListBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: null,
+    };
+    this.onClick = this.onClick.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Consumers can either pass selected item via props, or let the component
+    // to handle it on its own. The former might be useful when you want to
+    // extend behaviour (e.g. some ListBoxWithSearchbar), while the latter -
+    // when you want a standalone ListBox component.
+    let selected = nextProps.selected || this.state.selected;
+
+    // If selected item is not a part of new items, aggressively fallback to
+    // first item from the list. We're doing it to be protected from cases
+    // when nothing is selected.
+    if (!selected || !nextProps.items.contains(selected)) {
+      selected = nextProps.items.get(0);
+      nextProps.onClick(selected);
+    }
+
+    this.setState({ selected });
+  }
+
+  onClick(e) {
+    const { item } = e.target.dataset;
+
+    this.setState({ selected: item });
+    this.props.onClick(item);
+  }
+
+  render() {
+    const { items } = this.props;
+    const { selected } = this.state;
+
+    return (
+      // TODO: Get rid of domain specific CSS classes in favor of general one;
+      //       this component is a good candidate to be extracted into separate
+      //       library.
+      <Scrollbars>
+        <ul className="new-snippet-lang-list" role="presentation" onClick={this.onClick}>
+          {items.size ? null : <li className="new-snippet-lang-empty">No results found</li>}
+          {items.map(item => (
+            <li
+              className={`new-snippet-lang-item ${item === selected ? 'active' : ''}`}
+              data-item={item}
+              key={item}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      </Scrollbars>
+    );
+  }
+}
+
+export default ListBox;

src/components/ListBoxWithSearch.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import ListBox from './ListBox';
+import { regExpEscape } from '../helpers';
+
+class ListBoxWithSearch extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchQuery: null,
+    };
+    this.onSearch = this.onSearch.bind(this);
+  }
+
+  onSearch(e) {
+    this.setState({ searchQuery: e.target.value.trim() });
+  }
+
+  render() {
+    const { searchQuery } = this.state;
+    let { items } = this.props;
+
+    // Filter out only those items that match search query. If no query is
+    // set, do nothing and use the entire set.
+    if (searchQuery) {
+      const regExp = new RegExp(regExpEscape(searchQuery), 'gi');
+      items = items.filter(item => item.match(regExp));
+    }
+
+    return (
+      [
+        <div className="new-snippet-lang-header" key="Syntax input">
+          <input className="input" placeholder="Type to search..." onChange={this.onSearch} />
+        </div>,
+        <div className="new-snippet-lang-list-wrapper" key="Syntax list">
+          <ListBox
+            items={items}
+            onClick={this.props.onClick}
+          />
+        </div>,
+      ]
+    );
+  }
+}
+
+export default ListBoxWithSearch;

src/components/NewSnippet.jsx

@@ -6,7 +6,7 @@ import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
 import Input from './common/Input';
-import Syntaxes from './Syntaxes';
+import ListBoxWithSearch from './ListBoxWithSearch';
 import * as actions from '../actions';
 
 import '../styles/NewSnippet.styl';
@@ -25,6 +25,12 @@ class NewSnippet extends React.Component {
     this.onInputChange = this.onInputChange.bind(this);
   }
 
+  componentDidMount() {
+    const { dispatch } = this.props;
+
+    dispatch(actions.fetchSyntaxes);
+  }
+
   onSyntaxClick(syntax) {
     this.setState({ syntax }); // eslint-disable-line react/no-unused-state
   }
@@ -78,12 +84,17 @@ class NewSnippet extends React.Component {
             </div>
           </div>
           <div className="new-snippet-lang-wrapper">
-            <Syntaxes onClick={this.onSyntaxClick} />
+            <ListBoxWithSearch
+              items={this.props.syntaxes}
+              onClick={this.onSyntaxClick}
+            />
           </div>
         </form>,
       ]
     );
   }
 }
 
-export default connect()(NewSnippet);
+export default connect(state => ({
+  syntaxes: state.get('syntaxes'),
+}))(NewSnippet);