@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/Progress/index.js

@@ -1,200 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useState, useEffect, useCallback } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { f as fileSizeDisplay, n as noop } from '../index-5f37f281.js';
-import Icon from '../Icon/index.js';
-import Button from '../Button/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .progress-holder{color:rgba(var(--background-sc-rgb),.64);display:flex;flex-direction:column;font:600 1.6rem/2rem var(--font-family)}[data-gene-ui-version=\"2.16.3\"] .progress-holder:not(.a-circular){width:100%}[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-default.s-medium{font-size:1.4rem}[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-default.s-small{font-size:1.2rem}[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-default .progress-line{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.3\"] .progress-holder:not(.a-default){font:700 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.3\"] .progress-holder:not(.a-default) .progress-sub-title{font:600 1rem/1.4rem var(--font-family);margin:.5rem 0 0;text-transform:capitalize}[data-gene-ui-version=\"2.16.3\"] .progress-holder.c-success{--hero:var(--confirm);--hero-hover:var(--confirm-hover);--hero-sc:var(--confirm-sc);--hero-rgb:var(--confirm-rgb);--hero-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.16.3\"] .progress-holder.c-fail{--hero:var(--danger);--hero-hover:var(--danger-hover);--hero-sc:var(--danger-sc);--hero-rgb:var(--danger-rgb);--hero-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.3\"] .progress-holder .to-be-colored{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-box-bar,[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-box-circular{background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);box-shadow:0 .6rem .9rem 0 #0000000d}[data-gene-ui-version=\"2.16.3\"] .progress-holder.a-box-circular{border-radius:2rem}[data-gene-ui-version=\"2.16.3\"] .progress-line{background:rgba(var(--background-sc-rgb),.06);border-radius:1rem;display:flex;height:.8rem;width:100%}[data-gene-ui-version=\"2.16.3\"] .a-box-bar>.progress-line{background:none;border-radius:0;height:.5rem}[data-gene-ui-version=\"2.16.3\"] .s-medium .progress-line{height:.6rem}[data-gene-ui-version=\"2.16.3\"] .s-small .progress-line{height:.3rem}[data-gene-ui-version=\"2.16.3\"] .progress-line .progress-line-fill{background:var(--hero);border-radius:inherit;max-width:100%;transition:width .3s}[data-gene-ui-version=\"2.16.3\"] .a-linear .progress-line{background:rgba(var(--background-sc-rgb),.19);height:1.6rem}[data-gene-ui-version=\"2.16.3\"] .a-linear .progress-line .progress-line-fill{animation:linear-animation .8s linear infinite;background:repeating-linear-gradient(-45deg,rgba(var(--background-sc-rgb),.34),rgba(var(--background-sc-rgb),.34) 1rem,#0000 1rem,#0000 2rem) 0 0/11.3rem 10rem}@keyframes linear-animation{to{background-position:11.3rem 0}}[data-gene-ui-version=\"2.16.3\"] .a-linear.s-small .progress-line{height:.8rem}[data-gene-ui-version=\"2.16.3\"] .progress-structure{align-items:center;display:flex}[data-gene-ui-version=\"2.16.3\"] .a-detailed>.progress-structure{min-height:5.2rem}[data-gene-ui-version=\"2.16.3\"] .a-box-bar>.progress-structure,[data-gene-ui-version=\"2.16.3\"] .a-box-circular>.progress-structure{min-height:7.3rem;padding:0 2rem}[data-gene-ui-version=\"2.16.3\"] .a-box-circular>.progress-structure{min-height:7.8rem}[data-gene-ui-version=\"2.16.3\"] .progress-structure .left-info{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .progress-structure .right-info{flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .progress-structure .blended{color:rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.3\"] .progress-structure .bc-icon-success{color:var(--confirm);margin:0 .8rem}[data-gene-ui-version=\"2.16.3\"] .progress-structure .left-additional-info{font:600 1.6rem/2rem var(--font-family);margin:0 4rem 0 0;width:5rem}html[dir=rtl] .progress-structure .left-additional-info{margin:0 0 0 4rem}[data-gene-ui-version=\"2.16.3\"] .progress-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner{--size:12rem;--borderSize:0.8rem;font:600 2.2rem/2.6rem var(--font-family);height:var(--size);position:relative;width:var(--size)}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner:hover .layer-text,[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner:not(:hover) .layer-action{opacity:0}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner .icon{cursor:pointer}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner:not(.s-very-small) .icon{font-size:3.6rem}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner.s-medium{--size:10rem;--borderSize:0.6rem;font-size:2rem}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner.s-small{--size:8rem;--borderSize:0.5rem;font-size:1.8rem}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner.s-small .icon{font-size:3rem}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner.s-very-small{--size:5rem;--borderSize:0.4rem;font-size:1.2rem;font-weight:700}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner svg{display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .circular-progress-inner svg path{stroke:var(--hero);stroke-dasharray:0,30rem;stroke-dashoffset:0;stroke-linecap:round;stroke-width:6;fill-opacity:0}[data-gene-ui-version=\"2.16.3\"] .circular-progress-back{border:var(--borderSize) solid rgba(var(--background-sc-rgb),.06);border-radius:100%;height:100%;width:100%}[data-gene-ui-version=\"2.16.3\"] .circular-progress-layer{display:flex;justify-content:center;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}[data-gene-ui-version=\"2.16.3\"] .circular-progress-layer>div{transition:opacity .3s}[data-gene-ui-version=\"2.16.3\"] .circular-progress-layer .layer-action{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}[data-gene-ui-version=\"2.16.3\"] .linear-progress-text{font:600 1.8rem/2.2rem var(--font-family);margin:.5rem 0 0;text-align:center;width:100%}[data-gene-ui-version=\"2.16.3\"] .on-hover-layers{align-items:center;display:flex;justify-content:center;min-height:4rem;min-width:4rem;position:relative}[data-gene-ui-version=\"2.16.3\"] .on-hover-layers>li{transition:opacity .3s}[data-gene-ui-version=\"2.16.3\"] .on-hover-layers>li:nth-child(2){height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .progress-holder:hover .on-hover-layers>li:nth-child(2){opacity:1}[data-gene-ui-version=\"2.16.3\"] .progress-holder:hover .on-hover-layers>li:nth-last-child(2){opacity:0}";
-styleInject(css_248z);
-
-function Progress(_ref) {
-  let {
-    title,
-    selectedAppearance,
-    selectedSize,
-    fileName,
-    fullFileSize,
-    selectedCircularAppearance,
-    percentage,
-    loaderStatuses,
-    color,
-    showCancel,
-    showRestart,
-    onCancel,
-    onRestart,
-    pathStyle,
-    ...restProps
-  } = _ref;
-  const [percentageUpdated, setPercentageUpdated] = useState(percentage);
-  useEffect(() => {
-    const flooredPercentage = percentage >= 100 ? 100 : percentage || 0;
-    setPercentageUpdated(flooredPercentage);
-  }, [percentage]);
-  const currentFileSize = fullFileSize * percentageUpdated / 100;
-  const percentageStyle = "".concat(percentageUpdated, "%");
-  const restartHandler = useCallback(e => {
-    onRestart(e);
-  }, [onRestart]);
-  const cancelHandler = useCallback(e => {
-    onCancel && onCancel(e);
-  }, [onCancel]);
-  const statusExternal = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "(", percentageStyle, " ", color === 'default' || color === 'success' ? loaderStatuses[0] : loaderStatuses[1], ")");
-  const circularProgress = size => /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('circular-progress-inner', "s-".concat(size || selectedSize))
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "circular-progress-back"
-  }), /*#__PURE__*/React__default.createElement("svg", {
-    viewBox: "0 0 100 100"
-  }, percentageUpdated && /*#__PURE__*/React__default.createElement("path", {
-    d: "M 50,50 m 0,-47a 47,47 0 1 1 0,94a 47,47 0 1 1 0,-94",
-    style: {
-      strokeDasharray: "".concat(300 * percentageUpdated / 100, "px, 300px"),
-      ...pathStyle
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "circular-progress-layer"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames({
-      'layer-text': selectedAppearance === 'circular',
-      'to-be-colored': selectedAppearance === 'circular' && color !== 'default'
-    })
-  }, selectedCircularAppearance === 'show-percentage' ? percentageStyle : fileName), selectedAppearance === 'circular' && showCancel && /*#__PURE__*/React__default.createElement("div", {
-    className: "layer-action"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-clear"
-  }))));
-  const progressActions = /*#__PURE__*/React__default.createElement("div", {
-    className: "progress-actions"
-  }, color === 'fail' && showRestart && /*#__PURE__*/React__default.createElement(Button, {
-    size: "big",
-    color: "danger",
-    onClick: restartHandler,
-    appearance: "minimal",
-    icon: "bc-icon-reset"
-  }), showCancel && /*#__PURE__*/React__default.createElement("ul", {
-    className: "on-hover-layers"
-  }, color === 'success' && percentage === 100 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-success"
-  })), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
-    size: "big",
-    color: "default",
-    onClick: cancelHandler,
-    appearance: "minimal",
-    icon: "bc-icon-clear"
-  }))));
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('progress-holder', "a-".concat(selectedAppearance), "s-".concat(selectedSize), "c-".concat(color))
-  }, restProps), selectedAppearance === 'circular' ? circularProgress() : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectedAppearance !== 'linear' && /*#__PURE__*/React__default.createElement("ul", {
-    className: "progress-structure"
-  }, selectedAppearance === 'box-circular' && /*#__PURE__*/React__default.createElement("li", {
-    className: "left-additional-info"
-  }, circularProgress('very-small')), selectedAppearance === 'box-bar' && /*#__PURE__*/React__default.createElement("li", {
-    className: "left-additional-info"
-  }, percentageStyle), /*#__PURE__*/React__default.createElement("li", {
-    className: "left-info"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "progress-title ellipsis-text"
-  }, title), selectedAppearance !== 'default' && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('progress-sub-title', {
-      'to-be-colored': color !== 'default' && selectedAppearance !== 'box-circular' && selectedAppearance !== 'box-bar'
-    })
-  }, fileSizeDisplay(currentFileSize), " / ", fileSizeDisplay(fullFileSize), " ", selectedAppearance === 'detailed' && statusExternal)), /*#__PURE__*/React__default.createElement("li", {
-    className: "right-info"
-  }, selectedAppearance === 'default' ? /*#__PURE__*/React__default.createElement("div", {
-    className: classnames({
-      'to-be-colored': color !== 'default',
-      blended: percentageUpdated === 0
-    })
-  }, percentageStyle) : progressActions)), selectedAppearance !== 'box-circular' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "progress-line"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "progress-line-fill",
-    style: {
-      width: percentageStyle
-    }
-  })), selectedAppearance === 'linear' && /*#__PURE__*/React__default.createElement("div", {
-    className: "linear-progress-text"
-  }, title))));
-}
-Progress.propTypes = {
-  /**
-   * Text title for component
-   */
-  title: PropTypes.string,
-  /**
-   * displays filename when selectedCircularAppearance's value is [show-percentage]
-   */
-  fileName: PropTypes.string,
-  /**
-   * Displays cancel button
-   */
-  showCancel: PropTypes.bool,
-  /**
-   * Displays reset button
-   */
-  showRestart: PropTypes.bool,
-  /**
-   * The value of the progress indicator
-   */
-  percentage: PropTypes.number,
-  /**
-   * Size of current file
-   */
-  fullFileSize: PropTypes.number,
-  /**
-   * Style for path
-   */
-  pathStyle: PropTypes.object,
-  /**
-   * Array of text with length of two.
-   * If selectedAppearance value is not default
-   * It will display either first of second item from array based on color value
-   */
-  loaderStatuses: PropTypes.array.isRequired,
-  /**
-   * Controls color of progress bar
-   */
-  color: PropTypes.oneOf(['default', 'fail', 'success']),
-  /**
-   * Controls size of progress bar
-   */
-  selectedSize: PropTypes.oneOf(['big', 'medium', 'small', 'very-small']),
-  /**
-   * Displays either percent value or file value inside circular progress bar
-   */
-  selectedCircularAppearance: PropTypes.oneOf(['show-percentage', 'show-file-name']),
-  /**
-   * Controls appearance of progress bar
-   */
-  selectedAppearance: PropTypes.oneOf(['default', 'detailed', 'circular', 'box-bar', 'box-circular', 'linear']),
-  /**
-   * Fires event when user clicks on cancel button
-   * (event: Event) => void
-   */
-  onCancel: PropTypes.func,
-  /**
-   * Fires event when user clicks on restart button
-   * (event: Event) => void
-   */
-  onRestart: PropTypes.func
-};
-Progress.defaultProps = {
-  onRestart: noop,
-  onCancel: noop,
-  percentage: 0,
-  color: 'default',
-  showCancel: true,
-  showRestart: true,
-  selectedSize: 'small',
-  selectedAppearance: 'default',
-  selectedCircularAppearance: 'show-percentage'
-};
-
-export { Progress as default };