<template>
    <view
        :class="'wux-class ' + wrapCls + ' ' + animateCss"
        @tap="onTap"
        @touchmove.stop.prevent="parseEventDynamicCode($event, disableScroll ? 'noop' : '')"
        @transitionend="onTransitionEnd"
        @animationend="onAnimationEnd"
        v-if="animateStatus !== 'unmounted'"
        :style="extStyle"
    >
        <slot></slot>
    </view>
</template>

<script>
'use strict';
var _baseComponent = _interopRequireDefault(require('../helpers/baseComponent'));
var _styleToCssString = _interopRequireDefault(require('../helpers/styleToCssString'));
function _interopRequireDefault(t) {
    return t && t.__esModule
        ? t
        : {
              default: t
          };
}
function _typeof(t) {
    return (_typeof =
        'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
            ? function (t) {
                  return typeof t;
              }
            : function (t) {
                  return t && 'function' == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? 'symbol' : typeof t;
              })(t);
}
var ENTER = 'enter';
var ENTERING = 'entering';
var ENTERED = 'entered';
var EXIT = 'exit';
var EXITING = 'exiting';
var EXITED = 'exited';
var UNMOUNTED = 'unmounted';
var TRANSITION = 'transition';
var ANIMATION = 'animation';
var TIMEOUT = 16.666666666666668;
var defaultClassNames = {
    enter: '',
    enterActive: '',
    enterDone: '',
    exit: '',
    exitActive: '',
    exitDone: ''
};
(0, _baseComponent.default)({
    properties: {
        in: {
            type: Boolean,
            value: false,
            observer: function (t) {
                if (this.isMounting) {
                    this.updated(t);
                }
            }
        },
        classNames: {
            type: null,
            value: defaultClassNames
        },
        duration: {
            type: null,
            value: null
        },
        type: {
            type: String,
            value: TRANSITION
        },
        appear: {
            type: Boolean,
            value: false
        },
        enter: {
            type: Boolean,
            value: true
        },
        exit: {
            type: Boolean,
            value: true
        },
        mountOnEnter: {
            type: Boolean,
            value: true
        },
        unmountOnExit: {
            type: Boolean,
            value: true
        },
        wrapCls: {
            type: String,
            value: ''
        },
        wrapStyle: {
            type: [String, Object],
            value: '',
            observer: function (t) {
                this.setData({
                    extStyle: (0, _styleToCssString.default)(t)
                });
            }
        },
        disableScroll: {
            type: Boolean,
            value: false
        }
    },
    data: {
        animateCss: '',
        animateStatus: EXITED,
        isMounting: false,
        extStyle: ''
    },
    methods: {
        addEventListener: function () {
            var t = this.animateStatus;
            var e = this.getTimeouts();
            var a = e.enter;
            var n = e.exit;
            if (t === ENTERING && !a && this.enter) {
                this.performEntered();
            }
            if (t === EXITING && !n && this.exit) {
                this.performExited();
            }
        },
        onTransitionEnd: function () {
            if (this.type === TRANSITION) {
                this.addEventListener();
            }
        },
        onAnimationEnd: function () {
            if (this.type === ANIMATION) {
                this.addEventListener();
            }
        },
        updateStatus: function (t, e) {
            var a = 1 < arguments.length && void 0 !== e && e;
            if (null !== t) {
                this.cancelNextCallback();
                this.isAppearing = a;
                t === ENTERING ? this.performEnter() : this.performExit();
            }
        },
        performEnter: function () {
            var that = this;
            var e = this.getClassNames(ENTER);
            var a = e.className;
            var n = e.activeClassName;
            var i = this.getTimeouts().enter;
            var s = {
                animateStatus: ENTER,
                animateCss: a
            };
            var r = {
                animateStatus: ENTERING,
                animateCss: ''.concat(a, ' ').concat(n)
            };
            if (!this.isAppearing && !this.enter) {
                return this.performEntered();
            }
            this.safeSetData(s, function () {
                that.$emit('change', {
                    detail: {
                        animateStatus: ENTER
                    }
                });
                that.$emit(ENTER, {
                    detail: {
                        isAppearing: that.isAppearing
                    }
                });
                that.delayHandler(TIMEOUT, function () {
                    that.safeSetData(r, function () {
                        that.$emit('change', {
                            detail: {
                                animateStatus: ENTERING
                            }
                        });
                        that.$emit(ENTERING, {
                            detail: {
                                isAppearing: that.isAppearing
                            }
                        });
                        if (i) {
                            that.delayHandler(i, that.performEntered);
                        }
                    });
                });
            });
        },
        performEntered: function () {
            var that = this;
            var e = this.getClassNames(ENTER).doneClassName;
            var a = {
                animateStatus: ENTERED,
                animateCss: e
            };
            this.safeSetData(a, function () {
                that.$emit('change', {
                    detail: {
                        animateStatus: ENTERED
                    }
                });
                that.$emit(ENTERED, {
                    detail: {
                        isAppearing: that.isAppearing
                    }
                });
            });
        },
        performExit: function () {
            var that = this;
            var e = this.getClassNames(EXIT);
            var a = e.className;
            var n = e.activeClassName;
            var i = this.getTimeouts().exit;
            var s = {
                animateStatus: EXIT,
                animateCss: a
            };
            var r = {
                animateStatus: EXITING,
                animateCss: ''.concat(a, ' ').concat(n)
            };
            if (!this.exit) {
                return this.performExited();
            }
            this.safeSetData(s, function () {
                that.$emit('change', {
                    detail: {
                        animateStatus: EXIT
                    }
                });
                that.$emit(EXIT);
                that.delayHandler(TIMEOUT, function () {
                    that.safeSetData(r, function () {
                        that.$emit('change', {
                            detail: {
                                animateStatus: EXITING
                            }
                        });
                        that.$emit(EXITING);
                        if (i) {
                            that.delayHandler(i, that.performExited);
                        }
                    });
                });
            });
        },
        performExited: function () {
            var that = this;
            var e = this.getClassNames(EXIT).doneClassName;
            var a = {
                animateStatus: EXITED,
                animateCss: e
            };
            this.safeSetData(a, function () {
                that.$emit('change', {
                    detail: {
                        animateStatus: EXITED
                    }
                });
                that.$emit(EXITED);
                if (that.unmountOnExit) {
                    that.setData(
                        {
                            animateStatus: UNMOUNTED
                        },
                        function () {
                            that.$emit('change', {
                                detail: {
                                    animateStatus: UNMOUNTED
                                }
                            });
                        }
                    );
                }
            });
        },
        getClassNames: function (t) {
            var e = this.classNames;
            return {
                className: 'string' != typeof e ? e[t] : ''.concat(e, '-').concat(t),
                activeClassName: 'string' != typeof e ? e[''.concat(t, 'Active')] : ''.concat(e, '-').concat(t, '-active'),
                doneClassName: 'string' != typeof e ? e[''.concat(t, 'Done')] : ''.concat(e, '-').concat(t, '-done')
            };
        },
        getTimeouts: function () {
            var t = this.duration;
            return null !== t && 'object' === _typeof(t)
                ? {
                      enter: t.enter,
                      exit: t.exit
                  }
                : 'number' == typeof t
                ? {
                      enter: t,
                      exit: t
                  }
                : {};
        },
        updated: function (t) {
            var that = this;
            var a = (this.pendingData || this).animateStatus;
            var n = null;
            t
                ? (a === UNMOUNTED &&
                      ((a = EXITED),
                      this.setData(
                          {
                              animateStatus: EXITED
                          },
                          function () {
                              that.$emit('change', {
                                  detail: {
                                      animateStatus: EXITED
                                  }
                              });
                          }
                      )),
                  a !== ENTER && a !== ENTERING && a !== ENTERED && (n = ENTERING))
                : (a !== ENTER && a !== ENTERING && a !== ENTERED) || (n = EXITING);
            this.updateStatus(n);
        },
        delayHandler: function (t, e) {
            if (t) {
                this.setNextCallback(e);
                setTimeout(this.nextCallback, t);
            }
        },
        onTap: function () {
            this.$emit('click');
        },
        noop: function () {}
    },
    attached: function () {
        var that = this;
        var e = null;
        var a = null;
        this.in ? (this.appear ? ((e = EXITED), (a = ENTERING)) : (e = ENTERED)) : (e = this.unmountOnExit || this.mountOnEnter ? UNMOUNTED : EXITED);
        this.safeSetData(
            {
                animateStatus: e,
                isMounting: true
            },
            function () {
                that.$emit('change', {
                    detail: {
                        animateStatus: e
                    }
                });
                that.updateStatus(a, true);
            }
        );
    }
});
</script>
<style>
.wux-animate--fadeIn-enter {
    transition: opacity 0.3s;
    opacity: 0;
}
.wux-animate--fadeIn-enter-active,
.wux-animate--fadeIn-enter-done {
    opacity: 1;
}
.wux-animate--fadeIn-exit {
    transition: opacity 0.3s;
    opacity: 1;
}
.wux-animate--fadeIn-exit-active,
.wux-animate--fadeIn-exit-done {
    opacity: 0;
}
.wux-animate--fadeInDown-enter {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}
.wux-animate--fadeInDown-enter-active,
.wux-animate--fadeInDown-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInDown-exit {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInDown-exit-active,
.wux-animate--fadeInDown-exit-done {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}
.wux-animate--fadeInLeft-enter {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.wux-animate--fadeInLeft-enter-active,
.wux-animate--fadeInLeft-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInLeft-exit {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInLeft-exit-active,
.wux-animate--fadeInLeft-exit-done {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.wux-animate--fadeInRight-enter {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.wux-animate--fadeInRight-enter-active,
.wux-animate--fadeInRight-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInRight-exit {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInRight-exit-active,
.wux-animate--fadeInRight-exit-done {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.wux-animate--fadeInUp-enter {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
.wux-animate--fadeInUp-enter-active,
.wux-animate--fadeInUp-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInUp-exit {
    transition: opacity 0.3s, transform 0.3s;
    opacity: 1;
    transform: none;
}
.wux-animate--fadeInUp-exit-active,
.wux-animate--fadeInUp-exit-done {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
.wux-animate--slideInUp-enter {
    transition: transform 0.3s;
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}
.wux-animate--slideInUp-enter-active,
.wux-animate--slideInUp-enter-done {
    transform: translateZ(0);
}
.wux-animate--slideInUp-exit {
    transition: transform 0.3s;
    transform: translateZ(0);
}
.wux-animate--slideInUp-exit-active,
.wux-animate--slideInUp-exit-done {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
}
.wux-animate--slideInDown-enter {
    transition: transform 0.3s;
    transform: translate3d(0, -100%, 0);
    visibility: visible;
}
.wux-animate--slideInDown-enter-active,
.wux-animate--slideInDown-enter-done {
    transform: translateZ(0);
}
.wux-animate--slideInDown-exit {
    transition: transform 0.3s;
    transform: translateZ(0);
}
.wux-animate--slideInDown-exit-active,
.wux-animate--slideInDown-exit-done {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
}
.wux-animate--slideInLeft-enter {
    transition: transform 0.3s;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
}
.wux-animate--slideInLeft-enter-active,
.wux-animate--slideInLeft-enter-done {
    transform: translateZ(0);
}
.wux-animate--slideInLeft-exit {
    transition: transform 0.3s;
    transform: translateZ(0);
}
.wux-animate--slideInLeft-exit-active,
.wux-animate--slideInLeft-exit-done {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
}
.wux-animate--slideInRight-enter {
    transition: transform 0.3s;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
}
.wux-animate--slideInRight-enter-active,
.wux-animate--slideInRight-enter-done {
    transform: none;
}
.wux-animate--slideInRight-exit {
    transition: transform 0.3s;
    transform: none;
}
.wux-animate--slideInRight-exit-active,
.wux-animate--slideInRight-exit-done {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
}
.wux-animate--zoom-enter {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0.01;
    transform: scale(0.75);
}
.wux-animate--zoom-enter-active,
.wux-animate--zoom-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--zoom-exit {
    transition: all 0.25s linear;
    transform: none;
}
.wux-animate--zoom-exit-active,
.wux-animate--zoom-exit-done {
    opacity: 0.01;
    transform: scale(0.75);
}
.wux-animate--punch-enter {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0.01;
    transform: scale(1.35);
}
.wux-animate--punch-enter-active,
.wux-animate--punch-enter-done {
    opacity: 1;
    transform: none;
}
.wux-animate--punch-exit {
    transition: all 0.25s linear;
    transform: none;
}
.wux-animate--punch-exit-active,
.wux-animate--punch-exit-done {
    opacity: 0.01;
    transform: scale(1.35);
}
</style>
