namirasoft-site-react 1.3.178 → 1.3.179

package/src/assets/images/rectangle.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1" y="1" width="18" height="18" rx="3" fill="white" stroke="#848484" stroke-width="2"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" fill="white" stroke="#848484" stroke-width="2"/>
+</svg>

package/src/components/NSActionMenu.module.css

@@ -1,76 +1,76 @@
-.ns_action_bar {
-	display: flex;
-	flex-direction: column;
-	width: 272px;
-	color: #000;
-	position: relative;
-	max-width: 100%;
-}
-
-.ns_action_bar>button {
-	border-radius: 8px;
-	padding: 10px 12px;
-	font-size: 16px;
-	font-weight: 400;
-	border: 1px solid #000;
-	max-width: 100%;
-	height: max-content !important;
-	background: #fff;
-	cursor: pointer;
-	text-align: start;
-	color: #141B5C;
-	cursor: pointer;
-}
-
-.ns_action_menu_icon {
-	position: absolute;
-	right: 20px;
-	top: 12px;
-	z-index: 1;
-}
-
-.ns_action_item_holder {
-	list-style-type: none;
-	padding: 16px 0;
-	margin: 0;
-	background: #fff;
-	border-radius: 8px;
-	position: absolute;
-	top: 64px;
-	left: 0;
-	width: 100%;
-	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
-
-.ns_action_item {
-	height: 40px;
-	display: flex;
-	align-items: center;
-	font-size: 16px;
-	color: #141B5C;
-	padding: 0 16px;
-	cursor: pointer;
-	position: relative;
-	z-index: 11;
-}
-
-.ns_action_item:hover {
-	background-color: #141B5C66;
-}
-
-.ns_active_item {}
-
-.ns_deActive_item {
-	color: #D1D1D1;
-	cursor: not-allowed;
-}
-
-.ns_show {
-	display: block;
-}
-
-.ns_hide {
-	display: none;
+.ns_action_bar {
+	display: flex;
+	flex-direction: column;
+	width: 272px;
+	color: #000;
+	position: relative;
+	max-width: 100%;
+}
+
+.ns_action_bar>button {
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid #000;
+	max-width: 100%;
+	height: max-content !important;
+	background: #fff;
+	cursor: pointer;
+	text-align: start;
+	color: #141B5C;
+	cursor: pointer;
+}
+
+.ns_action_menu_icon {
+	position: absolute;
+	right: 20px;
+	top: 12px;
+	z-index: 1;
+}
+
+.ns_action_item_holder {
+	list-style-type: none;
+	padding: 16px 0;
+	margin: 0;
+	background: #fff;
+	border-radius: 8px;
+	position: absolute;
+	top: 64px;
+	left: 0;
+	width: 100%;
+	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.ns_action_item {
+	height: 40px;
+	display: flex;
+	align-items: center;
+	font-size: 16px;
+	color: #141B5C;
+	padding: 0 16px;
+	cursor: pointer;
+	position: relative;
+	z-index: 11;
+}
+
+.ns_action_item:hover {
+	background-color: #141B5C66;
+}
+
+.ns_active_item {}
+
+.ns_deActive_item {
+	color: #D1D1D1;
+	cursor: not-allowed;
+}
+
+.ns_show {
+	display: block;
+}
+
+.ns_hide {
+	display: none;
 }

package/src/components/NSActionMenu.tsx

@@ -1,86 +1,86 @@
-import { useState, useEffect, useRef } from 'react';
-import { IBaseComponentProps, NSButtonBlue } from '../main';
-import Styles from './NSActionMenu.module.css';
-
-export interface INSActionMenuProps extends IBaseComponentProps
-{
-	group: string;
-	items: {
-		id: string
-		menu_item: string;
-		handler: () => void;
-		isActive: () => boolean;
-	}[];
-}
-
-export interface INSActionMenuState
-{
-	isShow: boolean;
-}
-
-export function NSActionMenu(props: 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]);
-
-	return (
-		<>
-			{props.items.length >= 1 ?
-				<div className={Styles.ns_action_bar} ref={menuRef}>
-					<button onClick={() => setState((prevState) => ({
-						...prevState, isShow: !state.isShow
-					}))}>
-						Action Menu
-						<img
-							className={Styles.ns_action_menu_icon}
-							src="https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png"
-							alt="Icon"
-							width={8}
-							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={item.handler}
-								className={`${Styles.ns_action_item}
-								${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
-								`}
-							>
-								{item.menu_item}
-							</li>
-						)}
-					</ul>
-				</div>
-				:
-				<>
-					<NSButtonBlue
-						title={props.items[0].menu_item}
-						onClick={props.items[0].handler}
-					/>
-				</>
-			}
-		</>
-	);
+import { useState, useEffect, useRef } from 'react';
+import { IBaseComponentProps, NSButtonBlue } from '../main';
+import Styles from './NSActionMenu.module.css';
+
+export interface INSActionMenuProps extends IBaseComponentProps
+{
+	group: string;
+	items: {
+		id: string
+		menu_item: string;
+		handler: () => void;
+		isActive: () => boolean;
+	}[];
+}
+
+export interface INSActionMenuState
+{
+	isShow: boolean;
+}
+
+export function NSActionMenu(props: 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]);
+
+	return (
+		<>
+			{props.items.length >= 1 ?
+				<div className={Styles.ns_action_bar} ref={menuRef}>
+					<button onClick={() => setState((prevState) => ({
+						...prevState, isShow: !state.isShow
+					}))}>
+						Action Menu
+						<img
+							className={Styles.ns_action_menu_icon}
+							src="https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png"
+							alt="Icon"
+							width={8}
+							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={item.handler}
+								className={`${Styles.ns_action_item}
+								${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
+								`}
+							>
+								{item.menu_item}
+							</li>
+						)}
+					</ul>
+				</div>
+				:
+				<>
+					<NSButtonBlue
+						title={props.items[0].menu_item}
+						onClick={props.items[0].handler}
+					/>
+				</>
+			}
+		</>
+	);
 }

