diff --git a/packages/base-components/lib/common/Header.jsx b/packages/base-components/lib/common/Header.jsx index 2a91544f2..8a793015d 100644 --- a/packages/base-components/lib/common/Header.jsx +++ b/packages/base-components/lib/common/Header.jsx @@ -5,7 +5,7 @@ const Messages = Core.Messages; const Header = ({currentUser}) => { - ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalButton, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm} = Telescope.components); + ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalButton, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm, SearchForm} = Telescope.components); const logoUrl = Telescope.settings.get("logoUrl"); const siteTitle = Telescope.settings.get("title", "Telescope"); @@ -41,6 +41,8 @@ const Header = ({currentUser}) => { + + diff --git a/packages/base-components/lib/common/SearchForm.jsx b/packages/base-components/lib/common/SearchForm.jsx new file mode 100644 index 000000000..4b780f96f --- /dev/null +++ b/packages/base-components/lib/common/SearchForm.jsx @@ -0,0 +1,65 @@ +import React, { PropTypes, Component } from 'react'; +import Formsy from 'formsy-react'; +import FRC from 'formsy-react-components'; + +const Input = FRC.Input; + +// see: http://stackoverflow.com/questions/1909441/jquery-keyup-delay +const delay = (function(){ + var timer = 0; + return function(callback, ms){ + clearTimeout (timer); + timer = setTimeout(callback, ms); + }; +})(); + +class SearchForm extends Component{ + + constructor() { + super(); + this.search = this.search.bind(this); + } + + search(data) { + + if (FlowRouter.getRouteName() !== "posts.list") { + FlowRouter.go("posts.list"); + } + + if (data.searchQuery === '') { + data.searchQuery = null; + } + + delay(function(){ + FlowRouter.setQueryParams({query: data.searchQuery}); + }, 700 ); + + } + + render() { + + return ( +
+ + + +
+ ) + } +} + +SearchForm.propTypes = { + labelText: React.PropTypes.string +} + +SearchForm.defaultProps = { + labelText: "Search" +}; + +module.exports = SearchForm; +export default SearchForm; \ No newline at end of file diff --git a/packages/base-components/lib/components.js b/packages/base-components/lib/components.js index bfc35605d..37d61740c 100644 --- a/packages/base-components/lib/components.js +++ b/packages/base-components/lib/components.js @@ -8,6 +8,7 @@ Telescope.registerComponent("Flash", require('./common/Flash.jsx')); Telescope.registerComponent("FlashMessages", require('./common/FlashMessages.jsx')); Telescope.registerComponent("NewsletterForm", require('./common/NewsletterForm.jsx')); Telescope.registerComponent("Icon", require('./common/Icon.jsx')); +Telescope.registerComponent("SearchForm", require('./common/SearchForm.jsx')); // posts