Skip to content

Commit

Permalink
added react-overlays for base overlay components
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Aug 17, 2015
1 parent 3eb5d66 commit eeb0aea
Show file tree
Hide file tree
Showing 15 changed files with 35 additions and 1,370 deletions.
19 changes: 9 additions & 10 deletions docs/src/PropTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,22 @@ import Table from '../../src/Table';

let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');

function getPropsData(componentData, metadata){

function getPropsData(component, metadata){
let componentData = metadata[component] || {};
let props = componentData.props || {};

if (componentData.composes) {
componentData.composes.forEach( other => {
props = merge({}, getPropsData(metadata[other] || {}, metadata), props);

componentData.composes.forEach(other => {
if (other !== component) {
props = merge({}, getPropsData(other, metadata), props);
}
});
}

if (componentData.mixins) {
componentData.mixins.forEach( other => {
if ( componentData.composes.indexOf(other) === -1) {
props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
if (other !== component && componentData.composes.indexOf(other) === -1) {
props = merge({}, getPropsData(other, metadata), props);
}
});
}
Expand All @@ -36,9 +37,7 @@ const PropTable = React.createClass({
},

componentWillMount(){
let componentData = this.context.metadata[this.props.component] || {};

this.propsData = getPropsData(componentData, this.context.metadata);
this.propsData = getPropsData(this.props.component, this.context.metadata);
},

render(){
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@
},
"dependencies": {
"babel-runtime": "^5.8.19",
"classnames": "^2.1.3",
"lodash": "^3.10.0",
"classnames": "^2.1.3"
"react-overlays": "^0.4.2"
}
}
6 changes: 3 additions & 3 deletions src/Collapse.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Transition from './Transition';
import Transition from 'react-overlays/lib/Transition';
import domUtils from './utils/domUtils';
import createChainedFunction from './utils/createChainedFunction';

Expand Down Expand Up @@ -138,7 +138,7 @@ Collapse.propTypes = {
* finishing callbacks are fired even if the original browser transition end
* events are canceled
*/
duration: React.PropTypes.number,
timeout: React.PropTypes.number,

/**
* Callback fired before the component expands
Expand Down Expand Up @@ -194,7 +194,7 @@ Collapse.propTypes = {

Collapse.defaultProps = {
in: false,
duration: 300,
timeout: 300,
unmountOnExit: false,
transitionAppear: false,

Expand Down
6 changes: 3 additions & 3 deletions src/Fade.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Transition from './Transition';
import Transition from 'react-overlays/lib/Transition';

class Fade extends React.Component {
render() {
Expand Down Expand Up @@ -41,7 +41,7 @@ Fade.propTypes = {
* callbacks are fired even if the original browser transition end events are
* canceled
*/
duration: React.PropTypes.number,
timeout: React.PropTypes.number,

/**
* Callback fired before the component fades in
Expand Down Expand Up @@ -71,7 +71,7 @@ Fade.propTypes = {

Fade.defaultProps = {
in: false,
duration: 300,
timeout: 300,
unmountOnExit: false,
transitionAppear: false
};
Expand Down
2 changes: 1 addition & 1 deletion src/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import EventListener from './utils/EventListener';
import createChainedFunction from './utils/createChainedFunction';
import CustomPropTypes from './utils/CustomPropTypes';

import Portal from './Portal';
import Portal from 'react-overlays/lib/Portal';
import Fade from './Fade';
import ModalDialog from './ModalDialog';
import Body from './ModalBody';
Expand Down
98 changes: 13 additions & 85 deletions src/Overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,115 +2,43 @@
/* These properties are validated in 'Portal' and 'Position' components */

import React, { cloneElement } from 'react';
import Portal from './Portal';
import Position from './Position';
import RootCloseWrapper from './RootCloseWrapper';
import BaseOverlay from 'react-overlays/lib/Overlay';
import CustomPropTypes from './utils/CustomPropTypes';
import Fade from './Fade';
import classNames from 'classnames';

class Overlay extends React.Component {
constructor(props, context) {
super(props, context);

this.state = {exited: !props.show};
this.onHiddenListener = this.handleHidden.bind(this);
}

componentWillReceiveProps(nextProps) {
if (nextProps.show) {
this.setState({exited: false});
} else if (!nextProps.animation) {
// Otherwise let handleHidden take care of marking exited.
this.setState({exited: true});
}
}

render() {
let {
container
, containerPadding
, target
, placement
, rootClose
, children
, animation: Transition
children: child
, animation: transition
, ...props } = this.props;

if (Transition === true) {
Transition = Fade;
if (transition === true) {
transition = Fade;
}

// Don't un-render the overlay while it's transitioning out.
const mountOverlay = props.show || (Transition && !this.state.exited);
if (!mountOverlay) {
// Don't bother showing anything if we don't have to.
return null;
}

let child = children;

// Position is be inner-most because it adds inline styles into the child,
// which the other wrappers don't forward correctly.
child = (
<Position {...{container, containerPadding, target, placement}}>
{child}
</Position>
);

if (Transition) {
let { onExit, onExiting, onEnter, onEntering, onEntered } = props;

// This animates the child node by injecting props, so it must precede
// anything that adds a wrapping div.
child = (
<Transition
in={props.show}
transitionAppear
onExit={onExit}
onExiting={onExiting}
onExited={this.onHiddenListener}
onEnter={onEnter}
onEntering={onEntering}
onEntered={onEntered}
>
{child}
</Transition>
);
} else {
if (!transition) {
child = cloneElement(child, {
className: classNames('in', child.props.className)
});
}

// This goes after everything else because it adds a wrapping div.
if (rootClose) {
child = (
<RootCloseWrapper onRootClose={props.onHide}>
{child}
</RootCloseWrapper>
);
}

return (
<Portal container={container}>
<BaseOverlay
{...props}
transition={transition}
>
{child}
</Portal>
</BaseOverlay>
);
}

handleHidden(...args) {
this.setState({exited: true});

if (this.props.onExited) {
this.props.onExited(...args);
}
}
}

Overlay.propTypes = {
...Portal.propTypes,
...Position.propTypes,
...BaseOverlay.propTypes,

/**
* Set the visibility of the Overlay
*/
Expand Down
92 changes: 1 addition & 91 deletions src/Portal.js
Original file line number Diff line number Diff line change
@@ -1,93 +1,3 @@
import React from 'react';
import CustomPropTypes from './utils/CustomPropTypes';
import domUtils from './utils/domUtils';

let Portal = React.createClass({

displayName: 'Portal',

propTypes: {
/**
* The DOM Node that the Component will render it's children into
*/
container: CustomPropTypes.mountable
},

componentDidMount() {
this._renderOverlay();
},

componentDidUpdate() {
this._renderOverlay();
},

componentWillUnmount() {
this._unrenderOverlay();
this._unmountOverlayTarget();
},

_mountOverlayTarget() {
if (!this._overlayTarget) {
this._overlayTarget = document.createElement('div');
this.getContainerDOMNode()
.appendChild(this._overlayTarget);
}
},

_unmountOverlayTarget() {
if (this._overlayTarget) {
this.getContainerDOMNode()
.removeChild(this._overlayTarget);
this._overlayTarget = null;
}
},

_renderOverlay() {
let overlay = !this.props.children
? null
: React.Children.only(this.props.children);

// Save reference for future access.
if (overlay !== null) {
this._mountOverlayTarget();
this._overlayInstance = React.render(overlay, this._overlayTarget);
} else {
// Unrender if the component is null for transitions to null
this._unrenderOverlay();
this._unmountOverlayTarget();
}
},

_unrenderOverlay() {
if (this._overlayTarget) {
React.unmountComponentAtNode(this._overlayTarget);
this._overlayInstance = null;
}
},

render() {
return null;
},

getOverlayDOMNode() {
if (!this.isMounted()) {
throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
}

if (this._overlayInstance) {
if (this._overlayInstance.getWrappedDOMNode) {
return this._overlayInstance.getWrappedDOMNode();
} else {
return React.findDOMNode(this._overlayInstance);
}
}

return null;
},

getContainerDOMNode() {
return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
}
});
import Portal from 'react-overlays/lib/Portal';

export default Portal;
Loading

0 comments on commit eeb0aea

Please sign in to comment.