@chayns-components/core/lib/esm/components/progress-bar/ProgressBar.js

A set of beautiful React components for developing your own applications with chayns.

import { c as _c } from "react-compiler-runtime";
import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useUuid } from '../../hooks/uuid';
import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarShine, StyledProgressBarStep, StyledProgressBarStepWrapper, StyledProgressBarThumbLabel } from './ProgressBar.styles';
import { PopupAlignment } from '../../types/popup';
import { ThemeContext, ThemeProvider } from 'styled-components';
import Popup from '../popup/Popup';
const ProgressBar = t0 => {
  "use memo";

  const $ = _c(39);
  const {
    percentage,
    label,
    shouldHideProgress: t1,
    shouldShowLabelInline: t2,
    steps,
    colors,
    thumbLabel,
    showShine: t3,
    height
  } = t0;
  const shouldHideProgress = t1 === undefined ? false : t1;
  const shouldShowLabelInline = t2 === undefined ? false : t2;
  const showShine = t3 === undefined ? false : t3;
  const uuid = useUuid();
  const [coordinates, setCoordinates] = useState();
  const popupRef = useRef(null);
  const [hostContainer, setHostContainer] = useState(null);
  const theme = useContext(ThemeContext);
  let t4;
  bb0: {
    if (!showShine || percentage === undefined) {
      t4 = null;
      break bb0;
    }
    const t = percentage / 100;
    const shineCount = Math.ceil(6 * t);
    const speed = 1 + 4 * t;
    let t5;
    if ($[0] !== shineCount) {
      t5 = Array.from({
        length: shineCount
      });
      $[0] = shineCount;
      $[1] = t5;
    } else {
      t5 = $[1];
    }
    let t6;
    if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
      t6 = t5.map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine, {
        key: `progress-bar-shine__${shineCount}__${index}`,
        $speed: speed,
        $delay: -(speed / shineCount) * index
      }));
      $[2] = shineCount;
      $[3] = speed;
      $[4] = t5;
      $[5] = t6;
    } else {
      t6 = $[5];
    }
    t4 = t6;
  }
  const shineEffect = t4;
  let t5;
  let t6;
  if ($[6] !== hostContainer || $[7] !== thumbLabel) {
    t5 = () => {
      if (thumbLabel) {
        setCoordinates(hostContainer?.getBoundingClientRect());
      }
    };
    t6 = [hostContainer, thumbLabel];
    $[6] = hostContainer;
    $[7] = thumbLabel;
    $[8] = t5;
    $[9] = t6;
  } else {
    t5 = $[8];
    t6 = $[9];
  }
  useLayoutEffect(t5, t6);
  let t7;
  let t8;
  if ($[10] !== coordinates) {
    t7 = () => {
      if (coordinates) {
        popupRef.current?.show();
      }
    };
    t8 = [coordinates];
    $[10] = coordinates;
    $[11] = t7;
    $[12] = t8;
  } else {
    t7 = $[11];
    t8 = $[12];
  }
  useEffect(t7, t8);
  let t9;
  if ($[13] !== colors?.backgroundColor || $[14] !== colors?.primaryTextColor || $[15] !== colors?.progressColor || $[16] !== colors?.secondaryTextColor || $[17] !== colors?.stepColor || $[18] !== colors?.thumbLabelColor || $[19] !== height || $[20] !== hostContainer || $[21] !== label || $[22] !== percentage || $[23] !== shineEffect || $[24] !== shouldHideProgress || $[25] !== shouldShowLabelInline || $[26] !== showShine || $[27] !== steps || $[28] !== theme || $[29] !== thumbLabel || $[30] !== uuid) {
    colors?.backgroundColor;
    colors?.primaryTextColor;
    colors?.progressColor;
    colors?.secondaryTextColor;
    colors?.stepColor;
    colors?.thumbLabelColor;
    t9 = (() => {
      if (shouldHideProgress) {
        return null;
      }
      if (percentage === undefined) {
        return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
          key: `progress-bar-loop__${uuid}`,
          $color: colors?.progressColor,
          initial: {
            width: "200px",
            left: "-200px"
          },
          animate: {
            width: "200px",
            left: "100%"
          },
          exit: {
            width: "200px",
            left: "100%"
          },
          transition: {
            type: "tween",
            repeat: Infinity,
            repeatDelay: 0,
            duration: 1
          }
        }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
          $color: colors?.backgroundColor
        }));
      }
      return /*#__PURE__*/React.createElement("div", {
        ref: instance => setHostContainer(instance),
        style: {
          border: 0,
          position: "relative"
        }
      }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
        $isBig: shouldShowLabelInline,
        $height: height
      }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
        $position: step,
        key: `progress-step-${step}`,
        $color: colors?.stepColor
      }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
        $height: height,
        $color: colors?.progressColor,
        key: `progress-bar__${uuid}`,
        initial: {
          width: "0%"
        },
        animate: {
          width: `${percentage}%`
        },
        exit: {
          width: "0%"
        },
        transition: {
          type: "tween"
        },
        onUpdate: () => popupRef.current?.show(),
        onAnimationComplete: () => popupRef.current?.show()
      }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
        $height: height,
        onClick: _temp
      }, /*#__PURE__*/React.createElement(ThemeProvider, {
        theme: {
          "000": colors?.thumbLabelColor ?? theme?.["104"],
          text: colors?.secondaryTextColor ?? theme?.["300"]
        }
      }, /*#__PURE__*/React.createElement(Popup, {
        ref: popupRef,
        content: thumbLabel,
        alignment: PopupAlignment.TopCenter,
        onHide: () => popupRef.current?.show(),
        container: hostContainer ?? undefined,
        shouldBeOpen: true,
        shouldScrollWithContent: true,
        yOffset: -12
      })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
        $shouldShowLabelInline: shouldShowLabelInline,
        $primaryColor: colors?.primaryTextColor,
        $secondaryColor: colors?.secondaryTextColor,
        $colorSplitPosition: percentage
      }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
        $color: colors?.backgroundColor
      })));
    })();
    $[13] = colors?.backgroundColor;
    $[14] = colors?.primaryTextColor;
    $[15] = colors?.progressColor;
    $[16] = colors?.secondaryTextColor;
    $[17] = colors?.stepColor;
    $[18] = colors?.thumbLabelColor;
    $[19] = height;
    $[20] = hostContainer;
    $[21] = label;
    $[22] = percentage;
    $[23] = shineEffect;
    $[24] = shouldHideProgress;
    $[25] = shouldShowLabelInline;
    $[26] = showShine;
    $[27] = steps;
    $[28] = theme;
    $[29] = thumbLabel;
    $[30] = uuid;
    $[31] = t9;
  } else {
    t9 = $[31];
  }
  const progressBar = t9;
  colors?.primaryTextColor;
  let t10;
  if ($[32] !== colors?.primaryTextColor || $[33] !== label || $[34] !== shouldShowLabelInline) {
    t10 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
      $primaryColor: colors?.primaryTextColor
    }, label);
    $[32] = colors?.primaryTextColor;
    $[33] = label;
    $[34] = shouldShowLabelInline;
    $[35] = t10;
  } else {
    t10 = $[35];
  }
  let t11;
  if ($[36] !== progressBar || $[37] !== t10) {
    t11 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t10);
    $[36] = progressBar;
    $[37] = t10;
    $[38] = t11;
  } else {
    t11 = $[38];
  }
  return t11;
};
ProgressBar.displayName = 'ProgressBar';
export default ProgressBar;
function _temp(event) {
  return event.stopPropagation();
}
//# sourceMappingURL=ProgressBar.js.map