rumble-charts/cjs/Animate.js

Truly declarative React charts components

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('./external/tslib/tslib.es6.js');
var React = require('react');
var d3Timer = require('d3-timer');
var d3Interpolate = require('d3-interpolate');
require('./helpers/colorFunc.js');
require('d3-shape');
var eases = require('./helpers/eases.js');
var isFunction = require('./helpers/isFunction.js');
var isString = require('./helpers/isString.js');
var isUndefined = require('./helpers/isUndefined.js');
var normalizeSeries = require('./helpers/normalizeSeries.js');
var omitBy = require('./helpers/omitBy.js');
var pick = require('./helpers/pick.js');
var proxyChildren = require('./helpers/proxyChildren.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

/**
 * Animates (actually interpolates) your `series` data. Very useful when you want to have
 * simple and nice transitions between data state.
 *
 * As a wrapper it takes `series` obtained from its parent and gives it to its children.
 *
 * By default, `interpolateProps` list contains all the common props:
 * ['series', 'maxX', 'maxY', 'minX', 'minY', 'layerWidth', 'layerHeight'].
 * Though, sometimes it makes a lot of sense to interpolate only `series`. Especially, when the
 * components wrapped by `<Animate>` are "jumping". Also, you can explicitly define `minY` as a prop
 * to make the limits stable (and therefore prevent the "jumping" effect)
 */
function Animate(props) {
    var _a = props.interpolateProps, interpolateProps = _a === void 0 ? ['series', 'maxX', 'maxY', 'minX', 'minY', 'layerWidth', 'layerHeight'] : _a, _b = props.duration, duration = _b === void 0 ? 500 : _b, _c = props.ease, ease = _c === void 0 ? 'linear' : _c, _d = props.tag, tag = _d === void 0 ? 'g' : _d, onStart = props.onStart, onEnd = props.onEnd, onCancel = props.onCancel, logFPS = props.logFPS, pickProps = tslib_es6.__rest(props, ["interpolateProps", "duration", "ease", "tag", "onStart", "onEnd", "onCancel", "logFPS"]);
    var _e = React.useState(function () { return (tslib_es6.__assign(tslib_es6.__assign({}, pickProps), normalizeSeries.normalizeSeries(pickProps))); }), state = _e[0], setState = _e[1];
    var prevPropsRef = React.useRef(props);
    var newPropsRef = React.useRef();
    newPropsRef.current = React.useMemo(function () {
        var newProps = Object.keys(pickProps).reduce(function (newProps, propName) {
            var _a;
            if (pickProps[propName] !== ((_a = prevPropsRef.current) === null || _a === void 0 ? void 0 : _a[propName])) {
                newProps[propName] = pickProps[propName];
            }
            return newProps;
        }, {});
        return Object.keys(newProps).length > 0 ? newProps : null;
    }, [props !== prevPropsRef.current]) || newPropsRef.current;
    prevPropsRef.current = props;
    React.useEffect(function () {
        var newProps = newPropsRef.current;
        if (!newProps) {
            return;
        }
        var interpolate = d3Interpolate.interpolate(pick.pick(state, interpolateProps), pick.pick(tslib_es6.__assign(tslib_es6.__assign({}, newProps), normalizeSeries.normalizeSeries(newProps)), interpolateProps));
        var easeFunc = isString.isString(ease) ?
            eases.eases[ease] :
            (isFunction.isFunction(ease) ? ease : eases.eases['linear']);
        onStart && onStart();
        var i = 0;
        var _timer = d3Timer.timer(function (p) {
            i++;
            if (p >= duration) {
                p = duration;
                setState(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), interpolate(easeFunc(p / duration)))); });
                onEnd && onEnd();
                if (logFPS) {
                    console.warn(i * (1000 / duration) + 'fps; ' + i + ' frames in ' + duration + 'ms');
                }
                _timer.stop();
            }
            else {
                setState(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), interpolate(easeFunc(p / duration)))); });
            }
        });
        return function () {
            onCancel && onCancel();
            _timer.stop();
        };
    }, [newPropsRef.current]);
    return React__default["default"].createElement(tag, { className: pickProps.className }, proxyChildren.proxyChildren(pickProps.children, omitBy.omitBy(state, isUndefined.isUndefined), {
        layerWidth: state.layerWidth,
        layerHeight: state.layerHeight,
        scaleX: pickProps.scaleX,
        scaleY: pickProps.scaleY
    }));
}

exports.Animate = Animate;