ukelli-ui/other/ball/animate-ball.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 __());
    };
})();
var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
import React, { Component } from 'react';
import { GenerateNumberRange } from 'basic-helper';
var hasSetKeyAnimateMapper = {};
var headDOM = document.getElementsByTagName('head')[0];
var prefixMap = {
    '-webkit-': 'Webkit',
    '-ms-': 'Ms',
    '-moz-': 'Moz',
};
var prefix = Object.keys(prefixMap).filter(function (prefixParam) { return prefixParam + "transform" in headDOM.style; })[0] || '';
// const prefix = '-ms-'
var transform = 'transform';
var animation = 'animation-name';
if (prefixMap[prefix]) {
    transform = prefixMap[prefix] + "Transform";
    animation = prefixMap[prefix] + "AnimationName";
}
function createDynamicAnimate(options) {
    var startVal = options.startVal, endVal = options.endVal, animateName = options.animateName;
    if (hasSetKeyAnimateMapper[animateName])
        return;
    var keyCSS = "\n    @" + prefix + "keyframes " + animateName + " {\n      0% {\n        " + prefix + "transform: translateY(" + startVal + ");\n      }\n      100% {\n        " + prefix + "transform: translateY(" + endVal + ");\n      }\n    }\n  ";
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = keyCSS;
    headDOM.appendChild(style);
    hasSetKeyAnimateMapper[animateName] = true;
}
var AnimateBall = /** @class */ (function (_super) {
    __extends(AnimateBall, _super);
    function AnimateBall() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.numberRangeArr = [];
        _this.shuffle = function (arrInput) {
            var arr = __spreadArrays(arrInput);
            for (var i = arr.length - 1; i >= 0; i--) {
                var randomIdx = Math.floor(Math.random() * (i + 1));
                var itemAtIdx = arr[randomIdx];
                arr[randomIdx] = arr[i];
                arr[i] = itemAtIdx;
            }
            return arr;
        };
        return _this;
    }
    AnimateBall.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        return this.props.animating !== nextProps.animating
            || this.props.activeNumb !== nextProps.activeNumb;
    };
    AnimateBall.prototype.componentDidMount = function () {
        this.genRandomArr();
    };
    AnimateBall.prototype.genRandomArr = function () {
        var numberRange = this.props.numberRange;
        if (!numberRange)
            return;
        this.numberRangeArr = this.shuffle(GenerateNumberRange(numberRange));
        this.eachItemRotate = 360 / this.numberRangeArr.length;
        // this.eachItemHeight = 360 / this.numberRangeArr.length;
    };
    AnimateBall.prototype.setKeyCss = function (ballItem) {
        if (this.eachItemHeight)
            return;
        var numberRange = this.props.numberRange;
        if (!numberRange)
            return;
        var count = numberRange[1] - numberRange[0];
        this.eachItemHeight = ballItem.offsetHeight;
        var totalHeight = count * this.eachItemHeight;
        this.animateName = "loop-" + this.eachItemHeight + totalHeight;
        createDynamicAnimate({
            startVal: 0,
            endVal: "-" + totalHeight + "px",
            animateName: this.animateName,
        });
        this.forceUpdate();
    };
    AnimateBall.prototype.render = function () {
        var _this = this;
        var _a = this.props, animating = _a.animating, numberRange = _a.numberRange, activeNumb = _a.activeNumb;
        var hasActiveNumb = activeNumb !== '?';
        var activeIdxRotate = (!animating && (+activeNumb || activeNumb == 0))
            ? -(this.eachItemHeight * this.numberRangeArr.indexOf(+activeNumb) || 0)
            : 0;
        var carouselStyle = {};
        var animationStyle = {};
        if (!animating) {
            carouselStyle[transform] = "translateY(" + activeIdxRotate + "px)";
        }
        else {
            animationStyle[animation] = this.animateName;
        }
        return (React.createElement("div", { className: "ball-wrap" },
            React.createElement("span", { style: animationStyle, className: "animate-balls" + (animating ? ' loop1' : '') },
                React.createElement("div", { style: carouselStyle, className: "carousel2" }, this.numberRangeArr.map(function (ballNumb, idx) { return (React.createElement("span", { key: ballNumb, ref: function (ballItem) {
                        if (!_this.eachItemHeight && !!ballItem)
                            _this.setKeyCss(ballItem);
                    }, className: "item" }, hasActiveNumb ? ballNumb : '?')); })))));
    };
    return AnimateBall;
}(Component));
export default AnimateBall;