namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSRange.tsx

@@ -1,84 +1,84 @@
-// todo move to its own probject: this is Timify
-
-import { useEffect, useState } from 'react';
-import Styles from './NSRange.module.css';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { Color } from "../Color";
-
-export interface NSRangeRow
-{
-	start_time: Date;
-	end_time: Date;
-	percentage: number;
-}
-
-export interface NSPaginationProps extends IBaseComponentProps
-{
-	data: NSRangeRow[];
-	title?: string;
-}
-
-export function NSRange(props: NSPaginationProps)
-{
-	const [Widths, setWidths] = useState<string[]>([]);
-	const [positions, setPositions] = useState<string[]>([]);
-
-	useEffect(() =>
-	{
-		const widths = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
-			return convertToPercentage(minutes);
-		});
-		const positions = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
-			return convertToPercentage(minutes);
-		});
-		setWidths(widths);
-		setPositions(positions);
-	}, [props.data]);
-
-	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
-	{
-		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
-		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
-		return difference_in_minutes;
-	};
-
-	const convertToPercentage = (minute: number): string =>
-	{
-		const width = ((minute * 100) / 1440).toString();
-		return `${width}%`;
-	};
-
-	return (
-		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
-			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-			<div className="col-12 px-0">
-				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
-					<div>
-						{
-							props.data?.map((data, index) =>
-								<span
-									key={`NSRange_span_key_${index}`}
-									className={Styles.ns_range_time_line}
-									style={{
-										background: Color.getColor(data?.percentage),
-										width: Widths[index] || '0%',
-										left: positions[index] || '%0'
-									}}>
-								</span>
-							)
-						}
-					</div>
-					{[...Array(24).keys()].map(hour => (
-						<div key={hour} className={Styles.ns_range_time_item}>
-							<span>{hour.toString().padStart(2, '0')}:00</span>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+// todo move to its own probject: this is Timify
+
+import { useEffect, useState } from 'react';
+import Styles from './NSRange.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { Color } from "../Color";
+
+export interface NSRangeRow
+{
+	start_time: Date;
+	end_time: Date;
+	percentage: number;
+}
+
+export interface NSPaginationProps extends IBaseComponentProps
+{
+	data: NSRangeRow[];
+	title?: string;
+}
+
+export function NSRange(props: NSPaginationProps)
+{
+	const [Widths, setWidths] = useState<string[]>([]);
+	const [positions, setPositions] = useState<string[]>([]);
+
+	useEffect(() =>
+	{
+		const widths = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+			return convertToPercentage(minutes);
+		});
+		const positions = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+			return convertToPercentage(minutes);
+		});
+		setWidths(widths);
+		setPositions(positions);
+	}, [props.data]);
+
+	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+	{
+		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+		return difference_in_minutes;
+	};
+
+	const convertToPercentage = (minute: number): string =>
+	{
+		const width = ((minute * 100) / 1440).toString();
+		return `${width}%`;
+	};
+
+	return (
+		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
+			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+			<div className="col-12 px-0">
+				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+					<div>
+						{
+							props.data?.map((data, index) =>
+								<span
+									key={`NSRange_span_key_${index}`}
+									className={Styles.ns_range_time_line}
+									style={{
+										background: Color.getColor(data?.percentage),
+										width: Widths[index] || '0%',
+										left: positions[index] || '%0'
+									}}>
+								</span>
+							)
+						}
+					</div>
+					{[...Array(24).keys()].map(hour => (
+						<div key={hour} className={Styles.ns_range_time_item}>
+							<span>{hour.toString().padStart(2, '0')}:00</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/NSRepeater.tsx

@@ -1,255 +1,255 @@
-import { Component, createRef, ReactNode } from 'react';
-import { INSBox } from './INSBox';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { NSSpace, NSSpaceSizeType } from './NSSpace';
-import { NSLine } from './NSLine';
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
-import { safeMenuMenuItem } from './NSMenuButton';
-import { Validator } from '../Validator';
-
-export interface NSRepeaterProps<ItemType, ValueType> extends IBaseComponentProps, INSBoxBaseLayoutProps<ItemType, ValueType>
-{
-	createItem: (gIndex: number, lIndex: number, ref: React.RefObject<ItemType>, onChange: () => void, onDelete: undefined | ((lIndex: number) => void)) => ReactNode;
-	getValue: (item: ItemType, checkError: boolean) => ValueType | null;
-	setValue: (item: ItemType, index: number, value: ValueType | null, callback?: () => void) => void;
-	isEmpty: (item: ItemType, value: ValueType | null) => boolean;
-	onItemChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
-	onValuesChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
-	required: boolean;
-	min?: number;
-	max?: number;
-	ignoreItemsHavingError?: boolean;
-}
-
-export interface NSRepeaterState
-{
-	items: boolean[];
-}
-
-export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> implements INSBox
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	private Item_Refs: React.RefObject<ItemType>[] = [];
-	private last_value: ValueType[] = [];
-	constructor(props: NSRepeaterProps<ItemType, ValueType>)
-	{
-		super(props);
-		this.state = { items: [] };
-		this.getCount = this.getCount.bind(this);
-		this.canDelete = this.canDelete.bind(this);
-		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.checkForNew = this.checkForNew.bind(this);
-
-		this.isEmpty = this.isEmpty.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-	}
-	private getCount(): number
-	{
-		return this.state.items.filter(x => x).length;
-	}
-	private canDelete(gIndex: number)
-	{
-		if (this.Item_Refs.length > 0)
-		{
-			let count = this.getCount();
-			if (count <= (this.props.min ?? 1))
-				return false;
-			if (count === this.props.max)
-				return true;
-			if (gIndex === this.state.items.length - 1)
-				return false;
-			return true
-		}
-		return false;
-	}
-	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 = -1;
-		for (let i = 0; i <= gindex; i++)
-			if (this.state.items[i])
-				ans++;
-		return ans;
-	}
-	private addItem(state: boolean = true)
-	{
-		if (!this.props.max || this.getCount() < this.props.max)
-		{
-			this.Item_Refs.push(createRef<ItemType>());
-			if (state)
-			{
-				let items = this.state.items;
-				items.push(true);
-				this.setState({ items }, () =>
-				{
-					this.props.onItemChanged?.(this);
-				});
-			}
-		}
-	}
-	private delItem(lIndex: number)
-	{
-		let gindex = this.getGIndex(lIndex);
-		if (this.canDelete(gindex))
-		{
-			let items = this.state.items;
-			items[gindex] = false;
-			this.setState({ items }, () =>
-			{
-				this.props.onItemChanged?.(this);
-				this.onChange();
-			});
-		}
-	}
-	private onChange()
-	{
-		this.props.onValuesChanged?.(this);
-		this.checkForNew();
-	}
-	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(item, this.props.getValue(item, false)))
-				{
-					this.addItem();
-				}
-		}
-	}
-	isEmpty(): boolean
-	{
-		return true;
-	}
-	getError(): string | null
-	{
-		return (
-			Validator.getErrorArray(this.props.title, this.last_value, this.props.required, this.props.min, this.props.max)
-		);
-	}
-	getValue(checkError: boolean = true): ValueType[]
-	{
-		this.last_value = this.state.items.map((exists, index) =>
-		{
-			if (exists)
-			{
-				let item = this.Item_Refs[index].current;
-				if (item)
-				{
-					try
-					{
-						let empty_value = this.props.getValue(item, false);
-						if (!this.props.isEmpty(item, empty_value))
-							return this.props.getValue(item, checkError);
-					} catch (error)
-					{
-						if (this.props.ignoreItemsHavingError !== true)
-							throw error;
-					}
-				}
-			}
-			return null
-		}).filter(x => x !== null) as ValueType[];
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
-	}
-	setValue(value: ValueType[], callback?: () => void): void
-	{
-		this.Item_Refs = [];
-		value.forEach(() =>
-		{
-			this.addItem(false);
-		})
-		let items = value.map(() => true);
-		this.setState({ items }, () =>
-		{
-			this.props.onItemChanged?.(this);
-			value.forEach((value, index) =>
-			{
-				let item = this.Item_Refs[index].current;
-				if (item)
-					this.props.setValue(item, index, value);
-			});
-			this.onChange();
-			callback?.();
-		});
-	}
-	override componentDidMount()
-	{
-		let min = this.props.min ?? 1;
-		for (let i = 0; i < min; i++)
-			this.addItem();
-	}
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, () => { });
-
-		let LIndex = -1;
-
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				menu={menu}
-			>
-				{
-					this.Item_Refs.map((ref, GIndex) =>
-					{
-						if (this.state.items[GIndex])
-							LIndex++;
-						let visible = this.state.items[GIndex];
-						let props = { ...this.props };
-						props.style = { ...props.style };
-						if (!visible)
-							props.style.display = "none";
-
-						let onDelete = undefined;
-						if (this.canDelete(GIndex))
-							onDelete = this.delItem;
-
-						let item = this.props.createItem(GIndex, LIndex, ref, this.onChange, onDelete);
-
-						if (visible && LIndex !== 0)
-							return <div style={{ width: "100%", ...props.style }}>
-								<NSSpace size={NSSpaceSizeType.MICRO} />
-								<NSLine />
-								<NSSpace size={NSSpaceSizeType.MICRO} />
-								{item}
-							</div>
-						return <div style={{ width: "100%", ...props.style }}>
-							{item}
-						</div>
-					})
-				}
-			</NSBoxBaseLayout>
-		);
-	}
+import { Component, createRef, ReactNode } from 'react';
+import { INSBox } from './INSBox';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { NSLine } from './NSLine';
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from './NSBoxBaseLayout';
+import { safeMenuMenuItem } from './NSMenuButton';
+import { Validator } from '../Validator';
+
+export interface NSRepeaterProps<ItemType, ValueType> extends IBaseComponentProps, INSBoxBaseLayoutProps<ItemType, ValueType>
+{
+	createItem: (gIndex: number, lIndex: number, ref: React.RefObject<ItemType>, onChange: () => void, onDelete: undefined | ((lIndex: number) => void)) => ReactNode;
+	getValue: (item: ItemType, checkError: boolean) => ValueType | null;
+	setValue: (item: ItemType, index: number, value: ValueType | null, callback?: () => void) => void;
+	isEmpty: (item: ItemType, value: ValueType | null) => boolean;
+	onItemChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
+	onValuesChanged?: (repeater: NSRepeater<ItemType, ValueType>) => void;
+	required: boolean;
+	min?: number;
+	max?: number;
+	ignoreItemsHavingError?: boolean;
+}
+
+export interface NSRepeaterState
+{
+	items: boolean[];
+}
+
+export class NSRepeater<ItemType, ValueType> extends Component<NSRepeaterProps<ItemType, ValueType>, NSRepeaterState> implements INSBox
+{
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	private Item_Refs: React.RefObject<ItemType>[] = [];
+	private last_value: ValueType[] = [];
+	constructor(props: NSRepeaterProps<ItemType, ValueType>)
+	{
+		super(props);
+		this.state = { items: [] };
+		this.getCount = this.getCount.bind(this);
+		this.canDelete = this.canDelete.bind(this);
+		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.checkForNew = this.checkForNew.bind(this);
+
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+	}
+	private getCount(): number
+	{
+		return this.state.items.filter(x => x).length;
+	}
+	private canDelete(gIndex: number)
+	{
+		if (this.Item_Refs.length > 0)
+		{
+			let count = this.getCount();
+			if (count <= (this.props.min ?? 1))
+				return false;
+			if (count === this.props.max)
+				return true;
+			if (gIndex === this.state.items.length - 1)
+				return false;
+			return true
+		}
+		return false;
+	}
+	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 = -1;
+		for (let i = 0; i <= gindex; i++)
+			if (this.state.items[i])
+				ans++;
+		return ans;
+	}
+	private addItem(state: boolean = true)
+	{
+		if (!this.props.max || this.getCount() < this.props.max)
+		{
+			this.Item_Refs.push(createRef<ItemType>());
+			if (state)
+			{
+				let items = this.state.items;
+				items.push(true);
+				this.setState({ items }, () =>
+				{
+					this.props.onItemChanged?.(this);
+				});
+			}
+		}
+	}
+	private delItem(lIndex: number)
+	{
+		let gindex = this.getGIndex(lIndex);
+		if (this.canDelete(gindex))
+		{
+			let items = this.state.items;
+			items[gindex] = false;
+			this.setState({ items }, () =>
+			{
+				this.props.onItemChanged?.(this);
+				this.onChange();
+			});
+		}
+	}
+	private onChange()
+	{
+		this.props.onValuesChanged?.(this);
+		this.checkForNew();
+	}
+	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(item, this.props.getValue(item, false)))
+				{
+					this.addItem();
+				}
+		}
+	}
+	isEmpty(): boolean
+	{
+		return true;
+	}
+	getError(): string | null
+	{
+		return (
+			Validator.getErrorArray(this.props.title, this.last_value, this.props.required, this.props.min, this.props.max)
+		);
+	}
+	getValue(checkError: boolean = true): ValueType[]
+	{
+		this.last_value = this.state.items.map((exists, index) =>
+		{
+			if (exists)
+			{
+				let item = this.Item_Refs[index].current;
+				if (item)
+				{
+					try
+					{
+						let empty_value = this.props.getValue(item, false);
+						if (!this.props.isEmpty(item, empty_value))
+							return this.props.getValue(item, checkError);
+					} catch (error)
+					{
+						if (this.props.ignoreItemsHavingError !== true)
+							throw error;
+					}
+				}
+			}
+			return null
+		}).filter(x => x !== null) as ValueType[];
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.last_value) ?? [];
+	}
+	setValue(value: ValueType[], callback?: () => void): void
+	{
+		this.Item_Refs = [];
+		value.forEach(() =>
+		{
+			this.addItem(false);
+		})
+		let items = value.map(() => true);
+		this.setState({ items }, () =>
+		{
+			this.props.onItemChanged?.(this);
+			value.forEach((value, index) =>
+			{
+				let item = this.Item_Refs[index].current;
+				if (item)
+					this.props.setValue(item, index, value);
+			});
+			this.onChange();
+			callback?.();
+		});
+	}
+	override componentDidMount()
+	{
+		let min = this.props.min ?? 1;
+		for (let i = 0; i < min; i++)
+			this.addItem();
+	}
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, () => { });
+
+		let LIndex = -1;
+
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				menu={menu}
+			>
+				{
+					this.Item_Refs.map((ref, GIndex) =>
+					{
+						if (this.state.items[GIndex])
+							LIndex++;
+						let visible = this.state.items[GIndex];
+						let props = { ...this.props };
+						props.style = { ...props.style };
+						if (!visible)
+							props.style.display = "none";
+
+						let onDelete = undefined;
+						if (this.canDelete(GIndex))
+							onDelete = this.delItem;
+
+						let item = this.props.createItem(GIndex, LIndex, ref, this.onChange, onDelete);
+
+						if (visible && LIndex !== 0)
+							return <div style={{ width: "100%", ...props.style }}>
+								<NSSpace size={NSSpaceSizeType.MICRO} />
+								<NSLine />
+								<NSSpace size={NSSpaceSizeType.MICRO} />
+								{item}
+							</div>
+						return <div style={{ width: "100%", ...props.style }}>
+							{item}
+						</div>
+					})
+				}
+			</NSBoxBaseLayout>
+		);
+	}
 }