@equinor/echo-framework 0.8.1 → 0.8.4

package/dist/src/coreApplication/EchoBarComponent.js

@@ -0,0 +1,190 @@
+'use strict';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var echoBase = require('@equinor/echo-base');
+
+var echoComponents = require('@equinor/echo-components');
+
+var EchoCore = require('@equinor/echo-core');
+
+var edsCoreReact = require('@equinor/eds-core-react');
+
+var React = require('react');
+
+var reactRouterDom = require('react-router-dom');
+
+var logo_ee = require('../icons/logo_ee.js');
+
+var EchoContent_module = require('./EchoContent.module.css.js');
+
+function _interopDefaultLegacy(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var EchoBarComponent = function EchoBarComponent(_ref) {
+  var isLandscape = _ref.isLandscape;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shouldRenderBar = _React$useState2[0],
+      setShouldRenderBar = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeKey = _React$useState4[0],
+      setActiveKey = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isSyncing = _React$useState6[0],
+      setIsSyncing = _React$useState6[1];
+
+  var _EchoCore$usePanels = EchoCore.usePanels(),
+      setActivePanel = _EchoCore$usePanels.setActivePanel;
+
+  var goToInternalLink = EchoCore.useInternalLink();
+
+  var _EchoCore$usePlantSet = EchoCore.usePlantSettings(),
+      selectedInstCode = _EchoCore$usePlantSet.instCode;
+
+  var history = reactRouterDom.useHistory();
+  var shouldRenderBottomBar = React.useCallback(function () {
+    var isMounted = true;
+
+    if (window.innerWidth < 768 && !isLandscape || window.innerWidth < 927 && isLandscape && isMounted) {
+      setShouldRenderBar(true);
+    } else {
+      setShouldRenderBar(false);
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  }, [isLandscape]);
+  React.useEffect(function () {
+    var isMounted = true;
+    var unSubscribeSyncing = echoBase.eventHub.subscribe('isSyncing', function (active) {
+      if (isMounted) {
+        setIsSyncing(active);
+      }
+    });
+    return function () {
+      isMounted = false;
+      unSubscribeSyncing();
+    };
+  });
+
+  var onClickButton = function onClickButton(key) {
+    setActivePanel('');
+
+    if (key === activeKey) {
+      if (key === 'menu' || key === 'search') {
+        setActivePanel('');
+      } else {
+        history.go(-1);
+      }
+
+      setActiveKey('');
+    } else {
+      setActiveKey(key);
+
+      switch (key) {
+        case 'home':
+          return history.push("/?instCode=".concat(selectedInstCode));
+
+        case 'search':
+          return setActivePanel(EchoCore.ECHO_CORE_SEARCH);
+
+        case 'camera':
+          return goToInternalLink('/camera');
+
+        case 'menu':
+          return setActivePanel(EchoCore.ECHO_CORE_MAIN);
+
+        default:
+          return null;
+      }
+    }
+
+    setActiveKey('');
+  };
+
+  React.useEffect(function () {
+    shouldRenderBottomBar();
+    window.addEventListener('resize', shouldRenderBottomBar);
+    return function () {
+      window.removeEventListener('resize', shouldRenderBottomBar);
+    };
+  }, [shouldRenderBottomBar, shouldRenderBar]);
+  var EchoIcon = logo_ee.icon;
+  return shouldRenderBar ? /*#__PURE__*/React__default["default"].createElement(echoComponents.EchoBottomBar, {
+    style: {
+      zIndex: 'var( --echo-framework-z-level-bottom-bar)'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'home' ? EchoContent_module["default"].activeButton : '')
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    variant: "ghost_icon",
+    onClick: function onClick() {
+      return onClickButton('home');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(EchoIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'search' ? EchoContent_module["default"].activeButton : '')
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    variant: "ghost_icon",
+    onClick: function onClick() {
+      return onClickButton('search');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
+    name: 'search',
+    color: echoComponents.themeConst.echoText
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'camera' ? EchoContent_module["default"].activeButton : '')
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    variant: "ghost_icon",
+    onClick: function onClick() {
+      return onClickButton('camera');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
+    name: 'camera',
+    color: echoComponents.themeConst.echoText
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(EchoContent_module["default"].barButtons, " ").concat(activeKey === 'menu' ? EchoContent_module["default"].activeButton : '')
+  }, /*#__PURE__*/React__default["default"].createElement(edsCoreReact.Button, {
+    variant: "ghost_icon",
+    onClick: function onClick() {
+      return onClickButton('menu');
+    }
+  }, isSyncing ? /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
+    className: EchoContent_module["default"].spinningIcon,
+    color: echoComponents.themeConst.echoText,
+    name: 'sync'
+  }) : /*#__PURE__*/React__default["default"].createElement(echoComponents.Icon, {
+    name: 'menu',
+    color: echoComponents.themeConst.echoText
+  })))) : null;
+};
+
+exports.EchoBarComponent = EchoBarComponent;
+exports["default"] = EchoBarComponent;

package/dist/src/coreApplication/EchoContent.js

@@ -14,6 +14,8 @@ var corePanelLeft = require('../components/panel/corePanelLeft.js');
 
 var corePanelRight = require('../components/panel/corePanelRight.js');
 
+var EchoContent_module = require('./EchoContent.module.css.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -24,8 +26,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var EchoContent = function EchoContent(_ref) {
   var children = _ref.children,
-      Legend = _ref.Legend;
-  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], null), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], null), children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null));
+      Legend = _ref.Legend,
+      isToggleButtonVisible = _ref.isToggleButtonVisible;
+  return /*#__PURE__*/React__default["default"].createElement(EchoCore.ModuleContextProvider, null, /*#__PURE__*/React__default["default"].createElement(corePanelLeft["default"], {
+    isToggleButtonVisible: isToggleButtonVisible
+  }), /*#__PURE__*/React__default["default"].createElement(corePanelRight["default"], {
+    isToggleButtonVisible: isToggleButtonVisible
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: EchoContent_module["default"].echoContentContainer
+  }, children, Legend && /*#__PURE__*/React__default["default"].createElement(Legend, null)));
 };
 
 exports.EchoContent = EchoContent;

