Skip to content

Commit eeb0aea

Browse files
jquensejquense
committed
added react-overlays for base overlay components
1 parent 3eb5d66 commit eeb0aea

15 files changed

Lines changed: 35 additions & 1370 deletions

‎docs/src/PropTable.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,22 @@ import Table from '../../src/Table';
77

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

10-
function getPropsData(componentData, metadata){
11-
10+
function getPropsData(component, metadata){
11+
let componentData = metadata[component] || {};
1212
let props = componentData.props || {};
1313

1414
if (componentData.composes) {
15-
componentData.composes.forEach( other => {
16-
props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
17-
15+
componentData.composes.forEach(other => {
16+
if (other !== component) {
17+
props = merge({}, getPropsData(other, metadata), props);
18+
}
1819
});
1920
}
2021

2122
if (componentData.mixins) {
2223
componentData.mixins.forEach( other => {
23-
if ( componentData.composes.indexOf(other) === -1) {
24-
props = merge({}, getPropsData(metadata[other] || {}, metadata), props);
24+
if (other !== component && componentData.composes.indexOf(other) === -1) {
25+
props = merge({}, getPropsData(other, metadata), props);
2526
}
2627
});
2728
}
@@ -36,9 +37,7 @@ const PropTable = React.createClass({
3637
},
3738

3839
componentWillMount(){
39-
let componentData = this.context.metadata[this.props.component] || {};
40-
41-
this.propsData = getPropsData(componentData, this.context.metadata);
40+
this.propsData = getPropsData(this.props.component, this.context.metadata);
4241
},
4342

4443
render(){

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@
108108
},
109109
"dependencies": {
110110
"babel-runtime": "^5.8.19",
111+
"classnames": "^2.1.3",
111112
"lodash": "^3.10.0",
112-
"classnames": "^2.1.3"
113+
"react-overlays": "^0.4.2"
113114
}
114115
}

‎src/Collapse.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Transition from './Transition';
2+
import Transition from 'react-overlays/lib/Transition';
33
import domUtils from './utils/domUtils';
44
import createChainedFunction from './utils/createChainedFunction';
55

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

143143
/**
144144
* Callback fired before the component expands
@@ -194,7 +194,7 @@ Collapse.propTypes = {
194194

195195
Collapse.defaultProps = {
196196
in: false,
197-
duration: 300,
197+
timeout: 300,
198198
unmountOnExit: false,
199199
transitionAppear: false,
200200

‎src/Fade.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Transition from './Transition';
2+
import Transition from 'react-overlays/lib/Transition';
33

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

4646
/**
4747
* Callback fired before the component fades in
@@ -71,7 +71,7 @@ Fade.propTypes = {
7171

7272
Fade.defaultProps = {
7373
in: false,
74-
duration: 300,
74+
timeout: 300,
7575
unmountOnExit: false,
7676
transitionAppear: false
7777
};

‎src/Modal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import EventListener from './utils/EventListener';
66
import createChainedFunction from './utils/createChainedFunction';
77
import CustomPropTypes from './utils/CustomPropTypes';
88

9-
import Portal from './Portal';
9+
import Portal from 'react-overlays/lib/Portal';
1010
import Fade from './Fade';
1111
import ModalDialog from './ModalDialog';
1212
import Body from './ModalBody';

‎src/Overlay.js‎

Lines changed: 13 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,115 +2,43 @@
22
/* These properties are validated in 'Portal' and 'Position' components */
33

44
import React, { cloneElement } from 'react';
5-
import Portal from './Portal';
6-
import Position from './Position';
7-
import RootCloseWrapper from './RootCloseWrapper';
5+
import BaseOverlay from 'react-overlays/lib/Overlay';
86
import CustomPropTypes from './utils/CustomPropTypes';
97
import Fade from './Fade';
108
import classNames from 'classnames';
119

1210
class Overlay extends React.Component {
13-
constructor(props, context) {
14-
super(props, context);
15-
16-
this.state = {exited: !props.show};
17-
this.onHiddenListener = this.handleHidden.bind(this);
18-
}
19-
20-
componentWillReceiveProps(nextProps) {
21-
if (nextProps.show) {
22-
this.setState({exited: false});
23-
} else if (!nextProps.animation) {
24-
// Otherwise let handleHidden take care of marking exited.
25-
this.setState({exited: true});
26-
}
27-
}
2811

2912
render() {
3013
let {
31-
container
32-
, containerPadding
33-
, target
34-
, placement
35-
, rootClose
36-
, children
37-
, animation: Transition
14+
children: child
15+
, animation: transition
3816
, ...props } = this.props;
3917

40-
if (Transition === true) {
41-
Transition = Fade;
18+
if (transition === true) {
19+
transition = Fade;
4220
}
4321

44-
// Don't un-render the overlay while it's transitioning out.
45-
const mountOverlay = props.show || (Transition && !this.state.exited);
46-
if (!mountOverlay) {
47-
// Don't bother showing anything if we don't have to.
48-
return null;
49-
}
50-
51-
let child = children;
52-
53-
// Position is be inner-most because it adds inline styles into the child,
54-
// which the other wrappers don't forward correctly.
55-
child = (
56-
<Position {...{container, containerPadding, target, placement}}>
57-
{child}
58-
</Position>
59-
);
60-
61-
if (Transition) {
62-
let { onExit, onExiting, onEnter, onEntering, onEntered } = props;
63-
64-
// This animates the child node by injecting props, so it must precede
65-
// anything that adds a wrapping div.
66-
child = (
67-
<Transition
68-
in={props.show}
69-
transitionAppear
70-
onExit={onExit}
71-
onExiting={onExiting}
72-
onExited={this.onHiddenListener}
73-
onEnter={onEnter}
74-
onEntering={onEntering}
75-
onEntered={onEntered}
76-
>
77-
{child}
78-
</Transition>
79-
);
80-
} else {
22+
if (!transition) {
8123
child = cloneElement(child, {
8224
className: classNames('in', child.props.className)
8325
});
8426
}
8527

86-
// This goes after everything else because it adds a wrapping div.
87-
if (rootClose) {
88-
child = (
89-
<RootCloseWrapper onRootClose={props.onHide}>
90-
{child}
91-
</RootCloseWrapper>
92-
);
93-
}
94-
9528
return (
96-
<Portal container={container}>
29+
<BaseOverlay
30+
{...props}
31+
transition={transition}
32+
>
9733
{child}
98-
</Portal>
34+
</BaseOverlay>
9935
);
10036
}
101-
102-
handleHidden(...args) {
103-
this.setState({exited: true});
104-
105-
if (this.props.onExited) {
106-
this.props.onExited(...args);
107-
}
108-
}
10937
}
11038

11139
Overlay.propTypes = {
112-
...Portal.propTypes,
113-
...Position.propTypes,
40+
...BaseOverlay.propTypes,
41+
11442
/**
11543
* Set the visibility of the Overlay
11644
*/

‎src/Portal.js‎

Lines changed: 1 addition & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,3 @@
1-
import React from 'react';
2-
import CustomPropTypes from './utils/CustomPropTypes';
3-
import domUtils from './utils/domUtils';
4-
5-
let Portal = React.createClass({
6-
7-
displayName: 'Portal',
8-
9-
propTypes: {
10-
/**
11-
* The DOM Node that the Component will render it's children into
12-
*/
13-
container: CustomPropTypes.mountable
14-
},
15-
16-
componentDidMount() {
17-
this._renderOverlay();
18-
},
19-
20-
componentDidUpdate() {
21-
this._renderOverlay();
22-
},
23-
24-
componentWillUnmount() {
25-
this._unrenderOverlay();
26-
this._unmountOverlayTarget();
27-
},
28-
29-
_mountOverlayTarget() {
30-
if (!this._overlayTarget) {
31-
this._overlayTarget = document.createElement('div');
32-
this.getContainerDOMNode()
33-
.appendChild(this._overlayTarget);
34-
}
35-
},
36-
37-
_unmountOverlayTarget() {
38-
if (this._overlayTarget) {
39-
this.getContainerDOMNode()
40-
.removeChild(this._overlayTarget);
41-
this._overlayTarget = null;
42-
}
43-
},
44-
45-
_renderOverlay() {
46-
let overlay = !this.props.children
47-
? null
48-
: React.Children.only(this.props.children);
49-
50-
// Save reference for future access.
51-
if (overlay !== null) {
52-
this._mountOverlayTarget();
53-
this._overlayInstance = React.render(overlay, this._overlayTarget);
54-
} else {
55-
// Unrender if the component is null for transitions to null
56-
this._unrenderOverlay();
57-
this._unmountOverlayTarget();
58-
}
59-
},
60-
61-
_unrenderOverlay() {
62-
if (this._overlayTarget) {
63-
React.unmountComponentAtNode(this._overlayTarget);
64-
this._overlayInstance = null;
65-
}
66-
},
67-
68-
render() {
69-
return null;
70-
},
71-
72-
getOverlayDOMNode() {
73-
if (!this.isMounted()) {
74-
throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
75-
}
76-
77-
if (this._overlayInstance) {
78-
if (this._overlayInstance.getWrappedDOMNode) {
79-
return this._overlayInstance.getWrappedDOMNode();
80-
} else {
81-
return React.findDOMNode(this._overlayInstance);
82-
}
83-
}
84-
85-
return null;
86-
},
87-
88-
getContainerDOMNode() {
89-
return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
90-
}
91-
});
1+
import Portal from 'react-overlays/lib/Portal';
922

933
export default Portal;

0 commit comments

Comments
 (0)