namirasoft-site-react 1.4.112 → 1.4.113

package/src/components/NSTabPage.tsx

@@ -1,79 +1,79 @@
-"use client";
-import { Component } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from './NSTabPage.module.css';
-
-export interface NSTabPageTab
-{
-	title: string;
-	getContent: () => React.ReactNode;
-}
-
-export interface NSTabPageProps extends IBaseComponentProps
-{
-	tabs: NSTabPageTab[]
-	grid?: boolean;
-}
-
-export interface NSTabPageState
-{
-	activeTabIndex: number;
-	isClicked: boolean[];
-}
-
-export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
-{
-	constructor(props: NSTabPageProps)
-	{
-		super(props);
-		this.state = {
-			activeTabIndex: 0,
-			isClicked: [true]
-		};
-	}
-	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 className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} 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}
-							</li>
-						))
-					}
-				</ul>
-				{
-					this.props.tabs.map((tab, index) => (
-						<div
-							key={`NSTabPage_div_key_${index}`}
-							className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
-							style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
-						>
-							{
-								this.state.isClicked[index] ? tab.getContent() : <></>
-							}
-						</div>
-					))
-				}
-			</div>
-		);
-	}
+"use client";
+import { Component } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from './NSTabPage.module.css';
+
+export interface NSTabPageTab
+{
+	title: string;
+	getContent: () => React.ReactNode;
+}
+
+export interface NSTabPageProps extends IBaseComponentProps
+{
+	tabs: NSTabPageTab[]
+	grid?: boolean;
+}
+
+export interface NSTabPageState
+{
+	activeTabIndex: number;
+	isClicked: boolean[];
+}
+
+export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
+{
+	constructor(props: NSTabPageProps)
+	{
+		super(props);
+		this.state = {
+			activeTabIndex: 0,
+			isClicked: [true]
+		};
+	}
+	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 className={`${Styles.ns_tab_page_panel} ${this.props.classList}`} 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}
+							</li>
+						))
+					}
+				</ul>
+				{
+					this.props.tabs.map((tab, index) => (
+						<div
+							key={`NSTabPage_div_key_${index}`}
+							className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
+							style={{ display: index === this.state.activeTabIndex ? "flex" : "none" }}
+						>
+							{
+								this.state.isClicked[index] ? tab.getContent() : <></>
+							}
+						</div>
+					))
+				}
+			</div>
+		);
+	}
 }