diff --git a/app/components/BookBuilder/Chapter/SecondRow.jsx b/app/components/BookBuilder/Chapter/SecondRow.jsx index f07d399c5a19f8db4c34c71c235eb126c20c1bd2..5d479711ff9a96fa9939b3ace81c9b34107a6d46 100644 --- a/app/components/BookBuilder/Chapter/SecondRow.jsx +++ b/app/components/BookBuilder/Chapter/SecondRow.jsx @@ -20,6 +20,7 @@ class ChapterSecondRow extends React.Component { accept='.docx' chapter={chapter} convertFile={convertFile} + modalContainer={outerContainer} title=' ' toggleUpload={toggleUpload} type='file' diff --git a/app/components/BookBuilder/Chapter/UploadButton.jsx b/app/components/BookBuilder/Chapter/UploadButton.jsx index 32846417e9f08208d1ec0a57fd27f8d99efc53d7..697d7f01d9019a0def9fd2f1486ca31fc578a125 100644 --- a/app/components/BookBuilder/Chapter/UploadButton.jsx +++ b/app/components/BookBuilder/Chapter/UploadButton.jsx @@ -1,10 +1,19 @@ import React from 'react' + +import UploadWarningModal from './UploadWarningModal' import styles from '../styles/bookBuilder.local.scss' export class UploadButton extends React.Component { constructor (props) { super(props) + this.handleFileUpload = this.handleFileUpload.bind(this) + this.onClick = this.onClick.bind(this) + this.toggleModal = this.toggleModal.bind(this) + + this.state = { + showModal: false + } } handleFileUpload (event) { @@ -29,10 +38,30 @@ export class UploadButton extends React.Component { }) } - render () { + toggleModal () { + this.setState({ + showModal: !this.state.showModal + }) + } + + onClick () { + if (!this.isLocked()) return + this.toggleModal() + } + + isLocked () { + const { chapter } = this.props + + if (chapter.lock === null) return false + return true + } + + renderInput () { + if (this.isLocked()) return null + const { accept, title, type } = this.props - const input = ( + return ( <input accept={accept} onChange={this.handleFileUpload} @@ -40,14 +69,45 @@ export class UploadButton extends React.Component { type={type} /> ) + } + + renderModal () { + if (!this.isLocked()) return null + + const { showModal } = this.state + const { modalContainer } = this.props + + return ( + <UploadWarningModal + container={modalContainer} + show={showModal} + toggle={this.toggleModal} + /> + ) + } + + render () { + const input = this.renderInput() + const modal = this.renderModal() + + // TODO -- refactor with chapter buttons lock + let buttonStyle = {} + if (this.isLocked()) { + buttonStyle = { + 'opacity': '0.3' + } + } return ( <div className={styles.btnFile} id='bb-upload' + onClick={this.onClick} + style={buttonStyle} > Upload Word { input } + { modal } </div> ) } @@ -57,6 +117,7 @@ UploadButton.propTypes = { accept: React.PropTypes.string.isRequired, chapter: React.PropTypes.object.isRequired, convertFile: React.PropTypes.func.isRequired, + modalContainer: React.PropTypes.object.isRequired, title: React.PropTypes.string.isRequired, toggleUpload: React.PropTypes.func.isRequired, type: React.PropTypes.string.isRequired, diff --git a/app/components/BookBuilder/Chapter/UploadWarningModal.jsx b/app/components/BookBuilder/Chapter/UploadWarningModal.jsx new file mode 100644 index 0000000000000000000000000000000000000000..3f946bb3eea23db4cac4dac8ca6b7f916a828dbb --- /dev/null +++ b/app/components/BookBuilder/Chapter/UploadWarningModal.jsx @@ -0,0 +1,37 @@ +import React from 'react' + +import AbstractModal from '../../common/AbstractModal' + +class UploadWarningModal extends React.Component { + renderBody () { + return ( + <div> + You are not allowed to import contents while a chapter is being edited. + </div> + ) + } + + render () { + const { container, show, toggle } = this.props + const body = this.renderBody() + const title = 'Import not allowed' + + return ( + <AbstractModal + body={body} + container={container} + show={show} + title={title} + toggle={toggle} + /> + ) + } +} + +UploadWarningModal.propTypes = { + container: React.PropTypes.object.isRequired, + show: React.PropTypes.bool.isRequired, + toggle: React.PropTypes.func.isRequired +} + +export default UploadWarningModal