namirasoft-site-react 1.4.69 → 1.4.73

package/src/components/NSGroupedList.tsx

@@ -29,7 +29,8 @@ interface INSGroupedListState
 	isVisible: boolean;
 }
 
-export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState> {
+export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
+{
 	private groupListRef = createRef<HTMLDivElement>();
 
 	constructor(props: INSGroupedListProps) 
@@ -40,7 +41,7 @@ export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedList
 		};
 		this.handleClickOutside = this.handleClickOutside.bind(this);
 		this.hide = this.hide.bind(this);
-		this.show = this.show.bind(this); 
+		this.show = this.show.bind(this);
 	}
 
 	override componentDidMount() 
@@ -48,36 +49,43 @@ export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedList
 		document.addEventListener('mousedown', this.handleClickOutside);
 	}
 
-	override componentWillUnmount() {
+	override componentWillUnmount()
+	{
 		document.removeEventListener('mousedown', this.handleClickOutside);
 	}
 
-	handleClickOutside(event: MouseEvent) {
-		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node)) {
+	handleClickOutside(event: MouseEvent)
+	{
+		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
+		{
 			this.hide();
 		}
 	}
 
-	hide() {
+	hide()
+	{
 		this.setState({ isVisible: false });
 	}
 
-	show() {  
+	show()
+	{
 		this.setState({ isVisible: true }, () =>
 		{
 			console.log("State after show:", this.state);
 		});
 	}
 
-	override render() {
-		if (!this.state.isVisible) {
+	override render()
+	{
+		if (!this.state.isVisible)
+		{
 			return null;
 		}
 
 		return (
 			<div ref={this.groupListRef} className={Styles.ns_group_list_parent}>
 				{this.props.groups.map((group, index) => (
-					<ul key={index} className={Styles.ns_group_list}>
+					<ul key={`NSGroupedList_ul_key_${index}`} className={Styles.ns_group_list}>
 						<div className='d-flex w-100 justify-content-between align-items-center'>
 							<span className={Styles.ns_group_category}>{group.text}
 								<img
@@ -89,8 +97,8 @@ export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedList
 								/>
 							</span>
 						</div>
-						{group.items.map((item, index) => (
-							<li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
+						{group.items.map((item) => (
+							<li key={`NSGroupedList_li_key_${index}`} onClick={() => this.props.onClick(group.name, item.name)}>
 								<div className={Styles.ns_group_item}>
 									<span>{item.text && <span>{item.text}</span>}</span>
 									<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>

package/src/components/NSHeader.tsx

@@ -11,241 +11,241 @@ import { EnvService } from 'namirasoft-core'
 import { INSRouterProps } from "../routing/INSRouterProps";
 export interface INSHeaderProps extends IBaseComponentProps, INSRouterProps
 {
-    scope: string;
-    name: string;
-    logo: string;
-    nav?: IBaseComponentProps;
-    header: IHeaderProps;
-    isLoggedIn: () => boolean;
+	scope: string;
+	name: string;
+	logo: string;
+	nav?: IBaseComponentProps;
+	header: IHeaderProps;
+	isLoggedIn: () => boolean;
 }
 
 export interface NSHeaderState
 {
-    filters: FilterLinkFullRow[];
-    selected: FilterLinkFullRow | null;
-    showNavbar: boolean;
+	filters: FilterLinkFullRow[];
+	selected: FilterLinkFullRow | null;
+	showNavbar: boolean;
 }
 
 export class NSHeader extends React.Component<INSHeaderProps, NSHeaderState>
 {
-    private cache: CacheService<{
-        rows: FilterLinkFullRow[];
-        count: number;
-    }>;
+	private cache: CacheService<{
+		rows: FilterLinkFullRow[];
+		count: number;
+	}>;
 
-    constructor(props: INSHeaderProps)
-    {
-        super(props);
-        this.state = {
-            filters: [],
-            selected: null,
-            showNavbar: false
-        };
-        this.hasChild = this.hasChild.bind(this);
-        this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
-        this.render_menu = this.render_menu.bind(this);
-        this.render_menuItem = this.render_menuItem.bind(this);
-        this.handleShowNavbar = this.handleShowNavbar.bind(this);
-        this.cache = new CacheService<{
-            rows: FilterLinkFullRow[];
-            count: number;
-        }>("ns-header", 720, new IStorageLocal(), async () =>
-        {
-            let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK", true).getString();
-            let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, props.notifier.onError);
-            return server.filter.ListFilterLinks(this.props.scope, this.props.name, null, null, null);
-        }, () => { });
-    }
-    override componentDidMount(): void
-    {
-        this.cache.get().then(filters =>
-        {
-            this.setState({ filters: filters.rows });
-        }).catch(() => { });
-    }
-    private onMenuItemToggled(checked: boolean, selected: FilterLinkFullRow)
-    {
-        if (checked)
-            this.setState({ selected });
-    }
-    private getFilters(): FilterLinkFullRow[]
-    {
-        let loggedin = this.props.isLoggedIn();
-        let ans = this.state.filters?.filter(f =>
-        {
-            if (f.link)
-            {
-                if (loggedin)
-                    return f.link.private;
-                return f.link.public;
-            }
-            return true;
-        }) ?? [];
+	constructor(props: INSHeaderProps)
+	{
+		super(props);
+		this.state = {
+			filters: [],
+			selected: null,
+			showNavbar: false
+		};
+		this.hasChild = this.hasChild.bind(this);
+		this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
+		this.render_menu = this.render_menu.bind(this);
+		this.render_menuItem = this.render_menuItem.bind(this);
+		this.handleShowNavbar = this.handleShowNavbar.bind(this);
+		this.cache = new CacheService<{
+			rows: FilterLinkFullRow[];
+			count: number;
+		}>("ns-header", 720, new IStorageLocal(), async () =>
+		{
+			let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK", true).getString();
+			let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, props.notifier.onError);
+			return server.filter.ListFilterLinks(this.props.scope, this.props.name, null, null, null);
+		}, () => { });
+	}
+	override componentDidMount(): void
+	{
+		this.cache.get().then(filters =>
+		{
+			this.setState({ filters: filters.rows });
+		}).catch(() => { });
+	}
+	private onMenuItemToggled(checked: boolean, selected: FilterLinkFullRow)
+	{
+		if (checked)
+			this.setState({ selected });
+	}
+	private getFilters(): FilterLinkFullRow[]
+	{
+		let loggedin = this.props.isLoggedIn();
+		let ans = this.state.filters?.filter(f =>
+		{
+			if (f.link)
+			{
+				if (loggedin)
+					return f.link.private;
+				return f.link.public;
+			}
+			return true;
+		}) ?? [];
 
-        while (true)
-        {
-            let old_length = ans.length;
-            let old = ans;
-            ans = ans.filter(f =>
-            {
-                if (f.link?.url)
-                    return true;
-                return old.filter(x => x.parent_id === f.id).length > 0;
-            });
-            let new_length = ans.length;
-            if (old_length === new_length)
-                break;
-        }
+		while (true)
+		{
+			let old_length = ans.length;
+			let old = ans;
+			ans = ans.filter(f =>
+			{
+				if (f.link?.url)
+					return true;
+				return old.filter(x => x.parent_id === f.id).length > 0;
+			});
+			let new_length = ans.length;
+			if (old_length === new_length)
+				break;
+		}
 
-        return ans;
-    }
-    private hasChild(id: number): boolean
-    {
-        return this.getFilters().filter(f => f.parent_id === id).length > 0;
-    }
-    handleShowNavbar(): void
-    {
-        this.setState({ showNavbar: !this.state.showNavbar });
-    }
-    override render()
-    {
-        let nav: IBaseComponentProps | undefined = this.props.nav;
-        if (!nav)
-            nav = { style: {} };
-        if (!nav.style)
-            nav.style = {};
-        if (!nav.style?.backgroundColor)
-            nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
-        return (
-            <header id={this.props.id}
-                className={`${Styles.ns_header} ${this.props.classList?.join(" ")}`}
-                style={this.props.style}
-            >
-                <nav
-                    id={this.props.nav?.id}
-                    className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ")}`}
-                    style={nav?.style}
-                >
-                    <div className={`${Styles.ns_navbar_parent_content} container`}>
-                        <a className="me-2" href="/">
-                            <img
-                                src={this.props.logo}
-                                alt="Logo"
-                                width={48}
-                                height={48}
-                            />
+		return ans;
+	}
+	private hasChild(id: number): boolean
+	{
+		return this.getFilters().filter(f => f.parent_id === id).length > 0;
+	}
+	handleShowNavbar(): void
+	{
+		this.setState({ showNavbar: !this.state.showNavbar });
+	}
+	override render()
+	{
+		let nav: IBaseComponentProps | undefined = this.props.nav;
+		if (!nav)
+			nav = { style: {} };
+		if (!nav.style)
+			nav.style = {};
+		if (!nav.style?.backgroundColor)
+			nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
+		return (
+			<header id={this.props.id}
+				className={`${Styles.ns_header} ${this.props.classList?.join(" ")}`}
+				style={this.props.style}
+			>
+				<nav
+					id={this.props.nav?.id}
+					className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ")}`}
+					style={nav?.style}
+				>
+					<div className={`${Styles.ns_navbar_parent_content} container`}>
+						<a className="me-2" href="/">
+							<img
+								src={this.props.logo}
+								alt="Logo"
+								width={48}
+								height={48}
+							/>
 						</a>
-						{ this.props.header.logo_title &&
+						{this.props.header.logo_title &&
 							<h2 className={`${Styles.ns_navbar_title} mb-0 flex-shrink-0`}>
 								{this.props.header.logo_title}
-							</h2> 
+							</h2>
 						}
 						<div className={`${Styles.ns_navbar_content} `} >
-                            <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
-                                {this.render_menu(0, null)}
-                            </div>
-                            {
-                                this.props.header &&
-                                <div className="d-flex gap-3 align-items-center">
-                                    <span className={Styles.ns_navbar_title}>{this.props.header?.title}</span>
-                                    {
-                                        this.props.header.icons.map((icon, index) =>
+							<div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
+								{this.render_menu(0, null)}
+							</div>
+							{
+								this.props.header &&
+								<div className="d-flex gap-3 align-items-center">
+									<span className={Styles.ns_navbar_title}>{this.props.header?.title}</span>
+									{
+										this.props.header.icons.map((icon, index) =>
 											<div
-												key={index}
+												key={`NSHeader_div_icon_key${index}`}
 												title={icon.tooltip}
-												className={Styles.ns_header_icon} 
+												className={Styles.ns_header_icon}
 											>
-                                                <img
-                                                    src={icon.src}
-                                                    alt={icon.alt}
-                                                    width={20}
-                                                    height={20}
+												<img
+													src={icon.src}
+													alt={icon.alt}
+													width={20}
+													height={20}
 													onClick={() => icon.onClicked(icon)}
-                                                />
-                                                {
-                                                    icon.count !== 0 && icon.count &&
+												/>
+												{
+													icon.count !== 0 && icon.count &&
 													<div
 														className={Styles.ns_navbar_notification_count}
 														onClick={() => icon.onClicked(icon)}
-														>
-                                                        {
-                                                            icon.count < 100 ? icon.count : "+99"
-                                                        }
-                                                    </div>
-                                                }
-                                                {
-                                                    icon.children
-                                                }
-                                            </div>
-                                        )
-                                    }
-                                </div>
-                            }
-                            <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
-                                <img
-                                    src=
-                                    {
-                                        this.state.showNavbar ?
-                                            "https://static.namirasoft.com/image/concept/close/white.svg"
-                                            : "https://static.namirasoft.com/image/concept/menu/burger-white.svg"
-                                    }
-                                    alt="Menu Icon"
-                                    width={24}
-                                    height={24}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </nav>
-            </header>
-        );
-    }
-    private render_menu(level: number, parent_id: number | null)
-    {
-        let fs: FilterLinkFullRow[] = this.getFilters().filter(f => f.parent_id === parent_id);
-        return (
-            <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
-                {(fs?.map(f => this.render_menuItem(level, f)))}
-            </div>
-        );
-    }
-    private render_menuItem(level: number, filter: FilterLinkFullRow)
-    {
-        if (this.hasChild(filter.id))
-        {
-            let sub_menus = <></>;
-            if (level === 0)
-                if (this.state.selected)
-                {
-                    sub_menus =
-                        <div
-                            id={`dropdown_items${filter.id}`}>
-                            {this.render_menu(1, this.state.selected.id)}
-                        </div >
-                }
-            return <NavDropdown
-                onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
-                className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
-                title={filter.name}
-                key={filter.id}
-                id={`dropdown_parent${filter.id}`}>
-                {sub_menus}
-            </NavDropdown >;
-        }
-        else
-        {
-            let href = filter.link?.url;
-            if (process.env.REACT_APP_STANDALONE)
-                if (href)
-                {
-                    let url = new URL(href);
-                    url.host = window.location.host;
-                    url.protocol = window.location.protocol;
-                    href = url.toString();
-                }
-            return (
-                <a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={href}>{filter.name}</a>
-            );
-        }
-    }
+													>
+														{
+															icon.count < 100 ? icon.count : "+99"
+														}
+													</div>
+												}
+												{
+													icon.children
+												}
+											</div>
+										)
+									}
+								</div>
+							}
+							<div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
+								<img
+									src=
+									{
+										this.state.showNavbar ?
+											"https://static.namirasoft.com/image/concept/close/white.svg"
+											: "https://static.namirasoft.com/image/concept/menu/burger-white.svg"
+									}
+									alt="Menu Icon"
+									width={24}
+									height={24}
+								/>
+							</div>
+						</div>
+					</div>
+				</nav>
+			</header>
+		);
+	}
+	private render_menu(level: number, parent_id: number | null)
+	{
+		let fs: FilterLinkFullRow[] = this.getFilters().filter(f => f.parent_id === parent_id);
+		return (
+			<div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
+				{(fs?.map(f => this.render_menuItem(level, f)))}
+			</div>
+		);
+	}
+	private render_menuItem(level: number, filter: FilterLinkFullRow)
+	{
+		if (this.hasChild(filter.id))
+		{
+			let sub_menus = <></>;
+			if (level === 0)
+				if (this.state.selected)
+				{
+					sub_menus =
+						<div
+							id={`dropdown_items${filter.id}`}>
+							{this.render_menu(1, this.state.selected.id)}
+						</div >
+				}
+			return <NavDropdown
+				onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
+				className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
+				title={filter.name}
+				key={filter.id}
+				id={`dropdown_parent${filter.id}`}>
+				{sub_menus}
+			</NavDropdown >;
+		}
+		else
+		{
+			let href = filter.link?.url;
+			if (process.env.REACT_APP_STANDALONE)
+				if (href)
+				{
+					let url = new URL(href);
+					url.host = window.location.host;
+					url.protocol = window.location.protocol;
+					href = url.toString();
+				}
+			return (
+				<a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={href}>{filter.name}</a>
+			);
+		}
+	}
 }

package/src/components/NSLayout.tsx

@@ -71,7 +71,7 @@ export function NSLayout(props: INSLayoutProps)
 				<>
 					{
 						props.notifications.map((notification, index) =>
-							<Fragment key={index}>
+							<Fragment key={`NSLayout_fragment_key_${index}`}>
 								<NSBarNotification {...notification} />
 							</Fragment>
 						)
@@ -79,7 +79,7 @@ export function NSLayout(props: INSLayoutProps)
 				</>
 			}
 			{
-				alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={index} {...alert} />)
+				alerts.length !== 0 && alerts.map((alert, index) => <NSBarAlert key={`NSLayout_NSBarAlert_key_${index}`} {...alert} />)
 			}
 			{
 				isValidAction(props.action) && <NSBarAction {...props.action} />

package/src/components/NSLoading.module.css

@@ -21,9 +21,11 @@
 		repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
 		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
 	-webkit-mask-composite: destination-in;
-	mask-composite: intersect;
-	mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
-		radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+
+	mask:
+	repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
+	radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 calc(100% - 8px));
+	mask-composite: destination-in;
 	animation: s4 1s infinite steps(10);
 }
 

package/src/components/NSRange.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import Styles from './NSRange.module.css';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
-
 import { Color } from "../Color";
 
 export interface NSRangeRow
@@ -60,7 +59,7 @@ export function NSRange(props: INSRangeProps)
 						{
 							props.data?.map((data, index) =>
 								<span
-									key={index}
+									key={`NSRange_span_key_${index}`}
 									className={Styles.ns_range_time_line}
 									style={{
 										background: Color.getColor(data?.percentage),

package/src/components/NSRepeater.tsx

@@ -166,7 +166,7 @@ export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<I
 					{
 						if (this.state.items[index])
 							return this.props.createItem(i++, ref, this.onChange, this.onDelete);
-						return <Fragment key={index}></Fragment>;
+						return <Fragment key={`NSRepeater_fragment_key_${index}`}></Fragment>;
 					}
 					)
 				}

package/src/components/NSTabPage.tsx

@@ -1,7 +1,7 @@
 "use client";
-import Styles from './NSTabPage.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { Component } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSTabPage.module.css';
 
 export interface NSTabPageTab
 {
@@ -46,7 +46,7 @@ export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
 					{
 						this.props.tabs.map((tab, index) => (
 							<li
-								key={index}
+								key={`NSTabPage_li_key_${index}`}
 								className={this.state.activeTabIndex === index ? Styles.active : ''}
 								onClick={() =>
 								{
@@ -63,7 +63,7 @@ export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
 				{
 					this.props.tabs.map((tab, index) => (
 						<div
-							key={index}
+							key={`NSTabPage_div_key_${index}`}
 							className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
 							style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
 						>

package/src/components/NSTimelineMonthly.tsx

@@ -1,6 +1,6 @@
-import Styles from './NSTimelineMonthly.module.css';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { Color } from "../Color"
+import Styles from './NSTimelineMonthly.module.css';
 export interface NSdata
 {
 	title: string;
@@ -27,7 +27,7 @@ export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
 				<div className={Styles.ns_time_line_monthly}>
 					{
 						props.data.map((card, index) => (
-							<div className={Styles.ns_time_line_monthly_card} key={index}>
+							<div className={Styles.ns_time_line_monthly_card} key={`NSTimelineMonthly_div_key_${index}`}>
 								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
 								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
 								<div className={Styles.ns_time_line_monthly_card_parent_chart}>

package/src/main.ts

@@ -102,6 +102,7 @@ export * from "./formatter/StringFormatter";
 export * from "./formatter/TimeFormatter";
 export * from "./formatter/UnknowFormatter";
 export * from "./pages/NSNotFoundPage";
+export * from "./pages/NSUpdating";
 export * from "./props/IBaseComponentProps";
 export * from "./props/IHeaderIconProps";
 export * from "./props/IHeaderProps";
@@ -115,5 +116,4 @@ export * from "./routing/INSRouterMaker";
 export * from "./routing/INSRouterProps";
 export * from "./routing/INSRouterState";
 export * from "./routing/Notifier";
-export * from "./routing/NSRouterMaker";
-export * from "./pages/NSUpdating";
+export * from "./routing/NSRouterMaker";