namirasoft-site-react 1.5.25 → 1.5.27

package/src/components/NSMegaMenu.module.css

@@ -1,134 +1,134 @@
-.ns_mega_menu {
-    width: 40rem;
-    margin: 0;
-    padding: 1rem;
-    display: none;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.ns_mega_menu_breadcrumb {
-    margin: 0;
-    padding: 0 0 0 0.5rem;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start !important;
-    gap: 0.5rem;
-}
-
-.ns_mega_menu_breadcrumb_item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-right: 0 !important;
-    font-size: 0.875rem;
-    line-height: 1rem;
-    color: #141b5c;
-}
-
-.ns_mega_menu_breadcrumb_item>span[role=button]:hover {
-    text-decoration: underline;
-}
-
-.ns_mega_menu_breadcrumb_item:last-child>span[role=button] {
-    font-weight: 500;
-}
-
-.ns_mega_menu_list_wrapper {
-    display: flex;
-}
-
-.ns_mega_menu_list_divider {
-    width: 1px;
-    background-color: #e1e1e1;
-    margin: 0 1rem;
-}
-
-.ns_mega_menu_list {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start !important;
-    gap: 0.5rem;
-}
-
-.ns_mega_menu_item {
-    width: 100%;
-    margin-right: 0 !important;
-    border: 1px solid #fff;
-    border-radius: 0.75rem;
-    padding: 0.5rem;
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-}
-
-.ns_mega_menu_item.selectable {
-    cursor: pointer;
-}
-
-.ns_mega_menu_item.selectable:hover {
-    background-color: #f0f0f0;
-}
-
-.ns_mega_menu_item.selected {
-    border-color: #e1e1e1;
-    background-color: #efefef;
-}
-
-.ns_mega_menu_link {
-    display: contents;
-}
-
-.ns_mega_menu_icon {
-    border-radius: 0.5rem;
-    padding: 0.25rem;
-    box-shadow: 0 0 0.25rem rgba(67, 71, 85, 0.27), 0 0.25rem 1rem rgba(90, 125, 188, 0.05);
-    font-size: 0.75rem;
-}
-
-.ns_mega_menu_content {
-    width: 100%;
-    min-height: 100%;
-    padding: 0.125rem 0;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 0.25rem;
-}
-
-.ns_mega_menu_title {
-    margin-bottom: 0;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1rem;
-    color: #141b5c;
-}
-
-.ns_mega_menu_link:hover .ns_mega_menu_title {
-    text-decoration: underline;
-}
-
-.ns_mega_menu_desc {
-    font-size: 0.875rem;
-    line-height: 1rem;
-    color: #141b5caa;
-}
-
-.ns_mega_menu_arrow {
-    display: inline-flex;
-    align-self: center;
-}
-
-@media only screen and (min-width: 1023px) {
-    .ns_mega_menu {
-        display: flex;
-    }
-
-    .ns_mega_menu+div {
-        display: none;
-    }
+.ns_mega_menu {
+    width: 40rem;
+    margin: 0;
+    padding: 1rem;
+    display: none;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.ns_mega_menu_breadcrumb {
+    margin: 0;
+    padding: 0 0 0 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start !important;
+    gap: 0.5rem;
+}
+
+.ns_mega_menu_breadcrumb_item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: 0 !important;
+    font-size: 0.875rem;
+    line-height: 1rem;
+    color: #141b5c;
+}
+
+.ns_mega_menu_breadcrumb_item>span[role=button]:hover {
+    text-decoration: underline;
+}
+
+.ns_mega_menu_breadcrumb_item:last-child>span[role=button] {
+    font-weight: 500;
+}
+
+.ns_mega_menu_list_wrapper {
+    display: flex;
+}
+
+.ns_mega_menu_list_divider {
+    width: 1px;
+    background-color: #e1e1e1;
+    margin: 0 1rem;
+}
+
+.ns_mega_menu_list {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start !important;
+    gap: 0.5rem;
+}
+
+.ns_mega_menu_item {
+    width: 100%;
+    margin-right: 0 !important;
+    border: 1px solid #fff;
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+}
+
+.ns_mega_menu_item.selectable {
+    cursor: pointer;
+}
+
+.ns_mega_menu_item.selectable:hover {
+    background-color: #f0f0f0;
+}
+
+.ns_mega_menu_item.selected {
+    border-color: #e1e1e1;
+    background-color: #efefef;
+}
+
+.ns_mega_menu_link {
+    display: contents;
+}
+
+.ns_mega_menu_icon {
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    box-shadow: 0 0 0.25rem rgba(67, 71, 85, 0.27), 0 0.25rem 1rem rgba(90, 125, 188, 0.05);
+    font-size: 0.75rem;
+}
+
+.ns_mega_menu_content {
+    width: 100%;
+    min-height: 100%;
+    padding: 0.125rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+.ns_mega_menu_title {
+    margin-bottom: 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1rem;
+    color: #141b5c;
+}
+
+.ns_mega_menu_link:hover .ns_mega_menu_title {
+    text-decoration: underline;
+}
+
+.ns_mega_menu_desc {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    color: #141b5caa;
+}
+
+.ns_mega_menu_arrow {
+    display: inline-flex;
+    align-self: center;
+}
+
+@media only screen and (min-width: 1023px) {
+    .ns_mega_menu {
+        display: flex;
+    }
+
+    .ns_mega_menu+div {
+        display: none;
+    }
 }

package/src/components/NSMegaMenu.tsx

@@ -1,189 +1,189 @@
-import { Component } from 'react'
-import { FilterLinkFullRow } from 'namirasoft-api-link';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSMegaMenu.module.css";
-
-export interface MegaMenuNode extends FilterLinkFullRow
-{
-    children: MegaMenuNode[];
-};
-
-export interface NSMegaMenuProps extends IBaseComponentProps
-{
-    items: FilterLinkFullRow[];
-    selected: FilterLinkFullRow;
-}
-
-export interface NSMegaMenuState
-{
-    breadcrumb: MegaMenuNode[];
-}
-
-export default class NSMegaMenu extends Component<NSMegaMenuProps, NSMegaMenuState>
-{
-    constructor(props: NSMegaMenuProps)
-    {
-        super(props);
-        this.state = { breadcrumb: [] }
-    }
-
-    override componentDidMount(): void
-    {
-        let node = this.buildMegaMenuNode();
-        if (node)
-            this.setState(() => ({ breadcrumb: [node!] }));
-    }
-    
-    private buildMegaMenuNode(): MegaMenuNode | undefined
-    {
-        let node_map = new Map<number, MegaMenuNode>();
-
-        this.props.items.forEach(item => node_map.set(item.id, { ...item, children: [] }));
-
-        this.props.items.forEach(item =>
-        {
-            if (item.parent_id !== null)
-            {
-                let parent = node_map.get(item.parent_id);
-                let node = node_map.get(item.id);
-                if (parent && node)
-                    parent.children.push(node);
-            }
-        });
-
-        let roots = this.props.items
-            .filter(item => item.parent_id === null)
-            .map(item => node_map.get(item.id)!);
-
-        return roots.find(root => root.id === this.props.selected.id);
-    }
-
-    private renderMenuItem(node: MegaMenuNode, is_root: boolean)
-    {
-        let img_size = is_root ? 48 : 32;
-
-        let content = (
-            <>
-                <img
-                    src={node.logo ?? ""}
-                    alt="Mega Menu Item"
-                    width={img_size}
-                    height={img_size}
-                    className={Styles.ns_mega_menu_icon}
-                />
-                <div className={Styles.ns_mega_menu_content}>
-                    <h4 className={Styles.ns_mega_menu_title}>{node.name}</h4>
-                    {
-                        node.link?.description &&
-                        <span className={Styles.ns_mega_menu_desc}>
-                            {node.link.description}
-                        </span>
-                    }
-                </div>
-                {
-                    node.children.length > 0 &&
-                    <div className={Styles.ns_mega_menu_arrow}>
-                        <img src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg" alt="Arrow" width={18} height={18} style={{ alignSelf: "center" }} />
-                    </div>
-                }
-            </>
-        );
-
-        if (node.children.length === 0)
-        {
-            return (
-                <a href={this.getLinkHref(node.link?.url)} className={Styles.ns_mega_menu_link}>
-                    {content}
-                </a>
-            );
-        }
-
-        return content;
-    }
-    
-    private getLinkHref(url?: string)
-    {
-        if (url && process.env.REACT_APP_STANDALONE)
-        {
-            let href = new URL(url);
-            href.host = window.location.host;
-            href.protocol = window.location.protocol;
-            return href.toString();
-        }
-        return url;
-    }
-
-    override render()
-    {
-        let { breadcrumb } = this.state;
-        let start = breadcrumb.length === 1 ? 0 : breadcrumb.length - 2;
-        let selected_root = this.state.breadcrumb[start];
-        let selected_sub = this.state.breadcrumb[start + 1];
-
-        return (
-            <section className={Styles.ns_mega_menu}>
-                <ul className={Styles.ns_mega_menu_breadcrumb}>
-                    {
-                        this.state.breadcrumb.map((item, index) => (
-                            <li key={item.id} className={Styles.ns_mega_menu_breadcrumb_item}>
-                                <span
-                                    role="button"
-                                    onClick={() => this.setState((prev) => ({ breadcrumb: prev.breadcrumb.slice(0, index + 1) }))}
-                                >
-                                    {item.name}
-                                </span>
-                                <span>/</span>
-                            </li>
-                        ))
-                    }
-                </ul>
-
-                <div className={Styles.ns_mega_menu_list_wrapper}>
-                    <ul className={Styles.ns_mega_menu_list}>
-                        {
-                            selected_root?.children.map(node => (
-                                <li
-                                    key={node.id}
-                                    className={`${Styles.ns_mega_menu_item} ${node.children.length > 0 ? Styles.selectable : ""} ${node.id === selected_sub?.id ? Styles.selected : ""}`}
-                                    onClick={() =>
-                                    {
-                                        if (node.children.length > 0)
-                                        {
-                                            let updated = [...this.state.breadcrumb];
-                                            if (updated.length >= 2)
-                                                updated.pop();
-                                            updated.push(node);
-                                            this.setState(() => ({ breadcrumb: updated }))
-                                        }
-                                    }}
-                                >
-                                    {this.renderMenuItem(node, true)}
-                                </li>
-                            ))
-                        }
-                    </ul>
-
-                    <div className={Styles.ns_mega_menu_list_divider} />
-
-                    <ul className={Styles.ns_mega_menu_list}>
-                        {
-                            selected_sub?.children.map(node => (
-                                <li
-                                    key={node.id}
-                                    className={`${Styles.ns_mega_menu_item} ${node.children.length > 0 ? Styles.selectable : ""}`}
-                                    onClick={() =>
-                                    {
-                                        if (node.children.length > 0)
-                                            this.setState((prev) => ({ breadcrumb: [...prev.breadcrumb, node] }));
-                                    }}
-                                >
-                                    {this.renderMenuItem(node, false)}
-                                </li>
-                            ))
-                        }
-                    </ul>
-                </div>
-            </section >
-        );
-    }
+import { Component } from 'react'
+import { FilterLinkFullRow } from 'namirasoft-api-link';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSMegaMenu.module.css";
+
+export interface MegaMenuNode extends FilterLinkFullRow
+{
+    children: MegaMenuNode[];
+};
+
+export interface NSMegaMenuProps extends IBaseComponentProps
+{
+    items: FilterLinkFullRow[];
+    selected: FilterLinkFullRow;
+}
+
+export interface NSMegaMenuState
+{
+    breadcrumb: MegaMenuNode[];
+}
+
+export default class NSMegaMenu extends Component<NSMegaMenuProps, NSMegaMenuState>
+{
+    constructor(props: NSMegaMenuProps)
+    {
+        super(props);
+        this.state = { breadcrumb: [] }
+    }
+
+    override componentDidMount(): void
+    {
+        let node = this.buildMegaMenuNode();
+        if (node)
+            this.setState(() => ({ breadcrumb: [node!] }));
+    }
+    
+    private buildMegaMenuNode(): MegaMenuNode | undefined
+    {
+        let node_map = new Map<number, MegaMenuNode>();
+
+        this.props.items.forEach(item => node_map.set(item.id, { ...item, children: [] }));
+
+        this.props.items.forEach(item =>
+        {
+            if (item.parent_id !== null)
+            {
+                let parent = node_map.get(item.parent_id);
+                let node = node_map.get(item.id);
+                if (parent && node)
+                    parent.children.push(node);
+            }
+        });
+
+        let roots = this.props.items
+            .filter(item => item.parent_id === null)
+            .map(item => node_map.get(item.id)!);
+
+        return roots.find(root => root.id === this.props.selected.id);
+    }
+
+    private renderMenuItem(node: MegaMenuNode, is_root: boolean)
+    {
+        let img_size = is_root ? 48 : 32;
+
+        let content = (
+            <>
+                <img
+                    src={node.logo ?? ""}
+                    alt="Mega Menu Item"
+                    width={img_size}
+                    height={img_size}
+                    className={Styles.ns_mega_menu_icon}
+                />
+                <div className={Styles.ns_mega_menu_content}>
+                    <h4 className={Styles.ns_mega_menu_title}>{node.name}</h4>
+                    {
+                        node.link?.description &&
+                        <span className={Styles.ns_mega_menu_desc}>
+                            {node.link.description}
+                        </span>
+                    }
+                </div>
+                {
+                    node.children.length > 0 &&
+                    <div className={Styles.ns_mega_menu_arrow}>
+                        <img src="https://static.namirasoft.com/image/concept/arrow/right/white-blue.svg" alt="Arrow" width={18} height={18} style={{ alignSelf: "center" }} />
+                    </div>
+                }
+            </>
+        );
+
+        if (node.children.length === 0)
+        {
+            return (
+                <a href={this.getLinkHref(node.link?.url)} className={Styles.ns_mega_menu_link}>
+                    {content}
+                </a>
+            );
+        }
+
+        return content;
+    }
+    
+    private getLinkHref(url?: string)
+    {
+        if (url && process.env.REACT_APP_STANDALONE)
+        {
+            let href = new URL(url);
+            href.host = window.location.host;
+            href.protocol = window.location.protocol;
+            return href.toString();
+        }
+        return url;
+    }
+
+    override render()
+    {
+        let { breadcrumb } = this.state;
+        let start = breadcrumb.length === 1 ? 0 : breadcrumb.length - 2;
+        let selected_root = this.state.breadcrumb[start];
+        let selected_sub = this.state.breadcrumb[start + 1];
+
+        return (
+            <section className={Styles.ns_mega_menu}>
+                <ul className={Styles.ns_mega_menu_breadcrumb}>
+                    {
+                        this.state.breadcrumb.map((item, index) => (
+                            <li key={item.id} className={Styles.ns_mega_menu_breadcrumb_item}>
+                                <span
+                                    role="button"
+                                    onClick={() => this.setState((prev) => ({ breadcrumb: prev.breadcrumb.slice(0, index + 1) }))}
+                                >
+                                    {item.name}
+                                </span>
+                                <span>/</span>
+                            </li>
+                        ))
+                    }
+                </ul>
+
+                <div className={Styles.ns_mega_menu_list_wrapper}>
+                    <ul className={Styles.ns_mega_menu_list}>
+                        {
+                            selected_root?.children.map(node => (
+                                <li
+                                    key={node.id}
+                                    className={`${Styles.ns_mega_menu_item} ${node.children.length > 0 ? Styles.selectable : ""} ${node.id === selected_sub?.id ? Styles.selected : ""}`}
+                                    onClick={() =>
+                                    {
+                                        if (node.children.length > 0)
+                                        {
+                                            let updated = [...this.state.breadcrumb];
+                                            if (updated.length >= 2)
+                                                updated.pop();
+                                            updated.push(node);
+                                            this.setState(() => ({ breadcrumb: updated }))
+                                        }
+                                    }}
+                                >
+                                    {this.renderMenuItem(node, true)}
+                                </li>
+                            ))
+                        }
+                    </ul>
+
+                    <div className={Styles.ns_mega_menu_list_divider} />
+
+                    <ul className={Styles.ns_mega_menu_list}>
+                        {
+                            selected_sub?.children.map(node => (
+                                <li
+                                    key={node.id}
+                                    className={`${Styles.ns_mega_menu_item} ${node.children.length > 0 ? Styles.selectable : ""}`}
+                                    onClick={() =>
+                                    {
+                                        if (node.children.length > 0)
+                                            this.setState((prev) => ({ breadcrumb: [...prev.breadcrumb, node] }));
+                                    }}
+                                >
+                                    {this.renderMenuItem(node, false)}
+                                </li>
+                            ))
+                        }
+                    </ul>
+                </div>
+            </section >
+        );
+    }
 }