namirasoft-site-react 1.4.403 → 1.4.404

package/src/components/NSProductSearch.module.css

@@ -1,69 +1,74 @@
-.ns_product_search_column_domain {
-    width: 100%;
-    gap: 0px;
-}
-
-.ns_product_search_column_link {
-    width: 100%;
-    gap: 0px;
-}
-
-.ns_product_search_item_domain_parent {
-    width: 100%;
-    display: flex;
-    gap: 0px;
-    flex-direction: column;
-}
-
-.ns_product_search_item_domain {
-    width: 100%;
-    height: 48px;
-    text-decoration: none !important;
-    transition: box-shadow 0.3s ease;
-    border-radius: 12px;
-    padding: 0px 16px;
-    display: flex;
-    align-items: center;
-}
-
-.ns_product_search_item_domain:hover {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
-}
-
-.ns_product_search_item_link_parent {
-    width: 100%;
-    display: flex;
-    gap: 4px;
-    flex-direction: column;
-}
-
-.ns_product_search_item_link {
-    height: max-content;
-    text-decoration: none !important;
-    transition: box-shadow 0.3s ease;
-    padding: 16px;
-    border-radius: 12px;
-    border: 1px solid rgb(236, 236, 236);
-}
-
-.ns_product_search_item_link p {
-    padding: 0px;
-    margin: 0px;
-    color: black;
-    text-decoration: none !important;
-}
-
-.ns_product_search_item_link:hover {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
-}
-
-@media (min-width: 1024px) {
-    .ns_product_search_column_domain {
-        height: 100%;
-        width: 272px;
-    }
-
-    .ns_product_search_column_link {
-        width: 560px;
-    }
+.ns_product_search_column_domain {
+    width: 100%;
+    gap: 0px;
+}
+
+.ns_product_search_column_link {
+    width: 100%;
+    gap: 0px;
+}
+
+.ns_product_search_item_domain_parent {
+    width: 100%;
+    display: flex;
+    gap: 0px;
+    flex-direction: column;
+}
+
+.ns_product_search_item_domain {
+    width: 100%;
+    height: 48px;
+    text-decoration: none !important;
+    transition: box-shadow 0.3s ease;
+    border-radius: 12px;
+    padding: 0px 16px;
+    display: flex;
+    align-items: center;
+}
+
+.ns_product_search_item_domain:hover {
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
+}
+
+.ns_product_search_item_link_parent {
+    width: 100%;
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
+}
+
+.ns_product_search_item_link {
+    height: max-content;
+    text-decoration: none !important;
+    transition: box-shadow 0.3s ease;
+    padding: 16px;
+    border-radius: 12px;
+    border: 1px solid rgb(236, 236, 236);
+}
+
+.ns_product_search_item_link p {
+    padding: 0px;
+    margin: 0px;
+    color: black;
+    text-decoration: none !important;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: inherit;
+    -webkit-line-clamp: 3;
+}
+
+.ns_product_search_item_link:hover {
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 1024px) {
+    .ns_product_search_column_domain {
+        height: 100%;
+        width: 272px;
+    }
+
+    .ns_product_search_column_link {
+        width: 560px;
+    }
 }

package/src/components/NSProductSearch.tsx

@@ -1,156 +1,194 @@
-"use client";
-
-import React from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { DomainRow, LinkFullRow, NamirasoftAPILinkServer } from "namirasoft-api-link";
-import { EnvService } from "namirasoft-core";
-import { NSLoading } from "./NSLoading";
-import { NSSection } from "./NSSection";
-import { NSColumn } from "./NSColumn";
-import { NSRow } from "./NSRow";
-import { NSTitle } from "./NSTitle";
-import { NSLine } from "./NSLine";
-import { NSSpace, NSSpaceSizeType } from "./NSSpace";
-import Styles from "./NSProductSearch.module.css";
-
-export interface NSProductSearchProps extends IBaseComponentProps
-{
-	search: string;
-}
-
-export interface NSProductSearchState
-{
-	domains: DomainRow[] | null;
-	links: LinkFullRow[] | null;
-}
-
-export class NSProductSearch extends React.Component<NSProductSearchProps, NSProductSearchState>
-{
-	constructor(props: NSProductSearchProps)
-	{
-		super(props);
-		this.state = {
-			domains: null,
-			links: null
-		};
-	}
-	reload(search: string)
-	{
-		this.setState({ domains: null, links: null });
-		let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK").getString();
-		let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, console.error);
-		server.domain.Search(search, 10).then(res =>
-		{
-			this.setState({ domains: res.rows });
-		}).catch(() => { });
-		server.link.Search(search, 10).then(res =>
-		{
-			this.setState({ links: res.rows });
-		}).catch(() => { });
-	}
-	override componentDidMount()
-	{
-		this.reload(this.props.search);
-	}
-	override render()
-	{
-		let domains;
-		let links;
-		if (this.state.domains)
-			domains = <>
-				<NSTitle
-					title="Domains"
-					style={{ margin: "0px" }}
-				/>
-				<NSSpace
-					size={NSSpaceSizeType.MICRO}
-				/>
-				<NSLine />
-				<NSSpace
-					size={NSSpaceSizeType.MINI}
-				/>
-				<div className={Styles.ns_product_search_item_domain_parent}>
-					{
-						this.state.domains.map(domain =>
-						(
-							<a href={domain.url} className={Styles.ns_product_search_item_domain}>
-								<div>
-									<img
-										src={domain.logo ?? ""}
-										alt={domain.name}
-										width={24}
-										height={24}
-										style={{ marginRight: "8px" }}
-									/>
-									{domain.name}
-								</div>
-							</a>
-						))
-					}
-				</div>
-			</>;
-		else
-			domains = <NSLoading
-				small
-			/>;
-
-		if (this.state.links)
-			links = <>
-
-				<NSTitle
-					title="Links"
-					style={{ margin: "0px" }}
-				/>
-				<NSSpace
-					size={NSSpaceSizeType.MICRO}
-				/>
-				<NSLine />
-				<NSSpace
-					size={NSSpaceSizeType.MINI}
-				/>
-				<div className={Styles.ns_product_search_item_link_parent}>
-					{
-						this.state.links.map(link =>
-						(
-							<a href={link.url} className={Styles.ns_product_search_item_link}>
-								<div>
-									<img
-										src={link.logo ?? ""}
-										alt={link.name}
-										width={48}
-										height={48}
-										style={{ marginRight: "8px" }}
-									/>
-									{link.name}
-									<p>
-										{link.description}
-									</p>
-								</div>
-							</a>
-						))
-					}
-				</div>
-			</>;
-		else
-			links = <NSLoading
-				small
-			/>
-
-		return <>
-			<NSSection>
-				<NSRow>
-					<NSColumn
-						classList={[Styles.ns_product_search_column_domain]}
-					>
-						{domains}
-					</NSColumn>
-					<NSColumn
-						classList={[Styles.ns_product_search_column_link]}
-					>
-						{links}
-					</NSColumn>
-				</NSRow>
-			</NSSection >
-		</>;
-	}
+"use client";
+
+import React from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { DomainRow, LinkFullRow, NamirasoftAPILinkServer } from "namirasoft-api-link";
+import { EnvService } from "namirasoft-core";
+import { NSLoading } from "./NSLoading";
+import { NSSection } from "./NSSection";
+import { NSColumn } from "./NSColumn";
+import { NSRow } from "./NSRow";
+import { NSTitle } from "./NSTitle";
+import { NSLine } from "./NSLine";
+import { NSSpace, NSSpaceSizeType } from "./NSSpace";
+import Styles from "./NSProductSearch.module.css";
+
+export interface NSProductSearchProps extends IBaseComponentProps
+{
+	search: string;
+}
+
+export interface NSProductSearchState
+{
+	domains: DomainRow[] | null;
+	links: LinkFullRow[] | null;
+}
+
+export class NSProductSearch extends React.Component<NSProductSearchProps, NSProductSearchState>
+{
+	constructor(props: NSProductSearchProps)
+	{
+		super(props);
+		this.state = {
+			domains: null,
+			links: null
+		};
+	}
+	reload(search: string)
+	{
+		this.setState({ domains: null, links: null });
+		let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK").getString();
+		let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, console.error);
+		server.domain.Search(search, 10).then(res =>
+		{
+			this.setState({ domains: res.rows });
+		}).catch(() => { });
+		server.link.Search(search, 10).then(res =>
+		{
+			this.setState({ links: res.rows });
+		}).catch(() => { });
+	}
+	override componentDidMount()
+	{
+		this.reload(this.props.search);
+	}
+	override render()
+	{
+		let domains;
+		let links;
+		if (this.state.domains)
+		{
+			let more_domains = [];
+			if (this.state.links)
+			{
+				let ds = this.state.links.map(l => l.domain);
+				for (let i = 0; i < ds.length; i++)
+				{
+					if (this.state.domains.filter(d => d.id === ds[i].id).length === 0 && more_domains.filter(d => d.id === ds[i].id).length === 0)
+						more_domains.push(ds[i]);
+				}
+			}
+			let render_domain = (domain: DomainRow) =>
+			{
+				return <a href={domain.url} className={Styles.ns_product_search_item_domain}>
+					<div>
+						<img
+							src={domain.logo ?? ""}
+							alt={domain.name}
+							width={24}
+							height={24}
+							style={{ marginRight: "8px" }}
+						/>
+						{domain.name}
+					</div>
+				</a>;
+			};
+
+			domains = <>
+				<NSTitle
+					title="Domains"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_domain_parent}>
+					{
+						this.state.domains.map(render_domain)
+					}
+				</div>
+				{
+					more_domains.length > 0 &&
+					<>
+						<NSTitle
+							title="More"
+							style={{ margin: "0px" }}
+						/>
+						<NSSpace
+							size={NSSpaceSizeType.MICRO}
+						/>
+						<NSLine />
+						<NSSpace
+							size={NSSpaceSizeType.MICRO}
+						/>
+						<div className={Styles.ns_product_search_item_domain_parent}>
+							{
+								more_domains.map(render_domain)
+							}
+						</div>
+					</>
+				}
+			</>;
+		}
+		else
+			domains = <NSLoading
+				small
+			/>;
+
+		if (this.state.links)
+			links = <>
+
+				<NSTitle
+					title="Links"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_link_parent}>
+					{
+						this.state.links.map(link =>
+						(
+							<a href={link.url} className={Styles.ns_product_search_item_link}>
+								<div>
+									<img
+										src={link.logo ?? ""}
+										alt={link.name}
+										width={48}
+										height={48}
+										style={{ marginRight: "8px" }}
+									/>
+									{`${link.name} (${link.domain?.name})`}
+									<p>
+										{ }
+									</p>
+									<p>
+										{link.description}
+									</p>
+								</div>
+							</a>
+						))
+					}
+				</div>
+			</>;
+		else
+			links = <NSLoading
+				small
+			/>
+
+		return <>
+			<NSSection>
+				<NSRow>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_domain]}
+					>
+						{domains}
+					</NSColumn>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_link]}
+					>
+						{links}
+					</NSColumn>
+				</NSRow>
+			</NSSection >
+		</>;
+	}
 }

