ukelli-ui/other/ball/index.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, { Component } from 'react';
import RandomDisplayNember from './animate-ball';
var splitStr = ',';
var Ball = /** @class */ (function (_super) {
    __extends(Ball, _super);
    function Ball(props) {
        var _this = _super.call(this, props) || this;
        _this.hasSplit = function (str) { return str.indexOf(splitStr) !== -1; };
        var openCode = props.openCode;
        var openArr = _this.getOpenCodeArr(openCode);
        _this.state = {
            openCodeLen: openArr.length,
            openedInfo: {}
        };
        _this.animateBallRefs = {};
        return _this;
    }
    Ball.prototype.getOpenCodeArr = function (openCode) {
        return this.hasSplit(openCode) ? openCode.split(splitStr) : openCode.split('');
    };
    Ball.prototype.shouldComponentUpdate = function (nextProps) {
        if (this.props.isOpening !== nextProps.isOpening || (!/\?+/.test(nextProps.openCode) && nextProps.openCode !== this.props.openCode)) {
            this.openCodeAnimate(!nextProps.isOpening, nextProps);
        }
        return true;
    };
    Ball.prototype.componentWillUnmount = function () {
        this.clearTimeout();
    };
    Ball.prototype.clearTimeout = function () {
        this.timer && clearTimeout(this.timer);
        this.timer = null;
    };
    Ball.prototype.openCodeAnimate = function (isOpened, props) {
        var _this = this;
        var _a = props || this.props, openCode = _a.openCode, animateTimer = _a.animateTimer;
        var openedInfo = this.state.openedInfo;
        var openCodeArr = this.getOpenCodeArr(openCode);
        var openIdx = 0;
        var setOpenCodeIdx = function (idx) {
            openedInfo[idx] = isOpened;
            _this.setState({
                openedInfo: openedInfo
            });
            _this.clearTimeout();
            _this.timer = setTimeout(function () {
                if (openIdx >= openCodeArr.length)
                    return;
                setOpenCodeIdx(openIdx);
            }, animateTimer);
            openIdx++;
        };
        setOpenCodeIdx(openIdx);
    };
    Ball.prototype.render = function () {
        var _a = this.props, openCode = _a.openCode, size = _a.size, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.activeFilter, activeFilter = _c === void 0 ? '' : _c, _d = _a.extendTxt, extendTxt = _d === void 0 ? '' : _d, numberRange = _a.numberRange;
        var extendTxtArr = this.hasSplit(extendTxt) ? extendTxt.split(splitStr) : extendTxt;
        var _e = this.state, openCodeLen = _e.openCodeLen, openedInfo = _e.openedInfo;
        var openCodeArr = this.getOpenCodeArr(openCode);
        var ballClass = size ? size + " ball" : 'ball';
        var activeFilterArr = activeFilter.split('');
        var ballGroup = openCodeArr.map(function (_ball, _idx) {
            var isOpening = !openedInfo[_idx];
            var currFilter = activeFilterArr[_idx] || '';
            var isActive = currFilter == 'o';
            var ballID = "ball-" + _ball;
            var extendTxtDOM = (React.createElement("div", { key: _idx, className: "extend-txt" }, extendTxtArr[_idx]));
            if (animate) {
                return (React.createElement("div", { id: ballID, key: _idx, className: "" + ballClass + (isActive ? ' s' : '') },
                    React.createElement(RandomDisplayNember, { activeNumb: openCodeArr[_idx], numberRange: numberRange || [], animating: isOpening }),
                    extendTxtDOM));
            }
            return (React.createElement("div", { id: ballID, className: ballClass + " b" + (isActive ? ' s' : ''), key: _idx }, _ball));
        });
        return (React.createElement("div", { className: "ball-group" }, ballGroup));
    };
    Ball.defaultProps = {
        openCode: '?????',
        animateTimer: 300,
        numberRange: [0, 9],
    };
    return Ball;
}(Component));
export { Ball };