@geneui/components
Version:
The Gene UI components library designed for BI tools
201 lines (197 loc) • 14.3 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.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-a0e4e333.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.5\"] .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.5\"] .progress-holder:not(.a-circular){width:100%}[data-gene-ui-version=\"2.16.5\"] .progress-holder.a-default.s-medium{font-size:1.4rem}[data-gene-ui-version=\"2.16.5\"] .progress-holder.a-default.s-small{font-size:1.2rem}[data-gene-ui-version=\"2.16.5\"] .progress-holder.a-default .progress-line{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .progress-holder:not(.a-default){font:700 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .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.5\"] .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.5\"] .progress-holder .to-be-colored{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .progress-holder.a-box-bar,[data-gene-ui-version=\"2.16.5\"] .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.5\"] .progress-holder.a-box-circular{border-radius:2rem}[data-gene-ui-version=\"2.16.5\"] .progress-line{background:rgba(var(--background-sc-rgb),.06);border-radius:1rem;display:flex;height:.8rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .a-box-bar>.progress-line{background:none;border-radius:0;height:.5rem}[data-gene-ui-version=\"2.16.5\"] .s-medium .progress-line{height:.6rem}[data-gene-ui-version=\"2.16.5\"] .s-small .progress-line{height:.3rem}[data-gene-ui-version=\"2.16.5\"] .progress-line .progress-line-fill{background:var(--hero);border-radius:inherit;max-width:100%;transition:width .3s}[data-gene-ui-version=\"2.16.5\"] .a-linear .progress-line{background:rgba(var(--background-sc-rgb),.19);height:1.6rem}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .a-linear.s-small .progress-line{height:.8rem}[data-gene-ui-version=\"2.16.5\"] .progress-structure{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .a-detailed>.progress-structure{min-height:5.2rem}[data-gene-ui-version=\"2.16.5\"] .a-box-bar>.progress-structure,[data-gene-ui-version=\"2.16.5\"] .a-box-circular>.progress-structure{min-height:7.3rem;padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .a-box-circular>.progress-structure{min-height:7.8rem}[data-gene-ui-version=\"2.16.5\"] .progress-structure .left-info{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .progress-structure .right-info{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .progress-structure .blended{color:rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.16.5\"] .progress-structure .bc-icon-success{color:var(--confirm);margin:0 .8rem}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .progress-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .circular-progress-inner:hover .layer-text,[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner:not(:hover) .layer-action{opacity:0}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner .icon{cursor:pointer}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner:not(.s-very-small) .icon{font-size:3.6rem}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner.s-medium{--size:10rem;--borderSize:0.6rem;font-size:2rem}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner.s-small{--size:8rem;--borderSize:0.5rem;font-size:1.8rem}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner.s-small .icon{font-size:3rem}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner.s-very-small{--size:5rem;--borderSize:0.4rem;font-size:1.2rem;font-weight:700}[data-gene-ui-version=\"2.16.5\"] .circular-progress-inner svg{display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .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.5\"] .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.5\"] .circular-progress-layer>div{transition:opacity .3s}[data-gene-ui-version=\"2.16.5\"] .circular-progress-layer .layer-action{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .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.5\"] .on-hover-layers>li{transition:opacity .3s}[data-gene-ui-version=\"2.16.5\"] .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.5\"] .progress-holder:hover .on-hover-layers>li:nth-child(2){opacity:1}[data-gene-ui-version=\"2.16.5\"] .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 };