1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00

Show Arrows at snippets tab bar only when needed

This commit is contained in:
Nikolay Lopin
2018-02-24 00:49:21 +03:00
parent 1769dd959e
commit 8e85a33dac

View File

@@ -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
}, () => {
}, this.getArrowsState()), () => {
if (this.state.showArrows) {
const newLeft = this.visibleTabs.offsetWidth - this.allTabs.offsetWidth
this.moveTabBarBy(newLeft)
}
this.refs['tab-' + snippetIndex].startRenaming()
})
}