ukelli-ui/core/switch-button/switch-button.js

Base on React's UI lib. Make frontend's dev simpler and faster.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { PureComponent } from 'react';
/**
 * 单选集合的模版
 *
 * @export
 * @class SwitchButton
 * @extends {PureComponent}
 */
var SwitchButton = /** @class */ (function (_super) {
    __extends(SwitchButton, _super);
    function SwitchButton(props) {
        var _this = _super.call(this, props) || this;
        _this._refs = {};
        _this.value = props.activeIdx;
        return _this;
    }
    SwitchButton.prototype.componentDidMount = function () {
        /** 为了让指示器初始化显示宽度 */
        this.forceUpdate();
    };
    SwitchButton.prototype.render = function () {
        var _this = this;
        var _a = this.props, btns = _a.btns, activeIdx = _a.activeIdx, disabled = _a.disabled, unique = _a.unique, isNum = _a.isNum, onSwitch = _a.onSwitch;
        var btnsArr = Object.keys(btns);
        var btnGroup = btnsArr.map(function (btnKey, idx) {
            var btnText = btns[btnKey];
            var isActive = btnKey.toString() === activeIdx.toString();
            return (React.createElement("span", { key: btnText, ref: function (e) { _this._refs[btnKey] = e; }, className: "switch-btn" + (isActive ? ' active' : '') + (disabled ? ' disabled' : ''), onClick: function (e) {
                    if ((!unique || activeIdx != btnKey) && !disabled) {
                        var _btnKey = isNum ? +btnKey : btnKey;
                        _this.value = btnKey;
                        onSwitch(_btnKey, isActive);
                    }
                } }, btnText));
        });
        var activeDOM = this._refs[activeIdx] || {};
        var switchBtnGroup = (React.createElement("span", { className: "switch-btn-group" },
            btnGroup,
            React.createElement("span", { className: "indicator", style: {
                    transform: "translateX(" + activeDOM.offsetLeft + "px)",
                    width: activeDOM.offsetWidth
                } })));
        return switchBtnGroup;
    };
    SwitchButton.defaultProps = {
        unique: true,
        disabled: false,
        isNum: false,
    };
    return SwitchButton;
}(PureComponent));
export default SwitchButton;