diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js index 3f1ba34d..4aa30802 100644 --- a/browser/main/HomePage.js +++ b/browser/main/HomePage.js @@ -16,6 +16,8 @@ const TAG_FILTER = 'TAG_FILTER' class HomePage extends React.Component { componentDidMount () { + // React自体のKey入力はfocusされていないElementからは動かないため、 + // `window`に直接かける this.listener = (e) => this.handleKeyDown(e) window.addEventListener('keydown', this.listener) } @@ -33,6 +35,7 @@ class HomePage extends React.Component { let { status } = this.props let { nav, top, list, detail } = this.refs + // Search inputがfocusされていたら大体のキー入力は無視される。 if (top.isInputFocused() && !e.metaKey) { if (e.keyCode === 13 || e.keyCode === 27) top.escape() return diff --git a/browser/main/HomePage/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js index a8b1c72c..1fb90405 100644 --- a/browser/main/HomePage/ArticleDetail.js +++ b/browser/main/HomePage/ArticleDetail.js @@ -4,7 +4,7 @@ import _ from 'lodash' import ModeIcon from 'boost/components/ModeIcon' import MarkdownPreview from 'boost/components/MarkdownPreview' import CodeEditor from 'boost/components/CodeEditor' -import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, updateArticle, destroyArticle } from 'boost/actions' +import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle } from 'boost/actions' import aceModes from 'boost/ace-modes' import Select from 'react-select' import linkState from 'boost/linkState' @@ -33,16 +33,23 @@ export default class ArticleDetail extends React.Component { } componentWillReceiveProps (nextProps) { - if (nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key) || (nextProps.status.mode !== this.props.status.mode)) { - this.setState({article: makeInstantArticle(nextProps.activeArticle)}, function () { - console.log('receive props') + let nextState = {} + + let isArticleChanged = nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key) + let isModeChanged = nextProps.status.mode !== this.props.status.mode + if (isArticleChanged || (isModeChanged && nextProps.status.mode !== IDLE_MODE)) { + Object.assign(nextState, { + article: makeInstantArticle(nextProps.activeArticle) }) } - let isEdit = nextProps.status.mode === EDIT_MODE || nextProps.status.mode === CREATE_MODE - if (isEdit && this.state.openDeleteConfirmMenu) { - this.setState({openDeleteConfirmMenu: false}) + if (isModeChanged) { + Object.assign(nextState, { + openDeleteConfirmMenu: false, + previewMode: false + }) } + this.setState(nextState) } renderEmpty () { @@ -152,7 +159,12 @@ export default class ArticleDetail extends React.Component { dispatch(updateArticle(newArticle)) dispatch(switchMode(IDLE_MODE)) + // Folder filterがかかっている時に、 + // Searchを初期化し、更新先のFolder filterをかける + // かかれていない時に + // Searchを初期化する if (filters.folder.length !== 0) dispatch(switchFolder(folder.name)) + else dispatch(clearSearch()) dispatch(switchArticle(newArticle.key)) } @@ -182,6 +194,10 @@ export default class ArticleDetail extends React.Component { this.setState({article: article}) } + handleTogglePreviewButtonClick (e) { + this.setState({previewMode: !this.state.previewMode}) + } + renderEdit () { let { folders } = this.props @@ -209,6 +225,11 @@ export default class ArticleDetail extends React.Component { />
+ { + this.state.article.mode === 'markdown' + ? () + : null + }
@@ -229,12 +250,16 @@ export default class ArticleDetail extends React.Component { className='mode' /> - this.handleContentChange(e, value)} - readOnly={false} - mode={this.state.article.mode} - code={this.state.article.content} - /> + + {this.state.previewMode + ? + : ( this.handleContentChange(e, value)} + readOnly={false} + mode={this.state.article.mode} + code={this.state.article.content} + />) + } diff --git a/browser/main/MainPage.js b/browser/main/MainPage.js index 568075c4..e819f0f1 100644 --- a/browser/main/MainPage.js +++ b/browser/main/MainPage.js @@ -29,10 +29,10 @@ export default class MainContainer extends React.Component { {this.state.updateAvailable ? ( ) : null} - + */} {this.props.children} ) diff --git a/browser/styles/main/HomeContainer/components/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl index 39e4f10b..5ae17ddc 100644 --- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl +++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl @@ -138,6 +138,8 @@ iptFocusBorderColor = #369DCD background-color darken(white, 5%) border solid 1px borderColor border-radius 5px + &.preview + width inherit &:hover background-color white &.primary diff --git a/lib/reducer.js b/lib/reducer.js index e74f1370..feb172a1 100644 --- a/lib/reducer.js +++ b/lib/reducer.js @@ -109,6 +109,7 @@ function articles (state = initialArticles, action) { } function status (state = initialStatus, action) { + state = Object.assign({}, state) switch (action.type) { case SWITCH_FOLDER: state.mode = IDLE_MODE