namirasoft-site-react 1.4.111 → 1.4.113

package/src/App.tsx

@@ -1,441 +1,373 @@
-import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSTable, INSTableProps, TableColumnInfo, TableRowInfo } from './components/NSTable';
-import { BaseColumnFormatter, NSBarAlert, NSBoxBoolean, NSBoxBooleans, NSBoxDate, NSBoxEnum, NSBoxInteger, NSBoxPhone, NSBoxRadio, NSBoxSearch, NSBoxString, NSBoxTextArea, NSButtonBlue, NSCard, NSChartDoughnut, NSDialog, NSDownTimer, NSNotFoundPage, NSRepeater, NSTabPage } from './main';
-import { useState } from 'react';
-
-export interface INSBarActionState
-{
-	id: string;
-	menu_item: string;
-	handler: () => void;
-	isActive: () => boolean;
-}
-
-const fakeFormatter: BaseColumnFormatter = {
-	format: (value: any) => { return value; }
-};
-
-const fakeColumns: TableColumnInfo[] = [
-	{
-		index: 0,
-		name: 'Column1',
-		text: 'Column 111111111111',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column2',
-		text: 'Column 222222',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column3',
-		text: 'Column 33333333',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column4',
-		text: 'Column 44444444444',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column5',
-		text: 'Column 5',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column6',
-		text: 'Column 6',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column7',
-		text: 'Column 7',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column8',
-		text: 'Column 888888',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column9',
-		text: 'Column 9',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column10',
-		text: 'Column 10',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column11',
-		text: 'Column 11',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column12',
-		text: 'Column 12',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column13',
-		text: 'Column 13',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column14',
-		text: 'Column 14',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column15',
-		text: 'Column15',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column15',
-		text: 'Column15',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column16',
-		text: 'Column16',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column17',
-		text: 'Column17',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column18',
-		text: 'Column18',
-		formatter: fakeFormatter,
-	},
-	{
-		index: 1,
-		name: 'Column19',
-		text: 'Column19',
-		formatter: fakeFormatter,
-	}, {
-		index: 1,
-		name: 'Column20',
-		text: 'Column20',
-		formatter: fakeFormatter,
-	}
-
-];
-const fakeData = [
-	{ index: 0, Column1: 'Row 1 Data 1', Column2: 'Row 1 Data 2', Column3: 'Row 1 Data 3', Column4: 'Row 1 Data 4', Column5: 'Row 1 Data 5', Column6: 'Row 1 Data 6', Column7: 'Row 1 Data 7', Column8: 'Row 1 Data 8', Column9: 'Row 1 Data 9', Column10: 'Row 1 Data 10', Column11: 'Row 1 Data 11', Column12: 'Row 1 Data 12', Column13: 'Row 1 Data 13', Column14: 'Row 1 Data 14', Column15: 'Row 1 Data 15', Column16: 'Row 1 Data 16', Column17: 'Row 1 Data 17', Column18: 'Row 1 Data 18', Column19: 'Row 1 Data 19', Column20: 'Row 1 Data 20', percentage: 10 },
-	{ index: 1, Column1: 'Row 2 Data 1', Column2: 'Row 2 Data 2', Column3: 'Row 2 Data 3', percentage: 50 },
-	{ index: 2, Column1: 'Row 3 Data 1', Column2: 'Row 3 Data 2', Column3: 'Row 3 Data 3', percentage: 90 },
-
-];
-let getFakeRows = async (page: number, size: number) =>
-{
-	console.log(page, size);
-	const rows = fakeData;
-	// const rows: any[] = [];
-	return { rows, count: fakeData.length };
-};
-
-const getFakeRowKey = (row: TableRowInfo<any>) =>
-{ return `${row.index}`; };
-
-export function App()
-{
-
-	const tableProps: INSTableProps<any> = {
-		checkbox: false,
-		// percentage:true,
-		columns: fakeColumns,
-		// columns: [],
-		getRows: getFakeRows,
-		getRowKey: getFakeRowKey,
-	};
-	let [state, setState] = useState<(boolean | null)>(true);
-
-	return (
-		<>
-			<NSRepeater<NSBoxString, string>
-				createItem={(_: number, lIndex: number, ref: React.RefObject<NSBoxString>, onChange: (index: number) => void, onDelete: (index: number) => void, __: boolean, style) =>
-				{
-					return <NSBoxString ref={ref} required={false} title={lIndex.toString()} style={style}
-						onChanged={
-							(x) =>
-							{
-								console.log(x)
-								if (x.getValue() == "d")
-									onDelete(lIndex);
-								else
-									onChange(lIndex);
-							}
-						}
-					></NSBoxString >;
-				}
-				}
-				getValue={(item, checkError) => item.getValue(checkError)}
-				isEmpty={value => value === ""}
-				updateItem={(item: NSBoxString, _: number, value: string | null) =>
-				{
-					if (value)
-						item.setValue(value);
-				}}
-			></NSRepeater >
-			<NSBoxBoolean checked={state} required={false} title={state + ""} indeterminate={false}
-				onChanged={(e) =>
-				{
-					setState(e.getValue());
-				}}
-			></NSBoxBoolean>
-			<NSButtonBlue
-				onClick={() =>
-				{
-					setState(!state);
-					// if (state == null)
-					// 	setState(false);
-					// if (state == false)
-					// 	setState(true);
-					// if (state == true)
-					// 	setState(null);
-				}}
-			></NSButtonBlue>
-
-			<NSNotFoundPage />
-			<NSBoxDate required title='' />
-			<NSBoxPhone
-				required
-				title=''
-			/>
-			<NSBoxInteger
-				required
-				title=''
-				min={8}
-				max={12}
-			/>
-			<NSBoxTextArea
-				required
-				title='asd'
-			/>
-			<NSBoxEnum
-				title='Retention Unit'
-				required
-				multiple={false}
-				options={[
-					{ title: "LogGroupRetentionUnit.Day", value: "LogGroupRetentionUnit.Day" },
-					{ title: "LogGroupRetentionUnit.Week", value: "LogGroupRetentionUnit.Week" },
-					{ title: "LogGroupRetentionUnit.Month", value: "LogGroupRetentionUnit.Month" },
-					{ title: "LogGroupRetentionUnit.Year", value: "LogGroupRetentionUnit.Year" },
-				]}
-			/>
-			<NSBoxRadio
-				required
-				title='asd'
-			/>
-			<NSTabPage
-				tabs={
-					[{
-						title: "asdasd",
-						getContent: () =>
-						{
-							return (
-
-								<div
-									style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
-									className='ns_tab_page_custom_style'
-								>
-									<NSBoxPhone
-										required
-										title='teststs'
-									/>
-								</div>
-							)
-						}
-					},
-					{
-						title: "qwe asd ",
-						getContent: () =>
-						{
-							return (
-								<>
-
-									<div
-										style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
-										className='ns_tab_page_custom_style'
-									>
-										<NSBoxPhone
-											required
-											title='teststs'
-										/>
-									</div>
-									<NSButtonBlue
-										title="Send"
-										onClick={() => { }}
-									/>
-								</>
-							)
-						}
-					},
-					{
-						title: ";lkjqwiu lasid yh",
-						getContent: () =>
-						{
-							return (
-
-								<div
-									style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
-									className='ns_tab_page_custom_style'
-								>
-									<NSBoxPhone
-										required
-										title='teststs'
-									/>
-								</div>
-							)
-						}
-					}
-					]
-				}
-
-			/>
-
-			<NSBoxDate
-				required
-				title='Test Test'
-			/>
-			<NSBarAlert
-				isVisible={() => true}
-				onContinue={() => window.open("/")}
-				title={
-					{
-						title: "Verify Your Email",
-						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
-					}
-				}
-			/>
-			<NSBarAlert
-				isVisible={() => true}
-				onContinue={() => window.open("/")}
-				title={
-					{
-						title: "Verify Your Email",
-						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
-					}
-				}
-			/>
-			<div style={{ width: "560px" }}>
-
-				<NSBoxSearch
-					required
-					title='asdasd'
-					style={{ width: "100%", maxWidth: "100%" }}
-				/>
-			</div>
-			<NSButtonBlue
-				onClick={() => { }}
-				title='sssssssssss'
-				disabled
-			/>
-			<NSBarAlert
-				isVisible={() => true}
-				onContinue={() => window.open("/")}
-				title={
-					{
-						title: "Verify Your Email",
-						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
-					}
-				}
-			/>
-			<NSCard
-				title="Namirasoft Job Arranger "
-				description="asdasd asda sd asd asdd asd "
-				image={{
-					src: "https://static.namirasoft.com/image/namirasoft/history/logo/base.png",
-				}}
-				link={{
-					href: "ss",
-					title: "test",
-					target: "_seld"
-				}}
-			/>
-
-			<div className="flex justify-content-center align-items-center w-100">
-				<NSChartDoughnut
-					datas={[7, 5, 8, 22, 5, 18]}
-					labels={["test", "test2", "test3", "test4", "test5", "test6",]}
-					backgroundColors={["#FF5733",
-						"#42A5F5",
-						"#FFC107",
-						"#8BC34A",
-						"#FF5722",
-						"#673AB7",
-						"#E91E63",
-						"#4CAF50",
-						"#FF9800",
-						"#9C27B0",
-						"#2196F3",
-						"#FFEB3B",
-						"#FF4081",
-						"#00BCD4",
-						"#CDDC39",]}
-					title='test'
-				/>
-			</div>
-			<NSBoxBoolean
-				required={false}
-				title='test'
-				checked={true}
-
-			/>
-			<div className='out'>
-				<div className="middle">
-					<div className='in'></div>
-				</div>
-			</div>
-			<NSTable  {...tableProps} />
-			<NSDownTimer
-				date={new Date()}
-				text='Test '
-			/>
-			<NSBoxBooleans
-				items={[
-					{ value: "test1", text: "test1" },
-					{ value: "test2", text: "test2" },
-					{ value: "test3", text: "test3" },
-				]}
-				onChanged={(box) =>
-				{
-					console.log(box.getValues());
-				}}
-			/>
-			{
-				state &&
-				<NSDialog
-					center_dialog
-					onClose={() => { setState(false) }}
-				>
-					<></>
-				</NSDialog>
-			}
-		</>
-	);
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { NSTable, INSTableProps, TableColumnInfo, TableRowInfo } from './components/NSTable';
+import { BackColorFormatter, BooleanFormatter, DateFormatter, DateTimeFormatter, EmailFormatter, EnumFormatter, FloatFormatter, IDFormatter, IntegerFormatter, IPFormatter, NSBarAlert, NSBoxBoolean, NSBoxBooleans, NSBoxDate, NSBoxEnum, NSBoxInteger, NSBoxPhone, NSBoxRadio, NSBoxSearch, NSBoxString, NSBoxTextArea, NSButtonBlue, NSCard, NSChartDoughnut, NSDialog, NSDownTimer, NSNotFoundPage, NSRepeater, NSTabPage, PhoneFormatter, TimeFormatter } from './main';
+import { useState } from 'react';
+
+export interface INSBarActionState
+{
+	id: string;
+	menu_item: string;
+	handler: () => void;
+	isActive: () => boolean;
+}
+
+const columns: TableColumnInfo[] = [
+	{
+		index: 0,
+		name: 'id',
+		text: 'ID',
+		formatter: new IDFormatter(),
+	},
+	{
+		index: 1,
+		name: 'valid',
+		text: 'Valid',
+		formatter: new BackColorFormatter(new BooleanFormatter("Valid", "Invalid"), { true: "green", false: "red" }),
+	},
+	{
+		index: 2,
+		name: 'data',
+		text: 'Date',
+		formatter: new DateFormatter(),
+	},
+	{
+		index: 3,
+		name: 'time',
+		text: 'Time',
+		formatter: new TimeFormatter(),
+	},
+	{
+		index: 4,
+		name: 'datetime',
+		text: 'DateTime',
+		formatter: new DateTimeFormatter(),
+	},
+	{
+		index: 5,
+		name: 'email',
+		text: 'Email',
+		formatter: new EmailFormatter(),
+	},
+	{
+		index: 5,
+		name: 'status',
+		text: 'Status',
+		formatter: new EnumFormatter(),
+	},
+	{
+		index: 5,
+		name: 'float',
+		text: 'Float',
+		formatter: new FloatFormatter(),
+	},
+	{
+		index: 5,
+		name: 'int',
+		text: 'Int',
+		formatter: new IntegerFormatter(),
+	},
+	{
+		index: 5,
+		name: 'ip',
+		text: 'IP',
+		formatter: new IPFormatter(),
+	},
+	{
+		index: 5,
+		name: 'phone',
+		text: 'Phone',
+		formatter: new PhoneFormatter(),
+	},
+];
+const rows = [
+	{ index: 0, id: 'bln-trn-401234012340', valid: true, data: new Date(), time: new Date(), datetime: new Date(), email: "jane.doe123@example.com", status: "Active", float: 0.0123, int: -500, ip: "127.0.0.1", phone: "(123) 456-7890" },
+	{ index: 1, id: 'sss-0123401234012340', valid: false, data: new Date(), time: new Date(), datetime: new Date(), email: "random.guy45@fakeemail.net", status: "Pending", float: 200, int: 0.123, ip: "localhost", phone: "+1-234-567-8901" },
+	{ index: 2, id: 'pym-0123401234012340', valid: true, data: new Date(), time: new Date(), datetime: new Date(), email: "hello.world99@sample.org", status: "Done", float: 4000, int: 9.999, ip: "192.168.10.255", phone: "123.456.7890" },
+	{ index: 2, id: 'pym-0123401234012340', valid: true, data: new Date(), time: new Date(), datetime: new Date(), email: "user.name2024@testmail.com", status: "Done", float: 5999.0099, int: 4200, ip: "10.10.0.0/24", phone: "+44 20 7946 0958" },
+	{ index: 2, id: 'pym-0123401234012340', valid: true, data: new Date(), time: new Date(), datetime: new Date(), email: "cool.kid77@domain.io", status: "Done", float: 800000.99, int: 250000000000, ip: "200.122.43.555/24", phone: "+1 (555) 555-5555" },
+];
+let getFakeRows = async (page: number, size: number) =>
+{
+	console.log(page, size);
+	return { rows, count: rows.length };
+};
+
+const getFakeRowKey = (row: TableRowInfo<any>) =>
+{ return `${row.index}`; };
+
+export function App()
+{
+	const tableProps: INSTableProps<any> = {
+		checkbox: true,
+		columns: columns,
+		getRows: getFakeRows,
+		getRowKey: getFakeRowKey,
+	};
+	let [state, setState] = useState<(boolean | null)>(true);
+
+	return (
+		<>
+			<NSTable  {...tableProps} />
+			<NSRepeater<NSBoxString, string>
+				createItem={(_: number, lIndex: number, ref: React.RefObject<NSBoxString>, onChange: (index: number) => void, onDelete: (index: number) => void, __: boolean, style) =>
+				{
+					return <NSBoxString ref={ref} required={false} title={lIndex.toString()} style={style}
+						onChanged={
+							(x) =>
+							{
+								console.log(x)
+								if (x.getValue() === "d")
+									onDelete(lIndex);
+								else
+									onChange(lIndex);
+							}
+						}
+					></NSBoxString >;
+				}
+				}
+				getValue={(item, checkError) => item.getValue(checkError)}
+				isEmpty={value => value === ""}
+				updateItem={(item: NSBoxString, _: number, value: string | null) =>
+				{
+					if (value)
+						item.setValue(value);
+				}}
+			></NSRepeater >
+			<NSBoxBoolean checked={state} required={false} title={state + ""} indeterminate={false}
+				onChanged={(e) =>
+				{
+					setState(e.getValue());
+				}}
+			></NSBoxBoolean>
+			<NSButtonBlue
+				onClick={() =>
+				{
+					setState(!state);
+					// if (state == null)
+					// 	setState(false);
+					// if (state == false)
+					// 	setState(true);
+					// if (state == true)
+					// 	setState(null);
+				}}
+			></NSButtonBlue>
+
+			<NSNotFoundPage />
+			<NSBoxDate required title='' />
+			<NSBoxPhone
+				required
+				title=''
+			/>
+			<NSBoxInteger
+				required
+				title=''
+				min={8}
+				max={12}
+			/>
+			<NSBoxTextArea
+				required
+				title='asd'
+			/>
+			<NSBoxEnum
+				title='Retention Unit'
+				required
+				multiple={false}
+				options={[
+					{ title: "LogGroupRetentionUnit.Day", value: "LogGroupRetentionUnit.Day" },
+					{ title: "LogGroupRetentionUnit.Week", value: "LogGroupRetentionUnit.Week" },
+					{ title: "LogGroupRetentionUnit.Month", value: "LogGroupRetentionUnit.Month" },
+					{ title: "LogGroupRetentionUnit.Year", value: "LogGroupRetentionUnit.Year" },
+				]}
+			/>
+			<NSBoxRadio
+				required
+				title='asd'
+			/>
+			<NSTabPage
+				tabs={
+					[{
+						title: "asdasd",
+						getContent: () =>
+						{
+							return (
+
+								<div
+									style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
+									className='ns_tab_page_custom_style'
+								>
+									<NSBoxPhone
+										required
+										title='teststs'
+									/>
+								</div>
+							)
+						}
+					},
+					{
+						title: "qwe asd ",
+						getContent: () =>
+						{
+							return (
+								<>
+
+									<div
+										style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
+										className='ns_tab_page_custom_style'
+									>
+										<NSBoxPhone
+											required
+											title='teststs'
+										/>
+									</div>
+									<NSButtonBlue
+										title="Send"
+										onClick={() => { }}
+									/>
+								</>
+							)
+						}
+					},
+					{
+						title: ";lkjqwiu lasid yh",
+						getContent: () =>
+						{
+							return (
+
+								<div
+									style={{ backgroundColor: "#fff", width: "100%", color: "#fff" }}
+									className='ns_tab_page_custom_style'
+								>
+									<NSBoxPhone
+										required
+										title='teststs'
+									/>
+								</div>
+							)
+						}
+					}
+					]
+				}
+
+			/>
+
+			<NSBoxDate
+				required
+				title='Test Test'
+			/>
+			<NSBarAlert
+				isVisible={() => true}
+				onContinue={() => window.open("/")}
+				title={
+					{
+						title: "Verify Your Email",
+						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
+					}
+				}
+			/>
+			<NSBarAlert
+				isVisible={() => true}
+				onContinue={() => window.open("/")}
+				title={
+					{
+						title: "Verify Your Email",
+						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
+					}
+				}
+			/>
+			<div style={{ width: "560px" }}>
+
+				<NSBoxSearch
+					required
+					title='asdasd'
+					style={{ width: "100%", maxWidth: "100%" }}
+				/>
+			</div>
+			<NSButtonBlue
+				onClick={() => { }}
+				title='sssssssssss'
+				disabled
+			/>
+			<NSBarAlert
+				isVisible={() => true}
+				onContinue={() => window.open("/")}
+				title={
+					{
+						title: "Verify Your Email",
+						description: "Lorem ipsum dolor sit amet consectetur. In ipsum gravida libero vitae tempor.Ipsum"
+					}
+				}
+			/>
+			<NSCard
+				title="Namirasoft Job Arranger "
+				description="asdasd asda sd asd asdd asd "
+				image={{
+					src: "https://static.namirasoft.com/image/namirasoft/history/logo/base.png",
+				}}
+				link={{
+					href: "ss",
+					title: "test",
+					target: "_seld"
+				}}
+			/>
+
+			<div className="flex justify-content-center align-items-center w-100">
+				<NSChartDoughnut
+					datas={[7, 5, 8, 22, 5, 18]}
+					labels={["test", "test2", "test3", "test4", "test5", "test6",]}
+					backgroundColors={["#FF5733",
+						"#42A5F5",
+						"#FFC107",
+						"#8BC34A",
+						"#FF5722",
+						"#673AB7",
+						"#E91E63",
+						"#4CAF50",
+						"#FF9800",
+						"#9C27B0",
+						"#2196F3",
+						"#FFEB3B",
+						"#FF4081",
+						"#00BCD4",
+						"#CDDC39",]}
+					title='test'
+				/>
+			</div>
+			<NSBoxBoolean
+				required={false}
+				title='test'
+				checked={true}
+
+			/>
+			<div className='out'>
+				<div className="middle">
+					<div className='in'></div>
+				</div>
+			</div>
+			<NSDownTimer
+				date={new Date()}
+				text='Test '
+			/>
+			<NSBoxBooleans
+				items={[
+					{ value: "test1", text: "test1" },
+					{ value: "test2", text: "test2" },
+					{ value: "test3", text: "test3" },
+				]}
+				onChanged={(box) =>
+				{
+					console.log(box.getValues());
+				}}
+			/>
+			{
+				state &&
+				<NSDialog
+					center_dialog
+					onClose={() => { setState(false) }}
+				>
+					<></>
+				</NSDialog>
+			}
+		</>
+	);
 }