namirasoft-account-react 1.5.21 → 1.5.22

package/src/components/NSAMasterMenuItem.tsx

@@ -1,251 +1,251 @@
-import { FilterLinkFullRow } from "namirasoft-api-link";
-import { ProductFullRow } from 'namirasoft-api-product';
-import { NSLoading } from 'namirasoft-site-react';
-import { useEffect, useMemo, useState } from 'react';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import Styles from "./NSAMasterMenu.module.css";
-import { SearchOperation } from "namirasoft-core";
-
-export interface NSAMasterMenuItemProps extends NSARouterMakerResult
-{
-    product: ProductFullRow;
-    fls: FilterLinkFullRow[];
-    open: boolean;
-    search?: string;
-    onClick: () => void;
-}
-
-export interface NSAMasterMenuItemState
-{
-    chain: FilterLinkFullRow[];
-    active: boolean;
-    loading: boolean;
-}
-
-function NSAMasterMenuItem(props: NSAMasterMenuItemProps)
-{
-    const [state, setState] = useState<NSAMasterMenuItemState>({
-        chain: [],
-        active: false,
-        loading: false
-    });
-
-    const getVisibleFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
-    {
-        let is_logged_in = props.account.token_manager.exists();
-
-        let initial_filters = fls?.filter(filter =>
-        {
-            if (!filter.link)
-                return true;
-            return is_logged_in ? filter.link.private : filter.link.public;
-        }) ?? [];
-
-        return pruneOrphanFLs(initial_filters).sort((a, b) => a.order - b.order);
-    }
-
-    const pruneOrphanFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
-    {
-        let result = [...fls];
-
-        while (true)
-        {
-            let previous_length = result.length;
-            let parent_ids = new Set(result.map(f => f.parent_id));
-
-            result = result.filter(filter =>
-            {
-                if (filter.link?.url)
-                    return true;
-                return parent_ids.has(filter.id);
-            });
-
-            if (result.length === previous_length)
-                break;
-        }
-
-        return result;
-    }
-
-    const getFilteredFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
-    {
-        let selected_item = state.chain?.[state.chain.length - 1];
-
-        if (selected_item)
-            return fls.filter(link => link.parent_id === selected_item.id) ?? [];
-
-        if (props.search)
-            if (!SearchOperation.match(props.product.name, props.search))
-                return SearchOperation.filter(fls, item => item.name ?? "", props.search)
-
-        // If the search matches the product itself or there is no search
-        return fls.filter(link => link.parent_id === null) ?? [];
-    }
-
-    function buildUniqueNameMap(fls: FilterLinkFullRow[]): Record<number, string>
-    {
-        let name_map = new Map<number, FilterLinkFullRow>();
-        props.fls.forEach(fl => name_map.set(fl.id, fl));
-
-        function getNameChain(item: FilterLinkFullRow): string[]
-        {
-            const chain: string[] = [];
-            let current: FilterLinkFullRow | undefined = item;
-
-            while (current)
-            {
-                if (current.name)
-                    chain.unshift(current.name);
-
-                if (!current.parent_id)
-                    break;
-
-                current = name_map.get(current.parent_id);
-            }
-
-            return chain;
-        }
-
-        const result: Record<number, string> = {};
-
-        for (const fl of fls)
-            result[fl.id] = getNameChain(fl).join(" / ");
-
-        return result;
-    }
-
-    const hasChildren = (fl: FilterLinkFullRow) =>
-    {
-        return (props.fls.findIndex(link => link.parent_id === fl.id) ?? -1) > -1;
-    }
-
-    const getFilterLinkNode = (fl: FilterLinkFullRow) =>
-    {
-        let fl_name = fl.name;
-        if (props.search && state.chain.length === 0)
-            fl_name = uniqe_name_map[fl.id]
-
-        if (hasChildren(fl))
-            return (
-                <div
-                    className={Styles.nsa_master_menu_list_content}
-                    onClick={() =>
-                    {
-                        setState((prev) => ({ ...prev, chain: [...prev.chain ?? [], fl] }));
-                    }}
-                >
-                    <span className={Styles.nsa_master_menu_list_text}>{fl_name}</span>
-                    <img
-                        src={`https://static.namirasoft.com/image/concept/arrow/right/blue.svg`} alt={"angle"} width={10} height={10}
-                        className={Styles.nsa_master_menu_arrow}
-                    />
-                </div>
-            );
-
-        return (
-            <a href={fl.link.url} className={Styles.nsa_master_menu_list_content}>
-                <span className={Styles.nsa_master_menu_list_text}>{fl_name}</span>
-            </a>
-        );
-    }
-
-    useEffect(() =>
-    {
-        setState((prev) => ({
-            ...prev,
-            chain: [],
-            active: !!props.search && filtered_fls.length > 0,
-        }));
-        // eslint-disable-next-line
-    }, [props.search]);
-
-    let fls = useMemo(() =>
-    {
-        return getVisibleFLs(props.fls);
-        // eslint-disable-next-line
-    }, [props.product, props.fls]);
-
-    let filtered_fls = getFilteredFLs(fls);
-    let uniqe_name_map = buildUniqueNameMap(filtered_fls);
-
-    if (props.search && filtered_fls.length === 0)
-        if (!SearchOperation.match(props.product.name, props.search))
-            return <></>;
-
-    let product_name = props.product.name.replace("Namirasoft ", "");
-
-    return (
-        <li className={Styles.nsa_master_menu_list_item} >
-            <figure
-                className={Styles.nsa_master_menu_list_content}
-                role={"button"}
-                title={product_name}
-                onClick={() =>
-                {
-                    setState((prev) => ({
-                        ...prev,
-                        chain: [],
-                        active: props.open ? !prev.active : true,
-                    }));
-                    props.onClick();
-                }}
-            >
-                <img
-                    src={props.product.logo ?? ""} alt={props.product.name} width={24} height={24}
-                    className={Styles.nsa_master_menu_logo}
-                />
-                <figcaption className={Styles.nsa_master_menu_list_text}>{product_name}</figcaption>
-                {
-                    props.fls.length > 0 &&
-                    <img
-                        src={`https://static.namirasoft.com/image/concept/arrow/${state.active ? "down" : "right"}/blue.svg`} alt={"angle"} width={12} height={12}
-                        className={Styles.nsa_master_menu_arrow}
-                    />
-                }
-            </figure>
-
-            {
-                state.loading &&
-                <NSLoading
-                    small={true}
-                    hideDescription={true}
-                    hideTitle={true}
-                    style={{ padding: "2rem 0" }}
-                />
-            }
-
-            {
-                state.active && filtered_fls.length > 0 &&
-                <ul className={Styles.nsa_master_menu_list}>
-                    {
-                        state.chain.length > 0 &&
-                        <li className={Styles.nsa_master_menu_list_item}>
-                            <div
-                                className={`${Styles.nsa_master_menu_list_content} ${Styles.back}`}
-                                onClick={() =>
-                                {
-                                    setState((prev) =>
-                                    {
-                                        prev.chain?.pop();
-                                        return { ...prev, chain: prev.chain }
-                                    });
-                                }}
-                            >
-                                <span className={Styles.nsa_master_menu_list_text}>..</span>
-                            </div>
-                        </li>
-                    }
-                    {
-                        filtered_fls.map(item => (
-                            <li key={item.id} className={Styles.nsa_master_menu_list_item}>
-                                {getFilterLinkNode(item)}
-                            </li>
-                        ))
-                    }
-                </ul>
-            }
-        </li>
-    )
-}
-
+import { FilterLinkFullRow } from "namirasoft-api-link";
+import { ProductFullRow } from 'namirasoft-api-product';
+import { NSLoading } from 'namirasoft-site-react';
+import { useEffect, useMemo, useState } from 'react';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import Styles from "./NSAMasterMenu.module.css";
+import { SearchOperation } from "namirasoft-core";
+
+export interface NSAMasterMenuItemProps extends NSARouterMakerResult
+{
+    product: ProductFullRow;
+    fls: FilterLinkFullRow[];
+    open: boolean;
+    search?: string;
+    onClick: () => void;
+}
+
+export interface NSAMasterMenuItemState
+{
+    chain: FilterLinkFullRow[];
+    active: boolean;
+    loading: boolean;
+}
+
+function NSAMasterMenuItem(props: NSAMasterMenuItemProps)
+{
+    const [state, setState] = useState<NSAMasterMenuItemState>({
+        chain: [],
+        active: false,
+        loading: false
+    });
+
+    const getVisibleFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
+    {
+        let is_logged_in = props.account.token_manager.exists();
+
+        let initial_filters = fls?.filter(filter =>
+        {
+            if (!filter.link)
+                return true;
+            return is_logged_in ? filter.link.private : filter.link.public;
+        }) ?? [];
+
+        return pruneOrphanFLs(initial_filters).sort((a, b) => a.order - b.order);
+    }
+
+    const pruneOrphanFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
+    {
+        let result = [...fls];
+
+        while (true)
+        {
+            let previous_length = result.length;
+            let parent_ids = new Set(result.map(f => f.parent_id));
+
+            result = result.filter(filter =>
+            {
+                if (filter.link?.url)
+                    return true;
+                return parent_ids.has(filter.id);
+            });
+
+            if (result.length === previous_length)
+                break;
+        }
+
+        return result;
+    }
+
+    const getFilteredFLs = (fls: FilterLinkFullRow[]): FilterLinkFullRow[] =>
+    {
+        let selected_item = state.chain?.[state.chain.length - 1];
+
+        if (selected_item)
+            return fls.filter(link => link.parent_id === selected_item.id) ?? [];
+
+        if (props.search)
+            if (!SearchOperation.match(props.product.name, props.search))
+                return SearchOperation.filter(fls, item => item.name ?? "", props.search)
+
+        // If the search matches the product itself or there is no search
+        return fls.filter(link => link.parent_id === null) ?? [];
+    }
+
+    function buildUniqueNameMap(fls: FilterLinkFullRow[]): Record<number, string>
+    {
+        let name_map = new Map<number, FilterLinkFullRow>();
+        props.fls.forEach(fl => name_map.set(fl.id, fl));
+
+        function getNameChain(item: FilterLinkFullRow): string[]
+        {
+            const chain: string[] = [];
+            let current: FilterLinkFullRow | undefined = item;
+
+            while (current)
+            {
+                if (current.name)
+                    chain.unshift(current.name);
+
+                if (!current.parent_id)
+                    break;
+
+                current = name_map.get(current.parent_id);
+            }
+
+            return chain;
+        }
+
+        const result: Record<number, string> = {};
+
+        for (const fl of fls)
+            result[fl.id] = getNameChain(fl).join(" / ");
+
+        return result;
+    }
+
+    const hasChildren = (fl: FilterLinkFullRow) =>
+    {
+        return (props.fls.findIndex(link => link.parent_id === fl.id) ?? -1) > -1;
+    }
+
+    const getFilterLinkNode = (fl: FilterLinkFullRow) =>
+    {
+        let fl_name = fl.name;
+        if (props.search && state.chain.length === 0)
+            fl_name = uniqe_name_map[fl.id]
+
+        if (hasChildren(fl))
+            return (
+                <div
+                    className={Styles.nsa_master_menu_list_content}
+                    onClick={() =>
+                    {
+                        setState((prev) => ({ ...prev, chain: [...prev.chain ?? [], fl] }));
+                    }}
+                >
+                    <span className={Styles.nsa_master_menu_list_text}>{fl_name}</span>
+                    <img
+                        src={`https://static.namirasoft.com/image/concept/arrow/right/blue.svg`} alt={"angle"} width={10} height={10}
+                        className={Styles.nsa_master_menu_arrow}
+                    />
+                </div>
+            );
+
+        return (
+            <a href={fl.link.url} className={Styles.nsa_master_menu_list_content}>
+                <span className={Styles.nsa_master_menu_list_text}>{fl_name}</span>
+            </a>
+        );
+    }
+
+    useEffect(() =>
+    {
+        setState((prev) => ({
+            ...prev,
+            chain: [],
+            active: !!props.search && filtered_fls.length > 0,
+        }));
+        // eslint-disable-next-line
+    }, [props.search]);
+
+    let fls = useMemo(() =>
+    {
+        return getVisibleFLs(props.fls);
+        // eslint-disable-next-line
+    }, [props.product, props.fls]);
+
+    let filtered_fls = getFilteredFLs(fls);
+    let uniqe_name_map = buildUniqueNameMap(filtered_fls);
+
+    if (props.search && filtered_fls.length === 0)
+        if (!SearchOperation.match(props.product.name, props.search))
+            return <></>;
+
+    let product_name = props.product.name.replace("Namirasoft ", "");
+
+    return (
+        <li className={Styles.nsa_master_menu_list_item} >
+            <figure
+                className={Styles.nsa_master_menu_list_content}
+                role={"button"}
+                title={product_name}
+                onClick={() =>
+                {
+                    setState((prev) => ({
+                        ...prev,
+                        chain: [],
+                        active: props.open ? !prev.active : true,
+                    }));
+                    props.onClick();
+                }}
+            >
+                <img
+                    src={props.product.logo ?? ""} alt={props.product.name} width={24} height={24}
+                    className={Styles.nsa_master_menu_logo}
+                />
+                <figcaption className={Styles.nsa_master_menu_list_text}>{product_name}</figcaption>
+                {
+                    props.fls.length > 0 &&
+                    <img
+                        src={`https://static.namirasoft.com/image/concept/arrow/${state.active ? "down" : "right"}/blue.svg`} alt={"angle"} width={12} height={12}
+                        className={Styles.nsa_master_menu_arrow}
+                    />
+                }
+            </figure>
+
+            {
+                state.loading &&
+                <NSLoading
+                    small={true}
+                    hideDescription={true}
+                    hideTitle={true}
+                    style={{ padding: "2rem 0" }}
+                />
+            }
+
+            {
+                state.active && filtered_fls.length > 0 &&
+                <ul className={Styles.nsa_master_menu_list}>
+                    {
+                        state.chain.length > 0 &&
+                        <li className={Styles.nsa_master_menu_list_item}>
+                            <div
+                                className={`${Styles.nsa_master_menu_list_content} ${Styles.back}`}
+                                onClick={() =>
+                                {
+                                    setState((prev) =>
+                                    {
+                                        prev.chain?.pop();
+                                        return { ...prev, chain: prev.chain }
+                                    });
+                                }}
+                            >
+                                <span className={Styles.nsa_master_menu_list_text}>..</span>
+                            </div>
+                        </li>
+                    }
+                    {
+                        filtered_fls.map(item => (
+                            <li key={item.id} className={Styles.nsa_master_menu_list_item}>
+                                {getFilterLinkNode(item)}
+                            </li>
+                        ))
+                    }
+                </ul>
+            }
+        </li>
+    )
+}
+
 export default NSAMasterMenuItem;