Skip to content

Commit

Permalink
[added] Fade Component, replaces FadeMixin
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Jul 14, 2015
1 parent 0503507 commit ec368f0
Show file tree
Hide file tree
Showing 11 changed files with 358 additions and 79 deletions.
29 changes: 29 additions & 0 deletions docs/examples/Fade.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@

class Example extends React.Component {

constructor(...args){
super(...args);
this.state = {};
}

render(){

return (
<div>
<Button onClick={()=> this.setState({ open: !this.state.open })}>
click
</Button>
<Fade in={this.state.open}>
<div>
<Well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</Well>
</div>
</Fade>
</div>
);
}
}

React.render(<Example/>, mountNode);
90 changes: 90 additions & 0 deletions src/Fade.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
'use strict';
import React from 'react';
import Transition from './Transition';

class Fade extends React.Component {

constructor(props, context){
super(props, context);
}

render() {
return (
<Transition
{...this.props}
in={this.props.in}
className='fade'
enteredClassName='in'
enteringClassName='in'
>
{ this.props.children }
</Transition>
);
}
}

Fade.propTypes = {
/**
* Fade the Component in or out.
*/
in: React.PropTypes.bool,

/**
* Provide the durration of the animation in milliseconds, used to ensure that finishing callbacks are fired even if the
* original browser transition end events are canceled.
*/
duration: React.PropTypes.number,

/**
* A Callback fired before the component starts to fade in.
*/
onEnter: React.PropTypes.func,

/**
* A Callback fired immediately after the component has started to faded in.
*/
onEntering: React.PropTypes.func,

/**
* A Callback fired after the component has faded in.
*/
onEntered: React.PropTypes.func,

/**
* A Callback fired before the component starts to fade out.
*/
onExit: React.PropTypes.func,

/**
* A Callback fired immediately after the component has started to faded out.
*/
onExiting: React.PropTypes.func,

/**
* A Callback fired after the component has faded out.
*/
onExited: React.PropTypes.func,


/**
* Specify whether the transitioning component should be unmounted (removed from the DOM) once the exit animation finishes.
*/
unmountOnExit: React.PropTypes.bool,

/**
* Specify whether the component should fade in or out when it mounts.
*/
transitionAppear: React.PropTypes.bool

};

Fade.defaultProps = {
in: false,
duration: 300,
dimension: 'height',
transitionAppear: false,
unmountOnExit: false
};

export default Fade;

67 changes: 51 additions & 16 deletions src/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import React, { cloneElement } from 'react';
import classNames from 'classnames';
import createChainedFunction from './utils/createChainedFunction';
import BootstrapMixin from './BootstrapMixin';
import FadeMixin from './FadeMixin';
import domUtils from './utils/domUtils';
import EventListener from './utils/EventListener';

import Portal from './Portal';
import Fade from './Fade';

import Body from './ModalBody';
import Header from './ModalHeader';
Expand Down Expand Up @@ -90,12 +90,17 @@ function getScrollbarSize(){
document.body.removeChild(scrollDiv);

scrollDiv = null;
return scrollbarSize;
}


