namirasoft-site-react 1.4.1 → 1.4.3

package/src/components/NSRepeater.tsx

@@ -1,176 +1,176 @@
-import { Component, createRef, ReactNode } from 'react';
-
-export interface NSRepeaterProps<ItemType, ValueType>
-{
-	createItem: (index: number, ref: React.RefObject<ItemType>, onChange: (index: number) => void, onDelete: (index: number) => void) => ReactNode;
-	updateItem: (item: ItemType, index: number, value: ValueType | null) => void;
-	getValue: (item: ItemType, checkError: boolean) => ValueType;
-	isEmpty: (value: ValueType) => boolean;
-	onItemChanged?: () => void;
-	onValuesChanged?: (values: ValueType[]) => void;
-}
-
-export interface NSRepeaterState
-{
-	items: boolean[];
-}
-
-export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> 
-{
-	private Item_Refs: React.RefObject<ItemType>[] = [];
-	constructor(props: NSRepeaterProps<ItemType, ValueType>)
-	{
-		super(props);
-		this.state = { items: [] };
-		this.getGIndex = this.getGIndex.bind(this);
-		this.getIndex = this.getIndex.bind(this);
-		this.addItem = this.addItem.bind(this);
-		this.delItem = this.delItem.bind(this);
-		this.onChange = this.onChange.bind(this);
-		this.onDelete = this.onDelete.bind(this);
-		this.checkForNew = this.checkForNew.bind(this);
-		this.getValues = this.getValues.bind(this);
-		this.setValues = this.setValues.bind(this);
-	}
-	private getGIndex(index: number): number
-	{
-		if (this.state.items.length === 0)
-			return 0;
-		for (let i = 0; i < this.state.items.length; i++)
-		{
-			if (this.state.items[i])
-			{
-				if (index === 0)
-					return i;
-				index--;
-			}
-		}
-		return this.state.items.length - 1;
-	}
-	private getIndex(gindex: number): number
-	{
-		if (gindex >= this.state.items.length)
-			throw new Error("GIndex out of bound: " + gindex);
-		let ans = 0;
-		for (let i = 0; i <= gindex; i++)
-		{
-			if (this.state.items[i])
-				ans++;
-		}
-		return ans;
-	}
-	private addItem(state: boolean = true)
-	{
-		this.Item_Refs.push(createRef<ItemType>());
-		if (state)
-		{
-			let items = this.state.items;
-			items.push(true);
-			this.setState({ items }, () =>
-			{
-				if (this.props.onItemChanged)
-					this.props.onItemChanged();
-			});
-		}
-	}
-	private delItem(index: number)
-	{
-		if (this.Item_Refs.length > 0)
-		{
-			let gindex = this.getGIndex(index);
-			let items = this.state.items;
-			items[gindex] = false;
-			this.setState({ items }, () =>
-			{
-				if (this.props.onItemChanged)
-					this.props.onItemChanged();
-				this.onChange();
-			});
-		}
-	}
-	private onChange()
-	{
-		if (this.props.onValuesChanged)
-			this.props.onValuesChanged(this.getValues(false));
-		this.checkForNew();
-	}
-	private onDelete(index: number)
-	{
-		let length = this.state.items.filter(x => x).length;
-		if (length - 1 !== index)
-			if (length > 1)
-				this.delItem(index);
-	}
-	private checkForNew()
-	{
-		let length = this.state.items.filter(x => x).length;
-		if (length === 0)
-			this.addItem();
-		else
-		{
-			let last = this.Item_Refs.length - 1;
-			while (!this.state.items[last])
-				last--;
-			let item = this.Item_Refs[last].current;
-			if (item)
-				if (!this.props.isEmpty(this.props.getValue(item, false)))
-					this.addItem();
-		}
-	}
-	getValues(checkError: boolean = true): ValueType[]
-	{
-		return this.state.items.map((_, index) =>
-		{
-			let item = this.Item_Refs[index].current;
-			if (item)
-			{
-				let value = this.props.getValue(item, checkError);
-				if (!this.props.isEmpty(value))
-					return value;
-			}
-			return null
-		}).filter(x => x !== null) as ValueType[];
-	}
-	setValues(values: ValueType[])
-	{
-		this.Item_Refs = [];
-		values.forEach(() =>
-		{
-			this.addItem(false);
-		})
-		let items = values.map(() => true);
-		this.setState({ items }, () =>
-		{
-			if (this.props.onItemChanged)
-				this.props.onItemChanged();
-			values.forEach((value, index) =>
-			{
-				let item = this.Item_Refs[index].current;
-				if (item)
-					this.props.updateItem(item, index, value)
-			});
-			this.onChange();
-		});
-	}
-	override componentDidMount()
-	{
-		this.addItem();
-	}
-	override render()
-	{
-		let i = 0;
-		return (
-			<>
-				{
-					this.Item_Refs.map((ref, index) =>
-					{
-						if (this.state.items[index])
-							return this.props.createItem(i++, ref, this.onChange, this.onDelete);
-						return <></>;
-					}
-					)
-				}
-			</>
-		);
-	}
+import { Component, createRef, ReactNode } from 'react';
+
+export interface NSRepeaterProps<ItemType, ValueType>
+{
+	createItem: (index: number, ref: React.RefObject<ItemType>, onChange: (index: number) => void, onDelete: (index: number) => void) => ReactNode;
+	updateItem: (item: ItemType, index: number, value: ValueType | null) => void;
+	getValue: (item: ItemType, checkError: boolean) => ValueType;
+	isEmpty: (value: ValueType) => boolean;
+	onItemChanged?: () => void;
+	onValuesChanged?: (values: ValueType[]) => void;
+}
+
+export interface NSRepeaterState
+{
+	items: boolean[];
+}
+
+export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> 
+{
+	private Item_Refs: React.RefObject<ItemType>[] = [];
+	constructor(props: NSRepeaterProps<ItemType, ValueType>)
+	{
+		super(props);
+		this.state = { items: [] };
+		this.getGIndex = this.getGIndex.bind(this);
+		this.getIndex = this.getIndex.bind(this);
+		this.addItem = this.addItem.bind(this);
+		this.delItem = this.delItem.bind(this);
+		this.onChange = this.onChange.bind(this);
+		this.onDelete = this.onDelete.bind(this);
+		this.checkForNew = this.checkForNew.bind(this);
+		this.getValues = this.getValues.bind(this);
+		this.setValues = this.setValues.bind(this);
+	}
+	private getGIndex(index: number): number
+	{
+		if (this.state.items.length === 0)
+			return 0;
+		for (let i = 0; i < this.state.items.length; i++)
+		{
+			if (this.state.items[i])
+			{
+				if (index === 0)
+					return i;
+				index--;
+			}
+		}
+		return this.state.items.length - 1;
+	}
+	private getIndex(gindex: number): number
+	{
+		if (gindex >= this.state.items.length)
+			throw new Error("GIndex out of bound: " + gindex);
+		let ans = 0;
+		for (let i = 0; i <= gindex; i++)
+		{
+			if (this.state.items[i])
+				ans++;
+		}
+		return ans;
+	}
+	private addItem(state: boolean = true)
+	{
+		this.Item_Refs.push(createRef<ItemType>());
+		if (state)
+		{
+			let items = this.state.items;
+			items.push(true);
+			this.setState({ items }, () =>
+			{
+				if (this.props.onItemChanged)
+					this.props.onItemChanged();
+			});
+		}
+	}
+	private delItem(index: number)
+	{
+		if (this.Item_Refs.length > 0)
+		{
+			let gindex = this.getGIndex(index);
+			let items = this.state.items;
+			items[gindex] = false;
+			this.setState({ items }, () =>
+			{
+				if (this.props.onItemChanged)
+					this.props.onItemChanged();
+				this.onChange();
+			});
+		}
+	}
+	private onChange()
+	{
+		if (this.props.onValuesChanged)
+			this.props.onValuesChanged(this.getValues(false));
+		this.checkForNew();
+	}
+	private onDelete(index: number)
+	{
+		let length = this.state.items.filter(x => x).length;
+		if (length - 1 !== index)
+			if (length > 1)
+				this.delItem(index);
+	}
+	private checkForNew()
+	{
+		let length = this.state.items.filter(x => x).length;
+		if (length === 0)
+			this.addItem();
+		else
+		{
+			let last = this.Item_Refs.length - 1;
+			while (!this.state.items[last])
+				last--;
+			let item = this.Item_Refs[last].current;
+			if (item)
+				if (!this.props.isEmpty(this.props.getValue(item, false)))
+					this.addItem();
+		}
+	}
+	getValues(checkError: boolean = true): ValueType[]
+	{
+		return this.state.items.map((_, index) =>
+		{
+			let item = this.Item_Refs[index].current;
+			if (item)
+			{
+				let value = this.props.getValue(item, checkError);
+				if (!this.props.isEmpty(value))
+					return value;
+			}
+			return null
+		}).filter(x => x !== null) as ValueType[];
+	}
+	setValues(values: ValueType[])
+	{
+		this.Item_Refs = [];
+		values.forEach(() =>
+		{
+			this.addItem(false);
+		})
+		let items = values.map(() => true);
+		this.setState({ items }, () =>
+		{
+			if (this.props.onItemChanged)
+				this.props.onItemChanged();
+			values.forEach((value, index) =>
+			{
+				let item = this.Item_Refs[index].current;
+				if (item)
+					this.props.updateItem(item, index, value)
+			});
+			this.onChange();
+		});
+	}
+	override componentDidMount()
+	{
+		this.addItem();
+	}
+	override render()
+	{
+		let i = 0;
+		return (
+			<>
+				{
+					this.Item_Refs.map((ref, index) =>
+					{
+						if (this.state.items[index])
+							return this.props.createItem(i++, ref, this.onChange, this.onDelete);
+						return <></>;
+					}
+					)
+				}
+			</>
+		);
+	}
 }

package/src/components/NSSection.module.css

@@ -1,11 +1,11 @@
-.ns_section {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center;
-}
-
-.ns_section_center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+.ns_section {
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/src/components/NSSection.tsx

@@ -1,24 +1,24 @@
-import { ReactNode } from "react";
-import Styles from './NSSection.module.css'
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionProps extends IBaseComponentProps
-{
-	children: ReactNode;
-	center_items?: boolean;
-}
-
-export function NSSection(props: INSSectionProps)
-{
-	let styles = [Styles.ns_section];
-	if (props.center_items)
-		styles.push(Styles.ns_section_center);
-	return (
-		<section id={props.id}
-			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.children}
-		</section>
-	);
+import { ReactNode } from "react";
+import Styles from './NSSection.module.css'
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionProps extends IBaseComponentProps
+{
+	children: ReactNode;
+	center_items?: boolean;
+}
+
+export function NSSection(props: INSSectionProps)
+{
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.module.css

@@ -1,11 +1,11 @@
-.ns_entity_bar_container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	gap: 24px;
+.ns_entity_bar_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	gap: 24px;
 }

package/src/components/NSSectionBars.tsx

@@ -1,26 +1,26 @@
-import Styles from './NSSectionBars.module.css';
-import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
-import { NSSection } from './NSSection';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSSectionBarsProps extends IBaseComponentProps
-{
-	title?: string;
-	bars: INSEntityBarProps[]
-}
-
-export function NSSectionBars(props: INSSectionBarsProps)
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-				{
-					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionBars.module.css';
+import { NSEntityBar, INSEntityBarProps } from './NSEntityBar';
+import { NSSection } from './NSSection';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSSectionBarsProps extends IBaseComponentProps
+{
+	title?: string;
+	bars: INSEntityBarProps[]
+}
+
+export function NSSectionBars(props: INSSectionBarsProps)
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionCards.module.css

@@ -1,39 +1,39 @@
-.ns_section_cards_holder {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-.ns_section_cards_title_container {
-	margin-bottom: 32px;
-}
-
-.ns_card_container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 24px;
-	width: 100%;
-}
-
-.ns_section_cards_link_container {
-	margin-top: 48px;
-	width: 100%;
-	text-align: center;
-}
-
-.ns_description {
-	text-align: center;
-	font-style: normal;
-	font-weight: inherit;
-	font-size: 16px;
-	font-family: inherit;
-	line-height: inherit;
-	margin-bottom: 16px;
+.ns_section_cards_holder {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.ns_section_cards_title_container {
+	margin-bottom: 32px;
+}
+
+.ns_card_container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 24px;
+	width: 100%;
+}
+
+.ns_section_cards_link_container {
+	margin-top: 48px;
+	width: 100%;
+	text-align: center;
+}
+
+.ns_description {
+	text-align: center;
+	font-style: normal;
+	font-weight: inherit;
+	font-size: 16px;
+	font-family: inherit;
+	line-height: inherit;
+	margin-bottom: 16px;
 }

package/src/components/NSSectionCards.tsx

@@ -1,52 +1,52 @@
-import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
-import { NSCard, INSCardProps } from './NSCard';
-import { NSSection } from './NSSection';
-import { NSLinkBlue } from './NSLinkBlue';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { ILinkProps } from '../props/ILinkProps';
-
-export interface INSSectionCardsProps extends IBaseComponentProps
-{
-	title?: string;
-	description?: {
-		text: string,
-		color?: string
-	};
-	button?: ILinkProps;
-	cards: INSCardProps[];
-}
-
-export function NSSectionCards(props: INSSectionCardsProps) 
-{
-	return (
-		<NSSection {...props} >
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-				{
-					props.title &&
-					<div className={Styles.ns_section_cards_title_container}>
-						<NSTitle title={props.title} />
-						{
-							props.description &&
-							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
-						}
-					</div>
-				}
-				<div className={` ${Styles.ns_card_container}`}>
-					{
-						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
-					}
-				</div>
-				{
-					props.button &&
-					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
-						<NSLinkBlue {...props.button} />
-					</div>
-				}
-			</div>
-			<NSSpace size={NSSpaceSizeType.NORMAL} />
-		</NSSection>
-	);
+import Styles from './NSSectionCards.module.css';
+import { NSTitle } from './NSTitle';
+import { NSCard, INSCardProps } from './NSCard';
+import { NSSection } from './NSSection';
+import { NSLinkBlue } from './NSLinkBlue';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { ILinkProps } from '../props/ILinkProps';
+
+export interface INSSectionCardsProps extends IBaseComponentProps
+{
+	title?: string;
+	description?: {
+		text: string,
+		color?: string
+	};
+	button?: ILinkProps;
+	cards: INSCardProps[];
+}
+
+export function NSSectionCards(props: INSSectionCardsProps) 
+{
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle title={props.title} />
+						{
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
+						}
+					</div>
+				}
+				<div className={` ${Styles.ns_card_container}`}>
+					{
+						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
+					}
+				</div>
+				{
+					props.button &&
+					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+						<NSLinkBlue {...props.button} />
+					</div>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }