namirasoft-site-react 1.5.53 → 1.5.55

package/src/components/NSBoxBaseCombo.tsx

@@ -7,6 +7,7 @@ import React, { createRef } from "react";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { Validator } from "../Validator";
+import { LinkOperation } from "../LinkOperation";
 import { INSBox } from "./INSBox";
 import Styles from "./NSBoxBaseCombo.module.css";
 import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
@@ -62,6 +63,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 	private autofillName = `ns-combo-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
 	private set_value: ({ value: string, callback?: () => void }) | null = null;
 	private set_values: ({ values: string[], callback?: () => void }) | null = null;
+	private default_value_applied: boolean = false;
 	private service: SetTimeouService;
 	constructor(props: NSBoxBaseComboProps<Data, NSBoxBaseCombo<Data>>)
 	{
@@ -164,6 +166,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 				return;
 			}
 		}
+		this.set_value = null;
 		this.setDataOne(data, callback);
 	}
 	getValueAll(checkError: boolean = true): string[]
@@ -182,6 +185,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 				this.set_values = { values, callback };
 				return;
 			}
+		this.set_values = null;
 		this.setDataAll(data_list, callback);
 	}
 	getDataOne(checkError: boolean = true): Data | null
@@ -284,6 +288,9 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 		{
 			let rows = [...items.rows, ...(this.state.items ?? [])];
 			this.setRows(this.state.page_has_more, rows);
+		}).catch((error) =>
+		{
+			console.error("NSBoxBaseCombo.loadID: getItems failed", error);
 		});
 	}
 	public getRows(): Data[]
@@ -321,21 +328,17 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 		});
 		this.setState({ items: rows, items_list, items_dict, loading: false, page_has_more }, () =>
 		{
-			let callback: (() => void) | undefined = undefined;
-			if (this.set_value?.callback)
-			{
-				callback = () =>
-				{
-					let cb = this.set_value?.callback;
-					this.set_value = null;
-					cb?.();
-				};
-			}
-			if (this.set_value)
-				this.setValue(this.set_value.value, callback);
-			else if (this.set_values)
-				this.setValueAll(this.set_values.values, callback);
-			else if (this.props.defaultValue)
+			let set_value = this.set_value;
+			let set_values = this.set_values;
+			let apply_default = !this.default_value_applied;
+			this.set_value = null;
+			this.set_values = null;
+			this.default_value_applied = true;
+			if (set_value)
+				this.setValue(set_value.value, set_value.callback);
+			else if (set_values)
+				this.setValueAll(set_values.values, set_values.callback);
+			else if (apply_default && this.props.defaultValue)
 				this.setValue(this.props.defaultValue);
 			this.props.onLoaded?.(this);
 		});
@@ -384,7 +387,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 					{
 						let res = this.props.onList?.();
 						if (res)
-							window.open(res, '_blank');
+							LinkOperation.openBlank(res);
 					}
 				});
 			if (this.props.onNew)
@@ -395,7 +398,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 					{
 						let res = this.props.onNew?.();
 						if (res)
-							window.open(res, '_blank');
+							LinkOperation.openBlank(res);
 					}
 				});
 			if (this.props.onView)
@@ -411,7 +414,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 							{
 								let res = this.props.onView?.(id);
 								if (res)
-									window.open(res, '_blank');
+									LinkOperation.openBlank(res);
 							}
 						}
 					});
@@ -454,7 +457,7 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 				<Select
 					id={this.props.id}
 					mode={this.props.multiple ? "multiple" : undefined}
-					className={[Styles.ns_box_base_combo_select, this.props.input?.classList].join(" ")}
+					className={[Styles.ns_box_base_combo_select, this.props.input?.classList?.join(" ")].join(" ")}
 					placeholder={this.props.placeholder ?? "Please select one"}
 					defaultValue={this.props.defaultValue}
 					value={this.props.multiple ? (this.state.data_list.map(v => this.props.getValue(v))) : (this.state.data ? this.props.getValue(this.state.data) : null)}

package/src/components/NSBoxBooleans.tsx

@@ -96,7 +96,7 @@ export class NSBoxBooleans extends React.Component<NSBoxBooleansProps, NSboxBool
 		if (checked)
 		{
 			if (!values.includes(value))
-				values.push(value);
+				values = [...values, value];
 		}
 		else
 			values = values.filter(item => item !== value);

package/src/components/NSBoxDouble.tsx

@@ -11,7 +11,7 @@ import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { NamingConvention } from "namirasoft-core";
 import { IValidationPrecisionProps } from "../props/IValidationPrecisionProps";
 import { INSBox } from "./INSBox";
-import { IntegerFormatter } from "../formatter/IntegerFormatter";
+import { FloatFormatter } from "../formatter/FloatFormatter";
 
 export interface NSBoxDoubleProps extends IBaseComponentProps, IValidationProps, IValidationNumberProps, IValidationPrecisionProps, INSBoxBaseLayoutProps<NSBoxDouble, number>
 {
@@ -84,7 +84,7 @@ export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleSt
 				ref={this.NSBoxBaseLayout_Main}
 				{...this.props}
 				menu={menu}
-				getValue={() => new IntegerFormatter().format(this.getValue(false))}
+				getValue={() => new FloatFormatter().format(this.getValue(false))}
 			>
 				<input
 					id={this.props.input?.id}

package/src/components/NSBoxDynamics.tsx

@@ -55,6 +55,7 @@ export class NSBoxDynamics extends React.Component<NSBoxDynamicsProps, NSBoxDyna
 				{
 					(this.props.variables ?? []).map((variable, index) =>
 						<NSBoxDynamic
+							key={variable.name}
 							ref={this.NSBoxDynamic_Refs[variable.name]}
 							{...this.props}
 							name={`${this.props.name}_${index}`}

package/src/components/NSBoxEntity.tsx

@@ -118,7 +118,7 @@ export class NSBoxEntity<Data> extends React.Component<NSBoxEntityProps<Data>> i
 	{
 		let onNew: (() => string | void) | undefined = this.props.onNew;
 		let onList: (() => string | void) | undefined = this.props.onList;
-		let onView: ((id: string) => string | void) | undefined = this.props.onList;
+		let onView: ((id: string) => string | void) | undefined = this.props.onView;
 		if (this.props.table)
 		{
 			if (!onNew)

package/src/components/NSBoxFilePath.tsx

@@ -89,7 +89,7 @@ export class NSBoxFilePath extends React.Component<NSBoxFilePathProps, NSBoxFile
 					// onChange={e => this.setValue(e.target.value)}
 					// onClick={() => { this.props.onClicked?.(this); }}
 					style={{
-						background: `FilePath("https://static.namirasoft.com/image/concept/type/file-path.png") white no-repeat scroll center right 4px`,
+						background: `url("https://static.namirasoft.com/image/concept/type/file-path.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",
 						...this.props.input?.style,
 						lineHeight: "48px",

package/src/components/NSBoxIPV4.tsx

@@ -95,7 +95,7 @@ export class NSBoxIPV4 extends React.Component<NSBoxIPV4Props, NSBoxIPV4State> i
 					minLength={7}
 					maxLength={15}
 					size={15}
-					pattern={IPV4Schema.REGEX + ""}
+					pattern={IPV4Schema.REGEX.source}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ipv4%266.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",

package/src/components/NSBoxIPV6.tsx

@@ -92,7 +92,7 @@ export class NSBoxIPV6 extends React.Component<NSBoxIPV6Props, NSBoxIPV6State> i
 					value={this.state.value ?? ""}
 					onChange={e => this.setValue(e.target.value)}
 					onClick={() => { this.props.onClicked?.(this); }}
-					pattern={IPV6Schema.REGEX + ""}
+					pattern={IPV6Schema.REGEX.source}
 					style={{
 						background: `url("https://static.namirasoft.com/image/concept/type/ipv4%266.png") white no-repeat scroll center right 4px`,
 						backgroundSize: "24px",

package/src/components/NSBoxPhone.tsx

@@ -56,7 +56,9 @@ export class NSBoxPhone extends React.Component<NSBoxPhoneProps, NSBoxPhoneState
 		return NSBoxBaseLayout.checkGetValue(this, checkError, () =>
 		{
 			let value = this.state.value?.trim();
-			if (!value?.startsWith('+'))
+			if (!value)
+				return null;
+			if (!value.startsWith('+'))
 				value = '+' + value;
 			return value;
 		});

package/src/components/NSBoxSchemaBase.tsx

@@ -110,7 +110,7 @@ export class NSBoxSchemaBase extends React.Component<NSBoxSchemaBaseProps, NSBox
 			let invlid_list = this.NSBoxString_InalidList.current?.getValue(checkError)?.split(",") ?? [];
 			let place_holder = this.NSBoxString_PlaceHolder.current?.getValue(checkError) ?? undefined;
 			let enum_object: { [name: string]: string; } = {};
-			invlid_list.forEach((v) => enum_object[v] = v);
+			valid_list.forEach((v) => enum_object[v] = v);
 
 			let ans = null;
 			if (type)
@@ -298,7 +298,7 @@ export class NSBoxSchemaBase extends React.Component<NSBoxSchemaBaseProps, NSBox
 							min_length = schema.min_length;
 							max_length = schema.max_length;
 							if (schema.regex)
-								regex = schema.regex + "";
+								regex = schema.regex.source;
 							break;
 						}
 					case VariableType.Date:

package/src/components/NSBoxURL.tsx

@@ -10,6 +10,7 @@ import { safeMenuMenuItem } from "./NSMenuButton";
 import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
 import { INSBox } from "./INSBox";
 import { NamingConvention } from "namirasoft-core";
+import { LinkOperation } from "../LinkOperation";
 
 export interface NSBoxURLProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxURL, string>
 {
@@ -78,7 +79,7 @@ export class NSBoxURL extends React.Component<NSBoxURLProps, NSBoxURLState> impl
 					icon: "https://static.namirasoft.com/image/concept/type/url.png",
 					onClick: () =>
 					{
-						window.open(this.state.value ?? "", "_blank");
+						LinkOperation.openBlank(this.state.value ?? "");
 					},
 				})
 		});

