satchlj
/
joyce
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactoring Editor into different components for each mode

This commit is contained in:
Alex Hunt 2018-11-14 22:24:04 -08:00
parent 4e4a8e1cec
commit a2d8b92d22
4 changed files with 171 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/editorAnnotateMode.js Normal file
View File

@ -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

51
src/components/editorEditMode.js Normal file
View File

@ -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

32
src/components/editorReadMode.js Normal file
View File

@ -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

90
src/containers/editorContentContainer.js
View File

@ -1,13 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
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 DocumentTitle from '../components/documentTitle'
import LoadingSpinner from '../components/loadingSpinner'
import EditorReadMode from '../components/editorReadMode'
import EditorAnnotateMode from '../components/editorAnnotateMode'
import EditorEditMode from '../components/editorEditMode'
const EditorContent = ({
currentDocument,
@ -27,46 +25,48 @@ const EditorContent = ({
annotateKeyBindings,
onRemoveAnnotationClick,
}) =>
<div>
<div id='editor_metadata'>
{loadingToggle === true &&
<LoadingSpinner />
}
{(mode === 'READ_MODE' || mode === 'ANNOTATE_MODE') &&
<DocumentTitle docType={docType} currentDocument={currentDocument} />
}
{mode === 'EDIT_MODE' &&
<input type='text' value={documentTitleInput} onChange={onDocumentTitleChange}/>
}
</div>
<div id='editor_topbar'>
{mode === 'READ_MODE' &&
<ReadModeTopBar setMode={setMode} />
}
{mode === 'ANNOTATE_MODE' &&
<AnnotateModeTopBar onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())} onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)} addDisabled={editorState.getSelection().isCollapsed() ? true : false} removeDisabled={(editorState.getSelection().isCollapsed() ) ? true : false}/>
}
{mode === 'EDIT_MODE' &&
<EditModeTopBar editorState={editorState} onToolButtonClick={onToolButtonClick} disabled={!currentDocument.id ? true : false}/>
}
</div>
<div id='editor_content'>
{mode === 'READ_MODE' &&
<Editor editorState={editorState} readOnly={true} />
}
{mode === 'ANNOTATE_MODE' &&
<Editor editorState={editorState} onChange={onChangeEditorState} keyBindingFn={annotateKeyBindings} />
}
{mode === 'EDIT_MODE' &&
<Editor editorState={editorState} handleKeyCommand={handleKeyCommand} onChange={onChangeEditorState}/>
}
</div>
<div id='editor_bottombar'>
{(mode === 'EDIT_MODE' || mode === 'ANNOTATE_MODE') &&
<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)} />
}
</div>
</div>
<div id='editor_container'>
{mode === 'READ_MODE' &&
<EditorReadMode
currentDocument={currentDocument}
editorState={editorState}
docType={docType}
loadingToggle={loadingToggle}
setMode={setMode}
/>
}
{mode === 'ANNOTATE_MODE' &&
<EditorAnnotateMode
currentDocument={currentDocument}
editorState={editorState}
docType={docType}
loadingToggle={loadingToggle}
handleKeyCommand={handleKeyCommand}
onChangeEditorState={onChangeEditorState}
onToolButtonClick={onToolButtonClick}
setMode={setMode}
cancelEdit={cancelEdit}
onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}
documentTitleInput={documentTitleInput}
onDocumentTitleChange={onDocumentTitleChange}
/>
}
{mode === 'EDIT_MODE' &&
<EditorEditMode
currentDocument={currentDocument}
editorState={editorState}
docType={docType}
loadingToggle={loadingToggle}
onChangeEditorState={onChangeEditorState}
onNewAnnotationClick={()=>onNewAnnotationClick(editorState.getSelection())}
annotateKeyBindings={annotateKeyBindings}
onRemoveAnnotationClick={()=>onRemoveAnnotationClick(editorState)}
cancelEdit={cancelEdit}
onSubmitClick={()=>onSubmitClick(currentDocument, editorState, documentTitleInput, docType)}
documentTitleInput={documentTitleInput}
/>
}
</div>
const mapStateToProps = (state, props) => {
return {