package/src/components/NSBarAction.module.css

@@ -1,88 +1,88 @@
-.title {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-	white-space: nowrap;
-}
-
-.description {
-	text-align: center;
-	color: rgba(20, 27, 92, 1);
-	margin: 0px;
-}
-
-.ns_action_bar_holder {
-	z-index: 1;
-	padding: 0 16px;
-	position: sticky;
-	top: 0;
-	background-color: #fff;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
-
-.ns_actions_hodler {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 16px;
-}
-
-.ns_info_container {
-	border: none;
-	outline: none;
-	background: none;
-}
-
-.ns_layout_description_holder {
-	display: flex;
-}
-
-.ns_hide {
-	display: none;
-}
-
-.ns_show {
-	display: flex;
-}
-
-.ns_desktop_action_bar_title {
-	display: none;
-}
-
-.ns_mobile_action_bar_title {
-	display: block;
-}
-
-@media only screen and (min-width: 992px) {
-	.ns_action_bar_holder {
-		justify-content: space-between;
-		min-height: 80px;
-	}
-
-	.ns_desktop_action_bar_title {
-		display: flex;
-	}
-
-	.ns_mobile_action_bar_title {
-		display: none;
-	}
-
-	.ns_info_container {
-		margin: 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 4px;
-	}
-
+.title {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+	white-space: nowrap;
+}
+
+.description {
+	text-align: center;
+	color: rgba(20, 27, 92, 1);
+	margin: 0px;
+}
+
+.ns_action_bar_holder {
+	z-index: 1;
+	padding: 0 16px;
+	position: sticky;
+	top: 0;
+	background-color: #fff;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.ns_actions_hodler {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 16px;
+}
+
+.ns_info_container {
+	border: none;
+	outline: none;
+	background: none;
+}
+
+.ns_layout_description_holder {
+	display: flex;
+}
+
+.ns_hide {
+	display: none;
+}
+
+.ns_show {
+	display: flex;
+}
+
+.ns_desktop_action_bar_title {
+	display: none;
+}
+
+.ns_mobile_action_bar_title {
+	display: block;
+}
+
+@media only screen and (min-width: 992px) {
+	.ns_action_bar_holder {
+		justify-content: space-between;
+		min-height: 80px;
+	}
+
+	.ns_desktop_action_bar_title {
+		display: flex;
+	}
+
+	.ns_mobile_action_bar_title {
+		display: none;
+	}
+
+	.ns_info_container {
+		margin: 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 4px;
+	}
+
 }

package/src/components/NSBarAction.tsx

@@ -1,87 +1,87 @@
-import React, { useState } from 'react';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import Styles from './NSBarAction.module.css';
-import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
-import { NSModal } from './NSModal';
-
-export interface INSBarActionProps 
-{
-	title: string;
-	description?: string;
-	menus: INSActionMenuProps[];
-}
-
-export interface NSBarActionState
-{
-	show: boolean
-}
-
-export function NSBarAction(props: INSBarActionProps)
-{
-	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
-	const [state, setState] = useState<NSBarActionState>({
-		show: false
-	})
-
-	const filtered_actions = props.menus.filter((action) => action.group)
-
-	return (
-		<>
-			<div className={Styles.ns_action_bar_holder}>
-				{/* Desktop  */}
-				<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
-					<h1 className={Styles.title}>{props.title}</h1>
-					{
-						props.description !== "" &&
-						<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
-							<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
-							<span> Info </span>
-						</button>
-					}
-					<NSModal
-						show={state.show}
-						description={props.description}
-						title={props.title}
-						onClose={() => setState({ show: false })}
-					/>
-				</div>
-				<div
-					style={{ padding: props.menus.length !== 0 ? "16px 0" : "0" }}
-					className={Styles.ns_actions_hodler}
-				>
-					{filtered_actions.map((action) =>
-						<NSActionMenu
-							key={action.id}
-							group={action.group}
-							items={action.items}
-						/>
-					)}
-				</div>
-			</div>
-			<NSSpace size={NSSpaceSizeType.SMALL} />
-			{/* Mobile  */}
-			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
-				<h1 className={Styles.title}>{props.title}</h1>
-				{
-					props.description && lines &&
-					<>
-						<p className={Styles.description}>
-							{
-								lines.map((line, index) =>
-								{
-									return (
-										<React.Fragment key={index}>
-											{line.trim()}
-											{index !== lines.length - 1 && <br />}
-										</React.Fragment>
-									)
-								})
-							}
-						</p>
-						<NSSpace size={NSSpaceSizeType.MINI} />
-					</>
-				}
-			</div>
-		</>
-	);
+import React, { useState } from 'react';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import Styles from './NSBarAction.module.css';
+import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
+import { NSModal } from './NSModal';
+
+export interface INSBarActionProps 
+{
+	title: string;
+	description?: string;
+	menus: INSActionMenuProps[];
+}
+
+export interface NSBarActionState
+{
+	show: boolean
+}
+
+export function NSBarAction(props: INSBarActionProps)
+{
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+	const [state, setState] = useState<NSBarActionState>({
+		show: false
+	})
+
+	const filtered_actions = props.menus.filter((action) => action.group)
+
+	return (
+		<>
+			<div className={Styles.ns_action_bar_holder}>
+				{/* Desktop  */}
+				<div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
+					<h1 className={Styles.title}>{props.title}</h1>
+					{
+						props.description !== "" &&
+						<button className={Styles.ns_info_container} onClick={() => setState({ show: true })}>
+							<img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
+							<span> Info </span>
+						</button>
+					}
+					<NSModal
+						show={state.show}
+						description={props.description}
+						title={props.title}
+						onClose={() => setState({ show: false })}
+					/>
+				</div>
+				<div
+					style={{ padding: props.menus.length !== 0 ? "16px 0" : "0" }}
+					className={Styles.ns_actions_hodler}
+				>
+					{filtered_actions.map((action) =>
+						<NSActionMenu
+							key={action.id}
+							group={action.group}
+							items={action.items}
+						/>
+					)}
+				</div>
+			</div>
+			<NSSpace size={NSSpaceSizeType.SMALL} />
+			{/* Mobile  */}
+			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
+				<h1 className={Styles.title}>{props.title}</h1>
+				{
+					props.description && lines &&
+					<>
+						<p className={Styles.description}>
+							{
+								lines.map((line, index) =>
+								{
+									return (
+										<React.Fragment key={index}>
+											{line.trim()}
+											{index !== lines.length - 1 && <br />}
+										</React.Fragment>
+									)
+								})
+							}
+						</p>
+						<NSSpace size={NSSpaceSizeType.MINI} />
+					</>
+				}
+			</div>
+		</>
+	);
 }