package/src/components/NSChartDoughnut.tsx

@@ -84,6 +84,8 @@ export function NSChartDoughnut(props: NSChartDoughnutProps)
 			const { ctx, chartArea: { width, height } } = chart;
 			const meta = chart.getDatasetMeta(0);
 			const arc = meta.data[0] as unknown as ArcElementType;
+			if (!arc)
+				return;
 			ctx.save();
 			const fontSize = Math.max(12, arc.innerRadius / 3);
 			ctx.font = `${fontSize}px sans-serif`;

package/src/components/NSChartPie.tsx

@@ -78,6 +78,8 @@ export function NSChartPie(props: NSChartPieProps)
 			const { ctx, chartArea: { width, height } } = chart;
 			const meta = chart.getDatasetMeta(0);
 			const arc = meta.data[0] as unknown as ArcElementType;
+			if (!arc)
+				return;
 
 			ctx.save();
 			const fontSize = Math.max(12, arc.innerRadius / 3);

package/src/components/NSFilterBox.tsx

@@ -172,7 +172,7 @@ export class NSFilterBox extends Component<NSFilterBoxProps, NSFilterBoxState>
 					this.state.selected.column.column.getValues(search).then(values =>
 					{
 						this.setSelectedValues(values);
-					});
+					}).catch(() => { });
 				}
 				else if (this.props.getValues)
 				{
@@ -243,7 +243,7 @@ export class NSFilterBox extends Component<NSFilterBoxProps, NSFilterBoxState>
 	}
 	private onSelected_Value(not: boolean, values: string[]) 
 	{
-		let filterItems = this.state.filterItems;
+		let filterItems = [...this.state.filterItems];
 		if (this.state.selected.column && this.state.selected.operator)
 		{
 			let table = new BaseMetaTable(null, this.state.selected.column.table.name, this.state.selected.column.table.text);

package/src/components/NSHeader.tsx

@@ -126,9 +126,7 @@ export class NSHeader extends Component<NSHeaderProps, NSHeaderState>
     }
     override render()
     {
-        let nav: IBaseComponentProps | undefined = this.props.nav;
-        if (!nav)
-            nav = { style: {} };
+        let nav: IBaseComponentProps = { ...this.props.nav, style: { ...this.props.nav?.style } };
         if (!nav.style)
             nav.style = {};
         if (!nav.style?.backgroundColor)
@@ -220,7 +218,7 @@ export class NSHeader extends Component<NSHeaderProps, NSHeaderState>
                                     }
                                     {
                                         this.props.right?.link &&
-                                        <a href={this.props.right?.link?.href} target={this.props.right?.link?.target} className={Styles.ns_navbar_title}>{this.props.right?.link?.children}</a>
+                                        <a href={this.props.right?.link?.href} target={this.props.right?.link?.target} rel="noreferrer" className={Styles.ns_navbar_title}>{this.props.right?.link?.children}</a>
                                     }
                                     {
                                         this.props.right.icons.map((icon, index) =>

package/src/components/NSID.tsx

@@ -141,7 +141,7 @@ export class NSID extends React.Component<NSIDProps, NSIDState>
 			cache.get().then(text =>
 			{
 				this.setState({ text });
-			});
+			}).catch(() => { });
 	}
 
 	override render()

