@smart-react-components/ui/ProgressBar/index.js

SRC UI includes React and Styled components.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const dom_1 = require("@smart-react-components/core/util/dom");
const react_1 = __importDefault(require("react"));
const styled_components_1 = require("styled-components");
const ProgressBarElement_1 = __importStar(require("../components/ProgressBar/ProgressBarElement"));
const ProgressBar = ({ displayValue, elementProps = {}, hasStripedAnimation = true, isFilled, isNested, isStriped, palette = 'primary', prefix, separator, suffix, transitionDuration = 450, transitionTimingFunction = 'linear', totalValue, value }) => {
    const theme = react_1.default.useContext(styled_components_1.ThemeContext);
    const getStripedAnimationDuration = () => displayValue ? 400 : 1500;
    const getHeight = () => elementProps.height ? (typeof elementProps.height === 'string' ? elementProps.height : `${elementProps.height}px`) : (isNested ? '100%' : (displayValue ? '16px' : '4px'));
    const getPercentage = () => {
        const label = {
            prefix: prefix !== null && prefix !== void 0 ? prefix : theme.$.i18n.progressBar.prefix,
            separator: separator !== null && separator !== void 0 ? separator : theme.$.i18n.progressBar.separator,
            suffix: suffix !== null && suffix !== void 0 ? suffix : theme.$.i18n.progressBar.suffix,
        };
        if (totalValue) {
            return {
                label: `${label.prefix}${value}${label.suffix} ${label.separator} ${label.prefix}${totalValue}${label.suffix}`,
                value: Math.round((value / totalValue) * 100),
            };
        }
        return {
            value,
            label: `${label.prefix}${value}${label.suffix}`,
        };
    };
    const [stripedAnimationDuration, setStripedAnimationDuration] = react_1.default.useState(() => getStripedAnimationDuration());
    const [height, setHeight] = react_1.default.useState(() => getHeight());
    const [left, setLeft] = react_1.default.useState(() => -1);
    const [percentage, setPercentage] = react_1.default.useState(() => getPercentage());
    const el = react_1.default.useRef(null);
    const percentageEl = react_1.default.useRef(null);
    const handleResize = () => setLeft((el.current.offsetWidth / 2) - (percentageEl.current.offsetWidth / 2));
    (0, useChangeEffect_1.default)(() => {
        setStripedAnimationDuration(getStripedAnimationDuration());
    }, [stripedAnimationDuration]);
    (0, useChangeEffect_1.default)(() => {
        setHeight(getHeight());
    }, [elementProps.height, displayValue]);
    (0, useChangeEffect_1.default)(() => {
        setPercentage(getPercentage());
    }, [value, totalValue, prefix, separator, suffix]);
    react_1.default.useEffect(() => {
        if (displayValue) {
            (0, dom_1.addEventListener)(window, ['resize'], handleResize);
            return () => {
                (0, dom_1.removeEventListener)(window, ['resize'], handleResize);
            };
        }
    }, [displayValue]);
    react_1.default.useEffect(() => {
        if (displayValue) {
            handleResize();
        }
    }, [percentage]);
    const PercentageEl = displayValue && react_1.default.createElement(ProgressBarElement_1.Percentage, { ref: percentageEl, style: { left: `${left}px`, visibility: left > -1 ? 'visible' : 'hidden' } }, percentage.label);
    return (react_1.default.createElement(ProgressBarElement_1.default, Object.assign({}, elementProps, { hasStripedAnimation: hasStripedAnimation, height: height, isFilled: isFilled, isNested: isNested, isStriped: isStriped, palette: palette, ref: el, stripedAnimationDuration: stripedAnimationDuration, transitionDuration: transitionDuration, transitionTimingFunction: transitionTimingFunction }),
        PercentageEl,
        react_1.default.createElement(ProgressBarElement_1.Bar, { style: { width: `${percentage.value}%` } }, !isNested && PercentageEl)));
};
exports.default = ProgressBar;