ui-soxo-bootstrap-core 2.4.25-dev.41 → 2.4.25-dev.44

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -1,114 +1,114 @@
-/**
- * MenuTree Component
- *
- * @description
- * Renders a hierarchical menu structure with optional checkboxes.
- * Supports:
- * - Recursive menu rendering
- * - Parent–child checkbox synchronization
- * - Indeterminate state for partially selected parents
- *
- * Common use cases:
- * - Role-based menu preview
- * - Permission assignment trees
- *
- * @param {Object} props
- * @param {Array<Object>} props.menus - Menu tree data
- * @param {Array<number>} props.selectedMenus - Selected menu IDs
- * @param {(menuId:number, checked:boolean) => void} props.toggleMenu - Callback for menu selection
- * @param {number|null} props.parentId - Parent menu ID (used internally for recursion)
- * @param {boolean} props.showCheckbox - Whether to display checkboxes
- *
- * @returns {JSX.Element}
- */
-
-import React from 'react';
-import { Checkbox, Collapse } from 'antd';
-
-const { Panel } = Collapse;
-
-export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = null, showCheckbox = true }) => {
-  const renderTree = (menuList, parentId = null) => {
-    return menuList.map((menu) => {
-      const children = menu.sub_menus || [];
-
-      /**
-       * Toggle menu selection recursively for all child menus
-       *
-       * @param {Object} m - Menu object
-       * @param {boolean} checked - Checkbox state
-       */
-      const toggleMenuRecursive = (m, checked) => {
-        toggleMenu && toggleMenu(m.id, checked);
-        if (m.sub_menus && m.sub_menus.length > 0) {
-          m.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
-        }
-      };
-
-      /**
-       * Handle parent checkbox change
-       * - Updates parent menu
-       * - Cascades selection to all children
-       *
-       * @param {boolean} checked
-       */
-
-      const onParentChange = (checked) => {
-        toggleMenu && toggleMenu(menu.id, checked);
-        children.forEach((c) => toggleMenuRecursive(c, checked));
-      };
-
-      /**
-       * Leaf menu (no sub-menus)
-       */
-
-      if (children.length === 0) {
-        return (
-          <div
-            key={menu.id}
-            style={{
-              border: '1px solid rgba(198, 195, 195, 0.85)',
-              padding: '12px 16px',
-              marginBottom: 6,
-              background: '#fff',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-            <span>{menu.title || menu.caption}</span>
-          </div>
-        );
-      }
-
-      /**
-       * Parent menu (with sub-menus)
-       */
-
-      return (
-        <Collapse key={menu.id} style={{ marginBottom: 6 }}>
-          <Panel
-            key={menu.id}
-            header={
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                {showCheckbox && (
-                  <Checkbox
-                    checked={children.every((c) => selectedMenus.includes(c.id))}
-                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
-                    onChange={(e) => onParentChange(e.target.checked)}
-                  />
-                )}
-                <span>{menu.title || menu.caption}</span>
-              </div>
-            }
-          >
-            <div style={{ paddingLeft: 20 }}>{renderTree(children, menu.id)}</div>
-          </Panel>
-        </Collapse>
-      );
-    });
-  };
-
-  return <>{renderTree(menus, parentId)}</>;
-};
+/**
+ * MenuTree Component
+ *
+ * @description
+ * Renders a hierarchical menu structure with optional checkboxes.
+ * Supports:
+ * - Recursive menu rendering
+ * - Parent–child checkbox synchronization
+ * - Indeterminate state for partially selected parents
+ *
+ * Common use cases:
+ * - Role-based menu preview
+ * - Permission assignment trees
+ *
+ * @param {Object} props
+ * @param {Array<Object>} props.menus - Menu tree data
+ * @param {Array<number>} props.selectedMenus - Selected menu IDs
+ * @param {(menuId:number, checked:boolean) => void} props.toggleMenu - Callback for menu selection
+ * @param {number|null} props.parentId - Parent menu ID (used internally for recursion)
+ * @param {boolean} props.showCheckbox - Whether to display checkboxes
+ *
+ * @returns {JSX.Element}
+ */
+
+import React from 'react';
+import { Checkbox, Collapse } from 'antd';
+
+const { Panel } = Collapse;
+
+export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = null, showCheckbox = true }) => {
+  const renderTree = (menuList, parentId = null) => {
+    return menuList.map((menu) => {
+      const children = menu.sub_menus || [];
+
+      /**
+       * Toggle menu selection recursively for all child menus
+       *
+       * @param {Object} m - Menu object
+       * @param {boolean} checked - Checkbox state
+       */
+      const toggleMenuRecursive = (m, checked) => {
+        toggleMenu && toggleMenu(m.id, checked);
+        if (m.sub_menus && m.sub_menus.length > 0) {
+          m.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
+        }
+      };
+
+      /**
+       * Handle parent checkbox change
+       * - Updates parent menu
+       * - Cascades selection to all children
+       *
+       * @param {boolean} checked
+       */
+
+      const onParentChange = (checked) => {
+        toggleMenu && toggleMenu(menu.id, checked);
+        children.forEach((c) => toggleMenuRecursive(c, checked));
+      };
+
+      /**
+       * Leaf menu (no sub-menus)
+       */
+
+      if (children.length === 0) {
+        return (
+          <div
+            key={menu.id}
+            style={{
+              border: '1px solid rgba(198, 195, 195, 0.85)',
+              padding: '12px 16px',
+              marginBottom: 6,
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+            <span>{menu.title || menu.caption}</span>
+          </div>
+        );
+      }
+
+      /**
+       * Parent menu (with sub-menus)
+       */
+
+      return (
+        <Collapse key={menu.id} style={{ marginBottom: 6 }}>
+          <Panel
+            key={menu.id}
+            header={
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {showCheckbox && (
+                  <Checkbox
+                    checked={children.every((c) => selectedMenus.includes(c.id))}
+                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                    onChange={(e) => onParentChange(e.target.checked)}
+                  />
+                )}
+                <span>{menu.title || menu.caption}</span>
+              </div>
+            }
+          >
+            <div style={{ paddingLeft: 20 }}>{renderTree(children, menu.id)}</div>
+          </Panel>
+        </Collapse>
+      );
+    });
+  };
+
+  return <>{renderTree(menus, parentId)}</>;
+};

package/core/lib/elements/basic/modal/modal.js

@@ -1,64 +1,64 @@
-/**
- * @author Sameena Ammed
- * This component is used as the custom modal
- * antd Modal is imported here
- */
-import React, { useState } from "react";
-import { Modal as AntdModal, Button } from "antd";
-import PropTypes from "prop-types";
-// import 'antd/dist/antd.css';
-
-export default function Modal({
-  children,
-  onOk = () => {},
-  onCancel = () => {},
-  destroyOnClose = false,
-  width = "50%",
-}) {
-  const [visible, setVisible] = useState(false);
-
-  const showModal = () => {
-    setVisible(true);
-  };
-
-  const handleOk = () => {
-    setVisible(false);
-    onOk();
-  };
-
-  const handleCancel = () => {
-    setVisible(false);
-    onCancel();
-  };
-
-  return (
-    <>
-      <Button onClick={showModal}>Open Modal</Button>
-      <AntdModal
-        visible={visible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        destroyOnClose={destroyOnClose}
-        width={width}
-      >
-        {children}
-      </AntdModal>
-    </>
-  );
-}
-
-
-Modal.propTypes = {
-  /** A boolean value indicating whether the modal is visible or hidden. */
-  visible: PropTypes.bool.isRequired,
-  /** The content of the modal, typically a set of components. */
-  children: PropTypes.node.isRequired,
-  /** A function to be called when the user clicks the "Ok" button. If not provided, a default empty function is used. */
-  onOk: PropTypes.func,
-  /** A function to be called when the user clicks the "Cancel" button. If not provided, a default empty function is used. */
-  onCancel: PropTypes.func,
-  /** A boolean value indicating whether the modal should be destroyed when closed. If set to true, the modal will be removed from the DOM when closed. Default value is false. */
-  destroyOnClose: PropTypes.bool,
-  /** A string value representing the width of the modal. Default value is "50%". */
-  width: PropTypes.string,
-};
+/**
+ * @author Sameena Ammed
+ * This component is used as the custom modal
+ * antd Modal is imported here
+ */
+import React, { useState } from "react";
+import { Modal as AntdModal, Button } from "antd";
+import PropTypes from "prop-types";
+// import 'antd/dist/antd.css';
+
+export default function Modal({
+  children,
+  onOk = () => {},
+  onCancel = () => {},
+  destroyOnClose = false,
+  width = "50%",
+}) {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    setVisible(false);
+    onOk();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    onCancel();
+  };
+
+  return (
+    <>
+      <Button onClick={showModal}>Open Modal</Button>
+      <AntdModal
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        destroyOnClose={destroyOnClose}
+        width={width}
+      >
+        {children}
+      </AntdModal>
+    </>
+  );
+}
+
+
+Modal.propTypes = {
+  /** A boolean value indicating whether the modal is visible or hidden. */
+  visible: PropTypes.bool.isRequired,
+  /** The content of the modal, typically a set of components. */
+  children: PropTypes.node.isRequired,
+  /** A function to be called when the user clicks the "Ok" button. If not provided, a default empty function is used. */
+  onOk: PropTypes.func,
+  /** A function to be called when the user clicks the "Cancel" button. If not provided, a default empty function is used. */
+  onCancel: PropTypes.func,
+  /** A boolean value indicating whether the modal should be destroyed when closed. If set to true, the modal will be removed from the DOM when closed. Default value is false. */
+  destroyOnClose: PropTypes.bool,
+  /** A string value representing the width of the modal. Default value is "50%". */
+  width: PropTypes.string,
+};

package/core/lib/elements/basic/modal/readme.md

@@ -1,62 +1,62 @@
-## Usage
-
-Modals can be used for displaying forms, images, videos, or any other type of content that requires user interaction. As like every component, you can use Modal by importing the Modal component into your React application.
-
-```jsx
-import Modal from "./modal";
-
-<Modal
-  visible={true}
-  onOk={() => console.log('OK clicked')}
-  onCancel={() => console.log('Cancel clicked')}
-  destroyOnClose={true}
-  width="40%"
->
-  <p>Modal content goes here</p>
-</Modal>;
-```
-
-```sh
-import React from "react";
-import { Modal as AntdModal } from "antd";
-
-export default function Modal({
-  children,
-  onOk = () => {},
-  onCancel = () => {},
-  destroyOnClose = false,
-  width = "50%",
-}) {
-  const [visible, setVisible] = useState(false);
-
-  const showModal = () => {
-    setVisible(true);
-  };
-
-  const handleOk = () => {
-    setVisible(false);
-    onOk();
-  };
-
-  const handleCancel = () => {
-    setVisible(false);
-    onCancel();
-  };
-
-  return (
-    <>
-      <Button onClick={showModal}>Open Modal</Button>
-      <AntdModal
-        visible={visible}
-        onOk={handleOk}
-        onCancel={handleCancel}
-        destroyOnClose={destroyOnClose}
-        width={width}
-      >
-        {children}
-      </AntdModal>
-    </>
-  );
-}
-
-```
+## Usage
+
+Modals can be used for displaying forms, images, videos, or any other type of content that requires user interaction. As like every component, you can use Modal by importing the Modal component into your React application.
+
+```jsx
+import Modal from "./modal";
+
+<Modal
+  visible={true}
+  onOk={() => console.log('OK clicked')}
+  onCancel={() => console.log('Cancel clicked')}
+  destroyOnClose={true}
+  width="40%"
+>
+  <p>Modal content goes here</p>
+</Modal>;
+```
+
+```sh
+import React from "react";
+import { Modal as AntdModal } from "antd";
+
+export default function Modal({
+  children,
+  onOk = () => {},
+  onCancel = () => {},
+  destroyOnClose = false,
+  width = "50%",
+}) {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    setVisible(false);
+    onOk();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    onCancel();
+  };
+
+  return (
+    <>
+      <Button onClick={showModal}>Open Modal</Button>
+      <AntdModal
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        destroyOnClose={destroyOnClose}
+        width={width}
+      >
+        {children}
+      </AntdModal>
+    </>
+  );
+}
+
+```

package/core/lib/elements/basic/popconfirm/popconfirm.js

@@ -1,18 +1,18 @@
-/**
- *  
- * Component for antd pop confirm
- */
-import { Popconfirm as AntdPopconfirm } from "antd";
-export default function Popconfirm({ title, onConfirm, onCancel, okText, cancelText, children }) {
-          return (
-                    <AntdPopconfirm
-                              title={title}
-                              onConfirm={onConfirm}
-                              onCancel={onCancel}
-                              okText={okText}
-                              cancelText={cancelText}>
-                              {children}
-
-                    </AntdPopconfirm>
-          )
+/**
+ *  
+ * Component for antd pop confirm
+ */
+import { Popconfirm as AntdPopconfirm } from "antd";
+export default function Popconfirm({ title, onConfirm, onCancel, okText, cancelText, children }) {
+          return (
+                    <AntdPopconfirm
+                              title={title}
+                              onConfirm={onConfirm}
+                              onCancel={onCancel}
+                              okText={okText}
+                              cancelText={cancelText}>
+                              {children}
+
+                    </AntdPopconfirm>
+          )
 }

package/core/lib/elements/basic/popover/popover.js

@@ -1,13 +1,13 @@
-/**
- *  
- * Component for antd pop over
- */
-
-import { Popover as AntdPopover } from "antd";
-export default function Popover({content,title,children}){
-          return (
-                    <AntdPopover content={content} title={title}>
-                              {children}
-                    </AntdPopover>
-          )
+/**
+ *  
+ * Component for antd pop over
+ */
+
+import { Popover as AntdPopover } from "antd";
+export default function Popover({content,title,children}){
+          return (
+                    <AntdPopover content={content} title={title}>
+                              {children}
+                    </AntdPopover>
+          )
 }

package/core/lib/elements/basic/radio/radio.js

@@ -1,18 +1,18 @@
-/**
- *  @author Sameena
- * Component for antd Radio
- */
-
-import React from "react";
-
-
-import { Radio } from 'antd';
-import Group from 'antd/lib/radio/group';
-import Button from 'antd/lib/radio/radioButton';
-
-
-const AntdRadio=Object.assign(Radio,{
-  Group,
-  Button
-})
-export default AntdRadio;
+/**
+ *  @author Sameena
+ * Component for antd Radio
+ */
+
+import React from "react";
+
+
+import { Radio } from 'antd';
+import Group from 'antd/lib/radio/group';
+import Button from 'antd/lib/radio/radioButton';
+
+
+const AntdRadio=Object.assign(Radio,{
+  Group,
+  Button
+})
+export default AntdRadio;