@flexis/ui
Version:
Styleless React Components
188 lines • 13.9 kB
JavaScript
import { __decorate } from "tslib";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import addClass from 'dom-helpers/addClass';
import removeClass from 'dom-helpers/removeClass';
import Transition from 'react-transition-group/Transition';
import { Bind, omit } from '../../helpers';
const defaultStylableStates = {
active: 'active',
enter: 'enter',
enterActive: 'enterActive',
enterDone: 'enterDone',
exit: 'exit',
exitActive: 'exitActive',
exitDone: 'exitDone'
};
const TransitionStateKeys = Object.keys(defaultStylableStates);
let StylableTransition = /** @class */ (() => {
class StylableTransition extends Component {
constructor(props) {
super(props);
const { states } = props;
const getStateClass = typeof states === 'function'
? (state) => states({ [state]: true })
: (state) => states[state];
const stylableStates = {
active: {},
enter: {},
exit: {}
};
TransitionStateKeys.forEach((key) => {
const [state, phase] = key
.replace(/(Active|Done)/, ' $1')
.toLowerCase()
.split(' ');
if (stylableStates.hasOwnProperty(state)) {
stylableStates[state][phase || 'state'] = getStateClass(key);
}
});
this.stylableStates = stylableStates;
}
render() {
const props = omit(this.props, [
'states'
]);
return (<Transition {...props} onEnter={this.onEnter} onEntered={this.onEntered} onEntering={this.onEntering} onExit={this.onExit} onExiting={this.onExiting} onExited={this.onExited}/>);
}
onEnter(node) {
const stateClass = this.getStateClass('enter');
this.removeStateClass(node, 'exit');
if (stateClass) {
addClass(node, stateClass);
}
const { onEnter } = this.props;
if (typeof onEnter === 'function') {
onEnter(node);
}
}
onEntering(node) {
const enterStateClass = this.getStateClass('enter', 'active');
const activeStateClass = this.getStateClass('active');
if (enterStateClass) {
this.reflowAndAddStateClass(node, enterStateClass);
}
if (activeStateClass) {
if (enterStateClass) {
addClass(node, activeStateClass);
}
else {
this.reflowAndAddStateClass(node, activeStateClass);
}
}
const { onEntering } = this.props;
if (typeof onEntering === 'function') {
onEntering(node);
}
}
onEntered(node) {
const stateClass = this.getStateClass('enter', 'done');
this.removeStateClass(node, 'enter');
if (stateClass) {
addClass(node, stateClass);
}
const { onEntered } = this.props;
if (typeof onEntered === 'function') {
onEntered(node);
}
}
onExit(node) {
const stateClass = this.getStateClass('exit');
this.removeStateClass(node, 'enter');
this.removeStateClass(node, 'active');
if (stateClass) {
addClass(node, stateClass);
}
const { onExit } = this.props;
if (typeof onExit === 'function') {
onExit(node);
}
}
onExiting(node) {
const stateClass = this.getStateClass('exit', 'active');
if (stateClass) {
this.reflowAndAddStateClass(node, stateClass);
}
const { onExiting } = this.props;
if (typeof onExiting === 'function') {
onExiting(node);
}
}
onExited(node) {
const stateClass = this.getStateClass('exit', 'done');
this.removeStateClass(node, 'exit');
if (stateClass) {
addClass(node, stateClass);
}
const { onExited } = this.props;
if (typeof onExited === 'function') {
onExited(node);
}
}
getStateClass(state, phase = 'state') {
const phases = this.stylableStates[state];
if (!phases) {
return false;
}
return phases[phase] || false;
}
removeStateClass(node, state) {
const phases = this.stylableStates[state];
if (!phases) {
return;
}
const { state: stateClass, active: activePhaseClass, done: donePhaseClass } = phases;
if (stateClass) {
removeClass(node, stateClass);
}
if (activePhaseClass) {
removeClass(node, activePhaseClass);
}
if (donePhaseClass) {
removeClass(node, donePhaseClass);
}
}
reflowAndAddStateClass(node, stateClass) {
if (node) {
// This is for to force a repaint,
// which is necessary in order to transition styles when adding a class name.
node.scrollTop; // tslint:disable-line
addClass(node, stateClass);
}
}
}
StylableTransition.propTypes = {
...Transition.propTypes,
states: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object
]).isRequired,
onEnter: PropTypes.func,
onEntering: PropTypes.func,
onEntered: PropTypes.func,
onExit: PropTypes.func,
onExiting: PropTypes.func,
onExited: PropTypes.func
};
__decorate([
Bind()
], StylableTransition.prototype, "onEnter", null);
__decorate([
Bind()
], StylableTransition.prototype, "onEntering", null);
__decorate([
Bind()
], StylableTransition.prototype, "onEntered", null);
__decorate([
Bind()
], StylableTransition.prototype, "onExit", null);
__decorate([
Bind()
], StylableTransition.prototype, "onExiting", null);
__decorate([
Bind()
], StylableTransition.prototype, "onExited", null);
return StylableTransition;
})();
export default StylableTransition;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3R5bGFibGVUcmFuc2l0aW9uLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1N0eWxhYmxlVHJhbnNpdGlvbi9TdHlsYWJsZVRyYW5zaXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUNiLFNBQVMsRUFDVCxNQUFNLE9BQU8sQ0FBQztBQUNmLE9BQU8sU0FBUyxNQUFNLFlBQVksQ0FBQztBQUNuQyxPQUFPLFFBQVEsTUFBTSxzQkFBc0IsQ0FBQztBQUM1QyxPQUFPLFdBQVcsTUFBTSx5QkFBeUIsQ0FBQztBQUNsRCxPQUFPLFVBRU4sTUFBTSxtQ0FBbUMsQ0FBQztBQUkzQyxPQUFPLEVBRU4sSUFBSSxFQUNKLElBQUksRUFDSixNQUFNLGVBQWUsQ0FBQztBQXFCdkIsTUFBTSxxQkFBcUIsR0FBcUI7SUFDL0MsTUFBTSxFQUFPLFFBQVE7SUFDckIsS0FBSyxFQUFRLE9BQU87SUFDcEIsV0FBVyxFQUFFLGFBQWE7SUFDMUIsU0FBUyxFQUFJLFdBQVc7SUFDeEIsSUFBSSxFQUFTLE1BQU07SUFDbkIsVUFBVSxFQUFHLFlBQVk7SUFDekIsUUFBUSxFQUFLLFVBQVU7Q0FDdkIsQ0FBQztBQUNGLE1BQU0sbUJBQW1CLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO0FBRS9EO0lBQUEsTUFBcUIsa0JBQW1CLFNBQVEsU0FBaUI7UUFzQmhFLFlBQVksS0FBYTtZQUV4QixLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFYixNQUFNLEVBQ0wsTUFBTSxFQUNOLEdBQUcsS0FBSyxDQUFDO1lBQ1YsTUFBTSxhQUFhLEdBQUcsT0FBTyxNQUFNLEtBQUssVUFBVTtnQkFDakQsQ0FBQyxDQUFDLENBQUMsS0FBYSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDO2dCQUM5QyxD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