namirasoft-site-react 1.3.82 → 1.3.84

package/src/components/NSLayoutAction.tsx

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { NSLayout, INSLayoutProps } from './NSLayout';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSLayoutAction.module.css';
+import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
+
+export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProps
+{
+	title: string;
+	description?: string;
+	actions: INSActionMenuProps[];
+	children: ReactNode;
+}
+
+export function NSLayoutAction(props: INSLayoutActionProps)
+{
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+
+	const filtered_actions = props.actions.filter((action) => action.group)
+
+	return (
+		<NSLayout {...props}>
+
+			<div className={Styles.ns_action_bar_holder}>
+				<div className={Styles.ns_action_bar_title}>
+					<h1 className={Styles.title}>{props.title}</h1>
+					{
+						props.description && lines &&
+						<>
+							<p className={Styles.description}>
+								{
+									lines.map((line, index) =>
+									{
+										return <>
+											{line.trim()}
+											{index != lines.length - 1 && <br />}
+										</>
+									})
+								}
+							</p>
+							<NSSpace size={NSSpaceSizeType.MINI} />
+						</>
+					}
+				</div>
+
+				<div className={Styles.ns_actions_hodler}>
+					{filtered_actions.map((action) =>
+						<NSActionMenu
+							key={action.id}
+							group={action.group}
+							items={action.items}
+						/>
+					)}
+				</div>
+
+			</div>
+			<NSSpace size={NSSpaceSizeType.SMALL} />
+			{props.children}
+		</NSLayout>
+	);
+}

package/src/components/NSLink.tsx

@@ -12,12 +12,12 @@ export function NSLink(props: INSILinkProps)
 		<div
 			id={props.id}
 			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
+			>
 			<a
 				className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`}
 				href={props.href}
 				target={props?.target ?? "_self"}
+				style={props.style}
 			>
 				{props.title}
 			</a>

package/src/components/NSModal.tsx

@@ -0,0 +1,21 @@
+import { IBaseComponentProps } from "../main";
+import Styles from './NSModal.module.css';
+
+export interface INSModalProps extends IBaseComponentProps
+{ }
+export function NSModal()
+{
+	return (
+		<section className={Styles.ns_modal}>
+			<div className={Styles.ns_modal_container}>
+				<img 
+					src=""
+					width={24}
+					height={24}
+					alt="close modal"
+				/>
+			</div>
+		</section>
+	);
+}
+

package/src/components/NSPanel.module.css

@@ -6,15 +6,7 @@
     align-items: center;
     gap: 8px;
     border-radius: 8px;
-margin: 0 auto;
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_panel_grid {
-        flex-direction: row;
-        max-width: 700px;
-        flex-wrap: wrap;
-    }
+    margin: 0 auto;
 }
 
 .ns_panel_column {
@@ -25,10 +17,22 @@ margin: 0 auto;
     align-items: center;
     border-radius: 8px;
     margin: 0 auto;
+    width: 100%;
 }
 
 @media only screen and (min-width: 768px) {
     .ns_panel_column {
         max-width: 700px;
     }
+    .ns_panel_grid {
+        flex-direction: row;
+        max-width: 700px;
+        flex-wrap: wrap;
+    }
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_panel_column {
+        width: max-content;
+    }
 }

package/src/components/NSSpace.tsx

@@ -2,28 +2,28 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 
 export interface INSSpaceProps extends IBaseComponentProps
 {
-    size: NSSpaceSizeType;
+	size: NSSpaceSizeType;
 }
 
 export enum NSSpaceSizeType
 {
-    NANO = "4px",
-    MICRO = "8px",
-    MINI = "16px",
-    SMALL = "24px",
-    MEDUIM = "32px",
-    NORMAL = "48px",
-    LARGE = "64px",
-    XLARGE = "80px",
-    XXLARGE = "96px",
-    XXXLARGE = "128px",
+	NANO = "4px",
+	MICRO = "8px",
+	MINI = "16px",
+	SMALL = "24px",
+	MEDUIM = "32px",
+	NORMAL = "48px",
+	LARGE = "64px",
+	XLARGE = "80px",
+	XXLARGE = "96px",
+	XXXLARGE = "128px",
 }
 
 export function NSSpace(props: INSSpaceProps)
 {
-    return (
-        <hr id={props.id}
-            className={props.classList?.join(" ")}
-            style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
-    );
+	return (
+		<hr id={props.id}
+			className={props.classList?.join(" ")}
+			style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0, position: "relative", zIndex: -1 }} />
+	);
 }

package/src/components/NSTable.module.css

@@ -4,6 +4,13 @@
     color: rgba(20, 27, 92, 1);
 }
 
+.ns_search_input{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
 .ns_table thead {
     clip: rect(0 0 0 0);
     position: fixed;
@@ -41,7 +48,6 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 48px;
 }
 
 /* Modal */
@@ -128,7 +134,7 @@
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        gap: 48px;
+        gap: 24px;
     }
 
     @media screen and (min-width: 1024px) {

package/src/components/NSTable.tsx

@@ -16,6 +16,7 @@ export interface INSTableProps<RowType> extends IBaseComponentProps
     getRowKey: (row: RowType, rowIndex: number) => string;
     getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
     getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 export interface NSTableState<RowType>
@@ -40,7 +41,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
     {
         this.setState({ rows });
     }
-    getValueSearch(e: React.ChangeEvent<HTMLInputElement>):string
+    getValueSearch(e: React.ChangeEvent<HTMLInputElement>): string
     {
         return e.target.value
     }
@@ -93,8 +94,8 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
                     <NSPagination size={50} page={5} />
                     <NSSpace size={NSSpaceSizeType.SMALL} />
                     <div className={Styles.ns_button}>
-                        <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)' }} />
-                        <NSButton title='Refresh' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(3, 119, 255, 1)' }} />
+                        <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
+                        <NSButton title='Refresh' icon={{ src: "/assets/images/refresh-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
                     </div>
                 </section>
                 <NSSpace size={NSSpaceSizeType.SMALL} />