namirasoft-site-react 1.5.16 → 1.5.18

package/src/components/NSHeaderScreenshot.module.css

@@ -1,36 +1,36 @@
-.ns_header_screenshot {
-    background-color: hsla(91, 100%, 31%, 1);
-    width: 100%;
-    min-height: 48px;
-    border-radius: 8px;
-    padding: 14px 16px;
-    color: #fff;
-    font-size: 16px;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-}
-
-.ns_header_screenshot_left {
-    display: flex;
-    gap: 32px;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.ns_header_screenshot_item {
-    gap: 4px;
-    display: flex;
-    align-items: center;
-}
-
-@media only screen and (min-width: 580px) {
-    .ns_header_screenshot {
-        justify-content: space-between;
-    }
-
-    .ns_header_screenshot_left {
-        justify-content: left
-    }
+.ns_header_screenshot {
+    background-color: hsla(91, 100%, 31%, 1);
+    width: 100%;
+    min-height: 48px;
+    border-radius: 8px;
+    padding: 14px 16px;
+    color: #fff;
+    font-size: 16px;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.ns_header_screenshot_left {
+    display: flex;
+    gap: 32px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.ns_header_screenshot_item {
+    gap: 4px;
+    display: flex;
+    align-items: center;
+}
+
+@media only screen and (min-width: 580px) {
+    .ns_header_screenshot {
+        justify-content: space-between;
+    }
+
+    .ns_header_screenshot_left {
+        justify-content: left
+    }
 }

package/src/components/NSHeaderScreenshot.tsx

@@ -1,40 +1,40 @@
-// todo move to its own probject: this is Timify
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from "./NSHeaderScreenshot.module.css"
-
-export interface NSHeaderScreenshotProps extends IBaseComponentProps
-{
-    project: string;
-    task: string;
-    time: string;
-    Countdown: string;
-}
-
-export function NSHeaderScreenshot(props: NSHeaderScreenshotProps)
-{
-    return (
-        <section className={Styles.ns_header_screenshot}>
-            <div className={Styles.ns_header_screenshot_left}>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/project/white.svg" alt='' width={20} height={20} />
-                    <span>{props.project}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/gear/white.svg" alt='' width={20} height={20} />
-                    <span>{props.task}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/time/white.svg" alt='' width={20} height={20} />
-                    <span>{props.time}</span>
-                </div>
-                <div className={Styles.ns_header_screenshot_item}>
-                    <img src="https://static.namirasoft.com/image/concept/countdown/white.svg" alt='' width={20} height={20} />
-                    <span>{props.Countdown}</span>
-                </div>
-            </div>
-            <div>
-                <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt='' width={20} height={20} />
-            </div>
-        </section >
-    );
+// todo move to its own probject: this is Timify
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from "./NSHeaderScreenshot.module.css"
+
+export interface NSHeaderScreenshotProps extends IBaseComponentProps
+{
+    project: string;
+    task: string;
+    time: string;
+    Countdown: string;
+}
+
+export function NSHeaderScreenshot(props: NSHeaderScreenshotProps)
+{
+    return (
+        <section className={Styles.ns_header_screenshot}>
+            <div className={Styles.ns_header_screenshot_left}>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/project/white.svg" alt='' width={20} height={20} />
+                    <span>{props.project}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/gear/white.svg" alt='' width={20} height={20} />
+                    <span>{props.task}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/time/white.svg" alt='' width={20} height={20} />
+                    <span>{props.time}</span>
+                </div>
+                <div className={Styles.ns_header_screenshot_item}>
+                    <img src="https://static.namirasoft.com/image/concept/countdown/white.svg" alt='' width={20} height={20} />
+                    <span>{props.Countdown}</span>
+                </div>
+            </div>
+            <div>
+                <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt='' width={20} height={20} />
+            </div>
+        </section >
+    );
 }

package/src/components/NSID.tsx

@@ -1,189 +1,191 @@
-import { Mutex } from 'async-mutex';
-import { BaseUUID, CacheService, EncodingOperation, EncodingOperationPartType, IStorage, IStorageLocal } from 'namirasoft-core';
-import { NSBaseMetaTable, NSBaseServer } from 'namirasoft-site';
-import { NamirasoftMap } from 'namirasoft-site-map';
-import React from 'react';
-import { BaseURLImageFormatter, IBaseComponentProps, NSCopy } from '../main';
-
-export interface NSIDProps extends IBaseComponentProps
-{
-	id: string;
-	map: NamirasoftMap | null;
-	storage: IStorage | null;
-}
-
-export interface NSIDState
-{
-	text?: string;
-}
-export interface NSIDInfo
-{
-	product: {
-		id: string;
-		name: string;
-		headline: string;
-		description: string;
-		logo: string;
-		link: string;
-	};
-	table: NSBaseMetaTable<NSBaseServer, any>;
-}
-
-export class NSID extends React.Component<NSIDProps, NSIDState>
-{
-	private static mutex: Mutex = new Mutex();
-	private static mutexes: { [product_id: string]: Mutex } = {};
-	private info: NSIDInfo | null;
-	public static decode(text: string): React.ReactNode
-	{
-		let parts = EncodingOperation.VariableToStringDecode("id", text);
-		if (parts.length === 1 && parts[0].type === EncodingOperationPartType.Text)
-			return parts[0].text;
-		let map = new NamirasoftMap();
-		let storage: IStorage = new IStorageLocal();
-		return (
-			<>
-				{parts.map((part, i) =>
-					<React.Fragment key={i}>
-						{
-							part.type === EncodingOperationPartType.Text
-								? part.text
-								: <NSID id={part.value} map={map} storage={storage} />
-						}
-					</React.Fragment>
-				)}
-			</>
-		);
-	}
-	public static getKey(info: NSIDInfo, id: string)
-	{
-		return `${info.product.id}:${info.table.name}:${id}`
-	}
-	public static getInfo(id: string, map?: NamirasoftMap | null)
-	{
-		try
-		{
-			let short = BaseUUID.getShort(id);
-			let namriasoft = map ?? new NamirasoftMap();
-			if (short)
-				return namriasoft.getByShortName(short);
-		} catch (error)
-		{
-		}
-		return null;
-	}
-	public static getCache(info: NSIDInfo, storage: IStorage, id: string)
-	{
-		let key = NSID.getKey(info, id);
-		return new CacheService<string>(key, storage, 60, async () => "0.0.0", async () =>
-		{
-			if (info.table.back_end.get)
-			{
-				try
-				{
-					let numberColumns: string[] = [];
-					let codeColumns: string[] = [];
-					let nameColumns: string[] = [];
-					info.table.forEachColumn(column =>
-					{
-						if (column.name.includes("number"))
-							numberColumns.push(column.name);
-						else if (column.name.includes("code"))
-							codeColumns.push(column.name);
-						else if (column.name.includes("name"))
-							nameColumns.push(column.name);
-					});
-					let columns = [...numberColumns, ...codeColumns, ...nameColumns];
-					let row = await info.table.back_end.get(id);
-					let values = columns.map(column => row[column]).filter(x => x);
-					let result = values.length > 0 ? values.join(" - ") : (row.name ?? row.description ?? "");
-					if (result.length > 64)
-						result = result.substring(0, 64) + "...";
-					return result;
-				} catch (error)
-				{
-					console.error(error);
-				}
-			}
-			return "";
-		});
-	}
-	public static clearID(storage: IStorage, id: string, map?: NamirasoftMap | null)
-	{
-		let info = NSID.getInfo(id, map);
-		if (info)
-		{
-			let cache = NSID.getCache(info, storage, id);
-			cache.del();
-		}
-	}
-	constructor(props: NSIDProps)
-	{
-		super(props);
-		this.state = {};
-		this.info = NSID.getInfo(this.props.id, this.props.map);
-	}
-	override componentDidMount(): void
-	{
-		this.reload();
-	}
-	async reload()
-	{
-		if (!this.info)
-			return;
-		if (!this.props.id)
-			return;
-		let info = this.info;
-		let cache = null;
-		if (this.props.storage)
-		{
-			cache = NSID.getCache(info, this.props.storage, this.props.id);
-			cache.runGetOn = await NSID.mutex.runExclusive(async () =>
-			{
-				if (!NSID.mutexes[info.product.id])
-					NSID.mutexes[info.product.id] = new Mutex();
-				return NSID.mutexes[info.product.id];
-			});
-		}
-		if (cache)
-			cache.get().then(text =>
-			{
-				this.setState({ text });
-			});
-	}
-
-	override render()
-	{
-		if (!this.props.id)
-			return <></>;
-		if (!this.info)
-			return this.props.id;
-
-		let text = this.state.text;
-		if (!text)
-			text = this.props.id;
-
-		let href = "";
-		try
-		{
-			href = this.info.table.front_end.getViewLink(this.props.id + "");
-		} catch (error)
-		{
-		}
-		let formatter = new BaseURLImageFormatter();
-		return (
-			<NSCopy
-				value={this.props.id}
-				classList={["justify-content-start"]}
-			>
-				{
-					formatter.format({
-						text,
-						href,
-						image: { url: this.info.product.logo, alt: this.info?.product.logo }
-					})
-				}
-			</NSCopy>
-		);
-	}
+import { Mutex } from 'async-mutex';
+import { BaseUUID, CacheService, EncodingOperation, EncodingOperationPartType, IStorage, IStorageLocal } from 'namirasoft-core';
+import { NSBaseMetaTable, NSBaseServer } from 'namirasoft-site';
+import { NamirasoftMap } from 'namirasoft-site-map';
+import React from 'react';
+import { BaseURLImageFormatter, IBaseComponentProps, NSCopy } from '../main';
+
+export interface NSIDProps extends IBaseComponentProps
+{
+	id: string;
+	map: NamirasoftMap | null;
+	storage: IStorage | null;
+}
+
+export interface NSIDState
+{
+	text?: string;
+}
+export interface NSIDInfo
+{
+	product: {
+		id: string;
+		name: string;
+		headline: string;
+		description: string;
+		logo: string;
+		link: string;
+	};
+	table: NSBaseMetaTable<NSBaseServer, any>;
+}
+
+export class NSID extends React.Component<NSIDProps, NSIDState>
+{
+	private static mutex: Mutex = new Mutex();
+	private static mutexes: { [product_id: string]: Mutex } = {};
+	private info: NSIDInfo | null;
+	public static decode(text: string): React.ReactNode
+	{
+		let parts = EncodingOperation.VariableToStringDecode("id", text);
+		if (parts.length === 1 && parts[0].type === EncodingOperationPartType.Text)
+			return parts[0].text;
+		let map = new NamirasoftMap();
+		let storage: IStorage = new IStorageLocal();
+		return (
+			<span style={{ display: "inline-flex", flexWrap: "wrap", alignItems: "center", gap: "4px" }}>
+				{
+					parts.map((part, i) =>
+						<React.Fragment key={i}>
+							{
+								part.type === EncodingOperationPartType.Text
+									? part.text
+									: <NSID id={part.value} map={map} storage={storage} />
+							}
+						</React.Fragment>
+					)
+				}
+			</span>
+		);
+	}
+	public static getKey(info: NSIDInfo, id: string)
+	{
+		return `${info.product.id}:${info.table.name}:${id}`
+	}
+	public static getInfo(id: string, map?: NamirasoftMap | null)
+	{
+		try
+		{
+			let short = BaseUUID.getShort(id);
+			let namriasoft = map ?? new NamirasoftMap();
+			if (short)
+				return namriasoft.getByShortName(short);
+		} catch (error)
+		{
+		}
+		return null;
+	}
+	public static getCache(info: NSIDInfo, storage: IStorage, id: string)
+	{
+		let key = NSID.getKey(info, id);
+		return new CacheService<string>(key, storage, 60, async () => "0.0.0", async () =>
+		{
+			if (info.table.back_end.get)
+			{
+				try
+				{
+					let numberColumns: string[] = [];
+					let codeColumns: string[] = [];
+					let nameColumns: string[] = [];
+					info.table.forEachColumn(column =>
+					{
+						if (column.name.includes("number"))
+							numberColumns.push(column.name);
+						else if (column.name.includes("code"))
+							codeColumns.push(column.name);
+						else if (column.name.includes("name"))
+							nameColumns.push(column.name);
+					});
+					let columns = [...numberColumns, ...codeColumns, ...nameColumns];
+					let row = await info.table.back_end.get(id);
+					let values = columns.map(column => row[column]).filter(x => x);
+					let result = values.length > 0 ? values.join(" - ") : (row.name ?? row.description ?? "");
+					if (result.length > 64)
+						result = result.substring(0, 64) + "...";
+					return result;
+				} catch (error)
+				{
+					console.error(error);
+				}
+			}
+			return "";
+		});
+	}
+	public static clearID(storage: IStorage, id: string, map?: NamirasoftMap | null)
+	{
+		let info = NSID.getInfo(id, map);
+		if (info)
+		{
+			let cache = NSID.getCache(info, storage, id);
+			cache.del();
+		}
+	}
+	constructor(props: NSIDProps)
+	{
+		super(props);
+		this.state = {};
+		this.info = NSID.getInfo(this.props.id, this.props.map);
+	}
+	override componentDidMount(): void
+	{
+		this.reload();
+	}
+	async reload()
+	{
+		if (!this.info)
+			return;
+		if (!this.props.id)
+			return;
+		let info = this.info;
+		let cache = null;
+		if (this.props.storage)
+		{
+			cache = NSID.getCache(info, this.props.storage, this.props.id);
+			cache.runGetOn = await NSID.mutex.runExclusive(async () =>
+			{
+				if (!NSID.mutexes[info.product.id])
+					NSID.mutexes[info.product.id] = new Mutex();
+				return NSID.mutexes[info.product.id];
+			});
+		}
+		if (cache)
+			cache.get().then(text =>
+			{
+				this.setState({ text });
+			});
+	}
+
+	override render()
+	{
+		if (!this.props.id)
+			return <></>;
+		if (!this.info)
+			return this.props.id;
+
+		let text = this.state.text;
+		if (!text)
+			text = this.props.id;
+
+		let href = "";
+		try
+		{
+			href = this.info.table.front_end.getViewLink(this.props.id + "");
+		} catch (error)
+		{
+		}
+		let formatter = new BaseURLImageFormatter();
+		return (
+			<NSCopy
+				value={this.props.id}
+				classList={["justify-content-start"]}
+			>
+				{
+					formatter.format({
+						text,
+						href,
+						image: { url: this.info.product.logo, alt: this.info?.product.logo }
+					})
+				}
+			</NSCopy>
+		);
+	}
 }

package/src/components/NSInfo.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-import { NSDialog } from './NSDialog';
-
-export interface NSInfoProps
-{
-	text?: string;
-	link?: string;
-}
-export interface NSInfoState
-{
-	show_info: boolean;
-}
-
-export class NSInfo extends React.Component<NSInfoProps, NSInfoState>
-{
-	constructor(props: NSInfoProps)
-	{
-		super(props);
-		this.state = { show_info: false };
-	}
-	onClick()
-	{
-		if (this.props.text && this.props.link)
-			this.setState(prev => { return { ...prev, show_info: true } });
-		else if (this.props.text)
-			this.setState(prev => { return { ...prev, show_info: true } });
-		else if (this.props.link)
-			window.open(this.props.link, "_blank");
-	}
-	override render()
-	{
-		if (!this.state.show_info)
-			return <></>;
-		return <NSDialog
-			onClose={() =>
-			{
-				this.setState(prev => { return { ...prev, show_info: false }; });
-			}}
-			center_dialog
-			closeButton={{ out: true }}
-		>
-			{
-				this.props.text
-			}
-			{
-				this.props.link &&
-				<a href={this.props.link} target='_blank' rel='noreferrer'>Learn More!</a>
-			}
-		</NSDialog>
-	}
+import React from 'react';
+import { NSDialog } from './NSDialog';
+
+export interface NSInfoProps
+{
+	text?: string;
+	link?: string;
+}
+export interface NSInfoState
+{
+	show_info: boolean;
+}
+
+export class NSInfo extends React.Component<NSInfoProps, NSInfoState>
+{
+	constructor(props: NSInfoProps)
+	{
+		super(props);
+		this.state = { show_info: false };
+	}
+	onClick()
+	{
+		if (this.props.text && this.props.link)
+			this.setState(prev => { return { ...prev, show_info: true } });
+		else if (this.props.text)
+			this.setState(prev => { return { ...prev, show_info: true } });
+		else if (this.props.link)
+			window.open(this.props.link, "_blank");
+	}
+	override render()
+	{
+		if (!this.state.show_info)
+			return <></>;
+		return <NSDialog
+			onClose={() =>
+			{
+				this.setState(prev => { return { ...prev, show_info: false }; });
+			}}
+			center_dialog
+			closeButton={{ out: true }}
+		>
+			{
+				this.props.text
+			}
+			{
+				this.props.link &&
+				<a href={this.props.link} target='_blank' rel='noreferrer'>Learn More!</a>
+			}
+		</NSDialog>
+	}
 }