bloom-layout
Version:
layout components used in bloom packages
311 lines (255 loc) • 10.2 kB
JavaScript
;
exports.__esModule = true;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _propTypes = require('prop-types');
var PropTypes = _interopRequireWildcard(_propTypes);
var _addClass = require('dom-helpers/class/addClass');
var _addClass2 = _interopRequireDefault(_addClass);
var _removeClass = require('dom-helpers/class/removeClass');
var _removeClass2 = _interopRequireDefault(_removeClass);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Transition = require('./Transition');
var _Transition2 = _interopRequireDefault(_Transition);
var _PropTypes = require('./utils/PropTypes');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var addClass = function addClass(node, classes) {
return classes && classes.split(' ').forEach(function (c) {
return (0, _addClass2.default)(node, c);
});
};
var removeClass = function removeClass(node, classes) {
return classes && classes.split(' ').forEach(function (c) {
return (0, _removeClass2.default)(node, c);
});
};
var propTypes = _extends({}, _Transition2.default.propTypes, {
/**
* The animation classNames applied to the component as it enters or exits.
* A single name can be provided and it will be suffixed for each stage: e.g.
*
* `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
* `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
* Each individual classNames can also be specified independently like:
*
* ```js
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* exit: 'my-exit',
* exitActive: 'my-active-exit',
* }}
* ```
*
* @type {string | {
* appear?: string,
* appearActive?: string,
* enter?: string,
* enterActive?: string,
* exit?: string,
* exitActive?: string,
* }}
*/
classNames: _PropTypes.classNamesShape,
/**
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
* applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEnter: PropTypes.func,
/**
* A `<Transition>` callback fired immediately after the 'enter-active' or
* 'appear-active' class is applied.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: PropTypes.func,
/**
* A `<Transition>` callback fired immediately after the 'enter' or
* 'appear' classes are **removed** from the DOM node.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntered: PropTypes.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' class is
* applied.
*
* @type Function(node: HtmlElement)
*/
onExit: PropTypes.func,
/**
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
*
* @type Function(node: HtmlElement
*/
onExiting: PropTypes.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' classes
* are **removed** from the DOM node.
*
* @type Function(node: HtmlElement)
*/
onExited: PropTypes.func
});
/**
* A `Transition` component using CSS transitions and animations.
* It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
*
* `CSSTransition` applies a pair of class names during the `appear`, `enter`,
* and `exit` stages of the transition. The first class is applied and then a
* second "active" class in order to activate the css animation.
*
* When the `in` prop is toggled to `true` the Component will get
* the `example-enter` CSS class and the `example-enter-active` CSS class
* added in the next tick. This is a convention based on the `classNames` prop.
*
* ```js
* import CSSTransition from 'react-transition-group/CSSTransition';
*
* const Fade = ({ children, ...props }) => (
* <CSSTransition
* {...props}
* timeout={500}
* classNames="fade"
* >
* {children}
* </CSSTransition>
* );
*
* class FadeInAndOut extends React.Component {
* constructor(...args) {
* super(...args);
* this.state= { show: false }
*
* setInterval(() => {
* this.setState({ show: !this.state.show })
* }, 5000)
* }
* render() {
* return (
* <Fade in={this.state.show}>
* <div>Hello world</div>
* </Fade>
* )
* }
* }
* ```
*
* And the coorresponding CSS for the `<Fade>` component:
*
* ```css
* .fade-enter {
* opacity: 0.01;
* }
*
* .fade-enter.fade-enter-active {
* opacity: 1;
* transition: opacity 500ms ease-in;
* }
*
* .fade-exit {
* opacity: 1;
* }
*
* .fade-exit.fade-exit-active {
* opacity: 0.01;
* transition: opacity 300ms ease-in;
* }
* ```
*/
var CSSTransition = function (_React$Component) {
_inherits(CSSTransition, _React$Component);
function CSSTransition() {
var _temp, _this, _ret;
_classCallCheck(this, CSSTransition);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onEnter = function (node, appearing) {
var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),
className = _this$getClassNames.className;
_this.removeClasses(node, 'exit');
addClass(node, className);
if (_this.props.onEnter) {
_this.props.onEnter(node);
}
}, _this.onEntering = function (node, appearing) {
var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),
activeClassName = _this$getClassNames2.activeClassName;
_this.reflowAndAddClass(node, activeClassName);
if (_this.props.onEntering) {
_this.props.onEntering(node);
}
}, _this.onEntered = function (node, appearing) {
_this.removeClasses(node, appearing ? 'appear' : 'enter');
if (_this.props.onEntered) {
_this.props.onEntered(node);
}
}, _this.onExit = function (node) {
var _this$getClassNames3 = _this.getClassNames('exit'),
className = _this$getClassNames3.className;
_this.removeClasses(node, 'appear');
_this.removeClasses(node, 'enter');
addClass(node, className);
if (_this.props.onExit) {
_this.props.onExit(node);
}
}, _this.onExiting = function (node) {
var _this$getClassNames4 = _this.getClassNames('exit'),
activeClassName = _this$getClassNames4.activeClassName;
_this.reflowAndAddClass(node, activeClassName);
if (_this.props.onExiting) {
_this.props.onExiting(node);
}
}, _this.onExited = function (node) {
_this.removeClasses(node, 'exit');
if (_this.props.onExited) {
_this.props.onExited(node);
}
}, _this.getClassNames = function (type) {
var classNames = _this.props.classNames;
var className = typeof classNames !== 'string' ? classNames[type] : classNames + '-' + type;
var activeClassName = typeof classNames !== 'string' ? classNames[type + 'Active'] : className + '-active';
return { className: className, activeClassName: activeClassName };
}, _temp), _possibleConstructorReturn(_this, _ret);
}
CSSTransition.prototype.removeClasses = function removeClasses(node, type) {
var _getClassNames = this.getClassNames(type),
className = _getClassNames.className,
activeClassName = _getClassNames.activeClassName;
className && removeClass(node, className);
activeClassName && removeClass(node, activeClassName);
};
CSSTransition.prototype.reflowAndAddClass = function reflowAndAddClass(node, className) {
// This is for to force a repaint,
// which is necessary in order to transition styles when adding a class name.
/* eslint-disable no-unused-expressions */
node.scrollTop;
/* eslint-enable no-unused-expressions */
addClass(node, className);
};
CSSTransition.prototype.render = function render() {
var props = _extends({}, this.props);
delete props.classNames;
return _react2.default.createElement(_Transition2.default, _extends({}, props, {
onEnter: this.onEnter,
onEntered: this.onEntered,
onEntering: this.onEntering,
onExit: this.onExit,
onExiting: this.onExiting,
onExited: this.onExited
}));
};
return CSSTransition;
}(_react2.default.Component);
CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
exports.default = CSSTransition;
module.exports = exports['default'];