From 1f7e5185d2c65c6e1bb9f423c8512fa42e0f5570 Mon Sep 17 00:00:00 2001
From: john <johnbarlas39@gmail.com>
Date: Fri, 9 Dec 2016 19:17:35 +0200
Subject: [PATCH] refactor upload word button and alignment boxes into their
own files
---
app/components/BookBuilder/Chapter.jsx | 80 ++++++-------------
.../BookBuilder/PagePositionAlignment.jsx | 60 ++++++++++++++
.../BookBuilder/ProgressIndicator.jsx | 15 ++--
app/components/BookBuilder/UploadWordBtn.jsx | 28 +++++++
4 files changed, 119 insertions(+), 64 deletions(-)
create mode 100644 app/components/BookBuilder/PagePositionAlignment.jsx
create mode 100644 app/components/BookBuilder/UploadWordBtn.jsx
diff --git a/app/components/BookBuilder/Chapter.jsx b/app/components/BookBuilder/Chapter.jsx
index 812f3da..8577366 100644
--- a/app/components/BookBuilder/Chapter.jsx
+++ b/app/components/BookBuilder/Chapter.jsx
@@ -7,8 +7,11 @@ import { findDOMNode } from 'react-dom'
import { includes, get, map, flow, slice } from 'lodash'
import BookBuilderModal from './BookBuilderModal'
+import PagePositionAlignment from './PagePositionAlignment'
import ProgressIndicator from './ProgressIndicator'
import TextInput from '../utils/TextInput'
+import UploadWordButton from './UploadWordBtn'
+
import styles from './styles/bookBuilder.local.scss'
const itemTypes = {
@@ -83,7 +86,6 @@ export class Chapter extends React.Component {
this._toggleDelete = this._toggleDelete.bind(this)
this._toggleUnlock = this._toggleUnlock.bind(this)
- this._onClickAlignment = this._onClickAlignment.bind(this)
this._isAdmin = this._isAdmin.bind(this)
this._formatDate = this._formatDate.bind(this)
@@ -93,6 +95,8 @@ export class Chapter extends React.Component {
this._myHandler = this._myHandler.bind(this)
this._viewOrEdit = this._viewOrEdit.bind(this)
+ this.update = this.update.bind(this)
+
this.state = {
isRenamingTitle: false,
isRenameEmpty: false,
@@ -103,18 +107,6 @@ export class Chapter extends React.Component {
}
}
- _onClickAlignment (position) {
- const { book, chapter, update } = this.props
- if (!includes(['left', 'right'], position)) { return }
-
- function clickAlignment () {
- chapter.alignment[position] = !chapter.alignment[position]
- update(book, chapter)
- }
-
- return clickAlignment
- }
-
_onClickRename () {
this.setState({
isRenamingTitle: true
@@ -269,14 +261,17 @@ export class Chapter extends React.Component {
})
}
+ update (changedChapter) {
+ const { book, update } = this.props
+ update(book, changedChapter)
+ }
+
render () {
- const { book, chapter, type, title, connectDragSource, connectDropTarget, isDragging, update, roles, outerContainer } = this.props
+ const { book, chapter, type, title, connectDragSource, connectDropTarget, isDragging, roles, outerContainer } = this.props
const { isRenamingTitle, isRenameEmpty } = this.state
// const { _onSaveRename } = this
const opacity = isDragging ? 0 : 1
- const align = chapter.alignment
-
let titleArea = null
let renameButton = null
@@ -463,9 +458,6 @@ export class Chapter extends React.Component {
const rightArea = chapter.lock ? editorArea : buttons
- const clickAlignmentLeft = this._onClickAlignment('left')
- const clickAlignmentRight = this._onClickAlignment('right')
-
return connectDragSource(connectDropTarget(
<li
className={styles.chapterContainer + ' col-lg-12 bb-chapter ' + (chapter.subCategory === 'chapter' ? styles.isChapter : styles.isPart)}
@@ -492,22 +484,18 @@ export class Chapter extends React.Component {
<div className={styles.secondLineContainer}>
<div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
- <div id='bb-upload' className={styles.btnFile}>
- Upload Word
- <input
- type='file'
- accept='.docx'
- title=' '
- />
- </div>
+ <UploadWordButton
+ type='file'
+ accept='.docx'
+ title=' '
+ />
</div>
<ul className={styles.secondActions + ' col-lg-7 col-md-12 col-sm-12 col-xs-12'}>
<ProgressIndicator
type='style'
- book={book}
chapter={chapter}
- update={update}
+ update={this.update}
roles={roles}
outerContainer={outerContainer}
hasIcon
@@ -516,9 +504,8 @@ export class Chapter extends React.Component {
<ProgressIndicator
type='edit'
- book={book}
chapter={chapter}
- update={update}
+ update={this.update}
roles={roles}
outerContainer={outerContainer}
hasIcon
@@ -527,9 +514,8 @@ export class Chapter extends React.Component {
<ProgressIndicator
type='review'
- book={book}
chapter={chapter}
- update={update}
+ update={this.update}
roles={roles}
outerContainer={outerContainer}
hasIcon
@@ -538,37 +524,19 @@ export class Chapter extends React.Component {
<ProgressIndicator
type='clean'
- book={book}
chapter={chapter}
roles={roles}
outerContainer={outerContainer}
- update={update}
+ update={this.update}
viewOrEdit={this._viewOrEdit}
/>
</ul>
<div className={styles.noPadding + ' col-lg-3 col-md-12 col-sm-12 col-xs-12'}>
- <ul className={styles.pagePosition}>
- <li>left </li>
-
- <li onClick={clickAlignmentLeft}>
- <div className={styles.leftRightBox + ' ' + styles.leftBox}>
- <div className={align.left ? styles.boxActive : styles.boxInactiveHover} />
- </div>
- </li>
-
- <li onClick={clickAlignmentRight}>
- <div className={styles.leftRightBox + ' ' + styles.rightBox}>
- <div className={align.right ? styles.boxActive : styles.boxInactiveHover} />
- </div>
- </li>
-
- <li>
- <div className={styles.boxDiver} />
- </li>
-
- <li> right</li>
- </ul>
+ <PagePositionAlignment
+ chapter={chapter}
+ update={this.update}
+ />
</div>
<div className={styles.separator} />
diff --git a/app/components/BookBuilder/PagePositionAlignment.jsx b/app/components/BookBuilder/PagePositionAlignment.jsx
new file mode 100644
index 0000000..e84f038
--- /dev/null
+++ b/app/components/BookBuilder/PagePositionAlignment.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import styles from './styles/bookBuilder.local.scss'
+import { includes } from 'lodash'
+
+export class PagePositionAlignment extends React.Component {
+ constructor (props) {
+ super(props)
+ this._onClickAlignment = this._onClickAlignment.bind(this)
+ }
+
+ _onClickAlignment (position) {
+ const { chapter, update } = this.props
+ if (!includes(['left', 'right'], position)) { return }
+
+ function clickAlignment () {
+ chapter.alignment[position] = !chapter.alignment[position]
+ update(chapter)
+ }
+
+ return clickAlignment
+ }
+
+ render () {
+ const { chapter } = this.props
+ const clickAlignmentLeft = this._onClickAlignment('left')
+ const clickAlignmentRight = this._onClickAlignment('right')
+ const align = chapter.alignment
+
+ return (
+ <ul className={styles.pagePosition}>
+ <li>left </li>
+
+ <li onClick={clickAlignmentLeft}>
+ <div className={styles.leftRightBox + ' ' + styles.leftBox}>
+ <div className={align.left ? styles.boxActive : styles.boxInactiveHover} />
+ </div>
+ </li>
+
+ <li onClick={clickAlignmentRight}>
+ <div className={styles.leftRightBox + ' ' + styles.rightBox}>
+ <div className={align.right ? styles.boxActive : styles.boxInactiveHover} />
+ </div>
+ </li>
+
+ <li>
+ <div className={styles.boxDiver} />
+ </li>
+
+ <li> right</li>
+ </ul>
+ )
+ }
+}
+
+PagePositionAlignment.propTypes = {
+ chapter: React.PropTypes.object.isRequired,
+ update: React.PropTypes.func.isRequired
+}
+
+export default PagePositionAlignment
diff --git a/app/components/BookBuilder/ProgressIndicator.jsx b/app/components/BookBuilder/ProgressIndicator.jsx
index 4382c42..154088a 100644
--- a/app/components/BookBuilder/ProgressIndicator.jsx
+++ b/app/components/BookBuilder/ProgressIndicator.jsx
@@ -57,7 +57,7 @@ export class ProgressIndicator extends React.Component {
}
_changeWorkflowState () {
- const { book, chapter, update, type, viewOrEdit } = this.props
+ const { chapter, update, type, viewOrEdit } = this.props
const { progressValues } = this
const list = progressValues[type]
@@ -71,7 +71,7 @@ export class ProgressIndicator extends React.Component {
chapter.progress[type] = position
- update(book, chapter)
+ update(chapter)
this.setState({ showWarning: false })
viewOrEdit()
}
@@ -82,7 +82,7 @@ export class ProgressIndicator extends React.Component {
let ErrorMsg = this.state.showError
? (
- <Alert bsStyle="warning" className={styles.noWritesError}>
+ <Alert bsStyle='warning' className={styles.noWritesError}>
You don't have access to perfom this action. Please contact your Production Editor.
</Alert>
)
@@ -90,14 +90,14 @@ export class ProgressIndicator extends React.Component {
let icon = ''
if (hasIcon) {
- icon = <i className="fa fa-angle-right" />
+ icon = <i className='fa fa-angle-right' />
}
const warningModal = (
<BookBuilderModal
- title="Change of workflow status"
- action="workflow-warning"
- successText="OK"
+ title='Change of workflow status'
+ action='workflow-warning'
+ successText='OK'
successAction={this._changeWorkflowState}
show={this.state.showWarning}
toggle={this._toggleModal}
@@ -123,7 +123,6 @@ export class ProgressIndicator extends React.Component {
ProgressIndicator.propTypes = {
type: React.PropTypes.string.isRequired,
- book: React.PropTypes.object.isRequired,
chapter: React.PropTypes.object.isRequired,
hasIcon: React.PropTypes.bool,
update: React.PropTypes.func.isRequired,
diff --git a/app/components/BookBuilder/UploadWordBtn.jsx b/app/components/BookBuilder/UploadWordBtn.jsx
new file mode 100644
index 0000000..448f1d6
--- /dev/null
+++ b/app/components/BookBuilder/UploadWordBtn.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import styles from './styles/bookBuilder.local.scss'
+
+export class UploadWordButton extends React.Component {
+
+ render () {
+ const { type, accept, title } = this.props
+
+ return (
+ <div id='bb-upload' className={styles.btnFile}>
+ Upload Word
+ <input
+ type={type}
+ accept={accept}
+ title={title}
+ />
+ </div>
+ )
+ }
+}
+
+UploadWordButton.propTypes = {
+ type: React.PropTypes.string.isRequired,
+ accept: React.PropTypes.string.isRequired,
+ title: React.PropTypes.string.isRequired
+}
+
+export default UploadWordButton
--
GitLab