namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSLinkRed.tsx

@@ -1,14 +1,14 @@
-import { NSLink, NSLinkProps } from "./NSLink";
-
-export function NSLinkRed(props: NSLinkProps)
-{
-    return <NSLink
-        id={props.id}
-        classList={props.classList}
-        style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }}
-        href={props.href}
-        target={props.target ?? "_self"}
-    >
-        {props.children}
-    </NSLink>;
+import { NSLink, NSLinkProps } from "./NSLink";
+
+export function NSLinkRed(props: NSLinkProps)
+{
+    return <NSLink
+        id={props.id}
+        classList={props.classList}
+        style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }}
+        href={props.href}
+        target={props.target ?? "_self"}
+    >
+        {props.children}
+    </NSLink>;
 }

package/src/components/NSListGrouped.module.css

@@ -1,70 +1,70 @@
-.ns_list_grouped_parent {
-	width: 100%;
-	max-width: 560px;
-	border-radius: 8px;
-	border: solid 1px #B2BBD9;
-	background-color: #fff;
-	padding-bottom: 16px;
-	height: 360px;
-	overflow: auto;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar {
-	width: 1rem;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar-track {
-	box-shadow: inset 0 0 6px #E8EBF6;
-}
-
-.ns_list_grouped_parent::-webkit-scrollbar-thumb {
-	background-color: #A1A4B0;
-	border-radius: 8px;
-}
-
-.ns_list_grouped {
-	list-style-type: none;
-	color: #141B5C;
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: flex-start;
-	font-size: 16px;
-	font-weight: 700;
-	width: 100%;
-}
-
-.ns_group_category {
-	border-bottom: solid 1px currentColor;
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	padding: 10px 8px;
-}
-
-.ns_list_grouped li {
-	width: 100%;
-}
-
-.ns_group_item {
-	cursor: pointer;
-	padding: 6px 0 6px 24px;
-	font-size: 16px;
-	font-weight: 300;
-	color: #141B5C;
-	border-bottom: solid 1px currentColor;
-	width: 100%;
-	display: inline-block;
-	transition: all 0.1s;
-}
-
-.ns_group_item:hover {
-	background-color: #B2BBD9;
-	font-weight: 700;
-}
-
-.ns_block {
-	display: block;
+.ns_list_grouped_parent {
+	width: 100%;
+	max-width: 560px;
+	border-radius: 8px;
+	border: solid 1px #B2BBD9;
+	background-color: #fff;
+	padding-bottom: 16px;
+	height: 360px;
+	overflow: auto;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar {
+	width: 1rem;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 6px #E8EBF6;
+}
+
+.ns_list_grouped_parent::-webkit-scrollbar-thumb {
+	background-color: #A1A4B0;
+	border-radius: 8px;
+}
+
+.ns_list_grouped {
+	list-style-type: none;
+	color: #141B5C;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: flex-start;
+	font-size: 16px;
+	font-weight: 700;
+	width: 100%;
+}
+
+.ns_group_category {
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	padding: 10px 8px;
+}
+
+.ns_list_grouped li {
+	width: 100%;
+}
+
+.ns_group_item {
+	cursor: pointer;
+	padding: 6px 0 6px 24px;
+	font-size: 16px;
+	font-weight: 300;
+	color: #141B5C;
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+	display: inline-block;
+	transition: all 0.1s;
+}
+
+.ns_group_item:hover {
+	background-color: #B2BBD9;
+	font-weight: 700;
+}
+
+.ns_block {
+	display: block;
 }

package/src/components/NSListGrouped.tsx

@@ -1,107 +1,107 @@
-"use client"
-import { Component, createRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSListGrouped.module.css";
-import { NSLoading } from './NSLoading';
-
-export interface NSListGroupedProps<Data> extends IBaseComponentProps
-{
-	groups: NSListGroupedProps_Group<Data>[];
-	onClick: (group: NSListGroupedProps_Group<Data>, item: NSListGroupedProps_Item<Data>) => void;
-	onClose: () => void;
-}
-
-export interface NSListGroupedProps_Group<Data>
-{
-	value: string;
-	text: string;
-	items: NSListGroupedProps_Item<Data>[] | null;
-}
-
-export interface NSListGroupedProps_Item<Data>
-{
-	value: Data
-	text: string;
-	text_bold?: string;
-	description?: string;
-}
-
-interface NSListGroupedState
-{
-}
-
-export class NSListGrouped<Data> extends Component<NSListGroupedProps<Data>, NSListGroupedState>
-{
-	private groupListRef = createRef<HTMLDivElement>();
-
-	constructor(props: NSListGroupedProps<Data>) 
-	{
-		super(props);
-		this.state = {};
-		this.handleClickOutside = this.handleClickOutside.bind(this);
-	}
-
-	override componentDidMount() 
-	{
-		document.addEventListener('mousedown', this.handleClickOutside);
-	}
-
-	override componentWillUnmount()
-	{
-		document.removeEventListener('mousedown', this.handleClickOutside);
-	}
-
-	handleClickOutside(event: MouseEvent)
-	{
-		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
-			this.props.onClose();
-	}
-	override render()
-	{
-		return (
-			<div
-				ref={this.groupListRef}
-				id={this.props.id}
-				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ") ?? ""}`}
-				style={this.props.style}
-			>
-				{
-					this.props.groups.map((group, index) => (
-						(group.items == null || group.items.length > 0) &&
-						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
-							<div className='d-flex w-100 justify-content-between align-items-center'>
-								<span className={Styles.ns_group_category}>{group.text}
-									<img
-										onClick={this.props.onClose}
-										src="https://static.namirasoft.com/image/concept/close/blue.svg"
-										alt="input-icon"
-										width={24}
-										height={24}
-										style={{ cursor: "pointer" }}
-									/>
-								</span>
-							</div>
-							{
-								group.items == null &&
-								<NSLoading />
-							}
-							{
-								group.items?.map((item) => (
-									<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group, item)}>
-										<div className={Styles.ns_group_item}>
-											<span>{item.text && <span>{item.text}</span>}</span>
-											<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
-												<b> {item.text_bold}</b>
-											</span>
-											{item.description && <span className={Styles.ns_block}>{item.description}</span>}
-										</div>
-									</li>
-								))
-							}
-						</ul>
-					))
-				}
-			</div>
-		);
-	}
+"use client"
+import { Component, createRef } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSListGrouped.module.css";
+import { NSLoading } from './NSLoading';
+
+export interface NSListGroupedProps<Data> extends IBaseComponentProps
+{
+	groups: NSListGroupedProps_Group<Data>[];
+	onClick: (group: NSListGroupedProps_Group<Data>, item: NSListGroupedProps_Item<Data>) => void;
+	onClose: () => void;
+}
+
+export interface NSListGroupedProps_Group<Data>
+{
+	value: string;
+	text: string;
+	items: NSListGroupedProps_Item<Data>[] | null;
+}
+
+export interface NSListGroupedProps_Item<Data>
+{
+	value: Data
+	text: string;
+	text_bold?: string;
+	description?: string;
+}
+
+interface NSListGroupedState
+{
+}
+
+export class NSListGrouped<Data> extends Component<NSListGroupedProps<Data>, NSListGroupedState>
+{
+	private groupListRef = createRef<HTMLDivElement>();
+
+	constructor(props: NSListGroupedProps<Data>) 
+	{
+		super(props);
+		this.state = {};
+		this.handleClickOutside = this.handleClickOutside.bind(this);
+	}
+
+	override componentDidMount() 
+	{
+		document.addEventListener('mousedown', this.handleClickOutside);
+	}
+
+	override componentWillUnmount()
+	{
+		document.removeEventListener('mousedown', this.handleClickOutside);
+	}
+
+	handleClickOutside(event: MouseEvent)
+	{
+		if (this.groupListRef.current && !this.groupListRef.current.contains(event.target as Node))
+			this.props.onClose();
+	}
+	override render()
+	{
+		return (
+			<div
+				ref={this.groupListRef}
+				id={this.props.id}
+				className={`${Styles.ns_list_grouped_parent} ${this.props.classList?.join(" ") ?? ""}`}
+				style={this.props.style}
+			>
+				{
+					this.props.groups.map((group, index) => (
+						(group.items == null || group.items.length > 0) &&
+						<ul key={`NSListGrouped_ul_key_${index}`} className={Styles.ns_list_grouped}>
+							<div className='d-flex w-100 justify-content-between align-items-center'>
+								<span className={Styles.ns_group_category}>{group.text}
+									<img
+										onClick={this.props.onClose}
+										src="https://static.namirasoft.com/image/concept/close/blue.svg"
+										alt="input-icon"
+										width={24}
+										height={24}
+										style={{ cursor: "pointer" }}
+									/>
+								</span>
+							</div>
+							{
+								group.items == null &&
+								<NSLoading title='Loading group items ...' />
+							}
+							{
+								group.items?.map((item) => (
+									<li key={`NSListGrouped_li_key_${index}`} onClick={() => this.props.onClick(group, item)}>
+										<div className={Styles.ns_group_item}>
+											<span>{item.text && <span>{item.text}</span>}</span>
+											<span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
+												<b> {item.text_bold}</b>
+											</span>
+											{item.description && <span className={Styles.ns_block}>{item.description}</span>}
+										</div>
+									</li>
+								))
+							}
+						</ul>
+					))
+				}
+			</div>
+		);
+	}
 }