namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSTabPage.module.css

@@ -1,60 +1,60 @@
-.ns_tab_page_panel {
-    border-radius: 8px;
-    overflow: hidden;
-    background: #141B5C;
-    padding: 16px;
-    width: 100%;
-}
-
-.ns_tab_page_panel ul.ns_tab_page_titles_container {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    overflow-x: auto;
-}
-
-.ns_tab_page_panel li.ns_tab_page_title {
-    text-align: center;
-    padding: 0px 16px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
-    border-right: 1px solid #fff;
-    margin: 14px 0;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
-    border-right: none;
-}
-
-.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
-    background-color: #fff;
-    border-radius: 8px 8px 0 0;
-    color: #141B5C;
-    margin: 0;
-    padding: 14px 16px;
-    box-shadow: 0px 2px 2px 2px #141B5C;
-}
-
-.ns_tab_content_column {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    gap: 0;
-    border-right: 1px solid #ccc;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-}
-
-/* .ns_tab_content_grid {
-    padding: 16px;
-    border-radius: 0 8px 8px 8px;
-    background-color: #fff;
-    display: grid !important;
-    gap: 0;
-    border-right: 1px solid #ccc;
+.ns_tab_page_panel {
+    border-radius: 8px;
+    overflow: hidden;
+    background: #141B5C;
+    padding: 16px;
+    width: 100%;
+}
+
+.ns_tab_page_panel ul.ns_tab_page_titles_container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow-x: auto;
+}
+
+.ns_tab_page_panel li.ns_tab_page_title {
+    text-align: center;
+    padding: 0px 16px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    border-right: 1px solid #fff;
+    margin: 14px 0;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title:last-child {
+    border-right: none;
+}
+
+.ns_tab_page_panel>ul.ns_tab_page_titles_container>li.ns_tab_page_title_active {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    color: #141B5C;
+    margin: 0;
+    padding: 14px 16px;
+    box-shadow: 0px 2px 2px 2px #141B5C;
+}
+
+.ns_tab_content_column {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    gap: 0;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow-y: auto;
+}
+
+/* .ns_tab_content_grid {
+    padding: 16px;
+    border-radius: 0 8px 8px 8px;
+    background-color: #fff;
+    display: grid !important;
+    gap: 0;
+    border-right: 1px solid #ccc;
 } */

package/src/components/NSTabPage.tsx

@@ -1,123 +1,123 @@
-"use client";
-import { Component, createRef } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSTabPage.module.css';
-import { NSInfo, NSInfoProps } from "../main";
-
-export interface NSTabPageTab extends IBaseComponentProps
-{
-	title: string;
-	info?: NSInfoProps;
-	clicked: boolean;
-	getContent: () => React.ReactNode;
-}
-
-export interface NSTabPageProps extends IBaseComponentProps
-{
-	tabs: NSTabPageTab[]
-	container?: IBaseComponentProps
-	activeTabIndex?: number;
-}
-
-export interface NSTabPageState
-{
-	activeTabIndex: number;
-	isClicked: boolean[];
-	info?: NSInfoProps;
-}
-
-export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
-{
-	ns_info = createRef<NSInfo>();
-	constructor(props: NSTabPageProps)
-	{
-		super(props);
-		let activeTabIndex = this.props.activeTabIndex ?? 0;
-		this.state = {
-			activeTabIndex,
-			isClicked: this.props.tabs.map((tab, index) => tab.clicked || activeTabIndex === index),
-			info: undefined
-		};
-	}
-	setClicked(indices: number[], callback: () => void)
-	{
-		let isClicked = this.state.isClicked;
-		for (let i = 0; i < indices.length; i++)
-			isClicked[indices[i]] = true;
-		this.setState({ isClicked }, callback);
-	}
-	override render()
-	{
-		return (
-			<div
-				id={this.props.id}
-				className={`${Styles.ns_tab_page_panel} ${this.props.classList?.join(" ") ?? ""}`}
-				style={this.props.style}>
-				<ul className={Styles.ns_tab_page_titles_container}>
-					{
-						this.props.tabs.map((tab, index) => (
-							<li
-								key={`NSTabPage_li_key_${index}`}
-								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
-								onClick={() =>
-								{
-									let isClicked = this.state.isClicked;
-									isClicked[index] = true;
-									this.setState({ activeTabIndex: index, isClicked })
-								}}
-							>
-								{tab.title}
-								{
-									(this.state.activeTabIndex === index && (tab.info?.text || tab.info?.link)) &&
-									<>
-										<img
-											src="https://static.namirasoft.com/image/concept/info/white-blue.svg"
-											onClick={() =>
-											{
-												this.setState({ info: tab.info }, () =>
-												{
-													this.ns_info.current?.onClick();
-												})
-											}}
-											alt="info"
-											width={24}
-											height={24}
-											style={{
-												cursor: "pointer",
-												marginLeft: "8px"
-											}}
-										/>
-									</>
-								}
-							</li>
-						))
-					}
-				</ul>
-				<div
-					id={this.props.container?.id}
-					className={this.props.container?.classList?.join(" ") ?? ""}
-					style={{ ...this.props.container?.style }}
-				>
-					{
-						this.props.tabs.map((tab, index) => (
-							<div
-								id={tab.id}
-								key={`NSTabPage_div_key_${this.props.name}_${index}`}
-								className={`${Styles.ns_tab_content_column} ${tab.classList?.join(" ") ?? ""}`}
-								style={{ ...tab.style, display: index === this.state.activeTabIndex ? "flex" : "none" }}
-							>
-								{
-									this.state.isClicked[index] ? tab.getContent() : <></>
-								}
-							</div>
-						))
-					}
-				</div>
-				<NSInfo
-					ref={this.ns_info}
-					{...this.state.info}
-				/>
-			</div>
-		);
-	}
+"use client";
+import { Component, createRef } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSTabPage.module.css';
+import { NSInfo, NSInfoProps } from "../main";
+
+export interface NSTabPageTab extends IBaseComponentProps
+{
+	title: string;
+	info?: NSInfoProps;
+	clicked: boolean;
+	getContent: () => React.ReactNode;
+}
+
+export interface NSTabPageProps extends IBaseComponentProps
+{
+	tabs: NSTabPageTab[]
+	container?: IBaseComponentProps
+	activeTabIndex?: number;
+}
+
+export interface NSTabPageState
+{
+	activeTabIndex: number;
+	isClicked: boolean[];
+	info?: NSInfoProps;
+}
+
+export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
+{
+	ns_info = createRef<NSInfo>();
+	constructor(props: NSTabPageProps)
+	{
+		super(props);
+		let activeTabIndex = this.props.activeTabIndex ?? 0;
+		this.state = {
+			activeTabIndex,
+			isClicked: this.props.tabs.map((tab, index) => tab.clicked || activeTabIndex === index),
+			info: undefined
+		};
+	}
+	setClicked(indices: number[], callback: () => void)
+	{
+		let isClicked = this.state.isClicked;
+		for (let i = 0; i < indices.length; i++)
+			isClicked[indices[i]] = true;
+		this.setState({ isClicked }, callback);
+	}
+	override render()
+	{
+		return (
+			<div
+				id={this.props.id}
+				className={`${Styles.ns_tab_page_panel} ${this.props.classList?.join(" ") ?? ""}`}
+				style={this.props.style}>
+				<ul className={Styles.ns_tab_page_titles_container}>
+					{
+						this.props.tabs.map((tab, index) => (
+							<li
+								key={`NSTabPage_li_key_${index}`}
+								className={`${Styles.ns_tab_page_title} ${this.state.activeTabIndex === index ? Styles.ns_tab_page_title_active : ''}`}
+								onClick={() =>
+								{
+									let isClicked = this.state.isClicked;
+									isClicked[index] = true;
+									this.setState({ activeTabIndex: index, isClicked })
+								}}
+							>
+								{tab.title}
+								{
+									(this.state.activeTabIndex === index && (tab.info?.text || tab.info?.link)) &&
+									<>
+										<img
+											src="https://static.namirasoft.com/image/concept/info/white-blue.svg"
+											onClick={() =>
+											{
+												this.setState({ info: tab.info }, () =>
+												{
+													this.ns_info.current?.onClick();
+												})
+											}}
+											alt="info"
+											width={24}
+											height={24}
+											style={{
+												cursor: "pointer",
+												marginLeft: "8px"
+											}}
+										/>
+									</>
+								}
+							</li>
+						))
+					}
+				</ul>
+				<div
+					id={this.props.container?.id}
+					className={this.props.container?.classList?.join(" ") ?? ""}
+					style={{ ...this.props.container?.style }}
+				>
+					{
+						this.props.tabs.map((tab, index) => (
+							<div
+								id={tab.id}
+								key={`NSTabPage_div_key_${this.props.name}_${index}`}
+								className={`${Styles.ns_tab_content_column} ${tab.classList?.join(" ") ?? ""}`}
+								style={{ ...tab.style, display: index === this.state.activeTabIndex ? "flex" : "none" }}
+							>
+								{
+									this.state.isClicked[index] ? tab.getContent() : <></>
+								}
+							</div>
+						))
+					}
+				</div>
+				<NSInfo
+					ref={this.ns_info}
+					{...this.state.info}
+				/>
+			</div>
+		);
+	}
 }