@geneui/components 2.11.1

package/Profile.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import './index-00fe8887.js';
+import './useDeviceType-dd51db38.js';
+import './useClickOutside-5183e396.js';
+import './index-6ff23041.js';
+import './Icon.js';
+import './Avatar.js';
+import './index-702bf24a.js';
+import './Tooltip.js';
+import './Menu.js';
+export { P as default } from './index-0cf65939.js';
+import './globalStyling-9c60a159.js';
+import './ExtendedInput.js';
+import './Search.js';
+import './TextLink.js';
+import './Button.js';
+import './Label.js';
+import './Switcher.js';
+import './Divider.js';
+import './Radio.js';
+import './Paper.js';
+import './Portal.js';
+import './Badge.js';
+import './BusyLoader.js';
+import './SkeletonLoader.js';
+import './Scrollbar.js';
+import './Time.js';
+import './Empty.js';
+import './index-a4635754.js';
+import './Title.js';
+import './Image.js';
+import './KeyValue.js';
+import './Option.js';
+import './QRCode.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './rangeAndSlider-20599da4.js';
+import './style-inject.es-746bb8ed.js';
+import './useWidth-9f4647f8.js';
+import './useWindowSize-80369d76.js';
+import './index-122432cd.js';
+import './GeneUIProvider.js';
+import './debounce-4419bc2f.js';
+import './Popover-f4d1cac0.js';
+import './useEllipsisDetection-ef536015.js';
+import './Editor.js';
+import './useMount-6fef51a5.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useKeyDown-38102ae7.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './index-5cea9a7d.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './Tabs.js';
+import './Steps.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './Slider.js';
+import './Pagination.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './index-b7a33c58.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';

package/Progress.js

@@ -0,0 +1,200 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { c as classnames } from './index-6ff23041.js';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { f as fileSizeDisplay, n as noop } from './index-ac59cb10.js';
+import Icon from './Icon.js';
+import Button from './Button.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .progress-holder:not(.a-circular){width:100%}[data-gene-ui-version=\"2.11.0\"] .progress-holder.a-default.s-medium{font-size:1.4rem}[data-gene-ui-version=\"2.11.0\"] .progress-holder.a-default.s-small{font-size:1.2rem}[data-gene-ui-version=\"2.11.0\"] .progress-holder.a-default .progress-line{margin:.5rem 0 0}[data-gene-ui-version=\"2.11.0\"] .progress-holder:not(.a-default){font:700 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .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.11.0\"] .progress-holder .to-be-colored{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .progress-holder.a-box-bar,[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .progress-holder.a-box-circular{border-radius:2rem}[data-gene-ui-version=\"2.11.0\"] .progress-line{background:rgba(var(--background-sc-rgb),.06);border-radius:1rem;display:flex;height:.8rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .a-box-bar>.progress-line{background:none;border-radius:0;height:.5rem}[data-gene-ui-version=\"2.11.0\"] .s-medium .progress-line{height:.6rem}[data-gene-ui-version=\"2.11.0\"] .s-small .progress-line{height:.3rem}[data-gene-ui-version=\"2.11.0\"] .progress-line .progress-line-fill{background:var(--hero);border-radius:inherit;max-width:100%;transition:width .3s}[data-gene-ui-version=\"2.11.0\"] .a-linear .progress-line{background:rgba(var(--background-sc-rgb),.19);height:1.6rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .a-linear.s-small .progress-line{height:.8rem}[data-gene-ui-version=\"2.11.0\"] .progress-structure{align-items:center;display:flex}[data-gene-ui-version=\"2.11.0\"] .a-detailed>.progress-structure{min-height:5.2rem}[data-gene-ui-version=\"2.11.0\"] .a-box-bar>.progress-structure,[data-gene-ui-version=\"2.11.0\"] .a-box-circular>.progress-structure{min-height:7.3rem;padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .a-box-circular>.progress-structure{min-height:7.8rem}[data-gene-ui-version=\"2.11.0\"] .progress-structure .left-info{flex:auto;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .progress-structure .right-info{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .progress-structure .blended{color:rgba(var(--background-sc-rgb),.06)}[data-gene-ui-version=\"2.11.0\"] .progress-structure .bc-icon-success{color:var(--confirm);margin:0 .8rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .progress-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .circular-progress-inner:hover .layer-text,[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner:not(:hover) .layer-action{opacity:0}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner .icon{cursor:pointer}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner:not(.s-very-small) .icon{font-size:3.6rem}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner.s-medium{--size:10rem;--borderSize:0.6rem;font-size:2rem}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner.s-small{--size:8rem;--borderSize:0.5rem;font-size:1.8rem}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner.s-small .icon{font-size:3rem}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner.s-very-small{--size:5rem;--borderSize:0.4rem;font-size:1.2rem;font-weight:700}[data-gene-ui-version=\"2.11.0\"] .circular-progress-inner svg{display:block;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .circular-progress-layer{display:flex;justify-content:center;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}[data-gene-ui-version=\"2.11.0\"] .circular-progress-layer>div{transition:opacity .3s}[data-gene-ui-version=\"2.11.0\"] .circular-progress-layer .layer-action{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .on-hover-layers{align-items:center;display:flex;justify-content:center;min-height:4rem;min-width:4rem;position:relative}[data-gene-ui-version=\"2.11.0\"] .on-hover-layers>li{transition:opacity .3s}[data-gene-ui-version=\"2.11.0\"] .on-hover-layers>li:nth-child(2){height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .progress-holder:hover .on-hover-layers>li:nth-child(2){opacity:1}[data-gene-ui-version=\"2.11.0\"] .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: propTypesExports.string,
+  /**
+   * displays filename when selectedCircularAppearance's value is [show-percentage]
+   */
+  fileName: propTypesExports.string,
+  /**
+   * Displays cancel button
+   */
+  showCancel: propTypesExports.bool,
+  /**
+   * Displays reset button
+   */
+  showRestart: propTypesExports.bool,
+  /**
+   * The value of the progress indicator
+   */
+  percentage: propTypesExports.number,
+  /**
+   * Size of current file
+   */
+  fullFileSize: propTypesExports.number,
+  /**
+   * Style for path
+   */
+  pathStyle: propTypesExports.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: propTypesExports.array.isRequired,
+  /**
+   * Controls color of progress bar
+   */
+  color: propTypesExports.oneOf(['default', 'fail', 'success']),
+  /**
+   * Controls size of progress bar
+   */
+  selectedSize: propTypesExports.oneOf(['big', 'medium', 'small', 'very-small']),
+  /**
+   * Displays either percent value or file value inside circular progress bar
+   */
+  selectedCircularAppearance: propTypesExports.oneOf(['show-percentage', 'show-file-name']),
+  /**
+   * Controls appearance of progress bar
+   */
+  selectedAppearance: propTypesExports.oneOf(['default', 'detailed', 'circular', 'box-bar', 'box-circular', 'linear']),
+  /**
+   * Fires event when user clicks on cancel button
+   * (event: Event) => void
+   */
+  onCancel: propTypesExports.func,
+  /**
+   * Fires event when user clicks on restart button
+   * (event: Event) => void
+   */
+  onRestart: propTypesExports.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 };