start implementing findbar

This commit is contained in:
Cássio Zen
2016-07-05 13:48:52 -03:00
parent 44bf70a2ae
commit 473357b6b7
5 changed files with 20 additions and 5 deletions

View File

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { loadEntries } from '../actions/entries';
import { selectEntries } from '../reducers';
import EntryListing from '../components/EntryListing';
import FindBar from './FindBar';
class DashboardPage extends React.Component {
componentDidMount() {
@ -28,8 +29,16 @@ class DashboardPage extends React.Component {
return <h1>No collections defined in your config.yml</h1>;
}
const commands = [
{ pattern: 'Create Collections(:collectionName)' },
{ pattern: 'Create Posts(:postName)' },
{ pattern: 'Find(:seachTerm as what?)' },
{ pattern: '(:searchTerm as Find...)' }
];
return <div>
<h1>Dashboard</h1>
<FindBar commands={commands} />
<div>
{collections.map((collection) => (
<div key={collection.get('name')}>

View File

@ -1,9 +1,11 @@
import React, { PropTypes } from 'react';
import fuzzy from 'fuzzy';
import _ from 'lodash';
import { connect } from 'react-redux';
class FindBar extends React.Component {
constructor() {
constructor(props) {
super(props);
this.compiledCommands = {};
this.state = {
prompt: '',
@ -13,7 +15,7 @@ class FindBar extends React.Component {
this.compileCommand = this.compileCommand.bind(this);
this.matchCommand = this.matchCommand.bind(this);
this.getSuggestions = this.getSuggestions.bind(this);
this.getSuggestions = _.throttle(this.getSuggestions.bind(this), 200);
this.handleInputChange = this.handleInputChange.bind(this);
}
@ -67,12 +69,14 @@ class FindBar extends React.Component {
}
getSuggestions(value) {
console.log(value);
const options = {
//pre: '<strong>',
//post: '</strong>',
extract: el => el. token
};
const results = fuzzy.filter(value, this.compiledCommands, options);
return results;
}