namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSLabel.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import Styles from './NSLabel.module.css'
-import React from "react";
-import { ReactNode } from "react";
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { StringFormatter } from '../main';
-
-export interface NSLabelProps extends IBaseComponentProps
-{
-    title: string;
-    description?: string;
-    children?: ReactNode;
-}
-
-export interface NSLabelState
-{ }
-
-export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
-{
-    override render()
-    {
-        return (
-            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
-                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
-                    {this.props.title}
-                </span>
-                {
-                    this.props.description &&
-                    <div>
-                        <span className={`${Styles.ns_label_description}`}>
-                            {StringFormatter.toHTML(this.props.description)}
-                        </span>
-                    </div>
-                }
-                {
-
-                    this.props.children &&
-                    <>
-                        <div>
-                            {this.props.children}
-                        </div>
-                    </>
-                }
-            </div >
-        );
-    }
+"use client";
+
+import Styles from './NSLabel.module.css'
+import React from "react";
+import { ReactNode } from "react";
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { StringFormatter } from '../main';
+
+export interface NSLabelProps extends IBaseComponentProps
+{
+    title: string;
+    description?: string;
+    children?: ReactNode;
+}
+
+export interface NSLabelState
+{ }
+
+export class NSLabel extends React.Component<NSLabelProps, NSLabelState>
+{
+    override render()
+    {
+        return (
+            <div id={this.props.id} className={`${Styles.ns_label_item} ${this.props.classList?.join(" ") ?? ""}`} style={this.props.style}>
+                <span className={`${Styles.ns_label_title} ns_font_16_bold`}>
+                    {this.props.title}
+                </span>
+                {
+                    this.props.description &&
+                    <div>
+                        <span className={`${Styles.ns_label_description}`}>
+                            {StringFormatter.toHTML(this.props.description)}
+                        </span>
+                    </div>
+                }
+                {
+
+                    this.props.children &&
+                    <>
+                        <div>
+                            {this.props.children}
+                        </div>
+                    </>
+                }
+            </div >
+        );
+    }
 }

package/src/components/NSLabelErrorNotifier.module.css

@@ -1,3 +1,3 @@
-.ns_label_error_notifier_text {
-    color: #FF3F3F !important;
+.ns_label_error_notifier_text {
+    color: #FF3F3F !important;
 }

package/src/components/NSLabelErrorNotifier.tsx

@@ -1,36 +1,36 @@
-import Styles from "./NSLabelErrorNotifier.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { useRef } from "react";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSLabelErrorNotifierProps extends IBaseComponentProps
-{
-	error?: string;
-	clearError: () => void;
-}
-
-export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
-{
-	let service = useRef<SetTimeouService>(new SetTimeouService());
-	if (props.error)
-		service.current.setTimeoutIfNotCalledAgain(() =>
-		{
-			props.clearError();
-		}, 5000);
-	return <>
-		{
-			props.error && (
-				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
-					<img
-						className={""}
-						src="https://static.namirasoft.com/image/concept/danger/red.svg"
-						alt="Error Icon"
-						width={13}
-						height={13}
-					/>
-					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
-				</div >
-			)
-		}
-	</>;
+import Styles from "./NSLabelErrorNotifier.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useRef } from "react";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSLabelErrorNotifierProps extends IBaseComponentProps
+{
+	error?: string;
+	clearError: () => void;
+}
+
+export function NSLabelErrorNotifier(props: NSLabelErrorNotifierProps)
+{
+	let service = useRef<SetTimeouService>(new SetTimeouService());
+	if (props.error)
+		service.current.setTimeoutIfNotCalledAgain(() =>
+		{
+			props.clearError();
+		}, 5000);
+	return <>
+		{
+			props.error && (
+				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
+					<img
+						className={""}
+						src="https://static.namirasoft.com/image/concept/danger/red.svg"
+						alt="Error Icon"
+						width={13}
+						height={13}
+					/>
+					<span className={Styles.ns_label_error_notifier_text}>{props.error}</span>
+				</div >
+			)
+		}
+	</>;
 }

package/src/components/NSLabelSensitive.module.css

@@ -1,10 +1,10 @@
-.ns_button {
-    width: 1.5rem;
-    height: 1.5rem;
-    border: none;
-    padding: 2px 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
+.ns_button {
+    width: 1.5rem;
+    height: 1.5rem;
+    border: none;
+    padding: 2px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
 }

package/src/components/NSLabelSensitive.tsx

@@ -1,102 +1,102 @@
-import { useState } from 'react';
-import { NSCopy } from "./NSCopy";
-import Styles from "./NSLabelSensitive.module.css";
-
-export interface NSLabelSensitiveProps
-{
-    value: string;
-    sensitive: boolean;
-    copy?: boolean;
-    decryptor?: (value: string) => Promise<string>;
-}
-
-export interface NSLabelSensitiveState
-{
-    show: boolean;
-    loading: boolean;
-    decrypted_value: string | null;
-}
-
-export function NSLabelSensitive(props: NSLabelSensitiveProps)
-{
-    const [state, setState] = useState<NSLabelSensitiveState>({
-        show: !props.sensitive,
-        decrypted_value: !props.sensitive ? props.value : null,
-        loading: false,
-    });
-
-    const decrypt = async () =>
-    {
-        try
-        {
-            let { decrypted_value } = state;
-
-            if (!decrypted_value)
-            {
-                setState((prev) => ({ ...prev, loading: true }));
-                decrypted_value = await props.decryptor?.(props.value) ?? props.value;
-            }
-
-            setState((prev) => ({ decrypted_value, show: !prev.show, loading: false }));
-        }
-        catch (error)
-        {
-            setState((prev) => ({ ...prev, loading: false }));
-        }
-    }
-
-    const getDecryptedValue = async (): Promise<string> =>
-    {
-        if (state.decrypted_value)
-            return state.decrypted_value;
-
-        const decrypted_value = await props.decryptor?.(props.value) ?? props.value;
-        setState((prev) => ({ ...prev, decrypted_value }));
-        return decrypted_value;
-    }
-
-    let placeholder = Array.from({ length: 6 }, (_, i) => (
-        <img
-            key={i + 1}
-            src="https://static.namirasoft.com/image/concept/close/blue.svg"
-            width="12"
-            height="12"
-            alt="times"
-        />
-    ))
-
-    let content = state.show ? <span>{state.decrypted_value}</span> : <div>{placeholder}</div>;
-
-    return (
-        <div className="d-flex align-items-center gap-1">
-            {
-                (props.sensitive && !state.loading) &&
-                <button
-                    onClick={() => decrypt()}
-                    className={Styles.ns_button}
-                >
-                    <img
-                        src={`https://static.namirasoft.com/image/concept/password/${state.show ? "show" : "hide"}.png`}
-                        width="20"
-                        height="20"
-                        alt="password"
-                    />
-                </button>
-            }
-            {
-                state.loading &&
-                <div className="spinner-border spinner-border-sm text-primary" role="status" />
-            }
-            {
-                props.copy ?
-                    <NSCopy getValue={getDecryptedValue} copyOnClick={true}>
-                        {content}
-                    </NSCopy>
-                    :
-                    content
-            }
-        </div>
-    )
-}
-
+import { useState } from 'react';
+import { NSCopy } from "./NSCopy";
+import Styles from "./NSLabelSensitive.module.css";
+
+export interface NSLabelSensitiveProps
+{
+    value: string;
+    sensitive: boolean;
+    copy?: boolean;
+    decryptor?: (value: string) => Promise<string>;
+}
+
+export interface NSLabelSensitiveState
+{
+    show: boolean;
+    loading: boolean;
+    decrypted_value: string | null;
+}
+
+export function NSLabelSensitive(props: NSLabelSensitiveProps)
+{
+    const [state, setState] = useState<NSLabelSensitiveState>({
+        show: !props.sensitive,
+        decrypted_value: !props.sensitive ? props.value : null,
+        loading: false,
+    });
+
+    const decrypt = async () =>
+    {
+        try
+        {
+            let { decrypted_value } = state;
+
+            if (!decrypted_value)
+            {
+                setState((prev) => ({ ...prev, loading: true }));
+                decrypted_value = await props.decryptor?.(props.value) ?? props.value;
+            }
+
+            setState((prev) => ({ decrypted_value, show: !prev.show, loading: false }));
+        }
+        catch (error)
+        {
+            setState((prev) => ({ ...prev, loading: false }));
+        }
+    }
+
+    const getDecryptedValue = async (): Promise<string> =>
+    {
+        if (state.decrypted_value)
+            return state.decrypted_value;
+
+        const decrypted_value = await props.decryptor?.(props.value) ?? props.value;
+        setState((prev) => ({ ...prev, decrypted_value }));
+        return decrypted_value;
+    }
+
+    let placeholder = Array.from({ length: 6 }, (_, i) => (
+        <img
+            key={i + 1}
+            src="https://static.namirasoft.com/image/concept/close/blue.svg"
+            width="12"
+            height="12"
+            alt="times"
+        />
+    ))
+
+    let content = state.show ? <span>{state.decrypted_value}</span> : <div>{placeholder}</div>;
+
+    return (
+        <div className="d-flex align-items-center gap-1">
+            {
+                (props.sensitive && !state.loading) &&
+                <button
+                    onClick={() => decrypt()}
+                    className={Styles.ns_button}
+                >
+                    <img
+                        src={`https://static.namirasoft.com/image/concept/password/${state.show ? "show" : "hide"}.png`}
+                        width="20"
+                        height="20"
+                        alt="password"
+                    />
+                </button>
+            }
+            {
+                state.loading &&
+                <div className="spinner-border spinner-border-sm text-primary" role="status" />
+            }
+            {
+                props.copy ?
+                    <NSCopy getValue={getDecryptedValue} copyOnClick={true}>
+                        {content}
+                    </NSCopy>
+                    :
+                    content
+            }
+        </div>
+    )
+}
+
 export default NSLabelSensitive;

package/src/components/NSLayout.module.css

@@ -1,23 +1,23 @@
-.ns_container {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.ns_layout_main {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-@media only screen and (min-width: 992px) {
-    .ns_layout_main {
-        padding: 1.5rem;
-    }
+.ns_container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.ns_layout_main {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+@media only screen and (min-width: 992px) {
+    .ns_layout_main {
+        padding: 1.5rem;
+    }
 }