ui-soxo-bootstrap-core 2.5.1 → 2.5.3

package/core/components/extra-info/extra-info-details.js

@@ -1,7 +1,7 @@
 /**
- * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo  
+ * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo
  *
- * @description 
+ * @description
  * @author Sneha T
  */
 
@@ -21,152 +21,135 @@ import ExtraInfo from './extra-info';
 
 const { TabPane } = Tabs;
 
-export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition='left',showDrawerData,dbPtr,callback,...record}) {
-    // State to control drawer
-    const [open, setOpen] = useState(false);
+export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition = 'left', showDrawerData, dbPtr, callback, ...record }) {
+  // State to control drawer
+  const [open, setOpen] = useState(false);
 
-    // To set extra info data
-    const [info, setInfo] = useState([]);
-    //Setting active key for tabs
-    const [activeKey, setActiveKey] = useState(null);
+  // To set extra info data
+  const [info, setInfo] = useState([]);
+  //Setting active key for tabs
+  const [activeKey, setActiveKey] = useState(null);
 
-    // To strore selected item
-    const [selectedItem, setSelectedItem] = useState(null);
+  // To strore selected item
+  const [selectedItem, setSelectedItem] = useState(null);
 
-    const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
 
-    /**
-    * Show Drawer
-    */
-    const showDrawer = () => {
-
-        setActiveKey(null); // Reset activeKey before fetching new info
-
-        getExtraInfo();
+  /**
+   * Show Drawer
+   */
+  const showDrawer = () => {
+    setActiveKey(null); // Reset activeKey before fetching new info
 
-        setOpen(true);
+    getExtraInfo();
 
-    };
+    setOpen(true);
+  };
 
-    /**
-     * Function to close
-     */
-    const onClose = () => {
-        if (typeof callback === 'function') {
-            // Only call if it exists
-            callback(false);
-        }
-        setOpen(false);
-    };
+  /**
+   * Function to close
+   */
+  const onClose = () => {
+    if (typeof callback === 'function') {
+      // Only call if it exists
+      callback(false);
+    }
+    setOpen(false);
+  };
 
-    /**
-     * Function to get Info
-     */
-    async function getExtraInfo() {
+  /**
+   * Function to get Info
+   */
+  async function getExtraInfo() {
+    setSelectedItem();
 
-        setSelectedItem()
+    setLoading(true);
 
-        setLoading(true);
+    let mode = modeValue;
 
-        let mode = modeValue
+    const result = await Dashboard.getExtraInfo(mode);
 
-        const result = await Dashboard.getExtraInfo(mode);
+    setInfo(result);
 
-        setInfo(result);
+    setSelectedItem(result[0]);
 
-        setSelectedItem(result[0])
+    setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id
 
-        setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id
+    setLoading(false);
+  }
 
-        setLoading(false);
+  useEffect(() => {
+    // If showDrawerData is true then call showDrawer function
+    if (showDrawerData) {
+      showDrawer();
     }
+  }, [showDrawerData]);
 
-    useEffect(() => {
-        // If showDrawerData is true then call showDrawer function
-        if (showDrawerData) {
-            showDrawer();
-        }
-    }, [showDrawerData]);
-
-    /**
+  /**
    * Function to render icon or button
    */
-    const renderIconOrButton = () => {
-        switch (icon) {
-            case 'InfoCircleFilled':
-                return <InfoCircleFilled onClick={showDrawer} />;
-            case 'Button':
-                return <Button size="small" onClick={showDrawer}>Show Info</Button>;
-            default:
-                return null;
-        }
-    };
-
-    
-
-    return (
-        <>
-            {/* {loading ? (
+  const renderIconOrButton = () => {
+    switch (icon) {
+      case 'InfoCircleFilled':
+        return <InfoCircleFilled onClick={showDrawer} />;
+      case 'Button':
+        return (
+          <Button size="small" onClick={showDrawer}>
+            Show Info
+          </Button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      {/* {loading ? (
                 <>
                     <Skeleton active />
                 </>
             ) : ( */}
-            <>
-                {/*  */}
-                {/* <Button onClick={showDrawer}> */}
-
-                {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}
-
-                {renderIconOrButton()}
-                {/* </Button> */}
-                {/*  */}
-
-                {/*  */}
-                <Drawer
-
-                    width={'85%'}
-
-                    title={title} onClose={onClose} open={open}>
-
-                    <div className="main-drawer-content">
-
-                        <div className="drawer-container">
-
-                            <div className="drawer-click"> {/* Flexbox approach */}
-                                <Tabs
-                                    tabPosition={tabPosition}
-
-                                    activeKey={activeKey} // Set activeKey to control the active tab
-
-                                    onChange={(key) => {
-
-                                        const selectedItem = info.find(item => item.id.toString() === key);
-
-                                        setSelectedItem(selectedItem);
-
-                                        setActiveKey(key);
-                                    }}
-                                >
-                                    {info.map(item => (
-                                        <TabPane tab={item.caption} key={item.id.toString()} />
-                                    ))}
-                                </Tabs>
-                            </div>
-
-                            <div className="right-drawer">
-
-                                {selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record}  dbPtr={dbPtr}/> : null}
-
-                            </div>
-
-                        </div>
-
-                    </div>
-
-                </Drawer>
-
-            </>
-            {/* )} */}
-        </>
-    );
+      <>
+        {/*  */}
+        {/* <Button onClick={showDrawer}> */}
+
+        {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}
+
+        {renderIconOrButton()}
+        {/* </Button> */}
+        {/*  */}
+
+        {/*  */}
+        <Drawer width={'35%'} title={title} onClose={onClose} open={open}>
+          <div className="main-drawer-content">
+            <div className="drawer-container">
+              <div className="drawer-click">
+                {' '}
+                {/* Flexbox approach */}
+                <Tabs
+                  tabPosition={tabPosition}
+                  activeKey={activeKey} // Set activeKey to control the active tab
+                  onChange={(key) => {
+                    const selectedItem = info.find((item) => item.id.toString() === key);
+
+                    setSelectedItem(selectedItem);
+
+                    setActiveKey(key);
+                  }}
+                >
+                  {info.map((item) => (
+                    <TabPane tab={item.caption} key={item.id.toString()} />
+                  ))}
+                </Tabs>
+              </div>
+
+              <div className="right-drawer">{selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record} dbPtr={dbPtr} /> : null}</div>
+            </div>
+          </div>
+        </Drawer>
+      </>
+      {/* )} */}
+    </>
+  );
 }