From fd84d15fbb268124fc2ad374f336a6f4c80c3e4b Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Fri, 13 May 2016 17:14:04 -0700 Subject: [PATCH] fix(templates): QA pass on templates, resolve #2216 --- .../composer-templates/lib/main.es6 | 2 +- .../lib/preferences-templates.jsx | 17 ++--- .../lib/template-picker.jsx | 71 ++++++++++++------- src/flux/stores/preferences-ui-store.es6 | 12 ++-- 4 files changed, 62 insertions(+), 40 deletions(-) diff --git a/internal_packages/composer-templates/lib/main.es6 b/internal_packages/composer-templates/lib/main.es6 index a3b5558f9..b6353be78 100644 --- a/internal_packages/composer-templates/lib/main.es6 +++ b/internal_packages/composer-templates/lib/main.es6 @@ -9,7 +9,7 @@ export function activate(state = {}) { this.preferencesTab = new PreferencesUIStore.TabItem({ tabId: 'Quick Replies', displayName: 'Quick Replies', - component: require('./preferences-templates'), + component: require('./preferences-templates').default, }); ComponentRegistry.register(TemplatePicker, {role: 'Composer:ActionButton'}); ComponentRegistry.register(TemplateStatusBar, {role: 'Composer:Footer'}); diff --git a/internal_packages/composer-templates/lib/preferences-templates.jsx b/internal_packages/composer-templates/lib/preferences-templates.jsx index 3df24f23c..2f13fc518 100644 --- a/internal_packages/composer-templates/lib/preferences-templates.jsx +++ b/internal_packages/composer-templates/lib/preferences-templates.jsx @@ -70,7 +70,7 @@ class PreferencesTemplates extends React.Component { _getStateFromStores() { const templates = TemplateStore.items(); let selectedTemplate = this.state ? this.state.selectedTemplate : null; - if (selectedTemplate && _.pluck(templates, "id").indexOf(selectedTemplate.id) === -1) { + if (selectedTemplate && !_.pluck(templates, "id").includes(selectedTemplate.id)) { selectedTemplate = null; } else if (!selectedTemplate) { selectedTemplate = templates.length > 0 ? templates[0] : null; @@ -97,12 +97,12 @@ class PreferencesTemplates extends React.Component { if (this.state.selectedTemplate) { this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents); } - let selectedTemplate = null; - for (const template of Object.keys(this.state.templates)) { - if (template.id === event.target.value) { - selectedTemplate = template; - } - } + + const selectedId = event.target.value; + const selectedTemplate = this.state.templates.find((template) => + template.id === selectedId + ); + this.setState({ selectedTemplate: selectedTemplate, selectedTemplateName: selectedTemplate ? selectedTemplate.name : null, @@ -270,7 +270,8 @@ class PreferencesTemplates extends React.Component {
- {_.size(this._templateSaveQueue) > 0 ? "Saving changes..." : "Changes saved."} + {_.size(this._templateSaveQueue) === 0 ? "Changes saved." : ""} +   {this.state.editState === null ? deleteBtn : ""}
diff --git a/internal_packages/composer-templates/lib/template-picker.jsx b/internal_packages/composer-templates/lib/template-picker.jsx index 6894148ea..58d324fb7 100644 --- a/internal_packages/composer-templates/lib/template-picker.jsx +++ b/internal_packages/composer-templates/lib/template-picker.jsx @@ -2,8 +2,8 @@ import {Actions, React, ReactDOM} from 'nylas-exports'; import {Menu, RetinaImg} from 'nylas-component-kit'; import TemplateStore from './template-store'; -class TemplatePicker extends React.Component { - static displayName = 'TemplatePicker'; +class TemplatePopover extends React.Component { + static displayName = 'TemplatePopover'; static propTypes = { draftClientId: React.PropTypes.string, @@ -18,40 +18,34 @@ class TemplatePicker extends React.Component { } componentDidMount() { - this.unsubscribe = TemplateStore.listen(this._onStoreChange.bind(this)); + this.unsubscribe = TemplateStore.listen(() => { + this.setState({templates: TemplateStore.items()}); + }); } componentWillUnmount() { - if (this.unsubscribe) this.unsubscribe(); + if (this.unsubscribe) { + this.unsubscribe(); + } } - _filteredTemplates(search = this.state.searchValue) { - const items = TemplateStore.items(); + _filteredTemplates() { + const {searchValue, templates} = this.state; - if (!search.length) { return items; } + if (!searchValue.length) { return templates; } - return items.filter((t) => { - return t.name.toLowerCase().indexOf(search.toLowerCase()) === 0; + return templates.filter((t) => { + return t.name.toLowerCase().indexOf(searchValue.toLowerCase()) === 0; }); } - _onStoreChange() { - return this.setState({ - templates: this._filteredTemplates(), - }); - } - - _onSearchValueChange = () => { - const newSearch = event.target.value; - return this.setState({ - searchValue: newSearch, - templates: this._filteredTemplates(newSearch), - }); + _onSearchValueChange = (event) => { + this.setState({searchValue: event.target.value}); }; _onChooseTemplate = (template) => { Actions.insertTemplateId({templateId: template.id, draftClientId: this.props.draftClientId}); - Actions.closePopover() + Actions.closePopover(); } _onManageTemplates = () => { @@ -70,7 +64,9 @@ class TemplatePicker extends React.Component { ) }; - _renderPopover() { + render() { + const filteredTemplates = this._filteredTemplates(); + const headerComponents = [ item.id} itemContent={(item) => item.name} onSelect={this._onChooseTemplate} @@ -100,6 +96,23 @@ class TemplatePicker extends React.Component { ); } +} + +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 ( ); } diff --git a/src/flux/stores/preferences-ui-store.es6 b/src/flux/stores/preferences-ui-store.es6 index 45bd133c5..c958c8190 100644 --- a/src/flux/stores/preferences-ui-store.es6 +++ b/src/flux/stores/preferences-ui-store.es6 @@ -32,14 +32,16 @@ class PreferencesUIStore extends NylasStore { } setupListeners() { - this.listenTo(Actions.openPreferences, this.openPreferences); - ipcRenderer.on('open-preferences', this.openPreferences); + if (NylasEnv.isMainWindow()) { + this.listenTo(Actions.openPreferences, this.openPreferences); + ipcRenderer.on('open-preferences', this.openPreferences); - this.listenTo(Actions.switchPreferencesTab, this.switchPreferencesTab); + this.listenTo(Actions.switchPreferencesTab, this.switchPreferencesTab); + } NylasEnv.commands.add(document.body, 'core:show-keybindings', () => { - this.openPreferences(); - this.switchPreferencesTab('Shortcuts'); + Actions.openPreferences(); + Actions.switchPreferencesTab('Shortcuts'); }); }