namirasoft-site-react 1.4.112 → 1.4.113

package/src/components/NSGroupedList.module.css

@@ -1,73 +1,73 @@
-.ns_group_list_parent {
-	width: 100%;
-	max-width: 560px;
-	border-radius: 8px;
-	border: solid 1px #B2BBD9;
-	background-color: #fff;
-	padding-bottom: 16px;
-	height: 360px;
-	overflow: auto;
-	position: absolute;
-	z-index: 10;
-	margin-top: 50px;
-}
-
-.ns_group_list_parent::-webkit-scrollbar {
-	width: 1rem;
-}
-
-.ns_group_list_parent::-webkit-scrollbar-track {
-	box-shadow: inset 0 0 6px #E8EBF6;
-}
-
-.ns_group_list_parent::-webkit-scrollbar-thumb {
-	background-color: #A1A4B0;
-	border-radius: 8px;
-}
-
-.ns_group_list {
-	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_group_list 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_group_list_parent {
+	width: 100%;
+	max-width: 560px;
+	border-radius: 8px;
+	border: solid 1px #B2BBD9;
+	background-color: #fff;
+	padding-bottom: 16px;
+	height: 360px;
+	overflow: auto;
+	position: absolute;
+	z-index: 10;
+	margin-top: 50px;
+}
+
+.ns_group_list_parent::-webkit-scrollbar {
+	width: 1rem;
+}
+
+.ns_group_list_parent::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 6px #E8EBF6;
+}
+
+.ns_group_list_parent::-webkit-scrollbar-thumb {
+	background-color: #A1A4B0;
+	border-radius: 8px;
+}
+
+.ns_group_list {
+	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_group_list 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/NSGroupedList.tsx

@@ -1,116 +1,116 @@
-"use client"
-import { Component, createRef } from 'react';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSGroupedList.module.css";
-
-export interface INSGroupedListProps extends IBaseComponentProps
-{
-	groups: INSGroupedListProps_Group[];
-	onClick: (group: string, item: string) => void;
-}
-
-export interface INSGroupedListProps_Group
-{
-	name: string;
-	text: string;
-	items: INSGroupedListProps_Item[];
-}
-
-export interface INSGroupedListProps_Item
-{
-	name: string;
-	text: string;
-	text_bold?: string;
-	description?: string;
-}
-
-interface INSGroupedListState
-{
-	isVisible: boolean;
-}
-
-export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
-{
-	private groupListRef = createRef<HTMLDivElement>();
-
-	constructor(props: INSGroupedListProps) 
-	{
-		super(props);
-		this.state = {
-			isVisible: true,
-		};
-		this.handleClickOutside = this.handleClickOutside.bind(this);
-		this.hide = this.hide.bind(this);
-		this.show = this.show.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.hide();
-		}
-	}
-
-	hide()
-	{
-		this.setState({ isVisible: false });
-	}
-
-	show()
-	{
-		this.setState({ isVisible: true }, () =>
-		{
-			console.log("State after show:", this.state);
-		});
-	}
-
-	override render()
-	{
-		if (!this.state.isVisible)
-		{
-			return null;
-		}
-
-		return (
-			<div ref={this.groupListRef} className={Styles.ns_group_list_parent}>
-				{this.props.groups.map((group, index) => (
-					<ul key={`NSGroupedList_ul_key_${index}`} className={Styles.ns_group_list}>
-						<div className='d-flex w-100 justify-content-between align-items-center'>
-							<span className={Styles.ns_group_category}>{group.text}
-								<img
-									onClick={this.hide}
-									src="https://static.namirasoft.com/image/concept/close/blue.svg"
-									alt="input-icon"
-									width={24}
-									height={24}
-								/>
-							</span>
-						</div>
-						{group.items.map((item) => (
-							<li key={`NSGroupedList_li_key_${index}`} onClick={() => this.props.onClick(group.name, item.name)}>
-								<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 "./NSGroupedList.module.css";
+
+export interface INSGroupedListProps extends IBaseComponentProps
+{
+	groups: INSGroupedListProps_Group[];
+	onClick: (group: string, item: string) => void;
+}
+
+export interface INSGroupedListProps_Group
+{
+	name: string;
+	text: string;
+	items: INSGroupedListProps_Item[];
+}
+
+export interface INSGroupedListProps_Item
+{
+	name: string;
+	text: string;
+	text_bold?: string;
+	description?: string;
+}
+
+interface INSGroupedListState
+{
+	isVisible: boolean;
+}
+
+export class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
+{
+	private groupListRef = createRef<HTMLDivElement>();
+
+	constructor(props: INSGroupedListProps) 
+	{
+		super(props);
+		this.state = {
+			isVisible: true,
+		};
+		this.handleClickOutside = this.handleClickOutside.bind(this);
+		this.hide = this.hide.bind(this);
+		this.show = this.show.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.hide();
+		}
+	}
+
+	hide()
+	{
+		this.setState({ isVisible: false });
+	}
+
+	show()
+	{
+		this.setState({ isVisible: true }, () =>
+		{
+			console.log("State after show:", this.state);
+		});
+	}
+
+	override render()
+	{
+		if (!this.state.isVisible)
+		{
+			return null;
+		}
+
+		return (
+			<div ref={this.groupListRef} className={Styles.ns_group_list_parent}>
+				{this.props.groups.map((group, index) => (
+					<ul key={`NSGroupedList_ul_key_${index}`} className={Styles.ns_group_list}>
+						<div className='d-flex w-100 justify-content-between align-items-center'>
+							<span className={Styles.ns_group_category}>{group.text}
+								<img
+									onClick={this.hide}
+									src="https://static.namirasoft.com/image/concept/close/blue.svg"
+									alt="input-icon"
+									width={24}
+									height={24}
+								/>
+							</span>
+						</div>
+						{group.items.map((item) => (
+							<li key={`NSGroupedList_li_key_${index}`} onClick={() => this.props.onClick(group.name, item.name)}>
+								<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>
+		);
+	}
 }