react-css-transition/lib/composables/withTransitionState.js

CSS Transition Component for React

import { combine, withState, withHandlers, withProps, onDidMount, onWillUnmount, onWillReceiveProps, isolate, integrate, onDidUpdate, } from "reassemble";
import runInFrame from "../utils/runInFrame";
import pick from "../utils/pick";
import { ActionID, StateID, actionPropKeys } from "../reducer";
var pickTransitionState = function (state) { return pick(state, "style", "className", "inTransition", "id"); };
export var withTransitionState = function (reduce) { return combine(isolate(withProps(function (props) { return ({ actionProps: pick.apply(void 0, [props].concat(actionPropKeys)) }); }), withState("transitionState", "setTransitionState", function (_a) {
    var actionProps = _a.actionProps;
    return pickTransitionState(reduce(StateID.EntryPoint, { kind: ActionID.New, props: actionProps }).state);
}), withHandlers(function (initialProps) {
    var stateID = reduce(StateID.EntryPoint, { kind: ActionID.New, props: initialProps }).state.id;
    var cancelPending = null;
    var pendingCallback;
    var cancelPendingIfExistent = function () {
        if (cancelPending) {
            cancelPending();
            cancelPending = null;
        }
    };
    return {
        cancelPendingIfExistent: function () { return cancelPendingIfExistent; },
        runPending: function () { return function () {
            var callback = pendingCallback;
            pendingCallback = null;
            if (callback) {
                callback();
            }
        }; },
        dispatch: function (_a) {
            var actionProps = _a.actionProps, onTransitionComplete = _a.onTransitionComplete, setTransitionState = _a.setTransitionState;
            var run = function (actionID) {
                var result = reduce(stateID, { kind: actionID, props: actionProps });
                if (!result) {
                    return;
                }
                if (result.completed && onTransitionComplete) {
                    onTransitionComplete();
                }
                var state = result.state, pending = result.pending;
                stateID = state.id;
                cancelPendingIfExistent();
                if (pending) {
                    pendingCallback = function () {
                        cancelPending = runInFrame(1, function () { return run(pending); });
                    };
                }
                setTransitionState(pickTransitionState(state));
            };
            return run;
        },
    };
}), withHandlers({
    onTransitionBegin: function (_a) {
        var dispatch = _a.dispatch;
        return function () { return dispatch(ActionID.TransitionStart); };
    },
    onTransitionComplete: function (_a) {
        var dispatch = _a.dispatch;
        return function () { return dispatch(ActionID.TransitionComplete); };
    },
    timeout: function (_a) {
        var dispatch = _a.dispatch;
        return function () { return dispatch(ActionID.Timeout); };
    },
}), onDidMount(function (_a) {
    var dispatch = _a.dispatch;
    dispatch(ActionID.Mount);
}), onWillReceiveProps(function (_a, _b) {
    var prevActive = _a.active;
    var nextActive = _b.active, dispatch = _b.dispatch;
    if (prevActive === nextActive) {
        return;
    }
    dispatch(ActionID.TransitionTrigger);
}), onDidUpdate(function (_a) {
    var runPending = _a.runPending;
    runPending();
}), onWillUnmount(function (_a) {
    var cancelPendingIfExistent = _a.cancelPendingIfExistent;
    cancelPendingIfExistent();
}), integrate("timeout", "transitionState", "onTransitionBegin", "onTransitionComplete"))); };

//# sourceMappingURL=withTransitionState.js.map