namirasoft-site-react 1.4.404 → 1.4.405

package/src/App.tsx

@@ -3,7 +3,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSPanel } from './components/NSPanel';
 import { NSSection } from './components/NSSection';
 import { NSLayout } from './components/NSLayout';
-import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSFilterBox, NSTable } from './main';
+import { MoneyFormatter, NSBoxDynamic, NSBoxEntity, NSBoxString, NSButtonBlue, NSColumn, NSDialog, NSFilterBox, NSTable } from './main';
 import { FilterItemColumnType } from 'namirasoft-core';
 import { NSRepeaterNSTag } from './components/NSRepeaterNSTag';
 import { BaseVariableSchema, StringSchema } from 'namirasoft-schema';
@@ -133,6 +133,54 @@ export function App()
 					required
 					title='Test'
 				></NSBoxEntity>
+				{
+					10 < 2 &&
+					<NSDialog
+						onClose={() => { }}
+						center_dialog
+						closeButton={{
+							out: true
+						}}
+					>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+						<NSButtonBlue
+							onClick={{
+								action: () => { }
+							}}
+							title='Ok'
+						></NSButtonBlue>
+					</NSDialog>
+				}
+
 				<NSButtonBlue
 					onClick={{
 						action: () => { }
@@ -211,7 +259,7 @@ export function App()
 						/>
 					</NSColumn>
 				</NSSection>
-			</NSLayout >
+			</NSLayout>
 		</>
 	);
 }

package/src/components/NSBoxBaseCombo.tsx

@@ -355,7 +355,8 @@ export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Da
 					}
 				});
 		});
-		menu.builtin.copy = { enabled: true, getValue: () => JSON.stringify(this.getValue(false)) };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => JSON.stringify(this.getValue(false)) };
 
 		let items_list = this.state.items_list ?? [];
 		return (

package/src/components/NSBoxColor.tsx

@@ -60,7 +60,8 @@ export class NSBoxColor extends React.Component<NSBoxColorProps, NSBoxColorState
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxDate.tsx

@@ -61,7 +61,8 @@ export class NSBoxDate extends React.Component<NSBoxDateProps, NSBoxDateState> i
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxDateTime.tsx

@@ -62,7 +62,8 @@ export class NSBoxDateTime extends React.Component<NSBoxDateTimeProps, NSBoxDate
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
 
 		function getFormattedValue(datetime: Date | null)
 		{

package/src/components/NSBoxDouble.tsx

@@ -62,7 +62,8 @@ export class NSBoxDouble extends React.Component<NSBoxDoubleProps, NSBoxDoubleSt
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxDuration.tsx

@@ -63,7 +63,8 @@ export class NSBoxDuration extends React.Component<NSBoxDurationProps, NSBoxDura
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		// todo implement a mask for duration like ddd hh-mm-ss
 

package/src/components/NSBoxEmail.tsx

@@ -3,7 +3,7 @@ import React, { createRef } from "react";
 import StylesNSBox from "./NSBox.module.css";
 import { Validator } from "../Validator";
 import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import { safeMenuMenuItem } from "./NSMenuButton";
+import { NSMenuButtonMenuProps, safeMenuMenuItem } from "./NSMenuButton";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
@@ -13,6 +13,11 @@ import { INSBox } from "./INSBox";
 export interface NSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, INSBoxBaseLayoutProps<NSBoxEmail, string>
 {
 	input?: IBaseComponentProps;
+	menu?: NSMenuButtonMenuProps & {
+		builtin: {
+			email?: boolean
+		}
+	}
 }
 
 export interface NSBoxEmailState
@@ -62,15 +67,18 @@ export class NSBoxEmail extends React.Component<NSBoxEmailProps, NSBoxEmailState
 	{
 		let menu = safeMenuMenuItem(this.props, (items) =>
 		{
-			if (!this.getError())
-				items.push({
-					title: "Send Email",
-					icon: "https://static.namirasoft.com/image/concept/type/email.png",
-					href: `mailto:${this.state.value}`
-				});
+			if (this.props.menu?.builtin?.email ?? true)
+				if (!this.getError())
+					items.push({
+						title: "Send Email",
+						icon: "https://static.namirasoft.com/image/concept/type/email.png",
+						href: `mailto:${this.state.value}`
+					});
 		});
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-		menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.fullscreen)
+			menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxFilePath.tsx

@@ -60,7 +60,8 @@ export class NSBoxFilePath extends React.Component<NSBoxFilePathProps, NSBoxFile
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxFont.tsx

@@ -60,7 +60,8 @@ export class NSBoxFont extends React.Component<NSBoxFontProps, NSBoxFontState> i
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxIPV4.tsx

@@ -63,7 +63,8 @@ export class NSBoxIPV4 extends React.Component<NSBoxIPV4Props, NSBoxIPV4State> i
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxIPV4Range.tsx

@@ -60,7 +60,8 @@ export class NSBoxIPV4Range extends React.Component<NSBoxIPV4RangeProps, NSBoxIP
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxIPV6.tsx

@@ -63,7 +63,8 @@ export class NSBoxIPV6 extends React.Component<NSBoxIPV6Props, NSBoxIPV6State> i
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxIPV6Range.tsx

@@ -60,7 +60,8 @@ export class NSBoxIPV6Range extends React.Component<NSBoxIPV6RangeProps, NSBoxIP
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxInteger.tsx

@@ -61,7 +61,8 @@ export class NSBoxInteger extends React.Component<NSBoxIntegerProps, NSBoxIntege
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxMoney.tsx

@@ -62,7 +62,8 @@ export class NSBoxMoney extends React.Component<NSBoxMoneyProps, NSBoxMoneyState
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value?.toLocaleString() ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxPhone.tsx

@@ -76,7 +76,8 @@ export class NSBoxPhone extends React.Component<NSBoxPhoneProps, NSBoxPhoneState
 					href: `tel:${this.state.value}`
 				});
 		});
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxSearch.tsx

