sag_components 1.0.397 → 1.0.398

package/dist/stories/components/FilterContainer.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FilterContainer = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FilterContainer = require("./FilterContainer.style");
-var _excluded = ["itemClass", "nodeRef"];
 var _templateObject;
-var Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-var FilterContainer = exports.FilterContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var itemClass = _ref.itemClass,
-    nodeRef = _ref.nodeRef,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+const Card = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+const FilterContainer = exports.FilterContainer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    itemClass,
+    nodeRef,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_FilterContainer.FilterDivContainer, {
     className: itemClass,
     style: {

package/dist/stories/components/FilterContainer.style.js

@@ -8,6 +8,6 @@ exports.FilterFooterContent = exports.FilterDivContent = exports.FilterDivContai
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background-color: white;\n"])));
-var FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div {\n        margin: 25px;\n    }\n"])));
-var FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 10%;\n"])));
+const FilterDivContainer = exports.FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background-color: white;\n"])));
+const FilterDivContent = exports.FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div {\n        margin: 25px;\n    }\n"])));
+const FilterFooterContent = exports.FilterFooterContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 10%;\n"])));

package/dist/stories/components/IconButton.js

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.IconButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _DownloadIcon = require("./icons/DownloadIcon");
 var _DocumentIcon = require("./icons/DocumentIcon");
@@ -17,22 +15,43 @@ var _MaintenanceIcon = require("./icons/MaintenanceIcon");
 var _EyeIcon = require("./icons/EyeIcon");
 var _IconButton = require("./IconButton.style");
 /* IconButton */
-var IconButton = exports.IconButton = function IconButton(props) {
-  var contentColor = props.contentColor,
-    buttonText = props.buttonText,
-    backgroundColor = props.backgroundColor,
-    borderColor = props.borderColor,
-    borderRadius = props.borderRadius,
-    iconName = props.iconName,
-    iconWidth = props.iconWidth,
-    iconHeight = props.iconHeight,
-    disabled = props.disabled,
-    onClick = props.onClick;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    mouseDownPressed = _useState2[0],
-    setMouseDownPressed = _useState2[1];
-  var getIcon = function getIcon(icon) {
+const IconButton = props => {
+  const {
+    downloadStatus,
+    contentColor,
+    buttonText,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    iconName,
+    iconWidth,
+    iconHeight,
+    disabled,
+    inProgress,
+    onClick,
+    onCancelClick
+  } = props;
+  const [mouseDownPressed, setMouseDownPressed] = (0, _react.useState)(false);
+  const [progress, setProgress] = (0, _react.useState)(0);
+  const incrementProgress = () => {
+    if (downloadStatus === 'in progress' && progress <= 90) {
+      const interval = setInterval(() => {
+        setProgress(prevProgress => {
+          const newProgress = prevProgress + 1;
+          if (newProgress >= 90) {
+            clearInterval(interval);
+          }
+          return newProgress;
+        });
+      }, 500);
+    } else if (downloadStatus === 'success') {
+      setProgress(0);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    incrementProgress();
+  }, [downloadStatus]);
+  const getIcon = icon => {
     switch (icon) {
       case 'download':
         return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
@@ -80,29 +99,32 @@ var IconButton = exports.IconButton = function IconButton(props) {
         return '';
     }
   };
-  var onMouseDownHandler = function onMouseDownHandler() {
+  const onMouseDownHandler = () => {
     if (disabled) return;
     setMouseDownPressed(true);
   };
-  var onMouseUpHandler = function onMouseUpHandler() {
+  const onMouseUpHandler = () => {
     if (disabled) return;
     setMouseDownPressed(false);
   };
-  var onPointerOutHandler = function onPointerOutHandler() {
+  const onPointerOutHandler = () => {
     if (disabled) return;
     if (!mouseDownPressed) return;
     setMouseDownPressed(false);
   };
-  var getClassNameExtention = function getClassNameExtention() {
+  const getClassNameExtention = () => {
     if (disabled) return 'disabled';
     if (mouseDownPressed) return 'mouseDownPressed';
     return '';
   };
-  var onClickHandler = function onClickHandler(event) {
+  const onClickHandler = event => {
     if (disabled) return;
     onClick(event);
   };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
+  const onCancelClickHandler = event => {
+    onCancelClick(event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
     className: getClassNameExtention(),
     backgroundColor: backgroundColor,
     borderColor: borderColor,
@@ -111,13 +133,20 @@ var IconButton = exports.IconButton = function IconButton(props) {
     onMouseDown: onMouseDownHandler,
     onMouseUp: onMouseUpHandler,
     onPointerOut: onPointerOutHandler,
-    onClick: function onClick(event) {
+    inProgress: inProgress,
+    progress: progress,
+    onClick: event => {
       onClickHandler(event);
     }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText));
+  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), inProgress && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
+    onClick: event => onCancelClickHandler(event)
+  }, "Click here to cancel"));
 };
+exports.IconButton = IconButton;
 var _default = exports.default = IconButton;
 IconButton.defaultProps = {
+  // downloadStatus: 'fail',
+  downloadStatus: 'in progress',
   buttonText: '',
   iconName: 'eye',
   contentColor: '#212121',
@@ -127,5 +156,7 @@ IconButton.defaultProps = {
   iconHeight: 18,
   iconWidth: 18,
   disabled: false,
-  onClick: function onClick() {}
+  inProgress: false,
+  onClick: () => {},
+  onCancelClick: () => {}
 };

package/dist/stories/components/IconButton.style.js

@@ -1,20 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpanText = exports.IconButtonContainer = void 0;
+exports.SpanText = exports.IconButtonContainer = exports.CancelClick = exports.ButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
-var IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;  \n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  transition: all .3s;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n  &.disabled {\n    background-color: #ccc;\n  }\n"])), function (props) {
-  return props.color;
-}, function (props) {
-  return props.borderRadius;
-}, function (props) {
-  return props.borderColor.toString();
-}, function (props) {
-  return props.backgroundColor.toString();
-});
-var SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  text-align: center;\n"])));
+const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  margin-bottom: 5px;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: 'In Progress';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.progress, props.progress + 1, props => props.borderRadius));
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n"])));