package/src/components/NSInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NSDialog } from './NSDialog';
+import { LinkOperation } from '../LinkOperation';
 
 export interface NSInfoProps
 {
@@ -25,7 +26,7 @@ export class NSInfo extends React.Component<NSInfoProps, NSInfoState>
 		else if (this.props.text)
 			this.setState(prev => { return { ...prev, show_info: true } });
 		else if (this.props.link)
-			window.open(this.props.link, "_blank");
+			LinkOperation.openBlank(this.props.link);
 	}
 	override render()
 	{

package/src/components/NSLink.tsx

@@ -15,6 +15,7 @@ export function NSLink(props: NSLinkProps)
 			className={`${props.children ? Styles.ns_link : Styles.ns_link_absolute} ${props.classList?.join(" ") ?? ""}`}
 			href={props.href}
 			target={props?.target ?? "_self"}
+			rel={props?.target === "_blank" ? "noreferrer" : undefined}
 			style={props.style}
 		>
 			{props.children}

package/src/components/NSListGrouped.tsx

@@ -172,8 +172,8 @@ export class NSListGrouped<Data> extends Component<NSListGroupedProps<Data>, NSL
 								<NSLoading title='Loading group items ...' />
 							}
 							{
-								group.items?.map((item) => (
-									<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group, item)}>
+								group.items?.map((item, item_index) => (
+									<li key={`NSListGrouped_li_key_${index}_${item_index}`} onClick={() => this.props.onClick(group, item)}>
 										<div className={Styles.ns_group_item}>
 											<span>{item.text && <span>{item.text}</span>}</span>
 											<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>

package/src/components/NSMarkdown.tsx

@@ -1,5 +1,6 @@
 import { Component, ReactNode } from "react";
 import Styles from "./NSMarkdown.module.css";
+import { LinkOperation } from "../LinkOperation";
 
 export interface NSMarkdownProps
 {
@@ -174,7 +175,7 @@ export class NSMarkdown extends Component<NSMarkdownProps>
                         nodes.push(
                             <a
                                 key={this.nextKey()}
-                                href={url}
+                                href={LinkOperation.isSafeURL(url) ? url : undefined}
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className={Styles.ns_md_link}

package/src/components/NSProductSearch.tsx

@@ -70,7 +70,7 @@ export class NSProductSearch extends React.Component<NSProductSearchProps, NSPro
 			}
 			let render_domain = (domain: DomainRow) =>
 			{
-				return <a href={domain.url} className={Styles.ns_product_search_item_domain}>
+				return <a key={domain.id} href={domain.url} className={Styles.ns_product_search_item_domain}>
 					<div>
 						<img
 							src={domain.logo ?? ""}
@@ -147,7 +147,7 @@ export class NSProductSearch extends React.Component<NSProductSearchProps, NSPro
 					{
 						this.state.links.map(link =>
 						(
-							<a href={link.url} className={Styles.ns_product_search_item_link}>
+							<a key={link.id} href={link.url} className={Styles.ns_product_search_item_link}>
 								<div>
 									<img
 										src={link.logo ?? ""}

package/src/components/NSTable.tsx

@@ -585,8 +585,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 		{
 			if (ctrlKey)
 			{
-				selectedIDs.push(rowID);
-				selectedRows.push(row.value);
+				selectedIDs = [...selectedIDs, rowID];
+				selectedRows = [...selectedRows, row.value];
 			}
 			else
 			{
@@ -1164,7 +1164,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						}
 						current_page={this.NSPagination.current?.getCurrentPage() ?? 1}
 						current_size={this.NSPagination.current?.getPageSize() ?? 0}
-						max_page={this.state.totalItems}
+						max_page={(this.NSPagination.current?.getPageSize() ?? 0) > 0 ? Math.max(1, Math.ceil(this.state.totalItems / (this.NSPagination.current?.getPageSize() ?? 1))) : 1}
 						getItems={async (page, size, selected) =>
 						{
 							if (selected)
@@ -1370,7 +1370,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 							{
 								this.getColumns(true).map(column =>
 									<th
-										key={column.name}
+										key={this.getColumnKey(column)}
 										scope="col"
 										onMouseDown={(e) =>
 										{

package/src/formatter/EmailFormatter.tsx

@@ -16,7 +16,7 @@ export class EmailFormatter extends BaseColumnFormatter
         return this.formatter.format({
             text: value,
             href: `mailto:${value}`,
-            image: { url: "https://static.namirasoft.com/image/concept/type/email.png", alt: "phone" }
+            image: { url: "https://static.namirasoft.com/image/concept/type/email.png", alt: "email" }
         }, column, row, printable);
     }
     override compare(a: any, b: any): number

package/src/routing/NSNotifier.ts

@@ -33,7 +33,13 @@ export class NSNotifier
         let ans: NSBarNotificationProps[] = [];
         let value = this.storage.get("ns-notifications", "");
         if (value)
-            ans = JSON.parse(value);
+            try
+            {
+                ans = JSON.parse(value);
+            } catch (error)
+            {
+                ans = [];
+            }
         let now = new Date();
         ans = ans.filter(x =>
         {
@@ -106,7 +112,7 @@ export class NSNotifier
             text = error.message;
             if (axios.isAxiosError(error))
                 if (error.response?.data)
-                    text = error.response.data;
+                    text = typeof error.response.data === "string" ? error.response.data : JSON.stringify(error.response.data);
         }
         else
             text = error;