namirasoft-site-react 1.5.16 → 1.5.18

package/src/components/NSMenuButton.tsx

@@ -1,199 +1,199 @@
-import Styles from './NSMenuButton.module.css';
-import { useRef, useState } from 'react';
-import { CopyToClipboard } from '../CopyToClipboard';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { NSBoxTextArea } from '../components/NSBoxTextArea';
-import { NSDialog } from '../components/NSDialog';
-import { SetTimeouService } from 'namirasoft-core';
-import { NSInfo, NSInfoProps } from './NSInfo';
-
-export interface NSMenuButtonMenuProps
-{
-    builtin: {
-        delete?: {
-            enabled: boolean;
-            onDelete: () => void
-        };
-        copy?: {
-            enabled: boolean;
-            getValue: () => string;
-        };
-        fullscreen?: {
-            enabled: boolean;
-            getValue: () => string;
-            setValue: (value: string | null) => void;
-        };
-    };
-    items: NSMenuButtonMenuItemProps[];
-}
-
-export interface NSMenuButtonMenuItemProps
-{
-    title: string, icon: string, href?: string, onClick?: () => void
-}
-
-export interface NSMenuButtonProps extends IBaseComponentProps
-{
-    info?: NSInfoProps;
-    menu?: NSMenuButtonMenuProps;
-}
-
-export interface NSMenuButtonState
-{
-    value: string | null;
-    fullscreen: boolean;
-    copied: boolean;
-}
-
-export function safeMenuMenuItem(props: { menu?: NSMenuButtonMenuProps }, pusher: (items: NSMenuButtonMenuItemProps[]) => void): NSMenuButtonMenuProps
-{
-    let menu: NSMenuButtonMenuProps = { builtin: { ...props.menu?.builtin }, items: [...(props.menu?.items ?? [])] };
-    pusher(menu.items);
-    return menu;
-}
-
-export function NSMenuButton(props: NSMenuButtonProps)
-{
-    let ns_info = useRef<NSInfo>(null);
-    let textarea = useRef<NSBoxTextArea>(null);
-    const service = useRef<SetTimeouService>(new SetTimeouService());
-
-    let [state, setState] = useState<NSMenuButtonState>({ value: "", fullscreen: false, copied: false });
-
-    const onCloseFullScreen = () =>
-    {
-        setState(prev => { return { ...prev, fullscreen: false }; });
-        props.menu?.builtin.fullscreen?.setValue(state.value);
-    };
-
-    const onChanged = (e: NSBoxTextArea) =>
-    {
-        setState(prev => { return { ...prev, value: e.getValue() }; });
-    }
-
-    let buttons: { title: string, icon: string, href?: string, onClick?: () => void }[] = [];
-
-    if (props.info?.text || props.info?.link)
-        buttons.push({
-            title: "Info", icon: "https://static.namirasoft.com/image/concept/info/white-blue.svg", onClick: () =>
-            {
-                ns_info.current?.onClick();
-            }
-        });
-    if (props.menu?.builtin?.delete?.enabled)
-        if (props.menu?.builtin?.delete?.onDelete)
-            buttons.push({
-                title: "Delete", icon: "https://static.namirasoft.com/image/concept/delete/blue.svg", onClick: () =>
-                {
-                    props.menu?.builtin?.delete?.onDelete?.();
-                }
-            });
-    if (props.menu?.builtin?.copy?.enabled)
-        buttons.push({
-            title: "Copy", icon: state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg", onClick: () =>
-            {
-                try
-                {
-                    CopyToClipboard.copyToClipboard(props.menu?.builtin?.copy?.getValue() ?? "");
-                    setState(prev => { return { ...prev, copied: true } });
-                    service.current?.setTimeoutIfNotCalledAgain(() =>
-                    {
-                        setState(prev => { return { ...prev, copied: false } });
-                    }, 3000);
-                } catch (error)
-                {
-                }
-            }
-        });
-    if (props.menu?.builtin?.fullscreen?.enabled)
-        buttons.push({
-            title: "Full Screen", icon: "https://static.namirasoft.com/image/concept/full-screen/blue.svg", onClick: () =>
-            {
-                setState(prev => { return { ...prev, fullscreen: true, value: props.menu?.builtin?.fullscreen?.getValue() ?? "" }; });
-                let focus = () =>
-                {
-                    if (textarea.current?.textarea.current)
-                    {
-                        textarea.current.textarea.current.focus({});
-                        if (document.activeElement === textarea.current.textarea.current)
-                            return;
-                    }
-                    setTimeout(focus, 10);
-                }
-                focus();
-            }
-        });
-    if (props.menu?.items)
-        buttons.push(...props.menu?.items);
-    return (
-        <div
-            id={props.id}
-            className={`${Styles.ns_menu_button_container} ${props.classList?.join(" ") ?? ""}`}
-            style={props.style}
-        >
-            <div className={Styles.ns_menu_button_group_parrent}>
-                <div className={Styles.ns_menu_button_group}>
-                    <div style={{ direction: "rtl" }}>
-                        {
-                            buttons.map(button => (
-                                button.href ?
-                                    <a
-                                        key={button.title}
-                                        title={button.title}
-                                        className={Styles.ns_menu_button_menu_item}
-                                        href={button.href}
-                                        tabIndex={-1}
-                                    >
-                                        <img
-                                            src={button.icon}
-                                            alt={button.title}
-                                            width={16}
-                                            height={16}
-                                        />
-                                    </a> :
-                                    <button
-                                        key={button.title}
-                                        type="button"
-                                        title={button.title}
-                                        className={Styles.ns_menu_button_menu_item}
-                                        onClick={button.onClick}
-                                        tabIndex={-1}
-                                    >
-                                        <img
-                                            src={button.icon}
-                                            alt={button.title}
-                                            width={16}
-                                            height={16}
-                                        />
-                                    </button>
-                            ))
-                        }
-                    </div>
-                </div>
-                <NSInfo
-                    ref={ns_info}
-                    {...props.info}
-                />
-                {
-                    state.fullscreen &&
-                    <NSDialog
-                        onClose={() => { onCloseFullScreen() }}
-                        center_dialog
-                        closeButton={{ out: true }}
-                        style={{ width: "80%", height: "80%", maxWidth: "100%", maxHeight: "100%" }}
-                    >
-                        <NSBoxTextArea
-                            ref={textarea}
-                            required={false}
-                            title=''
-                            hideHeader
-                            defaultValue={props.menu?.builtin?.fullscreen?.getValue()}
-                            onChanged={onChanged}
-                            style={{ width: "100%", height: "100%", maxWidth: "100%", maxHeight: "100%", zIndex: "999" }}
-                        ></NSBoxTextArea>
-                    </NSDialog>
-                }
-            </div>
-        </div>
-    );
+import Styles from './NSMenuButton.module.css';
+import { useRef, useState } from 'react';
+import { CopyToClipboard } from '../CopyToClipboard';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSBoxTextArea } from '../components/NSBoxTextArea';
+import { NSDialog } from '../components/NSDialog';
+import { SetTimeouService } from 'namirasoft-core';
+import { NSInfo, NSInfoProps } from './NSInfo';
+
+export interface NSMenuButtonMenuProps
+{
+    builtin: {
+        delete?: {
+            enabled: boolean;
+            onDelete: () => void
+        };
+        copy?: {
+            enabled: boolean;
+            getValue: () => string;
+        };
+        fullscreen?: {
+            enabled: boolean;
+            getValue: () => string;
+            setValue: (value: string | null) => void;
+        };
+    };
+    items: NSMenuButtonMenuItemProps[];
+}
+
+export interface NSMenuButtonMenuItemProps
+{
+    title: string, icon: string, href?: string, onClick?: () => void
+}
+
+export interface NSMenuButtonProps extends IBaseComponentProps
+{
+    info?: NSInfoProps;
+    menu?: NSMenuButtonMenuProps;
+}
+
+export interface NSMenuButtonState
+{
+    value: string | null;
+    fullscreen: boolean;
+    copied: boolean;
+}
+
+export function safeMenuMenuItem(props: { menu?: NSMenuButtonMenuProps }, pusher: (items: NSMenuButtonMenuItemProps[]) => void): NSMenuButtonMenuProps
+{
+    let menu: NSMenuButtonMenuProps = { builtin: { ...props.menu?.builtin }, items: [...(props.menu?.items ?? [])] };
+    pusher(menu.items);
+    return menu;
+}
+
+export function NSMenuButton(props: NSMenuButtonProps)
+{
+    let ns_info = useRef<NSInfo>(null);
+    let textarea = useRef<NSBoxTextArea>(null);
+    const service = useRef<SetTimeouService>(new SetTimeouService());
+
+    let [state, setState] = useState<NSMenuButtonState>({ value: "", fullscreen: false, copied: false });
+
+    const onCloseFullScreen = () =>
+    {
+        setState(prev => { return { ...prev, fullscreen: false }; });
+        props.menu?.builtin.fullscreen?.setValue(state.value);
+    };
+
+    const onChanged = (e: NSBoxTextArea) =>
+    {
+        setState(prev => { return { ...prev, value: e.getValue() }; });
+    }
+
+    let buttons: { title: string, icon: string, href?: string, onClick?: () => void }[] = [];
+
+    if (props.info?.text || props.info?.link)
+        buttons.push({
+            title: "Info", icon: "https://static.namirasoft.com/image/concept/info/white-blue.svg", onClick: () =>
+            {
+                ns_info.current?.onClick();
+            }
+        });
+    if (props.menu?.builtin?.delete?.enabled)
+        if (props.menu?.builtin?.delete?.onDelete)
+            buttons.push({
+                title: "Delete", icon: "https://static.namirasoft.com/image/concept/delete/blue.svg", onClick: () =>
+                {
+                    props.menu?.builtin?.delete?.onDelete?.();
+                }
+            });
+    if (props.menu?.builtin?.copy?.enabled)
+        buttons.push({
+            title: "Copy", icon: state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg", onClick: () =>
+            {
+                try
+                {
+                    CopyToClipboard.copyToClipboard(props.menu?.builtin?.copy?.getValue() ?? "");
+                    setState(prev => { return { ...prev, copied: true } });
+                    service.current?.setTimeoutIfNotCalledAgain(() =>
+                    {
+                        setState(prev => { return { ...prev, copied: false } });
+                    }, 3000);
+                } catch (error)
+                {
+                }
+            }
+        });
+    if (props.menu?.builtin?.fullscreen?.enabled)
+        buttons.push({
+            title: "Full Screen", icon: "https://static.namirasoft.com/image/concept/full-screen/blue.svg", onClick: () =>
+            {
+                setState(prev => { return { ...prev, fullscreen: true, value: props.menu?.builtin?.fullscreen?.getValue() ?? "" }; });
+                let focus = () =>
+                {
+                    if (textarea.current?.textarea.current)
+                    {
+                        textarea.current.textarea.current.focus({});
+                        if (document.activeElement === textarea.current.textarea.current)
+                            return;
+                    }
+                    setTimeout(focus, 10);
+                }
+                focus();
+            }
+        });
+    if (props.menu?.items)
+        buttons.push(...props.menu?.items);
+    return (
+        <div
+            id={props.id}
+            className={`${Styles.ns_menu_button_container} ${props.classList?.join(" ") ?? ""}`}
+            style={props.style}
+        >
+            <div className={Styles.ns_menu_button_group_parrent}>
+                <div className={Styles.ns_menu_button_group}>
+                    <div style={{ direction: "rtl" }}>
+                        {
+                            buttons.map(button => (
+                                button.href ?
+                                    <a
+                                        key={button.title}
+                                        title={button.title}
+                                        className={Styles.ns_menu_button_menu_item}
+                                        href={button.href}
+                                        tabIndex={-1}
+                                    >
+                                        <img
+                                            src={button.icon}
+                                            alt={button.title}
+                                            width={16}
+                                            height={16}
+                                        />
+                                    </a> :
+                                    <button
+                                        key={button.title}
+                                        type="button"
+                                        title={button.title}
+                                        className={Styles.ns_menu_button_menu_item}
+                                        onClick={button.onClick}
+                                        tabIndex={-1}
+                                    >
+                                        <img
+                                            src={button.icon}
+                                            alt={button.title}
+                                            width={16}
+                                            height={16}
+                                        />
+                                    </button>
+                            ))
+                        }
+                    </div>
+                </div>
+                <NSInfo
+                    ref={ns_info}
+                    {...props.info}
+                />
+                {
+                    state.fullscreen &&
+                    <NSDialog
+                        onClose={() => { onCloseFullScreen() }}
+                        center_dialog
+                        closeButton={{ out: true }}
+                        style={{ width: "80%", height: "80%", maxWidth: "100%", maxHeight: "100%" }}
+                    >
+                        <NSBoxTextArea
+                            ref={textarea}
+                            required={false}
+                            title=''
+                            hideHeader
+                            defaultValue={props.menu?.builtin?.fullscreen?.getValue()}
+                            onChanged={onChanged}
+                            style={{ width: "100%", height: "100%", maxWidth: "100%", maxHeight: "100%", zIndex: "999" }}
+                        ></NSBoxTextArea>
+                    </NSDialog>
+                }
+            </div>
+        </div>
+    );
 }

