Skip to content
Snippets Groups Projects
Commit 0f2a9881 authored by Giannis Kopanas's avatar Giannis Kopanas
Browse files

Layout of modal component

parent 3ca3a456
No related branches found
No related tags found
No related merge requests found
{
"name": "component-universal-modal",
"name": "pubsweet-component-universal-modal",
"version": "0.0.1",
"description": "A Univeral Modal for usage across all the pubsweet universe",
"main": "index.js",
......@@ -8,8 +8,7 @@
},
"repository": {
"type": "git",
"url": "https://gitlab.coko.foundation/pubsweet/pubsweet",
"path": "Universal-modal"
"url": "https://gitlab.coko.foundation/pubsweet/pubsweet-components"
},
"author": "Collaborative Knowledge Foundation",
"license": "MIT",
......
import React from 'react'
import Modal from 'react-modal'
Modal.setAppElement('#root')
const UniversalModal = props => {
const {
isOpen,
modalType,
component,
successFn,
cancelFn,
onAfterOpen,
onRequestClose,
closeTimeoutMS,
style,
contentLabel
} = props.modal
return (
<div>
<Modal contentLabel={contentLabel} isOpen={isOpen}>
{component}
</Modal>
</div>
)
}
export default UniversalModal
import { connect } from 'react-redux'
import Modal from './Modal'
import Modal from './components/Modal'
export default connect(state => ({
modal: state.modal,
......
import { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from './actions'
import UniversalModal from './components/Modal'
import FooterModal from './components/FooterModal'
class Wrapper extends Component {
componentDidMount() {
const layout = {
body: this.props.Component,
header: this.props.Header,
footer: this.props.Footer,
}
UniversalModal.addComponent(this.props.name, layout)
}
render() {
return this.props.children
}
}
export default connect(
state => ({
modal: state.modal,
}),
{
toggleModal: dispatch => ({
toggleModal: modalProps => dispatch(actions.toggleModal(modalProps)),
}),
},
)(Wrapper)
import React from 'react'
import { Button, PlainButton } from '@pubsweet/ui'
const FooterModal = props => (
<div>
<Button primary type="submit">
Submit your manuscript
</Button>
<span className={' '}> or </span>
<PlainButton onClick={() => props.toggleModal({ component: 'modalOne' })}>
get back to your submission
</PlainButton>
</div>
)
export default FooterModal
import React from 'react'
import { PlainButton } from '@pubsweet/ui'
const HeaderModal = props => (
<div>
<h4 className="modal-title">{props.title}</h4>
<PlainButton onClick={() => props.toggleModal({ component: 'modalOne' })}>
x
</PlainButton>
</div>
)
export default HeaderModal
import React, { Component } from 'react'
import Modal from 'react-modal'
import config from 'config'
import * as actions from '../actions'
import HeaderModal from './HeaderModal'
import FooterModal from './FooterModal'
let mountedInstance = {}
class UniversalModal extends Component {
constructor() {
super()
const rootElem = config['pubsweet-component-universal-modal']['rootElem']
Modal.setAppElement(rootElem)
}
componentDidMount() {
this.components = []
mountedInstance = this
}
modalActions() {
return args => this.props.dispatch(actions.toggleModal(args))
}
render() {
const modalInstances = this.props.modal
let BodyTemplate = null
let HeaderTemplate = HeaderModal
let FooterTemplate = FooterModal
return (
<div>
{modalInstances.map((instance, index) => {
const RenderModalTemplate = mountedInstance.components.find(
elem => elem.name === instance.component,
)
if (RenderModalTemplate) {
BodyTemplate = RenderModalTemplate.layout.body || null
HeaderTemplate = RenderModalTemplate.layout.header || HeaderModal
FooterTemplate = RenderModalTemplate.layout.footer || FooterModal
}
return BodyTemplate ? (
<Modal
contentLabel={instance.contentLabel}
isOpen={instance.isOpen}
key={`'modal-'index`}
>
<HeaderTemplate
title={instance.title}
toggleModal={this.modalActions(this.props)}
/>
<BodyTemplate toggleModal={this.modalActions(this.props)} />
<FooterTemplate toggleModal={this.modalActions(this.props)} />
</Modal>
) : null
})}
</div>
)
}
}
UniversalModal.addComponent = (name, ModalComponent) => {
const obj = {
name,
layout: ModalComponent,
}
mountedInstance.components.push(obj)
}
export default UniversalModal
import { TOGGLE_MODAL_TRIGGER } from './types'
export default function modal(
state = {
isOpen: false,
modalType: 'confirm',
component: null,
successFn: null,
cancelFn: null,
onAfterOpen: () => {},
onRequestClose: () => {},
closeTimeoutMS: 150,
style: {},
contentLabel: 'Modal',
},
action,
) {
export default function modal(state = [], action) {
if (action.type === TOGGLE_MODAL_TRIGGER) {
const modal = {
isOpen: action.isOpen,
modalType: action.modalType,
component: action.component,
successFn: action.successFn,
cancelFn: action.cancelFn,
onAfterOpen: action.onAfterOpen,
onRequestClose: action.onRequestClose,
closeTimeoutMS: action.closeTimeoutMS,
style: action.style,
contentLabel: action.contentLabel,
let find = false
const modalState = state.map(item => {
if (item.component === action.component) {
find = true
item.isOpen = !item.isOpen
return { ...item, ...action.payload }
}
return item
})
if (!find) {
const modalProps = {
isOpen: true,
title: action.title,
component: action.component,
onAfterOpen: action.onAfterOpen,
onRequestClose: action.onRequestClose,
closeTimeoutMS: action.closeTimeoutMS,
style: action.style,
contentLabel: action.contentLabel,
}
modalState.push(modalProps)
}
return Object.assign({}, state, modal)
return modalState
}
return state
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment