sag_components 1.0.98 → 1.0.100

package/dist/stories/components/Dropdown.js

@@ -57,7 +57,9 @@ var Dropdown = function Dropdown(_ref) {
     inputRef = _ref.inputRef,
     defaultValue = _ref.defaultValue,
     _ref$allowedInput = _ref.allowedInput,
-    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput;
+    allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
+    _ref$reset = _ref.reset,
+    reset = _ref$reset === void 0 ? false : _ref$reset;
   /**
    *  SAG Dropdown
    */
@@ -70,10 +72,12 @@ 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];
+  //const [defaultValueSetFlag, setDefaultValueSetFlag] = useState(false);
+
+  // useEffect(() => {
+  //   reset ? setDefaultValueSetFlag(false) : null;
+  // }, [reset]);
+
   (0, _react.useEffect)(function () {
     var delayDebounceFn = setTimeout(function () {
       onInputChange(currentInputValue);
@@ -135,7 +139,7 @@ var Dropdown = function Dropdown(_ref) {
       syntheticBaseEvent: event,
       newValue: newValue
     });
-    setDefaultValueSetFlag(true);
+    //setDefaultValueSetFlag(true);
     onChange({
       syntheticBaseEvent: event,
       newValue: newValue
@@ -172,6 +176,7 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
     }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      key: reset,
       onChange: function onChange(event, newValue) {
         onChangeHandler(event, newValue);
       },
@@ -180,8 +185,13 @@ var Dropdown = function Dropdown(_ref) {
       },
       disablePortal: true
       // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
+      // value={
+      //   defaultValue && !defaultValueSetFlag
+      //     ? defaultValue
+      //     : currentOption?.newValue
+      // }
       ,
-      value: defaultValue && !defaultValueSetFlag ? defaultValue : currentOption === null || currentOption === void 0 ? void 0 : currentOption.newValue,
+      defaultValue: defaultValue,
       id: "combo-box",
       options: options,
       sx: {
@@ -237,6 +247,8 @@ var Dropdown = function Dropdown(_ref) {
     return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
       theme: theme
     }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      key: reset,
+      defaultValue: defaultValue,
       style: {
         width: width
       },

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.98",
+  "version": "1.0.100",
   "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"
   },