tsp-component/lib/accordion/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';
var element = {};
var prefix = 'tsp-component-Accordion';
var Accordion = (function (_super) {
    __extends(Accordion, _super);
    function Accordion(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.state = {
            open: _this.props.defaultOpen
        };
        return _this;
    }
    Accordion.prototype.componentDidMount = function () {
        this.elem = this.refs.elem;
        element[this.props.id] = this.elem;
        if (this.props.defaultOpen) {
            this.elem.dataset.height = this.elem.clientHeight.toString();
            this.elem.style.height = this.elem.dataset.height + 'px';
        }
        else {
            this.elem.dataset.height = '0';
            this.elem.style.height = '0px';
        }
    };
    Accordion.prototype.componentDidUpdate = function (nextProps) {
        if (this.props.updateId !== nextProps.updateId) {
            this.elem.style.height = 'auto';
            this.elem.dataset.height = this.elem.clientHeight.toString();
            this.elem.style.height = this.elem.dataset.height + 'px';
        }
    };
    Accordion.prototype.render = function () {
        return (React.createElement("div", { id: this.props.id, ref: "elem", className: classNames((_a = {},
                _a[prefix] = true,
                _a[prefix + "-hidden"] = !this.state.open,
                _a[this.props.className] = this.props.className,
                _a)) }, this.props.children));
        var _a;
    };
    return Accordion;
}(React.Component));
function accordionOpen(id) {
    var elem = element[id];
    elem.classList.add(prefix + "-animation");
    elem.classList.remove(prefix + "-hidden");
    setTimeout(function () {
        elem.classList.remove(prefix + "-animation");
        elem.dataset.hidden = 'false';
    }, 300);
}
function accordionClose(id) {
    var elem = element[id];
    elem.classList.add(prefix + "-animation");
    elem.classList.add(prefix + "-hidden");
    setTimeout(function () {
        elem.classList.remove(prefix + "-animation");
        elem.dataset.hidden = 'true';
    }, 300);
}
export { Accordion, accordionOpen, accordionClose };