tsp-component/lib/popup/index.js

提供多端和react版本的UI组件

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import { getTranslateText } from '../util/animation';
var element = {};
var prefix = 'tsp-component-Popup';
var Popup = (function (_super) {
    __extends(Popup, _super);
    function Popup(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.onClose = _this.onClose.bind(_this);
        return _this;
    }
    Popup.prototype.componentDidMount = function () {
        this.elem = this.refs['popup'];
        element[this.props.id] = this.elem;
        this.elem.dataset.direction = this.props.direction;
        this.elem.style.cssText = getTranslateZWithDirection(this.elem, 'close');
    };
    Popup.prototype.componentWillUnmount = function () {
        document.body.style.cssText = "height:auto;overflow: visible;";
    };
    Popup.prototype.onClose = function (e) {
        popupClose(this.props.id);
        if (this.props.onClose) {
            this.props.onClose(e);
        }
    };
    Popup.prototype.render = function () {
        return (React.createElement("div", { id: this.props.id, className: classNames((_a = {},
                _a[prefix] = true,
                _a[this.props.className] = this.props.className,
                _a)), ref: "popup" },
            React.createElement(Hammer, { onTap: this.onClose },
                React.createElement("div", { className: prefix + "-mask" })),
            this.props.children));
        var _a;
    };
    Popup.defaultProps = {
        id: '',
        direction: 'top'
    };
    return Popup;
}(React.Component));
function popupOpen(id) {
    var elem = element[id];
    var translate = getTranslateZWithDirection(elem, 'open');
    var scrollElem = document.querySelector('.tsp-component-Scroll');
    if (scrollElem) {
        scrollElem['style'].webkitTransform = 'none';
    }
    elem.classList.add(prefix + "-transition");
    elem.style.cssText = "top: 0;left: 0;visibility: visible;" + translate;
    document.body.style.cssText = "height: " + document.documentElement.clientHeight + "px;overflow: hidden;";
}
function popupClose(id) {
    var elem = element[id];
    if (!elem) {
        return;
    }
    var translate = getTranslateZWithDirection(elem, 'close');
    var scrollElem = document.querySelector('.tsp-component-Scroll');
    if (scrollElem) {
        scrollElem['style'].webkitTransform = 'translateZ(0)';
    }
    elem.style.cssText = "top: 0;left: 0;visibility: visible;" + translate;
    setTimeout(function () {
        elem.classList.remove(prefix + "-transition");
        elem.style.cssText = "top: -9999px;left: -9999px;visibility: hidden;" + translate;
        document.body.style.cssText = "height:auto;overflow: visible;";
    }, 280);
}
function getTranslateZWithDirection(elem, status) {
    var translate = getTranslateText('-100%', '-100%');
    if (elem) {
        var direction = elem.dataset.direction;
        switch (direction) {
            case 'top':
                translate = getTranslateText(0, status === 'open' ? 0 : '100%');
                break;
            case 'right':
                translate = getTranslateText(status === 'open' ? 0 : '100%', 0);
                break;
            case 'bottom':
                translate = getTranslateText(0, status === 'open' ? 0 : '-100%');
                break;
            case 'left':
                translate = getTranslateText(status === 'open' ? 0 : '-100%', 0);
                break;
            default: break;
        }
    }
    return translate;
}
export { Popup, popupOpen, popupClose };