Spaces:
Running
Running
import bindAll from 'lodash.bindall'; | |
import PropTypes from 'prop-types'; | |
import React from 'react'; | |
import {connect} from 'react-redux'; | |
import {setRestore} from '../reducers/restore-deletion'; | |
/** | |
* DeletionRestorer component passes a restoreDeletion function to its child. | |
* It expects this child to be a function with the signature | |
* function (restoreDeletion, props) {} | |
* The component can then be used to attach deletion restoring functionality | |
* to any other component: | |
* | |
* <DeletionRestorer>{(restoreDeletion, props) => ( | |
* <MyCoolComponent | |
* onClick={restoreDeletion} | |
* {...props} | |
* /> | |
* )}</DeletionRestorer> | |
*/ | |
class DeletionRestorer extends React.Component { | |
constructor (props) { | |
super(props); | |
bindAll(this, [ | |
'restoreDeletion' | |
]); | |
} | |
restoreDeletion () { | |
if (typeof this.props.restore === 'function') { | |
this.props.restore(); | |
this.props.dispatchUpdateRestore({restoreFun: null, deletedItem: ''}); | |
} | |
} | |
render () { | |
const { | |
/* eslint-disable no-unused-vars */ | |
children, | |
dispatchUpdateRestore, | |
/* eslint-enable no-unused-vars */ | |
...props | |
} = this.props; | |
const restorable = typeof this.props.restore === 'function'; | |
return this.props.children(this.restoreDeletion, { | |
...props, | |
restorable | |
}); | |
} | |
} | |
DeletionRestorer.propTypes = { | |
children: PropTypes.func, | |
deletedItem: PropTypes.string, | |
dispatchUpdateRestore: PropTypes.func, | |
restore: PropTypes.func | |
}; | |
const mapStateToProps = state => ({ | |
deletedItem: state.scratchGui.restoreDeletion.deletedItem, | |
restore: state.scratchGui.restoreDeletion.restoreFun | |
}); | |
const mapDispatchToProps = dispatch => ({ | |
dispatchUpdateRestore: updatedState => { | |
dispatch(setRestore(updatedState)); | |
} | |
}); | |
export default connect( | |
mapStateToProps, | |
mapDispatchToProps | |
)(DeletionRestorer); | |