package/dist/src/coreApplication/EchoContent.module.css.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".EchoContent-module_echoContent__DgKg-{height:100%;padding:env(safe-area-inset-top,20px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,20px) env(safe-area-inset-left,20px);width:100%}.EchoContent-module_mobileWrapper__I1UNf{height:calc(100% - 60px);position:relative}.EchoContent-module_echoContentContainer__-yhpr{height:100%}.EchoContent-module_echoModuleContainer__NsbOv{width:100%}.EchoContent-module_barButtons__F8xrV{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.EchoContent-module_activeButton__5xhQu{background-color:var(--equiGreen3);border-top:2px solid var(--equiGreen1)}@media screen and (max-width:927px) and (orientation:landscape){.EchoContent-module_activeButton__5xhQu{border-right:2px solid var(--equiGreen1);border-top:0}}@media screen and (orientation:landscape){.EchoContent-module_echoContentContainer__-yhpr{display:flex;flex-direction:row}}@media screen and (orientation:portrait){.EchoContent-module_echoModuleContainer__NsbOv{height:calc(100% - 48px);overflow:hidden}}@keyframes EchoContent-module_spinAnimation__gNXNq{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.EchoContent-module_spinningIcon__am10d{animation:EchoContent-module_spinAnimation__gNXNq 1.5s linear infinite reverse}";
+var style = {
+  "echoContent": "EchoContent-module_echoContent__DgKg-",
+  "mobileWrapper": "EchoContent-module_mobileWrapper__I1UNf",
+  "echoContentContainer": "EchoContent-module_echoContentContainer__-yhpr",
+  "echoModuleContainer": "EchoContent-module_echoModuleContainer__NsbOv",
+  "barButtons": "EchoContent-module_barButtons__F8xrV",
+  "activeButton": "EchoContent-module_activeButton__5xhQu",
+  "spinningIcon": "EchoContent-module_spinningIcon__am10d",
+  "spinAnimation": "EchoContent-module_spinAnimation__gNXNq"
+};
+styleInject_es["default"](css_248z);
+exports["default"] = style;

package/dist/src/globalStyles.css.js

@@ -2,5 +2,5 @@
 
 var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ":root{--echo-framework-z-level-panel:500;--echo-framework-z-level-scrim:1450}[class^=Scrim__StyledScrim]{z-index:var(--echo-framework-z-level-scrim)!important}";
+var css_248z = ":root{--echo-framework-z-level-panel:500;--echo-framework-z-level-bottom-bar:1000;--echo-framework-z-level-scrim:1450}[class^=Scrim__StyledScrim]{z-index:var(--echo-framework-z-level-scrim)!important}";
 styleInject_es["default"](css_248z);

package/dist/src/hooks/hookLibrary.js

@@ -25,6 +25,7 @@ exports.RegisteredHookName = void 0;
   RegisteredHookName["useIsContextMenuInfoLoading"] = "useIsContextMenuInfoLoading";
   RegisteredHookName["useSetActiveCommPackNo"] = "useSetActiveCommPackNo";
   RegisteredHookName["useSetActiveMcPackNo"] = "useSetActiveMcPackNo";
