namirasoft-site-react 1.4.112 → 1.4.113

package/src/components/NSActionMenu.tsx

@@ -1,91 +1,91 @@
-import { useState, useEffect, useRef } from 'react';
-import { NSButtonBlue } from './NSButtonBlue';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from './NSActionMenu.module.css';
-
-export interface INSActionMenuProps extends IBaseComponentProps
-{
-	id: string
-	menu_item: string;
-	handler: () => void;
-	isActive: () => boolean;
-}
-
-export interface INSActionMenuState
-{
-	isShow: boolean;
-}
-
-export function NSActionMenu(props: { name: string, items: INSActionMenuProps[] })
-{
-	const [state, setState] = useState<INSActionMenuState>({
-		isShow: false
-	});
-
-	const menuRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() =>
-	{
-		function handleClickOutside(event: MouseEvent)
-		{
-			if (menuRef.current && !menuRef.current.contains(event.target as Node))
-			{
-				setState({ isShow: false });
-			}
-		}
-
-		document.addEventListener('mousedown', handleClickOutside);
-		return () =>
-		{
-			document.removeEventListener('mousedown', handleClickOutside);
-		};
-	}, [menuRef]);
-
-	function onClick(item: INSActionMenuProps)
-	{
-		if (item.isActive())
-			item.handler();
-	}
-
-	if (props.items.length === 0)
-		return <></>;
-	if (props.items.length === 1)
-		return <NSButtonBlue
-			title={props.items[0].menu_item}
-			onClick={() => onClick(props.items[0])}
-			disabled={props.items[0].isActive() ? false : true}
-			classList={[Styles.single_action_button]}
-		/>;
-	return (
-		<div className={Styles.ns_action_bar} ref={menuRef}>
-			<button
-				onClick={() => setState((prevState) => ({
-					...prevState, isShow: !state.isShow
-				}))}>
-				{props.name}
-				<img
-					className={Styles.ns_action_menu_icon}
-					src="https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.svg"
-					alt="Icon"
-					width={24}
-					height={24}
-				/>
-			</button>
-			<ul className={`${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide}`}>
-				{
-					props.items.map((item) =>
-						<li
-							key={item.id}
-							onClick={() => onClick(item)}
-							className={`${Styles.ns_action_item}
-                                ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
-                                `}
-						>
-							{item.menu_item}
-						</li>
-					)
-				}
-			</ul>
-		</div>
-	);
+import { useState, useEffect, useRef } from 'react';
+import { NSButtonBlue } from './NSButtonBlue';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSActionMenu.module.css';
+
+export interface INSActionMenuProps extends IBaseComponentProps
+{
+	id: string
+	menu_item: string;
+	handler: () => void;
+	isActive: () => boolean;
+}
+
+export interface INSActionMenuState
+{
+	isShow: boolean;
+}
+
+export function NSActionMenu(props: { name: string, items: INSActionMenuProps[] })
+{
+	const [state, setState] = useState<INSActionMenuState>({
+		isShow: false
+	});
+
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() =>
+	{
+		function handleClickOutside(event: MouseEvent)
+		{
+			if (menuRef.current && !menuRef.current.contains(event.target as Node))
+			{
+				setState({ isShow: false });
+			}
+		}
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return () =>
+		{
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [menuRef]);
+
+	function onClick(item: INSActionMenuProps)
+	{
+		if (item.isActive())
+			item.handler();
+	}
+
+	if (props.items.length === 0)
+		return <></>;
+	if (props.items.length === 1)
+		return <NSButtonBlue
+			title={props.items[0].menu_item}
+			onClick={() => onClick(props.items[0])}
+			disabled={props.items[0].isActive() ? false : true}
+			classList={[Styles.single_action_button]}
+		/>;
+	return (
+		<div className={Styles.ns_action_bar} ref={menuRef}>
+			<button
+				onClick={() => setState((prevState) => ({
+					...prevState, isShow: !state.isShow
+				}))}>
+				{props.name}
+				<img
+					className={Styles.ns_action_menu_icon}
+					src="https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.svg"
+					alt="Icon"
+					width={24}
+					height={24}
+				/>
+			</button>
+			<ul className={`${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide}`}>
+				{
+					props.items.map((item) =>
+						<li
+							key={item.id}
+							onClick={() => onClick(item)}
+							className={`${Styles.ns_action_item}
+                                ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
+                                `}
+						>
+							{item.menu_item}
+						</li>
+					)
+				}
+			</ul>
+		</div>
+	);
 }

package/src/components/NSAssistantButton.module.css

@@ -1,136 +1,136 @@
-.ns_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    align-items: flex-end;
-}
-
-.ns_input_parent {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    color: #141B5C;
-    justify-content: space-between;
-    max-width: 100%;
-}
-
-.ns_input {
-    border-radius: 8px;
-    padding: 10px 48px 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    border: 1px solid rgba(0, 0, 0, 1) !important;
-    height: 48px;
-    width: 272px
-}
-
-.ns_input:focus-visible {
-	border-color: rgba(0, 0, 0, 1) !important;
-	outline: solid 1px #4096ff !important;
-}
-
-.ns_input li {
-    color: #000 !important
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-    display: flex;
-}
-
-.ns_input_title_group {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_input {
-        max-width: 272px;
-    }
-}
-
-/*Start Input phone*/
-.ns_input_phone_parent input {
-    width: 100% !important;
-    height: 48px !important;
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_input_phone_parent input {
-        width: 272px !important;
-    }
-}
-
-/*End Input phone*/
-
-.ns_btn_box {
-    opacity: 0;
-    visibility: hidden;
-    color: #000;
-    border: none;
-    cursor: pointer;
-    width: max-content;
-    background-color: transparent;
-}
-
-.ns_input_parent:hover .ns_btn_box {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
-}
-
-.ns_btn_box img {
-    position: inherit;
-}
-
-.ns_full_screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #0101015c;
-    z-index: 1000;
-    padding: 5%;
-}
-
-.ns_full_screen input {
-    width: 100% !important;
-    max-width: 100%;
-}
-
-.ns_input_modal_full {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    height: 100%;
-    width: 100%;
-    z-index: 15;
-}
-
-.ns_input_modal_full_screen textarea {
-    height: 80%;
-    width: 80%;
-    z-index: 15;
-    position: fixed;
-    top: 10%;
-    left: 10%;
-    text-align: left;
-}
-
-.ns_input_modal_full_screen img {
-    position: fixed;
-    top: 12%;
-    right: 11%;
-    z-index: 20;
-    transition: all 0.3s ease-in-out;
-    cursor: pointer;
-    border-radius: 50%;
-}
-
-.ns_input_modal_full_screen img:hover {
-    scale: 1.2;
+.ns_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: flex-end;
+}
+
+.ns_input_parent {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    color: #141B5C;
+    justify-content: space-between;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 48px 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    border: 1px solid rgba(0, 0, 0, 1) !important;
+    height: 48px;
+    width: 272px
+}
+
+.ns_input:focus-visible {
+	border-color: rgba(0, 0, 0, 1) !important;
+	outline: solid 1px #4096ff !important;
+}
+
+.ns_input li {
+    color: #000 !important
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+    display: flex;
+}
+
+.ns_input_title_group {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_input {
+        max-width: 272px;
+    }
+}
+
+/*Start Input phone*/
+.ns_input_phone_parent input {
+    width: 100% !important;
+    height: 48px !important;
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_input_phone_parent input {
+        width: 272px !important;
+    }
+}
+
+/*End Input phone*/
+
+.ns_btn_box {
+    opacity: 0;
+    visibility: hidden;
+    color: #000;
+    border: none;
+    cursor: pointer;
+    width: max-content;
+    background-color: transparent;
+}
+
+.ns_input_parent:hover .ns_btn_box {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.ns_btn_box img {
+    position: inherit;
+}
+
+.ns_full_screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #0101015c;
+    z-index: 1000;
+    padding: 5%;
+}
+
+.ns_full_screen input {
+    width: 100% !important;
+    max-width: 100%;
+}
+
+.ns_input_modal_full {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    height: 100%;
+    width: 100%;
+    z-index: 15;
+}
+
+.ns_input_modal_full_screen textarea {
+    height: 80%;
+    width: 80%;
+    z-index: 15;
+    position: fixed;
+    top: 10%;
+    left: 10%;
+    text-align: left;
+}
+
+.ns_input_modal_full_screen img {
+    position: fixed;
+    top: 12%;
+    right: 11%;
+    z-index: 20;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.ns_input_modal_full_screen img:hover {
+    scale: 1.2;
 }

package/src/components/NSAssistantButton.tsx

@@ -1,71 +1,71 @@
-import { useState } from 'react';
-import { CopyToClipboard } from '../CopyToClipboard';
-import Styles from './NSAssistantButton.module.css';
-
-export interface INSAssistantProps
-{
-    value: string;
-    setValue: (value: string) => void;
-}
-
-export function NSAssistantButton(props: INSAssistantProps)
-{
-    let [fullscreen, setFullscreen] = useState(false);
-    let [value, setValue] = useState(props.value);
-
-    const handleClose = () =>
-    {
-        setFullscreen(!fullscreen);
-        props.setValue(value);
-    };
-
-    const onChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
-    {
-        setValue(e.target.value);
-    }
-
-    return (
-        <div className={Styles.ns_container}>
-            <div className={Styles.ns_input_parent}>
-                <div className={Styles.ns_input_title_group}>
-                    <div>
-                        <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(props.value)}>
-                            <img
-                                src="https://static.namirasoft.com/image/concept/copy/blue.svg"
-                                alt="Copy"
-                                width={14}
-                                height={14}
-                            />
-                        </button>
-                        <button className={Styles.ns_btn_box} onClick={() => { setFullscreen(!fullscreen) }}>
-                            <img
-                                src="https://static.namirasoft.com/image/concept/full-screen/blue.svg"
-                                alt="FullScreen"
-                                width={14}
-                                height={14}
-                            />
-                        </button>
-                    </div>
-                </div>
-                <div className={Styles.ns_input_modal_full_screen} style={{ display: fullscreen === false ? "none" : "block" }} >
-                    <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={handleClose}
-                        />
-                    </div>
-                    <div className={Styles.ns_input_modal_full} onClick={() => { }}></div>
-                    <textarea
-                        defaultValue={props.value}
-                        onChange={onChanged}
-                    >
-                    </textarea>
-                </div>
-            </div>
-        </div>
-    );
+import { useState } from 'react';
+import { CopyToClipboard } from '../CopyToClipboard';
+import Styles from './NSAssistantButton.module.css';
+
+export interface INSAssistantProps
+{
+    value: string;
+    setValue: (value: string) => void;
+}
+
+export function NSAssistantButton(props: INSAssistantProps)
+{
+    let [fullscreen, setFullscreen] = useState(false);
+    let [value, setValue] = useState(props.value);
+
+    const handleClose = () =>
+    {
+        setFullscreen(!fullscreen);
+        props.setValue(value);
+    };
+
+    const onChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    {
+        setValue(e.target.value);
+    }
+
+    return (
+        <div className={Styles.ns_container}>
+            <div className={Styles.ns_input_parent}>
+                <div className={Styles.ns_input_title_group}>
+                    <div>
+                        <button className={Styles.ns_btn_box} onClick={() => CopyToClipboard.copyToClipboard(props.value)}>
+                            <img
+                                src="https://static.namirasoft.com/image/concept/copy/blue.svg"
+                                alt="Copy"
+                                width={14}
+                                height={14}
+                            />
+                        </button>
+                        <button className={Styles.ns_btn_box} onClick={() => { setFullscreen(!fullscreen) }}>
+                            <img
+                                src="https://static.namirasoft.com/image/concept/full-screen/blue.svg"
+                                alt="FullScreen"
+                                width={14}
+                                height={14}
+                            />
+                        </button>
+                    </div>
+                </div>
+                <div className={Styles.ns_input_modal_full_screen} style={{ display: fullscreen === false ? "none" : "block" }} >
+                    <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={handleClose}
+                        />
+                    </div>
+                    <div className={Styles.ns_input_modal_full} onClick={() => { }}></div>
+                    <textarea
+                        defaultValue={props.value}
+                        onChange={onChanged}
+                    >
+                    </textarea>
+                </div>
+            </div>
+        </div>
+    );
 }