@@ -67,8 +67,10 @@ export class NSBoxSearch extends React.Component<NSBoxSearchProps, NSBoxSearchSt
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-		menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.fullscreen)
+			menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxString.tsx

@@ -61,8 +61,10 @@ export class NSBoxString extends React.Component<NSBoxStringProps, NSBoxStringSt
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-		menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.fullscreen)
+			menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxTextArea.tsx

@@ -65,8 +65,10 @@ export class NSBoxTextArea extends React.Component<NSBoxTextAreaProps, NSBoxText
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-		menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.fullscreen)
+			menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
 
 		return (
 			<NSBoxBaseLayout
@@ -85,6 +87,11 @@ export class NSBoxTextArea extends React.Component<NSBoxTextAreaProps, NSBoxText
 					placeholder={this.props.placeholder ?? `Please enter ${NamingConvention.auto.convert(this.props.title, NamingConvention.lower_case_space)}`}
 					onChange={e => this.setValue(e.target.value)}
 					onClick={() => { this.props.onClicked?.(this); }}
+					onKeyUp={(e) =>
+					{
+						if (e.key === "Enter")
+							e.stopPropagation();
+					}}
 					style={{
 						height: "100%",
 						background: `url("https://static.namirasoft.com/image/concept/type/string.png") white no-repeat scroll top right 4px `,

package/src/components/NSBoxTime.tsx

@@ -63,7 +63,8 @@ export class NSBoxTime extends React.Component<NSBoxTimeProps, NSBoxTimeState> i
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" }
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" }
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxTimeZone.tsx

@@ -60,7 +60,8 @@ export class NSBoxTimeZone extends React.Component<NSBoxTimeZoneProps, NSBoxTime
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxURL.tsx

@@ -72,8 +72,10 @@ export class NSBoxURL extends React.Component<NSBoxURLProps, NSBoxURLState> impl
 					},
 				})
 		});
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
-		menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.fullscreen)
+			menu.builtin.fullscreen = { enabled: true, getValue: () => this.state.value ?? "", setValue: this.setValue };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSBoxVersion.tsx

@@ -60,7 +60,8 @@ export class NSBoxVersion extends React.Component<NSBoxVersionProps, NSBoxVersio
 	override render()
 	{
 		let menu = safeMenuMenuItem(this.props, () => { });
-		menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => this.state.value ?? "" };
 
 		return (
 			<NSBoxBaseLayout

package/src/components/NSDialog.module.css

@@ -13,7 +13,7 @@
 	align-items: center;
 }
 
-.ns_dialog_center_container {
+.ns_dialog_container_center {
 	background-color: #00000080;
 	width: 100%;
 	height: 100%;
@@ -41,6 +41,18 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	cursor: pointer;
+}
+
+.ns_dialog_parent {
+	z-index: 900;
+	position: absolute;
+	color: black;
+	cursor: default;
+	min-width: 350px;
+	min-height: 50px;
+	max-width: 90vw;
+	max-height: 90vh;
 }
 
 .ns_dialog_content {
@@ -49,12 +61,12 @@
 	background-color: white;
 	z-index: 900;
 	min-width: 350px;
-	min-height: 150px;
-	max-width: 90%;
+	min-height: 50px;
+	max-width: 90vw;
 	max-height: 90vh;
+	width: 100%;
+	height: 100%;
 	overflow-y: auto;
-	padding: 8px 0;
-	position: absolute;
 	color: black;
 	cursor: default;
 }
@@ -86,28 +98,12 @@
 		z-index: 899;
 	}
 
