namirasoft-site-react 1.4.134 → 1.4.136

package/src/components/NSMenuButton.tsx

@@ -1,125 +1,149 @@
-import { useRef, useState } from 'react';
-import { CopyToClipboard } from '../CopyToClipboard';
-import Styles from './NSMenuButton.module.css';
-import { IBaseComponentProps } from '../main';
-
-export interface NSMenuButtonProps extends IBaseComponentProps
-{
-    value: string;
-    setValue: (value: string) => void;
-    hideCopy?: boolean;
-    hideFullscreen?: boolean;
-    menus?: { title: string, icon: string, href?: string, onClick?: () => void }[]
-}
-
-export interface NSMenuButtonState
-{
-    value: string;
-    fullscreen: boolean;
-}
-
-export function NSMenuButton(props: NSMenuButtonProps)
-{
-    let textarea = useRef<HTMLTextAreaElement>(null);
-
-    let [state, setState] = useState<NSMenuButtonState>({ value: props.value, fullscreen: false });
-
-    const onClose = () =>
-    {
-        setState(prevState => { return { ...prevState, fullscreen: false }; });
-        props.setValue(state.value);
-    };
-
-    const onChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
-    {
-        setState(prevState => { return { ...prevState, value: e.target.value }; });
-    }
-
-    let buttons: { title: string, icon: string, href?: string, onClick?: () => void }[] = [];
-    if (!props.hideCopy && props.value)
-        buttons.push({
-            title: "Copy", icon: "https://static.namirasoft.com/image/concept/copy/blue.svg", onClick: () => { CopyToClipboard.copyToClipboard(props.value); }
-        });
-    if (!props.hideFullscreen)
-        buttons.push({
-            title: "Full Screen", icon: "https://static.namirasoft.com/image/concept/full-screen/blue.svg", onClick: () =>
-            {
-                setState(prevState => { return { ...prevState, fullscreen: true }; });
-                let focus = () =>
-                {
-                    if (textarea.current)
-                    {
-                        textarea.current.focus({});
-                        if (document.activeElement === textarea.current)
-                            return;
-                    }
-                    setTimeout(focus, 10);
-                }
-                focus();
-            }
-        });
-    if (props.menus)
-        buttons.push(...props.menus);
-    return (
-        <div
-            id={props.id}
-            className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            <div className={Styles.ns_input_parent}>
-                <div className={Styles.ns_input_title_group}>
-                    <div style={{ direction: "rtl" }}>
-                        {
-                            buttons.map(button => (
-                                button.href ?
-                                    <a
-                                        title={button.title}
-                                        className={Styles.ns_menu_item}
-                                        href={button.href}
-                                    >
-                                        <img
-                                            src={button.icon}
-                                            alt={button.title}
-                                            width={16}
-                                            height={16}
-                                        />
-                                    </a> :
-                                    <button
-                                        title={button.title}
-                                        className={Styles.ns_menu_item}
-                                        onClick={button.onClick}
-                                    >
-                                        <img
-                                            src={button.icon}
-                                            alt={button.title}
-                                            width={16}
-                                            height={16}
-                                        />
-                                    </button>
-                            ))
-                        }
-                    </div>
-                </div>
-                <div className={Styles.ns_input_modal_full_screen} style={{ display: state.fullscreen ? "block" : "none" }} >
-                    <div className={Styles.ns_cover_background}>
-                        <img
-                            className={Styles.ns_modal_icon_close}
-                            src="https://static.namirasoft.com/image/concept/close/blue.svg"
-                            alt="Close Button"
-                            width={24}
-                            height={24}
-                            onClick={onClose}
-                        />
-                    </div>
-                    <div className={Styles.ns_input_modal_full} onClick={onClose}></div>
-                    <textarea
-                        ref={textarea}
-                        defaultValue={props.value}
-                        onChange={onChanged}
-                    >
-                    </textarea>
-                </div>
-            </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';
+
+export interface NSMenuButtonMenuProps
+{
+    builtin: {
+        copy?: boolean;
+        fullscreen?: boolean;
+    }
+    items: NSMenuButtonMenuItemProps[]
+}
+
+export interface NSMenuButtonMenuItemProps
+{
+    title: string, icon: string, href?: string, onClick?: () => void
+}
+
+export interface NSMenuButtonProps extends IBaseComponentProps
+{
+    getValue: () => string;
+    setValue: (value: string) => void;
+    menu?: NSMenuButtonMenuProps;
+}
+
+export interface NSMenuButtonState
+{
+    value: string;
+    fullscreen: boolean;
+}
+
+export function safeMenuMenuItem(props: { menu?: NSMenuButtonMenuProps }, pusher: (items: NSMenuButtonMenuItemProps[]) => void): NSMenuButtonMenuProps
+{
+    let menu: NSMenuButtonMenuProps | undefined = props.menu;
+    if (!menu)
+        menu = { items: [], builtin: {} };
+    if (menu.items)
+        menu.items = [];
+    pusher(menu.items);
+    return menu;
+}
+export function NSMenuButton(props: NSMenuButtonProps)
+{
+    let textarea = useRef<NSBoxTextArea>(null);
+
+    let [state, setState] = useState<NSMenuButtonState>({ value: "", fullscreen: false });
+
+    const onClose = () =>
+    {
+        setState(prevState => { return { ...prevState, fullscreen: false }; });
+        props.setValue(state.value);
+    };
+
+    const onChanged = (e: NSBoxTextArea) =>
+    {
+        setState(prevState => { return { ...prevState, value: e.getValue() }; });
+    }
+
+    let buttons: { title: string, icon: string, href?: string, onClick?: () => void }[] = [];
+    if (props.menu?.builtin?.copy !== false)
+        buttons.push({
+            title: "Copy", icon: "https://static.namirasoft.com/image/concept/copy/blue.svg", onClick: () => { CopyToClipboard.copyToClipboard(props.getValue()); }
+        });
+    if (props.menu?.builtin?.fullscreen !== false)
+        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.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
+                                        title={button.title}
+                                        className={Styles.ns_menu_button_menu_item}
+                                        href={button.href}
+                                    >
+                                        <img
+                                            src={button.icon}
+                                            alt={button.title}
+                                            width={16}
+                                            height={16}
+                                        />
+                                    </a> :
+                                    <button
+                                        title={button.title}
+                                        className={Styles.ns_menu_button_menu_item}
+                                        onClick={button.onClick}
+                                    >
+                                        <img
+                                            src={button.icon}
+                                            alt={button.title}
+                                            width={16}
+                                            height={16}
+                                        />
+                                    </button>
+                            ))
+                        }
+                    </div>
+                </div>
+                {
+                    state.fullscreen &&
+                    <NSDialog
+                        onClose={() => { onClose() }}
+                        center_dialog
+                        hideCloseButton
+                        style={{ width: "80%", height: "80%", maxWidth: "100%", maxHeight: "100%" }}
+                    >
+                        <NSBoxTextArea
+                            ref={textarea}
+                            required={false}
+                            title=''
+                            hideHeader
+                            defaultValue={props.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,10 +1,10 @@
-.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 {
-    font-size: 24px;
+.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 {
+    font-size: 24px;
 }

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,111 +1,86 @@
-.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 0;
-}
-
-.ns_select_number_parent {
-	font-weight: 500;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_paginate_link {
-	color: rgba(20, 27, 92, 1);
-	text-decoration: none;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 22px;
-	font-family: inherit;
-}
-
-.ns_select_number {
-	color: rgba(20, 27, 92, 1);
-	font-weight: 500;
-	background-color: rgb(255, 255, 255);
-	border: 2px solid rgba(20, 27, 92, 1);
-	border-radius: 50px;
-	border-radius: 50px;
-	height: 32px;
-	width: 32px;
-	text-align: center;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ns_pagination_left_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_left_ellipses button {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_right_ellipses {
-	padding-bottom: 10px;
-}
-
-.ns_pagination_right_ellipses button {
-	color: rgba(20, 27, 92, 1);
-	font-size: 24px;
-	font-weight: 700;
-}
-
-.ns_pagination_info {
-	margin-left: 12px;
-	width: fit-content;
-	min-width: 140px;
-	height: 48px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	gap: 12px;
-	min-width: 248px;
-}
-
-.ns_pagination_info h6 {
-	background-color: rgb(255, 255, 255);
-	width: 124px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	color: rgba(20, 27, 92, 1);
-	padding-left: 16px 24px;
-	text-align: center;
-	border-radius: 8px;
-	border: 1px solid black;
-}
-
-.ns_pagination_combobox div {
-	width: 74px;
-	margin: 0;
-	padding: 0;
-}
-
-.ns_pagination_combobox span {
-	margin: 0
-}
-
-@media only screen and (min-width: 480px) {
-	.ns_pagination_container {
-		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;
+}
+
+@media only screen and (min-width: 480px) {
+	.ns_pagination_container {
+		justify-content: space-between;
+		flex-wrap: nowrap;
+	}
 }