Commit 1e6266e9 authored by Yannis Barlas's avatar Yannis Barlas

initial commit

parents
{
"extends": [
"editoria"
]
}
\ No newline at end of file
__snapshots__/
.DS_Store
coverage
node_modules
npm-debug.log
{
"name": "editoria-common",
"version": "0.0.1",
"description": "Common react components for the editoria project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint-config-editoria": "0.0.4"
},
"dependencies": {
"react": "15.5.4",
"react-bootstrap": "0.30.10"
}
}
import React from 'react'
import { Modal } from 'react-bootstrap'
export class AbstractModal extends React.Component {
constructor (props) {
super(props)
this.performAction = this.performAction.bind(this)
}
performAction () {
const { successAction } = this.props
successAction()
}
renderHeader () {
const { title } = this.props
return (
<Modal.Header>
<Modal.Title>
{ title }
</Modal.Title>
</Modal.Header>
)
}
renderBody () {
const { body } = this.props
return (
<Modal.Body>
{ body }
</Modal.Body>
)
}
renderFooter () {
const { cancelText, successAction, successText, toggle } = this.props
const successButton = (
<a
className='modal-button bb-modal-act'
onClick={this.performAction}
>
{ successText }
</a>
)
const success = successAction ? successButton : null
return (
<Modal.Footer>
<div className='modal-buttons-container'>
<a className='modal-button modal-discard bb-modal-cancel'
onClick={toggle}>
{ cancelText || 'Cancel' }
</a>
{ success }
</div>
</Modal.Footer>
)
}
render () {
const { container, size, show, toggle } = this.props
const header = this.renderHeader()
const body = this.renderBody()
const footer = this.renderFooter()
return (
<Modal
bsSize={size || null}
className='modal'
container={container}
onHide={toggle}
show={show}
>
{ header }
{ body }
{ footer }
</Modal>
)
}
}
AbstractModal.propTypes = {
body: React.PropTypes.object,
cancelText: React.PropTypes.string,
container: React.PropTypes.object.isRequired,
show: React.PropTypes.bool.isRequired,
size: React.PropTypes.string,
successAction: React.PropTypes.func,
successText: React.PropTypes.string,
title: React.PropTypes.string.isRequired,
toggle: React.PropTypes.func.isRequired
}
export default AbstractModal
/*
Courtesy of Jure and Blahah
@
https://gitlab.coko.foundation/pubsweet/pubsweet-components/blob/master/PostsManager/TextInput.js
*/
import React from 'react'
const ENTER_KEY_CODE = 13
export default class TextInput extends React.Component {
constructor (props) {
super(props)
this._onChange = this._onChange.bind(this)
this._onKeyDown = this._onKeyDown.bind(this)
this._save = this._save.bind(this)
this.state = {
value: this.props.value || ''
}
}
render () {
const { className, id, placeholder } = this.props
const { value } = this.state
return (
<input
className={className}
id={id}
placeholder={placeholder}
onChange={this._onChange}
onKeyDown={this._onKeyDown}
value={value}
autoFocus
/>
)
}
_save () {
this.props.onSave(this.state.value)
this.setState({
value: ''
})
}
_onChange (event) {
this.setState({
value: event.target.value
})
}
_onKeyDown (event) {
if (event.keyCode === ENTER_KEY_CODE) {
this._save()
}
}
}
TextInput.propTypes = {
className: React.PropTypes.string,
id: React.PropTypes.string,
placeholder: React.PropTypes.string,
onSave: React.PropTypes.func.isRequired,
value: React.PropTypes.string
}
Markdown is supported
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