-	.ns_dialog_center_container {
-		background-color: #00000080;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		z-index: 899;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.ns_dialog_center_container>.ns_dialog_content {
+	.ns_dialog_container_center>.ns_dialog_parent {
 		left: 0;
-		/* width: 100%; */
 		position: relative;
 	}
 
-	.ns_dialog_content {
+	.ns_dialog_parent {
 		right: 0;
 	}
 }

package/src/components/NSDialog.tsx

@@ -10,7 +10,8 @@ export interface NSDialogProps extends IBaseComponentProps
 	closeButton?: {
 		show?: boolean;
 		out?: boolean;
-	}
+	},
+	zIndex?: number;
 }
 
 export function NSDialog(props: NSDialogProps)
@@ -18,13 +19,18 @@ export function NSDialog(props: NSDialogProps)
 	return (
 		<section
 			id={props.id}
-			className={props.center_dialog ? Styles.ns_dialog_center_container : Styles.ns_dialog_container}
+			className={props.center_dialog ? Styles.ns_dialog_container_center : Styles.ns_dialog_container}
+			style={{ zIndex: props.zIndex }}
 		>
-			<div className={Styles.ns_dialog_background} onClick={() => props.onClose()}>
+			<div
+				className={Styles.ns_dialog_background}
+				style={{ zIndex: props.zIndex }}
+				onClick={() => props.onClose()}
+			>
 			</div>
 			<div
-				className={`${Styles.ns_dialog_content} ${props.classList?.join(" ") ?? ""}`}
-				style={{ ...props.style }}
+				className={`${Styles.ns_dialog_parent} ${props.classList?.join(" ") ?? ""}`}
+				style={{ ...props.style, zIndex: props.zIndex }}
 			>
 				{
 					props.closeButton?.show !== false && <div
@@ -32,8 +38,8 @@ export function NSDialog(props: NSDialogProps)
 						style=
 						{{
 							position: "absolute",
-							top: (props.closeButton?.out) ? "-60px" : "0px",
-							right: 0,
+							top: (props.closeButton?.out) ? "-40px" : "0px",
+							right: (props.closeButton?.out) ? "-40px" : "0px",
 							transform: "translate(-40%,40%)",
 							cursor: "pointer",
 							width: "24px",
@@ -53,8 +59,13 @@ export function NSDialog(props: NSDialogProps)
 							onClick={() => props.onClose()} />
 					</div>
 				}
-				<div className={Styles.ns_dialog_children}>
-					{props.children}
+				<div
+					className={`${Styles.ns_dialog_content}`}
+					style={{ zIndex: props.zIndex }}
+				>
+					<div className={Styles.ns_dialog_children}>
+						{props.children}
+					</div>
 				</div>
 			</div>
 		</section >

package/src/components/NSHeader.tsx

@@ -165,7 +165,7 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
 									flex: 0.8
 								}}
 								input={{
-									style: { zIndex: 1000 }
+									style: { zIndex: 800 }
 								}}
 								onChanged={(e) =>
 								{
@@ -191,6 +191,7 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
 									}}
 									center_dialog={true}
 									style={{ maxHeight: "80vh" }}
+									zIndex={799}
 								>
 									<NSProductSearch
 										ref={this.NSProductSearch_Ref}

package/src/components/NSMenuButton.tsx

@@ -61,17 +61,17 @@ export function NSMenuButton(props: NSMenuButtonProps)
 
     const onCloseInfo = () =>
     {
-        setState(prevState => { return { ...prevState, info: false }; });
+        setState(prev => { return { ...prev, info: false }; });
     };
     const onCloseFullScreen = () =>
     {
-        setState(prevState => { return { ...prevState, fullscreen: false }; });
+        setState(prev => { return { ...prev, fullscreen: false }; });
         props.menu?.builtin.fullscreen?.setValue(state.value);
     };
 
     const onChanged = (e: NSBoxTextArea) =>
     {
-        setState(prevState => { return { ...prevState, value: e.getValue() }; });
+        setState(prev => { return { ...prev, value: e.getValue() }; });
     }
 
     let buttons: { title: string, icon: string, href?: string, onClick?: () => void }[] = [];
@@ -112,7 +112,7 @@ export function NSMenuButton(props: NSMenuButtonProps)
         buttons.push({
             title: "Full Screen", icon: "https://static.namirasoft.com/image/concept/full-screen/blue.svg", onClick: () =>
             {
-                setState(prevState => { return { ...prevState, fullscreen: true, value: props.menu?.builtin?.fullscreen?.getValue() ?? "" }; });
+                setState(prev => { return { ...prev, fullscreen: true, value: props.menu?.builtin?.fullscreen?.getValue() ?? "" }; });
                 let focus = () =>
                 {
                     if (textarea.current?.textarea.current)