package/src/components/NSRange.module.css

@@ -1,67 +1,67 @@
-.ns_range_parent {
-	width: 100%;
-	max-width: 1150px;
-}
-
-.ns_range_time_item {
-	z-index: 99;
-	text-align: center;
-	max-width: 48px;
-	display: inline-block;
-	height: 60px;
-	position: relative;
-	border-width: 1px;
-	border-color: #DCDCDC;
-	border-style: groove;
-}
-
-.ns_range_time_box_full {
-	background-color: #fff;
-	border-radius: 5px;
-	position: relative;
-	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-	overflow-x: scroll;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_range_time_line {
-	position: absolute;
-	height: 100%;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-}
-
-.ns_range_time_item span {
-	color: #141B5C;
-	width: 100%;
-	display: inline-block;
-	background-color: #DCDCDC;
-	border-bottom: 1px solid #DCDCDC;
-	font-weight: 500;
-}
-
-@media screen and (min-width: 992px) {
-	.ns_range_time_box_full {
-		overflow: hidden;
-	}
-
-	.ns_range_time_item {
-		width: 4.166666%;
-	}
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
+.ns_range_time_item {
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
+}
+
+.ns_range_time_box_full {
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_range_time_line {
+	position: absolute;
+	height: 100%;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+}
+
+.ns_range_time_item span {
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }