namirasoft-site-react 1.3.442 → 1.3.444

package/src/components/NSBoxFile.tsx

@@ -1,108 +1,125 @@
 import React, { ChangeEvent } from "react";
-import { IBaseComponentProps, IValidationProps } from "../main";
 import { InboxOutlined } from '@ant-design/icons';
 import { message, Upload, UploadProps } from "antd";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
 import Styles from "./NSBoxFile.module.css"
 
 const { Dragger } = Upload;
 
-export interface INSBoxFileProps extends IBaseComponentProps, IValidationProps {
-    title: string;
-    placeholder?: string;
-    defaultValue?: string;
-    onChanged?: (info: any) => void;
-    onDroped?: (info: any) => void;
-    onClicked?: (e: NSBoxFile) => void;
-    showUploadList?: boolean;
-    maxFilesCount?: number;
-    multiple?: boolean;
+export interface INSBoxFileProps extends IBaseComponentProps, IValidationProps
+{
+	title: string;
+	placeholder?: string;
+	defaultValue?: string;
+	onChanged?: (info: any) => void;
+	onDroped?: (info: any) => void;
+	onClicked?: (e: NSBoxFile) => void;
+	showUploadList?: boolean;
+	maxFilesCount?: number;
+	multiple?: boolean;
 }
 
 const props: UploadProps = {
-    name: 'file',
-    multiple: false,
-    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
-    onChange(info) {
-        const { status } = info.file;
-        if (status !== 'uploading') {
-            console.log(info.file, info.fileList);
-        }
-        if (status === 'done') {
-            message.success(`${info.file.name} file uploaded successfully.`);
-        } else if (status === 'error') {
-            message.error(`${info.file.name} file upload failed.`);
-        }
-    },
-    onDrop(e) {
-        console.log('Dropped files', e.dataTransfer.files);
-    },
+	name: 'file',
+	multiple: false,
+	action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+	onChange(info)
+	{
+		const { status } = info.file;
+		if (status !== 'uploading')
+		{
+			console.log(info.file, info.fileList);
+		}
+		if (status === 'done')
+		{
+			message.success(`${info.file.name} file uploaded successfully.`);
+		} else if (status === 'error')
+		{
+			message.error(`${info.file.name} file upload failed.`);
+		}
+	},
+	onDrop(e)
+	{
+		console.log('Dropped files', e.dataTransfer.files);
+	},
 };
 
-export interface INSBoxFileState {
-    file: File | null;
-    error?: string;
+export interface INSBoxFileState
+{
+	file: File | null;
+	error?: string;
 }
 
-export class NSBoxFile extends React.Component<INSBoxFileProps, INSBoxFileState> {
-    constructor(props: INSBoxFileProps) {
-        super(props);
-        this.state = {
-            file: null,
-        };
-        this.getError = this.getError.bind(this);
-        this.getFile = this.getFile.bind(this);
-        this.setFile = this.setFile.bind(this);
-        this.onChanged = this.onChanged.bind(this)
-    }
+export class NSBoxFile extends React.Component<INSBoxFileProps, INSBoxFileState>
+{
+	constructor(props: INSBoxFileProps)
+	{
+		super(props);
+		this.state = {
+			file: null,
+		};
+		this.getError = this.getError.bind(this);
+		this.getFile = this.getFile.bind(this);
+		this.setFile = this.setFile.bind(this);
+		this.onChanged = this.onChanged.bind(this)
+	}
 
-    getError(): string | null {
-        return null;
-    }
+	getError(): string | null
+	{
+		return null;
+	}
 
-    handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files ? event.target.files[0] : null;
-        this.setState({ file });
-    };
+	handleFileChange = (event: ChangeEvent<HTMLInputElement>) =>
+	{
+		const file = event.target.files ? event.target.files[0] : null;
+		this.setState({ file });
+	};
 
-    getFile = (): File | null => {
-        return this.state.file;
-    };
+	getFile = (): File | null =>
+	{
+		return this.state.file;
+	};
 
-    setFile = (file: File | null) => {
-        this.setState({ file }, () => {
-            if (this.props.onChanged)
-                this.props.onChanged(this.state.file);
-        });
-    };
+	setFile = (file: File | null) =>
+	{
+		this.setState({ file }, () =>
+		{
+			if (this.props.onChanged)
+				this.props.onChanged(this.state.file);
+		});
+	};
 
-    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void {
-        const file = e.target.files ? e.target.files[0] : null;
-        this.setState({ file });
-        if (this.props.onChanged)
-            this.props.onChanged(this.state.file);
-    }
+	private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+	{
+		const file = e.target.files ? e.target.files[0] : null;
+		this.setState({ file });
+		if (this.props.onChanged)
+			this.props.onChanged(this.state.file);
+	}
 
-    override render() {
-        return (
-            <div className={`${Styles.ns_input_file}`}>
-                <Dragger {...props}
-                    onChange={this.props.onChanged}
-                    onDrop={this.props.onDroped}
-                    showUploadList={this.props.showUploadList}
-                    maxCount={this.props.maxFilesCount}
-                    multiple={this.props.multiple}
-                    style={{ border: "none" }}
-                >
-                    <p className="ant-upload-drag-icon">
-                        <InboxOutlined style={{ color: "#141B5C" }} />
-                    </p>
-                    <p className="ant-upload-text" style={{ color: "#141B5C" }}>Click or drag file to this area to upload</p>
-                    <p className="ant-upload-hint" style={{ color: "#141B5C" }}>
-                        Support for a single or bulk upload. Strictly prohibited from uploading company data or other
-                        banned files.
-                    </p>
-                </Dragger>
-            </div>
-        )
-    }
+	override render()
+	{
+		return (
+			<div className={`${Styles.ns_input_file}`}>
+				<Dragger {...props}
+					onChange={this.props.onChanged}
+					onDrop={this.props.onDroped}
+					showUploadList={this.props.showUploadList}
+					maxCount={this.props.maxFilesCount}
+					multiple={this.props.multiple}
+					style={{ border: "none" }}
+				>
+					<p className="ant-upload-drag-icon">
+						<InboxOutlined style={{ color: "#141B5C" }} />
+					</p>
+					<p className="ant-upload-text" style={{ color: "#141B5C" }}>Click or drag file to this area to upload</p>
+					<p className="ant-upload-hint" style={{ color: "#141B5C" }}>
+						Support for a single or bulk upload. Strictly prohibited from uploading company data or other
+						banned files.
+					</p>
+				</Dragger>
+			</div>
+		)
+	}
 }

package/src/components/NSCardScreenshot.tsx

@@ -1,31 +1,34 @@
-import { IBaseComponentProps } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import Styles from "./NSCardScreenshot.module.css"
 
-export interface NSCardScreenshotProps extends IBaseComponentProps {
-    key: number;
-    screenshot: string;
-    timeSpent: string;
-    onDelete: () => void;
+export interface NSCardScreenshotProps extends IBaseComponentProps
+{
+	key: number;
+	screenshot: string;
+	timeSpent: string;
+	onDelete: () => void;
 };
 
-const NSCardScreenshot = (props: NSCardScreenshotProps) => {
-    return (
-        <div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
-            <div className={Styles.card_screenshot_header}>
-                <span className={Styles.timeSpent}>{props.timeSpent}</span>
-                <div onClick={() => {
-                    if (props.onDelete)
-                        props.onDelete()
-                }} 
-                className={Styles.deleteButton}>
-                    <img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" />
-                </div>
-            </div>
-            <div className={Styles.screenshot_imageSection}>
-                <img src={props.screenshot} alt="Screenshot" className={Styles.image} />
-            </div>
-        </div>
-    );
+const NSCardScreenshot = (props: NSCardScreenshotProps) =>
+{
+	return (
+		<div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
+			<div className={Styles.card_screenshot_header}>
+				<span className={Styles.timeSpent}>{props.timeSpent}</span>
+				<div onClick={() =>
+				{
+					if (props.onDelete)
+						props.onDelete()
+				}}
+					className={Styles.deleteButton}>
+					<img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" />
+				</div>
+			</div>
+			<div className={Styles.screenshot_imageSection}>
+				<img src={props.screenshot} alt="Screenshot" className={Styles.image} />
+			</div>
+		</div>
+	);
 };
 
 export default NSCardScreenshot;

package/src/components/NSChartColumn.tsx

@@ -1,114 +1,109 @@
 import { Bar } from 'react-chartjs-2';
-import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Title,
-    Tooltip,
-    Legend,
-    ChartOptions,
-} from 'chart.js';
-import { IBaseComponentProps } from '../main';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, } from 'chart.js';
+	import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from "./NSChartColumn.module.css"
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
-export interface NSChartColumnProps extends IBaseComponentProps {
-    labels: string[];
-    datasets: number[];
-    range: {
-        min: number,
-        max: number,
-    }
-    yGrid?: boolean;
-    height?: number;
-    width?: number;
+export interface NSChartColumnProps extends IBaseComponentProps
+{
+	labels: string[];
+	datasets: number[];
+	range: {
+		min: number,
+		max: number,
+	}
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
 }
 
-const NSChartColumn = (props: NSChartColumnProps) => {
-    const data = {
-        labels: props.labels,
-        datasets: [
-            {
-                label: 'Dataset 1',
-                data: props.datasets,
-                backgroundColor: '#3354F4',
-                borderRadius: 10,
-                barThickness: 12,
-                borderSkipped: false,
-            },
-        ],
-    };
+const NSChartColumn = (props: NSChartColumnProps) =>
+{
+	const data = {
+		labels: props.labels,
+		datasets: [
+			{
+				label: 'Dataset 1',
+				data: props.datasets,
+				backgroundColor: '#3354F4',
+				borderRadius: 10,
+				barThickness: 12,
+				borderSkipped: false,
+			},
+		],
+	};
 
-    const options: ChartOptions<'bar'> = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                display: false,
-            },
-            tooltip: {
-                enabled: true,
-                callbacks: {
-                    label: function (context) {
-                        return `$${context.raw}`;
-                    },
-                },
-            },
-        },
-        scales: {
-            x: {
-                ticks: {
-                    font: {
-                        size: 8,
-                        weight: 700
-                    },
-                    color: '#141B5C',
-                    maxRotation: 554,
-                    minRotation: 0,
-                },
-                grid: {
-                    display: false,
-                },
-                border: {
-                    display: false,
-                }
-            },
-            y: {
-                min: props.range.min,
-                max: props.range.max,
-                ticks: {
-                    callback: function (value) {
-                        return `$${value}`;
-                    },
-                    font: {
-                        size: 8,
-                        weight: 700,
-                    },
-                    color: '#141B5C',
-                },
-                grid: {
-                    display: props.yGrid,
-                    color: "#E6EEF5"
-                },
-                border: {
-                    display: false,
-                },
-            },
-        },
-    };
+	const options: ChartOptions<'bar'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					label: function (context)
+					{
+						return `$${context.raw}`;
+					},
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: {
+						size: 8,
+						weight: 700
+					},
+					color: '#141B5C',
+					maxRotation: 554,
+					minRotation: 0,
+				},
+				grid: {
+					display: false,
+				},
+				border: {
+					display: false,
+				}
+			},
+			y: {
+				min: props.range.min,
+				max: props.range.max,
+				ticks: {
+					callback: function (value)
+					{
+						return `$${value}`;
+					},
+					font: {
+						size: 8,
+						weight: 700,
+					},
+					color: '#141B5C',
+				},
+				grid: {
+					display: props.yGrid,
+					color: "#E6EEF5"
+				},
+				border: {
+					display: false,
+				},
+			},
+		},
+	};
 
-    return (
-        <div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
-            <Bar
-                data={data}
-                options={options}
-                height={props.height ? props.height : 250}
-                width={props.width ? props.width : 320}
-            />
-        </div>
-    );
+	return (
+		<div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
+			<Bar
+				data={data}
+				options={options}
+				height={props.height ? props.height : 250}
+				width={props.width ? props.width : 320}
+			/>
+		</div>
+	);
 };
 
 export default NSChartColumn;

package/src/components/NSChartPie.tsx

@@ -2,7 +2,7 @@
 import { Doughnut } from 'react-chartjs-2';
 import
 {
-    Chart as ChartJS,
+	Chart as ChartJS,
     ArcElement,
     Tooltip,
     Legend,
@@ -17,7 +17,7 @@ import
     Plugin,
     ArcElement as ArcElementType
 } from 'chart.js';
-import { IBaseComponentProps } from '../main';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 
 ChartJS.register(
     ArcElement, Tooltip, Legend, Title,