const ModalMarkup = React.createClass({

<<<<<<< HEAD
mixins: [ BootstrapMixin, FadeMixin ],
=======
mixins: [ BootstrapMixin ],
>>>>>>> [added] Fade Component, replaces FadeMixin

propTypes: {

Expand Down Expand Up @@ -166,8 +171,7 @@ const ModalMarkup = React.createClass({

let classes = {
modal: true,
fade: this.props.animation,
'in': !this.props.animation
in: this.props.show && !this.props.animation
};

let modal = (
Expand Down Expand Up @@ -206,18 +210,22 @@ const ModalMarkup = React.createClass({
},

renderBackdrop(modal) {
let classes = {
'modal-backdrop': true,
fade: this.props.animation,
'in': !this.props.animation
};

let onClick = this.props.backdrop === true ?
this.handleBackdropClick : null;
let { animation } = this.props;
let duration = Modal.BACKDROP_TRANSITION_DURATION; //eslint-disable-line no-use-before-define

let backdrop = (
<div ref="backdrop"
className={classNames('modal-backdrop', { in: this.props.show && !animation })}
onClick={this.handleBackdropClick}
/>
);

return (
<div>
<div className={classNames(classes)} ref="backdrop" onClick={onClick} />
{ animation
? <Fade transitionAppear in={this.props.show} duration={duration}>{backdrop}</Fade>
: backdrop
}
{modal}
</div>
);
Expand Down Expand Up @@ -381,16 +389,40 @@ const Modal = React.createClass({
...ModalMarkup.propTypes
},

getDefaultProps(){
return {
show: false,
animation: true
};
},

render() {
let { show, ...props } = this.props;
let { children, ...props } = this.props;

let show = !!props.show;

let modal = (
<ModalMarkup {...props} ref='modal'>{this.props.children}</ModalMarkup>
<ModalMarkup {...props} ref='modal'>
{ children }
</ModalMarkup>
);

return (
<Portal container={props.container} >
{ show && modal }
<Portal container={props.container}>
{ props.animation
? (
<Fade
in={show}
transitionAppear={show}
duration={Modal.TRANSITION_DURATION}
unmountOnExit
>
{ modal }
</Fade>
)
: show && modal
}

</Portal>
);
}
Expand All @@ -401,4 +433,7 @@ Modal.Header = Header;
Modal.Title = Title;
Modal.Footer = Footer;

Modal.TRANSITION_DURATION = 300;
Modal.BACKDROP_TRANSITION_DURATION = 150;

export default Modal;
87 changes: 71 additions & 16 deletions src/Overlay.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
/*eslint-disable object-shorthand, react/prop-types */
import React from 'react';
import React, { cloneElement } from 'react';
import Portal from './Portal';
import Position from './Position';
import RootCloseWrapper from './RootCloseWrapper';
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: false };
this.onHiddenListener = this.handleHidden.bind(this);
}

componentWillReceiveProps(nextProps) {
if (this.props.show){
this.setState({ exited: false });
}
}

render(){
Expand All @@ -17,30 +30,60 @@ class Overlay extends React.Component {
, target
, placement
, rootClose
, children
, animation: Transition
, ...props } = this.props;

let positionedChild = (
<Position {...{ container, containerPadding, target, placement }}>
{ this.props.children }
</Position>
);
let child = null;

if (rootClose) {
positionedChild = (
<RootCloseWrapper onRootClose={this.props.onHide}>
{ positionedChild }
</RootCloseWrapper>
if ( Transition === true ){
Transition = Fade;
}

if (props.show || (Transition && !this.state.exited)) {

child = children;

// Position the child before the animation to avoid `null` DOM nodes
child = (
<Position {...{ container, containerPadding, target, placement }}>
{ child }
</Position>
);

child = Transition
? (
<Transition
unmountOnExit
in={props.show}
transitionAppear={props.show}
onHidden={this.onHiddenListener}
>
{ child }
</Transition>
)
: cloneElement(child, { className: classNames('in', child.className) });


if (rootClose) {
child = (
<RootCloseWrapper onRootClose={props.onHide}>
{ child }
</RootCloseWrapper>
);
}
}

return (
<Portal container={container} rootClose={rootClose} onRootClose={this.props.onHide}>
{ props.show &&
positionedChild
}
<Portal container={container}>
{ child }
</Portal>
);
}

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

Overlay.propTypes = {
Expand All @@ -57,7 +100,19 @@ Overlay.propTypes = {
/**
* A Callback fired by the Overlay when it wishes to be hidden.
*/
onHide: React.PropTypes.func
onHide: React.PropTypes.func,

/**
* Use animation
*/
animation: React.PropTypes.oneOfType([
React.PropTypes.bool,
CustomPropTypes.elementType
])
};

Overlay.defaultProps = {
animation: Fade
};

export default Overlay;
Loading

0 comments on commit ec368f0

Please sign in to comment.