Refactoring Editor into different components for each mode
This commit is contained in:
parent
4e4a8e1cec
commit
a2d8b92d22
|
@ -0,0 +1,43 @@
|
||||||
|
import { ReadModeTopBar, EditModeTopBar, AnnotateModeTopBar } from '../components/contentTopBar'
|
||||||
|
import { EditModeBottomBar } from '../components/contentBottomBar'
|
||||||
|
import actions from '../actions'
|
||||||
|
import DocumentTitle from '../components/documentTitle'
|
||||||
|
import LoadingSpinner from '../components/loadingSpinner'
|
||||||
|
|
||||||
|
const EditorAnnotateMode = ({
|
||||||
|
currentDocument,
|
||||||
|
editorState,
|
||||||
|
docType,
|
||||||
|
loadingToggle,
|
||||||
|
onChangeEditorState,
|
||||||
|
onNewAnnotationClick,
|
||||||
|
annotateKeyBindings,
|
||||||
|
onRemoveAnnotationClick,
|
||||||
|
cancelEdit,
|
||||||
|
onSubmitClick,
|
||||||
|
documentTitleInput
|
||||||
|
}) =>
|
||||||
|
<div>
|
||||||
|
<div id='editor_metadata'>
|
||||||
|
{loadingToggle === true &&
|
||||||
|
<LoadingSpinner />
|
||||||
|
}
|
||||||
|
<DocumentTitle docType={docType} currentDocument={currentDocument} />
|
||||||
|
</div>
|
||||||
|
<div id='editor_topbar'>
|
||||||
|
<AnnotateModeTopBar
|
||||||
|
onNewAnnotationClick={onNewAnnotationClick}
|
||||||
|
onRemoveAnnotationClick={onRemoveAnnotationClick}
|
||||||
|
addDisabled={editorState.getSelection().isCollapsed() ? true : false}
|
||||||
|
removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id='editor_content'>
|
||||||
|
<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
|
||||||
|
</div>
|
||||||
|
<div id='editor_bottombar'>
|
||||||
|
<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
export default EditorAnnotateMode
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { Editor } from 'draft-js'
|
||||||
|
|
||||||
|
import { EditModeTopBar } from '../components/contentTopBar'
|
||||||
|
import { EditModeBottomBar } from '../components/contentBottomBar'
|
||||||
|
import actions from '../actions'
|
||||||
|
import DocumentTitle from '../components/documentTitle'
|
||||||
|
import LoadingSpinner from '../components/loadingSpinner'
|
||||||
|
|
||||||
|
const EditorEditMode = ({
|
||||||
|
currentDocument,
|
||||||
|
editorState,
|
||||||
|
docType,
|
||||||
|
loadingToggle,
|
||||||
|
handleKeyCommand,
|
||||||
|
onChangeEditorState,
|
||||||
|
onToolButtonClick,
|
||||||
|
setMode,
|
||||||
|
cancelEdit,
|
||||||
|
onSubmitClick,
|
||||||
|
documentTitleInput,
|
||||||
|
onDocumentTitleChange
|
||||||
|
}) =>
|
||||||
|
<div>
|
||||||
|
<div id='editor_metadata'>
|
||||||
|
{loadingToggle === true &&
|
||||||
|
<LoadingSpinner />
|
||||||
|
}
|
||||||
|
<input type='text' value={documentTitleInput} onChange={onDocumentTitleChange}/>
|
||||||
|
</div>
|
||||||
|
<div id='editor_topbar'>
|
||||||
|
<EditModeTopBar
|
||||||
|
editorState={editorState}
|
||||||
|
onToolButtonClick={onToolButtonClick}
|
||||||
|
disabled={!currentDocument.id ? true : false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id='editor_content'>
|
||||||
|
<Editor
|
||||||
|
editorState={editorState}
|
||||||
|
handleKeyCommand={handleKeyCommand}
|
||||||
|
onChange={onChangeEditorState}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id='editor_bottombar'>
|
||||||
|
<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
export default EditorEditMode
|
|
@ -0,0 +1,32 @@
|
||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { Editor } from 'draft-js'
|
||||||
|
|
||||||
|
import { ReadModeTopBar } from '../components/contentTopBar'
|
||||||
|
import actions from '../actions'
|
||||||
|
import DocumentTitle from '../components/documentTitle'
|
||||||
|
import LoadingSpinner from '../components/loadingSpinner'
|
||||||
|
|
||||||
|
const EditorReadMode = ({
|
||||||
|
currentDocument,
|
||||||
|
editorState,
|
||||||
|
docType,
|
||||||
|
loadingToggle,
|
||||||
|
setMode
|
||||||
|
}) =>
|
||||||
|
<div id='editor_read_mode'>
|
||||||
|
<div id='editor_metadata'>
|
||||||
|
{loadingToggle === true &&
|
||||||
|
<LoadingSpinner />
|
||||||
|
}
|
||||||
|
<DocumentTitle docType={docType} currentDocument={currentDocument} />
|
||||||
|
</div>
|
||||||
|
<div id='editor_topbar'>
|
||||||
|
<ReadModeTopBar setMode={setMode} />
|
||||||
|
</div>
|
||||||
|
<div id='editor_content'>
|
||||||
|
<Editor editorState={editorState} readOnly={true} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
export default EditorReadMode
|
|
@ -1,13 +1,11 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import { Editor } from 'draft-js'
|
|
||||||
|
|
||||||
import { ReadModeTopBar, EditModeTopBar, AnnotateModeTopBar } from '../components/contentTopBar'
|
|
||||||
import { EditModeBottomBar } from '../components/contentBottomBar'
|
|
||||||
import actions from '../actions'
|
import actions from '../actions'
|
||||||
import DocumentTitle from '../components/documentTitle'
|
import EditorReadMode from '../components/editorReadMode'
|
||||||
import LoadingSpinner from '../components/loadingSpinner'
|
import EditorAnnotateMode from '../components/editorAnnotateMode'
|
||||||
|
import EditorEditMode from '../components/editorEditMode'
|
||||||
|
|
||||||
const EditorContent = ({
|
const EditorContent = ({
|
||||||
currentDocument,
|
currentDocument,
|
||||||
|
@ -27,46 +25,48 @@ const EditorContent = ({
|
||||||
annotateKeyBindings,
|
annotateKeyBindings,
|
||||||
onRemoveAnnotationClick,
|
onRemoveAnnotationClick,
|
||||||
}) =>
|
}) =>
|
||||||
<div>
|
<div id='editor_container'>
|
||||||
<div id='editor_metadata'>
|
{mode === 'READ_MODE' &&
|
||||||
{loadingToggle === true &&
|
<EditorReadMode
|
||||||
<LoadingSpinner />
|
currentDocument={currentDocument}
|
||||||
}
|
editorState={editorState}
|
||||||
{(mode === 'READ_MODE' || mode === 'ANNOTATE_MODE') &&
|
docType={docType}
|
||||||
<DocumentTitle docType={docType} currentDocument={currentDocument} />
|
loadingToggle={loadingToggle}
|
||||||
}
|
setMode={setMode}
|
||||||
{mode === 'EDIT_MODE' &&
|
/>
|
||||||
<input type='text' value={documentTitleInput} onChange={onDocumentTitleChange}/>
|
}
|
||||||
}
|
{mode === 'ANNOTATE_MODE' &&
|
||||||
</div>
|
<EditorAnnotateMode
|
||||||
<div id='editor_topbar'>
|
currentDocument={currentDocument}
|
||||||
{mode === 'READ_MODE' &&
|
editorState={editorState}
|
||||||
<ReadModeTopBar setMode={setMode} />
|
docType={docType}
|
||||||
}
|
loadingToggle={loadingToggle}
|
||||||
{mode === 'ANNOTATE_MODE' &&
|
handleKeyCommand={handleKeyCommand}
|
||||||
<AnnotateModeTopBar onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())} onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)} addDisabled={editorState.getSelection().isCollapsed() ? true : false} removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}/>
|
onChangeEditorState={onChangeEditorState}
|
||||||
}
|
onToolButtonClick={onToolButtonClick}
|
||||||
{mode === 'EDIT_MODE' &&
|
setMode={setMode}
|
||||||
<EditModeTopBar editorState={editorState} onToolButtonClick={onToolButtonClick} disabled={!currentDocument.id ? true : false}/>
|
cancelEdit={cancelEdit}
|
||||||
}
|
onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}
|
||||||
</div>
|
documentTitleInput={documentTitleInput}
|
||||||
<div id='editor_content'>
|
onDocumentTitleChange={onDocumentTitleChange}
|
||||||
{mode === 'READ_MODE' &&
|
/>
|
||||||
<Editor editorState={editorState} readOnly={true} />
|
}
|
||||||
}
|
{mode === 'EDIT_MODE' &&
|
||||||
{mode === 'ANNOTATE_MODE' &&
|
<EditorEditMode
|
||||||
<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
|
currentDocument={currentDocument}
|
||||||
}
|
editorState={editorState}
|
||||||
{mode === 'EDIT_MODE' &&
|
docType={docType}
|
||||||
<Editor editorState={editorState} handleKeyCommand={handleKeyCommand} onChange={onChangeEditorState}/>
|
loadingToggle={loadingToggle}
|
||||||
}
|
onChangeEditorState={onChangeEditorState}
|
||||||
</div>
|
onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())}
|
||||||
<div id='editor_bottombar'>
|
annotateKeyBindings={annotateKeyBindings}
|
||||||
{(mode === 'EDIT_MODE' || mode === 'ANNOTATE_MODE') &&
|
onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)}
|
||||||
<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)} />
|
cancelEdit={cancelEdit}
|
||||||
}
|
onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}
|
||||||
</div>
|
documentTitleInput={documentTitleInput}
|
||||||
</div>
|
/>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => {
|
const mapStateToProps = (state, props) => {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in New Issue