namirasoft-site-react 1.3.140 → 1.3.141

package/src/components/NSGroupedList.module.css

@@ -0,0 +1,71 @@
+.ns_group_list_parent {
+	width: 100%;
+	max-width: 560px;
+	border-radius: 8px;
+	border: solid 1px #B2BBD9;
+	background-color: #fff;
+	padding-bottom: 16px;
+	height: 250px;
+	overflow: auto;
+}
+
+.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 {
+	display: inline-block;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 8px;
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+}
+
+.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

@@ -0,0 +1,59 @@
+"use client"
+import { Component } from 'react';
+import { IBaseComponentProps } from '../main';
+import Styles from "./NSGroupedList.module.css"
+
+interface INSGroupedListProps extends IBaseComponentProps
+{
+	groups: {
+		name: string;
+		text: string;
+		sign?: string;
+		operator_name?: string;
+		items: {
+			name: string;
+			text: string;
+		}[];
+	}[];
+	onClick: (group: string, item: string) => void;
+}
+
+interface INSGroupedListState
+{
+
+}
+
+class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
+{
+	override render()
+	{
+		return (
+			<div className={Styles.ns_group_list_parent}>
+				{this.props.groups.map((group, index) =>
+					<ul key={index} className={Styles.ns_group_list}>
+						<span className={Styles.ns_group_category}> {group.name} </span>
+						{
+							group.items.map((item, index) =>
+								<li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
+									<div className={Styles.ns_group_item}>
+										<span>
+											{item.name} {" "}
+											{group.sign && <span>  {group.sign} </span>}
+										</span>
+										{
+											group.operator_name &&
+											<span className={Styles.ns_block}>  {group.operator_name} </span>
+										}
+									</div>
+								</li>
+							)
+						}
+					</ul>
+				)}
+			</div>
+
+		);
+	}
+}
+
+export default NSGroupedList;

package/src/components/NSLayoutAction.tsx

@@ -48,27 +48,7 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 					/>
 				</div>
 
-				{/* Mobile  */}
-				<div className={`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 <>
-											{line.trim()}
-											{index != lines.length - 1 && <br />}
-										</>
-									})
-								}
-							</p>
-							<NSSpace size={NSSpaceSizeType.MINI} />
-						</>
-					}
-				</div>
+
 
 				<div className={Styles.ns_actions_hodler}>
 					{filtered_actions.map((action) =>
@@ -82,6 +62,28 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 
 			</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 <>
+										{line.trim()}
+										{index != lines.length - 1 && <br />}
+									</>
+								})
+							}
+						</p>
+						<NSSpace size={NSSpaceSizeType.MINI} />
+					</>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.SMALL} />
 			{props.children}
 		</NSLayout>
 	);