diff --git a/src/SingleCanvasDialog.js b/src/SingleCanvasDialog.js index 56e959cb23d4893d6b6223d65dd4f8b91e1f0e90..76be5f3eba216627ac4e4fdc8d1a7b520e9291db 100644 --- a/src/SingleCanvasDialog.js +++ b/src/SingleCanvasDialog.js @@ -8,23 +8,38 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import Typography from '@material-ui/core/Typography'; import PropTypes from 'prop-types'; +/** + * Dialog to enforce single view for annotation creation / editing + */ export class SingleCanvasDialog extends Component { + /** */ constructor(props) { super(props); this.confirm = this.confirm.bind(this); } + /** */ confirm() { - this.props.switchToSingleCanvasView(); - this.props.openCreateAnnotationCompanionWindow(); - this.props.handleClose(); + const { + handleClose, + openCreateAnnotationCompanionWindow, + switchToSingleCanvasView, + } = this.props; + switchToSingleCanvasView(); + openCreateAnnotationCompanionWindow(); + handleClose(); } + /** */ render() { + const { + handleClose, + open, + } = this.props; return ( <Dialog - onClose={this.props.hideDialog} - open={this.props.open} + onClose={handleClose} + open={open} > <DialogTitle disableTypography> <Typography variant="h2"> @@ -33,13 +48,14 @@ export class SingleCanvasDialog extends Component { </DialogTitle> <DialogContent> <DialogContentText variant="body2" color="inherit"> - Annotations can only be edited in single canvas view type. Switch view type to single view now? + Annotations can only be edited in single canvas view type. + Switch view type to single view now? </DialogContentText> <DialogActions> <Button onClick={this.confirm} variant="contained"> Switch and start annotating </Button> - <Button onClick={this.props.handleClose} variant="contained"> + <Button onClick={handleClose} variant="contained"> Cancel </Button> </DialogActions> @@ -54,8 +70,8 @@ SingleCanvasDialog.propTypes = { open: PropTypes.bool, openCreateAnnotationCompanionWindow: PropTypes.func.isRequired, switchToSingleCanvasView: PropTypes.func.isRequired, -} +}; SingleCanvasDialog.defaultProps = { open: false, -} +}; diff --git a/src/plugins/miradorAnnotationPlugin.js b/src/plugins/miradorAnnotationPlugin.js index 034991f40fc563719d552b65e7e45e805767fa7b..613d74d136b9264f99d148dafa45ea2990c84d39 100644 --- a/src/plugins/miradorAnnotationPlugin.js +++ b/src/plugins/miradorAnnotationPlugin.js @@ -6,7 +6,6 @@ import AddBoxIcon from '@material-ui/icons/AddBox'; import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton'; import { SingleCanvasDialog } from '../SingleCanvasDialog'; - /** */ class MiradorAnnotation extends Component { /** */ @@ -30,15 +29,23 @@ class MiradorAnnotation extends Component { }); } + /** */ toggleSingleCanvasDialogOpen() { + const { singleCanvasDialogOpen } = this.state; this.setState({ - singleCanvasDialogOpen: !this.state.singleCanvasDialogOpen, + singleCanvasDialogOpen: !singleCanvasDialogOpen, }); } /** */ render() { - const { TargetComponent, targetProps } = this.props; + const { + switchToSingleCanvasView, + TargetComponent, + targetProps, + windowViewType, + } = this.props; + const { singleCanvasDialogOpen } = this.state; return ( <div> <TargetComponent @@ -46,18 +53,18 @@ class MiradorAnnotation extends Component { /> <MiradorMenuButton aria-label="Create new annotation" - onClick={this.props.windowViewType === 'single' ? this.openCreateAnnotationCompanionWindow : this.toggleSingleCanvasDialogOpen} + onClick={windowViewType === 'single' ? this.openCreateAnnotationCompanionWindow : this.toggleSingleCanvasDialogOpen} size="small" > <AddBoxIcon /> </MiradorMenuButton> { - this.state.singleCanvasDialogOpen && ( + singleCanvasDialogOpen && ( <SingleCanvasDialog - open={this.state.singleCanvasDialogOpen} + open={singleCanvasDialogOpen} handleClose={this.toggleSingleCanvasDialogOpen} openCreateAnnotationCompanionWindow={this.openCreateAnnotationCompanionWindow} - switchToSingleCanvasView={this.props.switchToSingleCanvasView} + switchToSingleCanvasView={switchToSingleCanvasView} /> ) } @@ -68,11 +75,13 @@ class MiradorAnnotation extends Component { MiradorAnnotation.propTypes = { addCompanionWindow: PropTypes.func.isRequired, + switchToSingleCanvasView: PropTypes.func.isRequired, TargetComponent: PropTypes.oneOfType([ PropTypes.func, PropTypes.node, ]).isRequired, targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types + windowViewType: PropTypes.string.isRequired, }; /** */ @@ -81,10 +90,11 @@ const mapDispatchToProps = (dispatch, props) => ({ actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }), ), switchToSingleCanvasView: () => dispatch( - actions.setWindowViewType(props.targetProps.windowId, 'single') - ) + actions.setWindowViewType(props.targetProps.windowId, 'single'), + ), }); +/** */ const mapStateToProps = (state, props) => ({ windowViewType: getWindowViewType(state, { windowId: props.targetProps.windowId }), });