+  RegisteredHookName["useDeviceOrientation"] = "useDeviceOrientation";
 })(exports.RegisteredHookName || (exports.RegisteredHookName = {}));
 
 var HookLibrary = Object.freeze({
@@ -81,6 +82,14 @@ var HookLibrary = Object.freeze({
    */
   useSetActiveMcPackNo: function useSetActiveMcPackNo() {
     return EchoCore__default["default"].echoHookRegistry.getHookByName(exports.RegisteredHookName.useSetActiveMcPackNo)();
+  },
+
+  /**
+   * Hook for detecting device orientation from native devices.
+   * @returns {DeviceOrientation}
+   */
+  useDeviceOrientation: function useDeviceOrientation() {
+    return EchoCore__default["default"].echoHookRegistry.getHookByName(exports.RegisteredHookName.useDeviceOrientation)();
   }
 });
 exports.HookLibrary = HookLibrary;

package/dist/src/hooks/index.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, '__esModule', {
 
 var useEchoHistory = require('./useEchoHistory.js');
 
+var useScreenOrientation = require('./useScreenOrientation.js');
+
 var useTagDetails = require('./useTagDetails.js');
 
 exports.useEchoHistory = useEchoHistory.useEchoHistory;
+exports.useScreenOrientation = useScreenOrientation.useScreenOrientation;
 exports.useTagDetails = useTagDetails.useTagDetails;

package/dist/src/hooks/useScreenOrientation.js

@@ -0,0 +1,50 @@
+'use strict';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var React = require('react');
+
+function useScreenOrientation() {
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      orientation = _React$useState2[0],
+      setOrientation = _React$useState2[1];
+
+  var updateOrientation = React.useCallback(function () {
+    var isMounted = true;
+
+    if (window.innerWidth > window.innerHeight && isMounted) {
+      setOrientation('landscape');
+    } else {
+      setOrientation('portrait');
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  }, []);
+  React.useEffect(function () {
+    updateOrientation();
+    window.addEventListener('resize', updateOrientation);
+    return function () {
+      window.removeEventListener('resize', updateOrientation);
+    };
+  }, [updateOrientation]);
+  return orientation;
+}
+
+exports.useScreenOrientation = useScreenOrientation;

package/dist/src/hooks/useSemi.js

@@ -12,68 +12,48 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var EchoUtils = require('@equinor/echo-utils');
+var EchoCore = require('@equinor/echo-core');
 
 var React = require('react');
 
 var useTagDetails = require('./useTagDetails.js');
-
-function _interopDefaultLegacy(e) {
-  return e && _typeof(e) === 'object' && 'default' in e ? e : {
-    'default': e
-  };
-}
-
-var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
 /**
  * Provides information about Semi document for a given tag.
  *
- * @param {{ tagNo: string; instCode: string }} params
- * @param {string} params.tagNo The given tag's number.
- * @param {string} params.instCode Plant's inst code.
+ * @param {{ tagNo: string }} params
+ * @param {string} params.tagNo Tag number in question.
  * @returns {Semi} object
  * @returns {boolean} object.isSemiDocumentAvailable - Will be set to true if the tag has Semi document.
  * @returns {string} object.semiDocumentId - If there's a document for the given tag, this will be set.
- * @returns {boolean} object.isSemiLoading - Indicates if Semi is performing an API call (to get tag details)
  */
 
 
 function useSemi(_ref) {
-  var tagNo = _ref.tagNo,
-      instCode = _ref.instCode;
+  var tagNo = _ref.tagNo;
 
-  var _useTagDetails$useTag = useTagDetails.useTagDetails({
+  var _a;
+
+  var instCode = EchoCore.useInstCode();
+  var additionalTagDetailsFields = (_a = useTagDetails.useTagDetails({
     tagNo: tagNo,
     instCode: instCode
-  }),
-      tagDetails = _useTagDetails$useTag.tagDetails,
-      isTagDetailsLoading = _useTagDetails$useTag.isTagDetailsLoading,
-      hasError = _useTagDetails$useTag.hasError;
+  })) === null || _a === void 0 ? void 0 : _a.additionalFields;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isSemiDocumentAvailable = _React$useState2[0],
       setIsSemiDocumentAvailable = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React.useState(''),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isSemiLoading = _React$useState4[0],
-      setIsSemiLoading = _React$useState4[1];
-
-  var _React$useState5 = React.useState(''),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      semiDocumentId = _React$useState6[0],
-      setSemiDocumentId = _React$useState6[1];
+      semiDocumentId = _React$useState4[0],
+      setSemiDocumentId = _React$useState4[1];
 
   React.useEffect(function () {
-    var additionalTagDetailsFields = tagDetails === null || tagDetails === void 0 ? void 0 : tagDetails.additionalFields;
-
     if (Array.isArray(additionalTagDetailsFields) && additionalTagDetailsFields.length > 0) {
       var semi = additionalTagDetailsFields.find(function (field) {
         return field.type === 'SMI';
@@ -84,16 +64,10 @@ function useSemi(_ref) {
         setSemiDocumentId(semi.value);
       }
     }
-  }, [tagDetails, hasError]);
-  EchoUtils__default["default"].Hooks.useEffectAsync(function (signal) {
-    if (!signal.aborted) {
-      setIsSemiLoading(isTagDetailsLoading);
-    }
-  }, [isTagDetailsLoading]);
+  }, [additionalTagDetailsFields]);
   return {
     isSemiDocumentAvailable: isSemiDocumentAvailable,
-    semiDocumentId: semiDocumentId,
-    isSemiLoading: isSemiLoading
+    semiDocumentId: semiDocumentId
   };
 }
 

package/dist/src/hooks/useTagDetails.js

@@ -12,140 +12,69 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
 var _tslib = require('../../_virtual/_tslib.js');
 
-var EchoCore = require('@equinor/echo-core');
-
-var EchoUtils = require('@equinor/echo-utils');
-
-var apiTagDetails = require('../services/api/api-tag-details.js');
-
-var echopediaAnalyticsModule = require('../services/echopediaAnalyticsModule/echopediaAnalyticsModule.js');
-
-function _interopDefaultLegacy(e) {
-  return e && _typeof(e) === 'object' && 'default' in e ? e : {
-    'default': e
-  };
-}
-
-var EchoCore__default = /*#__PURE__*/_interopDefaultLegacy(EchoCore);
+var echoSearch = require('@equinor/echo-search');
 
-var EchoUtils__default = /*#__PURE__*/_interopDefaultLegacy(EchoUtils);
+var React = require('react');
 /**
  * Provides tag details for a given tag number and instCode.
  *
  * @param {{ tagNo: string; instCode: string }} params
  * @param {string} params.tagNo The given tag's number.
  * @param {string} params.instCode Plant's inst code.
- * @returns {Object} response
- * @returns {TagDetailsDto | undefined} response.tagDetails
- * @returns {boolean} response.isLoading Whether tag details API call is loading or not.
- * @returns {boolean} response.hasError If the API call had any issues, this will be set to 'true'
+ * @returns {TagDetailsDto | undefined} TagDetailsDto or undefined
  */
 
 
 function useTagDetails(_ref) {
-  var _this = this;
-
-  var instCode = _ref.instCode,
-      tagNo = _ref.tagNo;
-  var _EchoUtils__default$d = EchoUtils__default["default"].Hooks,
-      useStateSafe = _EchoUtils__default$d.useStateSafe,
-      useEffectAsync = _EchoUtils__default$d.useEffectAsync;
-
-  var _useStateSafe = useStateSafe(undefined),
-      _useStateSafe2 = _slicedToArray(_useStateSafe, 2),
-      tagDetails = _useStateSafe2[0],
-      setTagDetails = _useStateSafe2[1];
-
-  var _useStateSafe3 = useStateSafe(true),
-      _useStateSafe4 = _slicedToArray(_useStateSafe3, 2),
-      isTagDetailsLoading = _useStateSafe4[0],
-      setIsTagDetailsLoading = _useStateSafe4[1];
-
-  var _useStateSafe5 = useStateSafe(false),
-      _useStateSafe6 = _slicedToArray(_useStateSafe5, 2),
-      hasError = _useStateSafe6[0],
-      setHasError = _useStateSafe6[1];
-
-  useEffectAsync( // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function (abortSignal) {
-    return _tslib.__awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var getDetails;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              getDetails = function _getDetails(instCode, tagNo) {
-                return _tslib.__awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-                  var tagDetailsApiResponse;
-                  return regeneratorRuntime.wrap(function _callee$(_context) {
-                    while (1) {
-                      switch (_context.prev = _context.next) {
-                        case 0:
-                          _context.prev = 0;
-                          setIsTagDetailsLoading(true);
-                          setHasError(false); // TODO: pass 'abortSignal' from useEffectAsync - now it throws "Failed to execute 'postMessage' on 'Worker': AbortSignal object could not be cloned"
-
-                          _context.next = 5;
-                          return apiTagDetails.getTagDetails({
-                            tagNo: tagNo,
-                            instCode: instCode
-                          });
-
-                        case 5:
-                          tagDetailsApiResponse = _context.sent;
-
-                          if (tagDetailsApiResponse) {
-                            setTagDetails(tagDetailsApiResponse);
-                          }
-
-                          _context.next = 15;
-                          break;
-
-                        case 9:
-                          _context.prev = 9;
-                          _context.t0 = _context["catch"](0);
-                          EchoCore__default["default"].handleErrors && EchoCore__default["default"].handleErrors(_context.t0, echopediaAnalyticsModule.echopediaAnalyticsModule);
-                          setTagDetails(undefined);
-                          setIsTagDetailsLoading(false);
-                          setHasError(true);
-
-                        case 15:
-                          _context.prev = 15;
-                          setIsTagDetailsLoading(false);
-                          return _context.finish(15);
-
-                        case 18:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }
-                  }, _callee, null, [[0, 9, 15, 18]]);
-                }));
-              };
-
-              getDetails(instCode, tagNo);
-
-            case 2:
-            case "end":
-              return _context2.stop();
+  var tagNo = _ref.tagNo,
+      instCode = _ref.instCode;
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tagDetails = _React$useState2[0],
+      setTagDetails = _React$useState2[1];
+
+  React.useEffect(function () {
+    var isMounted = true;
+
+    function getTagDetailsAsync() {
+      return _tslib.__awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        var tagDetailsResult;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return echoSearch.Search.Tags.getTagDetailsAsync(tagNo, instCode);
+
+              case 2:
+                tagDetailsResult = _context.sent;
+
+                if (isMounted && tagDetailsResult.isSuccess) {
+                  setTagDetails(tagDetailsResult.value);
+                }
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
           }
-        }
-      }, _callee2);
-    }));
-  }, [instCode, tagNo]);
-  return {
-    tagDetails: tagDetails,
-    isTagDetailsLoading: isTagDetailsLoading,
-    hasError: hasError
-  };
+        }, _callee);
+      }));
+    }
+
+    getTagDetailsAsync();
+    return function () {
+      isMounted = false;
+    };
+  }, [tagNo, instCode]);
+  return tagDetails;
 }
 
 exports.useTagDetails = useTagDetails;

