sag_components 1.0.97 → 1.0.99

package/dist/stories/components/Dropdown.js

@@ -70,6 +70,10 @@ var Dropdown = function Dropdown(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     currentOption = _useState4[0],
     setCurrentOption = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    defaultValueSetFlag = _useState6[0],
+    setDefaultValueSetFlag = _useState6[1];
   (0, _react.useEffect)(function () {
     var delayDebounceFn = setTimeout(function () {
       onInputChange(currentInputValue);
@@ -131,6 +135,7 @@ var Dropdown = function Dropdown(_ref) {
       syntheticBaseEvent: event,
       newValue: newValue
     });
+    setDefaultValueSetFlag(true);
     onChange({
       syntheticBaseEvent: event,
       newValue: newValue
@@ -173,8 +178,10 @@ var Dropdown = function Dropdown(_ref) {
       onInputChange: function onInputChange(event, newInputValue) {
         onInputChangeHandler(event, newInputValue);
       },
-      disablePortal: true,
-      value: defaultValue && !(currentOption !== null && currentOption !== void 0 && currentOption.newValue) ? defaultValue : currentOption === null || currentOption === void 0 ? void 0 : currentOption.newValue,
+      disablePortal: true
+      // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
+      ,
+      value: defaultValue && !defaultValueSetFlag ? defaultValue : currentOption === null || currentOption === void 0 ? void 0 : currentOption.newValue,
       id: "combo-box",
       options: options,
       sx: {

package/dist/stories/components/OneColumnContainer.js

@@ -13,13 +13,17 @@ var _OneColumnContainer = require("./OneColumnContainer.style");
 var _InfoIcon = require("./InfoIcon");
 var _core = require("@dnd-kit/core");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["children", "display", "gridTemplateColumns", "nodeRef", "itemClass", "divStyle", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
+var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
+require("react-loading-skeleton/dist/skeleton.css");
+var _excluded = ["children", "display", "isLoading", "gridTemplateColumns", "nodeRef", "itemClass", "divStyle", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
 /**
  * Primary UI component for user interaction
  */
 var OneColumnContainer = function OneColumnContainer(_ref) {
   var children = _ref.children,
-    display = _ref.display,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
+    isLoading = _ref.isLoading,
     gridTemplateColumns = _ref.gridTemplateColumns,
     nodeRef = _ref.nodeRef,
     itemClass = _ref.itemClass,
@@ -44,15 +48,42 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "mainDiv",
     className: props.className,
     style: {
+      alignItems: "flex-start",
+      justifyContent: "center",
       width: width,
       height: height,
       display: display,
       gridTemplateColumns: gridTemplateColumns
     },
     ref: nodeRef
-  }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+  }, children, isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    id: "loadingDiv",
+    style: {
+      marginTop: '20px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      width: "76%",
+      height: "65%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
+    baseColor: "#EAEAEA"
+  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    width: width.replace('px', '') * 0.76,
+    height: 45,
+    containerClassName: "avatar-skeleton"
+  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
+    enableAnimation: true,
+    count: 4,
+    width: width.replace('px', '') * 0.76,
+    height: 10,
+    containerClassName: "avatar-skeleton"
+  }))), !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
     clicked: clicked,
     width: width,
     height: height
@@ -60,7 +91,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     onClick: onInfoClick
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     clicked: clicked
-  }))));
+  })))));
 };
 exports.OneColumnContainer = OneColumnContainer;
 OneColumnContainer.defaultProps = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -55,6 +55,7 @@
     "classnames": "^2.3.2",
     "hoopy": "^0.1.4",
     "react-css-modules": "^4.7.11",
+    "react-loading-skeleton": "^3.3.1",
     "react-scripts": "5.0.1",
     "recharts": "^2.6.2"
   },