smart-react-components/ProgressBar-6e7f8767.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('./index-6d498b59.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Div = require('./element/Div.js');

var DEFAULT_PLACEHOLDER = {
    prefix: "",
    suffix: " %"
};

const PercentageElement = styled__default.div `
    position: relative;
    flex: 0 0 auto;
`;
const BarElement = styled__default.div `
    position: absolute;
    overflow: hidden;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
`;
const ProgressBarElement = styled__default(Div)(({ theme, type, fill$, alt$, shape, duration, striped, stripedAnimation, stripedAnimationDuration, height }) => `
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: ${theme.src.progressBar.radius[shape]};
    background-color: ${fill$ ? theme.src.type[type].progressBar.backgroundFill : theme.src.type[type].progressBar.background};
    color: ${theme.src.type[type].main};
    fill: ${theme.src.type[type].main};

    ${alt$
    ? `
        flex: 1 1 auto;
    ` : ""}

    ${BarElement} {
        border-radius: ${theme.src.progressBar.radius[shape]};
        background-color: ${alt$ ? theme.src.type[type].progressBar.backgroundAlt : theme.src.type[type].main};
        color: ${theme.src.type[type].font};
        fill: ${theme.src.type[type].font};
        transition: width ${duration}ms 0s ${theme.src.progressBar.transitionType};
    }

    ${striped
    ? `
        ${stripedAnimation
        ? `
            @keyframes src-progress-bar-stripes {
                from {
                    background-position: ${height} 0;
                }
                
                to {
                    background-position: 0 0;
                }
            }
        ` : ""}

        &,
        ${BarElement} {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: ${height} ${height};

            ${stripedAnimation
        ? `
                animation: src-progress-bar-stripes ${stripedAnimationDuration}ms 0s ${theme.src.progressBar.stripedAnimationType} infinite;
            ` : ""}
        }
    ` : ""}
`);
const ProgressBar = ({ elementProps = index.DV.JSX_ELEMENT_PROPS, type = "primary", fill, alt, shape = "default", duration = 450, height, percentage, showPlaceholder, placeholder = DEFAULT_PLACEHOLDER, striped, stripedAnimation = true, stripedAnimationDuration }) => {
    const getStripedAnimationDuration$ = () => typeof stripedAnimationDuration !== "undefined" ? stripedAnimationDuration : (showPlaceholder ? 400 : 1500);
    const getHeight$ = () => typeof height !== "undefined" ? height : (alt ? "100%" : showPlaceholder ? "16px" : "4px");
    const [stripedAnimationDuration$, setStripedAnimationDuration$] = React__default.useState(() => getStripedAnimationDuration$());
    const [height$, setHeight$] = React__default.useState(() => getHeight$());
    const [left, setLeft] = React__default.useState(() => -1);
    const el = React__default.useRef(null);
    const percentageEl = React__default.useRef(null);
    const resize = () => setLeft((el.current.offsetWidth / 2) - (percentageEl.current.offsetWidth / 2));
    React__default.useEffect(() => setStripedAnimationDuration$(getStripedAnimationDuration$()), [stripedAnimationDuration, showPlaceholder]);
    React__default.useEffect(() => setHeight$(getHeight$()), [height, showPlaceholder]);
    React__default.useEffect(() => {
        if (showPlaceholder) {
            DOMHelper.DOMHelper.addEventListener(window, ["resize"], resize);
            return () => {
                DOMHelper.DOMHelper.removeEventListener(window, ["resize"], resize);
            };
        }
    }, [showPlaceholder]);
    React__default.useEffect(() => {
        if (showPlaceholder)
            resize();
    }, [percentage]);
    const PercentageEl = showPlaceholder && React__default.createElement(PercentageElement, { style: { left: `${left}px`, visibility: (left > -1 ? "visible" : "hidden") }, ref: percentageEl },
        placeholder.prefix,
        percentage,
        placeholder.suffix);
    return (React__default.createElement(ProgressBarElement, Object.assign({ height: height$ }, elementProps, { ref: el, type: type, "fill$": fill, "alt$": alt, shape: shape, striped: striped, duration: duration, stripedAnimation: stripedAnimation, stripedAnimationDuration: stripedAnimationDuration$ }),
        PercentageEl,
        React__default.createElement(BarElement, { style: { width: `${percentage}%` } }, !alt && PercentageEl)));
};

exports.ProgressBar$ = ProgressBar;