diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index df777c02..c93611d4 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -8,7 +8,7 @@ import StarButton from './StarButton' import TagSelect from './TagSelect' import FolderSelect from './FolderSelect' import dataApi from 'browser/main/lib/dataApi' -import { hashHistory } from 'react-router' +import {hashHistory} from 'react-router' import ee from 'browser/main/lib/eventEmitter' import CodeMirror from 'codemirror' import 'codemirror-mode-elixir' @@ -17,14 +17,14 @@ import StatusBar from '../StatusBar' import context from 'browser/lib/context' import ConfigManager from 'browser/main/lib/ConfigManager' import _ from 'lodash' -import { findNoteTitle } from 'browser/lib/findNoteTitle' +import {findNoteTitle} from 'browser/lib/findNoteTitle' import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' import TrashButton from './TrashButton' import PermanentDeleteButton from './PermanentDeleteButton' import InfoButton from './InfoButton' import InfoPanel from './InfoPanel' import InfoPanelTrashed from './InfoPanelTrashed' -import { formatDate } from 'browser/lib/date-formatter' +import {formatDate} from 'browser/lib/date-formatter' function pass (name) { switch (name) { @@ -93,6 +93,7 @@ class SnippetNoteDetail extends React.Component { this.refs['code-' + index].reload() }) if (this.refs.tags) this.refs.tags.reset() + this.setState(this.getArrowsState()) }) } } @@ -340,7 +341,7 @@ class SnippetNoteDetail extends React.Component { const snippetIndex = this.state.snippetIndex >= snippets.length ? snippets.length - 1 : this.state.snippetIndex - this.setState({ note, snippetIndex }, () => { + this.setState(Object.assign({ note, snippetIndex }, this.getArrowsState()), () => { this.save() this.refs['code-' + this.state.snippetIndex].reload() }) @@ -515,15 +516,22 @@ class SnippetNoteDetail extends React.Component { moveTabBarBy (x) { this.allTabs.addEventListener('transitionend', () => { - this.setState({ - enableRightArrow: this.allTabs.offsetLeft !== this.visibleTabs.offsetWidth - this.allTabs.offsetWidth, - enableLeftArrow: this.allTabs.offsetLeft !== 0 - }) + this.setState(this.getArrowsState()) }, {once: true}) this.allTabs.style.left = `${x}px` } + getArrowsState () { + const allTabs = this.allTabs + const visibleTabs = this.visibleTabs + const showArrows = visibleTabs.offsetWidth < allTabs.offsetWidth + const enableRightArrow = allTabs.offsetLeft !== visibleTabs.offsetWidth - allTabs.offsetWidth + const enableLeftArrow = allTabs.offsetLeft !== 0 + + return {showArrows, enableRightArrow, enableLeftArrow} + } + addSnippet () { const { note } = this.state @@ -534,12 +542,14 @@ class SnippetNoteDetail extends React.Component { }]) const snippetIndex = note.snippets.length - 1 - this.setState({ + this.setState(Object.assign({ note, snippetIndex - }, () => { - const newLeft = this.visibleTabs.offsetWidth - this.allTabs.offsetWidth - this.moveTabBarBy(newLeft) + }, this.getArrowsState()), () => { + if (this.state.showArrows) { + const newLeft = this.visibleTabs.offsetWidth - this.allTabs.offsetWidth + this.moveTabBarBy(newLeft) + } this.refs['tab-' + snippetIndex].startRenaming() }) }