package/src/components/NSNoData.module.css

@@ -1,12 +1,12 @@
-.ns_table_no_data {
-    background-color: rgb(255, 255, 255);
-    color: rgba(140, 140, 140, 0.7);
-    text-align: center;
-    width: 100%;
-}
-
-.ns_table_no_data h4 {
-    margin-bottom: 0;
-    font-size: 24px;
-    line-height: 28px;
+.ns_table_no_data {
+    background-color: rgb(255, 255, 255);
+    color: rgba(140, 140, 140, 0.7);
+    text-align: center;
+    width: 100%;
+}
+
+.ns_table_no_data h4 {
+    margin-bottom: 0;
+    font-size: 24px;
+    line-height: 28px;
 }

package/src/components/NSNoData.tsx

@@ -1,25 +1,25 @@
-import Styles from './NSNoData.module.css';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-
-export interface NSNoDataProps extends IBaseComponentProps
-{
-	lable: string;
-}
-
-export function NSNoData(props: NSNoDataProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={`${Styles.ns_table_no_data} ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			<img
-				src='https://static.namirasoft.com/image/concept/no_data/white.svg'
-				alt='No Data'
-				width={96}
-				height={96} />
-			<h4>{props.lable}</h4>
-		</div>
-	);
+import Styles from './NSNoData.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+
+export interface NSNoDataProps extends IBaseComponentProps
+{
+	lable: string;
+}
+
+export function NSNoData(props: NSNoDataProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_table_no_data} ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<img
+				src='https://static.namirasoft.com/image/concept/no_data/white.svg'
+				alt='No Data'
+				width={96}
+				height={96} />
+			<h4>{props.lable}</h4>
+		</div>
+	);
 }

package/src/components/NSPagination.module.css

@@ -1,88 +1,88 @@
-.ns_pagination_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	text-align: left;
-	font-size: 14px;
-	justify-items: center;
-	width: 100%;
-	max-width: max-content;
-	flex-wrap: wrap;
-	gap: 16px;
-}
-
-.ns_pagination_buttons_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	justify-items: center;
-	width: 100%;
-	max-width: max-content;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-
-.ns_pagination_button_parent {
-	font-weight: 500;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_pagination_button {
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	font-family: inherit;
-	color: rgba(20, 27, 92, 1);
-	font-weight: 500;
-	background-color: rgb(255, 255, 255);
-	border: 1px solid rgba(20, 27, 92, 1);
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	text-decoration: none;
-}
-
-.ns_pagination_button_selected {
-	color: rgba(255, 255, 255, 1);
-	background-color: rgb(3, 119, 255);
-	border: 1px solid rgba(20, 27, 92, 1);
-}
-
-.ns_pagination_info {
-	padding: 8px;
-	margin: 0px;
-	border: 1px solid rgba(0, 0, 0, 1) !important;
-	border-radius: 8px;
-	height: 48px !important;
-	width: fit-content;
-	max-width: inherit;
-	background-size: 24px 24px;
-	font-weight: bold;
-	display: flex;
-	justify-content: center;
-	background-color: rgb(255, 255, 255);
-	align-items: center;
-	color: rgba(20, 27, 200, 1);
-	text-align: center;
-    white-space: nowrap;
-}
-
-@media only screen and (min-width: 480px) {
-	.ns_pagination_container {
-        padding-right: 24px;
-		justify-content: space-between;
-		flex-wrap: nowrap;
-	}
+.ns_pagination_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	text-align: left;
+	font-size: 14px;
+	justify-items: center;
+	width: 100%;
+	max-width: max-content;
+	flex-wrap: wrap;
+	gap: 16px;
+}
+
+.ns_pagination_buttons_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	justify-items: center;
+	width: 100%;
+	max-width: max-content;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.ns_pagination_button_parent {
+	font-weight: 500;
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ns_pagination_button {
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 22px;
+	font-family: inherit;
+	color: rgba(20, 27, 92, 1);
+	font-weight: 500;
+	background-color: rgb(255, 255, 255);
+	border: 1px solid rgba(20, 27, 92, 1);
+	border-radius: 50px;
+	height: 32px;
+	width: 32px;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-decoration: none;
+}
+
+.ns_pagination_button_selected {
+	color: rgba(255, 255, 255, 1);
+	background-color: rgb(3, 119, 255);
+	border: 1px solid rgba(20, 27, 92, 1);
+}
+
+.ns_pagination_info {
+	padding: 8px;
+	margin: 0px;
+	border: 1px solid rgba(0, 0, 0, 1) !important;
+	border-radius: 8px;
+	height: 48px !important;
+	width: fit-content;
+	max-width: inherit;
+	background-size: 24px 24px;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	background-color: rgb(255, 255, 255);
+	align-items: center;
+	color: rgba(20, 27, 200, 1);
+	text-align: center;
+    white-space: nowrap;
+}
+
+@media only screen and (min-width: 480px) {
+	.ns_pagination_container {
+        padding-right: 24px;
+		justify-content: space-between;
+		flex-wrap: nowrap;
+	}
 }