From 5eb86663bc6aaa57055d113e4b25eca14a6dd2a5 Mon Sep 17 00:00:00 2001 From: jquense Date: Sun, 28 Jun 2015 18:05:42 -0400 Subject: [PATCH] [added] Overlay component Allows for custom overlays to be created seperate from the OverlayTrigger --- docs/examples/Overlay.js | 43 +++++++++++++++++++++++++++ src/ModalBody.js | 26 +++++++++++++++++ src/ModalFooter.js | 27 +++++++++++++++++ src/ModalHeader.js | 55 +++++++++++++++++++++++++++++++++++ src/ModalTitle.js | 26 +++++++++++++++++ src/Overlay.js | 63 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 240 insertions(+) create mode 100644 docs/examples/Overlay.js create mode 100644 src/ModalBody.js create mode 100644 src/ModalFooter.js create mode 100644 src/ModalHeader.js create mode 100644 src/ModalTitle.js create mode 100644 src/Overlay.js diff --git a/docs/examples/Overlay.js b/docs/examples/Overlay.js new file mode 100644 index 0000000000..73586f5b45 --- /dev/null +++ b/docs/examples/Overlay.js @@ -0,0 +1,43 @@ + +const Example = React.createClass({ + getInitialState(){ + return { show: true }; + }, + + toggle(){ + this.setState({ show: !this.state.show }); + }, + + render(){ + const style = { + position: 'absolute', + backgroundColor: '#EEE', + border: '1px solid #CCC', + borderRadius: 3, + marginLeft: 5, + padding: 10 + }; + + return ( +
+ + + this.setState({ show: false })} + placement="right" + container={this} + target={ props => React.findDOMNode(this.refs.target)} + > +
+ Holy guacamole! Check this info. +
+ +
+ ); + } +}); + +React.render(, mountNode); diff --git a/src/ModalBody.js b/src/ModalBody.js new file mode 100644 index 0000000000..40c667c001 --- /dev/null +++ b/src/ModalBody.js @@ -0,0 +1,26 @@ +import React from 'react'; +import classnames from 'classnames'; + +class ModalBody extends React.Component { + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +ModalBody.propTypes = { + /** + * A css class applied to the Component + */ + modalClassName: React.PropTypes.string +}; + +ModalBody.defaultProps = { + modalClassName: 'modal-body' +}; + + +export default ModalBody; diff --git a/src/ModalFooter.js b/src/ModalFooter.js new file mode 100644 index 0000000000..39f8759fe5 --- /dev/null +++ b/src/ModalFooter.js @@ -0,0 +1,27 @@ +import React from 'react'; +import classnames from 'classnames'; + + +class ModalFooter extends React.Component { + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +ModalFooter.propTypes = { + /** + * A css class applied to the Component + */ + modalClassName: React.PropTypes.string +}; + +ModalFooter.defaultProps = { + modalClassName: 'modal-footer' +}; + +export default ModalFooter; diff --git a/src/ModalHeader.js b/src/ModalHeader.js new file mode 100644 index 0000000000..25eeaac440 --- /dev/null +++ b/src/ModalHeader.js @@ -0,0 +1,55 @@ +import React from 'react'; +import classnames from 'classnames'; + +class ModalHeader extends React.Component { + + render() { + return ( +
+ { this.props.closeButton && + + } + { this.props.children } +
+ ); + } +} + +//used in liue of parent contexts right now to auto wire the close button +ModalHeader.__isModalHeader = true; + +ModalHeader.propTypes = { + /** + * A css class applied to the Component + */ + modalClassName: React.PropTypes.string, + /** + * Specify whether the Component should contain a close button + */ + closeButton: React.PropTypes.bool, + /** + * A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically + * be propagated up to the parent Modal `onHide`. + */ + onHide: React.PropTypes.func +}; + +ModalHeader.defaultProps = { + modalClassName: 'modal-header', + closeButton: false +}; + + +export default ModalHeader; diff --git a/src/ModalTitle.js b/src/ModalTitle.js new file mode 100644 index 0000000000..0c44bbaee5 --- /dev/null +++ b/src/ModalTitle.js @@ -0,0 +1,26 @@ +import React from 'react'; +import classnames from 'classnames'; + +class ModalTitle extends React.Component { + + render() { + return ( +

+ { this.props.children } +

+ ); + } +} + +ModalTitle.propTypes = { + /** + * A css class applied to the Component + */ + modalClassName: React.PropTypes.string +}; + +ModalTitle.defaultProps = { + modalClassName: 'modal-title' +}; + +export default ModalTitle; diff --git a/src/Overlay.js b/src/Overlay.js new file mode 100644 index 0000000000..d425fe91a4 --- /dev/null +++ b/src/Overlay.js @@ -0,0 +1,63 @@ +/*eslint-disable object-shorthand, react/prop-types */ +import React from 'react'; +import Portal from './Portal'; +import Position from './Position'; +import RootCloseWrapper from './RootCloseWrapper'; + +class Overlay extends React.Component { + + constructor(props, context){ + super(props, context); + } + + render(){ + let { + container + , containerPadding + , target + , placement + , rootClose + , ...props } = this.props; + + let positionedChild = ( + + { this.props.children } + + ); + + if (rootClose) { + positionedChild = ( + + { positionedChild } + + ); + } + + return ( + + { props.show && + positionedChild + } + + ); + } +} + +Overlay.propTypes = { + ...Portal.propTypes, + ...Position.propTypes, + /** + * Set the visibility of the Overlay + */ + show: React.PropTypes.bool, + /** + * Specify whether the overlay should trigger onHide when the user clicks outside the overlay + */ + rootClose: React.PropTypes.bool, + /** + * A Callback fired by the Overlay when it wishes to be hidden. + */ + onHide: React.PropTypes.func +}; + +export default Overlay;