package/dist/src/icons/common/Evision.svg.js

@@ -54,14 +54,13 @@ var SvgEvision = function SvgEvision(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 25,
     height: 25,
-    viewBox: "0 0 25 25",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 14.8 0.6 16.9 1.6 18.7C0.8 17.2 0.4 15.4 0.4 13.5C0.4 7.4 5.1 2.4 10.9 2.4C16.7 2.4 21.4 7.4 21.4 13.5C21.4 19.6 16.7 24.6 10.9 24.6C10.1 24.6 9.2 24.5 8.4 24.3C9.7 24.7 11 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0Z",
+    d: "M12.5 0C5.6 0 0 5.6 0 12.5c0 2.3.6 4.4 1.6 6.2C.8 17.2.4 15.4.4 13.5.4 7.4 5.1 2.4 10.9 2.4s10.5 5 10.5 11.1-4.7 11.1-10.5 11.1c-.8 0-1.7-.1-2.5-.3 1.3.4 2.6.7 4.1.7C19.4 25 25 19.4 25 12.5S19.4 0 12.5 0Z",
     fill: "#FCB021"
   })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.9 18.1C15.6 18.1 16.8 17.5 18 16.3L20 18.1C18.6 19.8 16.6 20.9 13.8 20.9C9.4 20.9 6 17.7 6 13C6 8.60001 9.1 5.10001 13.4 5.10001C18.2 5.10001 20.7 8.90001 20.7 13.3C20.7 13.6 20.7 13.9 20.6 14.2H9.5C10 16.7 11.7 18.1 13.9 18.1ZM17.3 11.9C17.1 9.70001 15.8 7.90001 13.5 7.90001C11.4 7.90001 9.9 9.50001 9.6 11.9H17.3Z",
+    d: "M13.9 18.1c1.7 0 2.9-.6 4.1-1.8l2 1.8c-1.4 1.7-3.4 2.8-6.2 2.8C9.4 20.9 6 17.7 6 13c0-4.4 3.1-7.9 7.4-7.9 4.8 0 7.3 3.8 7.3 8.2 0 .3 0 .6-.1.9H9.5c.5 2.5 2.2 3.9 4.4 3.9Zm3.4-6.2c-.2-2.2-1.5-4-3.8-4-2.1 0-3.6 1.6-3.9 4h7.7Z",
     fill: "#094D90"
   })));
 };