/* eslint jsx-a11y/tabindex-no-positive: 0 */ import {Actions, React, ReactDOM} from 'nylas-exports'; import {Menu, RetinaImg} from 'nylas-component-kit'; import TemplateStore from './template-store'; class TemplatePopover extends React.Component { static displayName = 'TemplatePopover'; static propTypes = { draftClientId: React.PropTypes.string, }; constructor() { super(); this.state = { searchValue: '', templates: TemplateStore.items(), }; } componentDidMount() { this.unsubscribe = TemplateStore.listen(() => { this.setState({templates: TemplateStore.items()}); }); } componentWillUnmount() { if (this.unsubscribe) { this.unsubscribe(); } } _filteredTemplates() { const {searchValue, templates} = this.state; if (!searchValue.length) { return templates; } return templates.filter((t) => { return t.name.toLowerCase().indexOf(searchValue.toLowerCase()) === 0; }); } _onSearchValueChange = (event) => { this.setState({searchValue: event.target.value}); }; _onChooseTemplate = (template) => { Actions.insertTemplateId({templateId: template.id, draftClientId: this.props.draftClientId}); Actions.closePopover(); } _onManageTemplates = () => { Actions.showTemplates(); }; _onNewTemplate = () => { Actions.createTemplate({draftClientId: this.props.draftClientId}); }; _onClickButton = () => { const buttonRect = ReactDOM.findDOMNode(this).getBoundingClientRect() Actions.openPopover( this._renderPopover(), {originRect: buttonRect, direction: 'up'} ) }; render() { const filteredTemplates = this._filteredTemplates(); const headerComponents = [ , ]; const footerComponents = [
Save Draft as Template...
,
Manage Templates...
, ]; return ( item.id} itemContent={(item) => item.name} onSelect={this._onChooseTemplate} /> ); } } class TemplatePicker extends React.Component { static displayName = 'TemplatePicker'; static propTypes = { draftClientId: React.PropTypes.string, }; _onClickButton = () => { const buttonRect = ReactDOM.findDOMNode(this).getBoundingClientRect() Actions.openPopover( , {originRect: buttonRect, direction: 'up'} ) }; render() { return ( ); } } export default TemplatePicker;