namirasoft-site-react 1.3.40 → 1.3.42

package/dist/components/NSTable.d.ts

@@ -15,6 +15,7 @@ export interface NSTableState<RowType> {
         [key: string]: string;
     };
     rows: RowType[];
+    modalState: boolean;
 }
 export declare class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>> {
     constructor(props: NSTableProps<RowType>);

package/dist/components/NSTable.js

@@ -1,11 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NSButtonGroup from './NSButtonGroup';
+import { NSInputSearch } from './NSInputSearch';
+import { NSPagination } from './NSPagination';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
 import { Component } from 'react';
 export class NSTable extends Component {
     constructor(props) {
         super(props);
-        this.state = { columns: props.columns, rows: props.rows };
+        this.state = { columns: props.columns, rows: props.rows, modalState: false };
     }
     setColumns(columns) {
         this.setState({ columns });
@@ -15,7 +19,7 @@ export class NSTable extends Component {
     }
     render() {
         let column_keys = Object.keys(this.state.columns);
-        return (_jsxs("div", { className: Styles.ns_project_list_container, children: [_jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsxs("div", { className: Styles.ns_button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.ns_export_button, children: [_jsx("img", { src: "/assets/images/export-vector.png", alt: "Export Table Data", width: 13, height: 16 }), "Export"] }), _jsxs("button", { onClick: () => window.location.reload(), className: Styles.ns_refresh_button, children: [_jsx("img", { src: "/assets/images/refresh-vector.png", alt: "Refresh Table Contnet", width: 15, height: 16 }), "Refresh"] })] })] }));
+        return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_button_group, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSButtonGroup, {})] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
     }
 }
 //# sourceMappingURL=NSTable.js.map

package/dist/components/NSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAAuD;IAEzF,YAAY,KAA4B;QAEpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,iBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC7B,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7B,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,aAAqB,KAAK,EAAC,KAAK,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAvD,UAAU,CAAmD,CAAC,GACrG,GACD,EACR,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAEzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,kBAAc,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,YAC9F,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,GAET,IACL,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,aAC1C,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACvL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACtM,IACH,CACV,CAAA;IACL,CAAC;CACJ"}
+{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSTable.module.css

@@ -1,25 +1,20 @@
-.ns_project_list_container {}
-
 .ns_table {
     display: flex;
     flex-direction: column;
-    padding: 0;
     color: rgba(20, 27, 92, 1);
-
 }
 
 .ns_table thead {
     clip: rect(0 0 0 0);
     position: fixed;
-
 }
 
 .ns_table tr {
     border-radius: 8px;
     padding: 16px;
-    margin: 10px;
     display: block;
     background-color: rgba(20, 27, 92, 0.3);
+    margin: 16px 0;
 }
 
 .ns_table td {
@@ -35,13 +30,42 @@
     float: left;
     font-weight: bold;
     text-transform: uppercase;
+}
+
+/* Button Group  */
+.ns_button_group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Modal */
+.ns_modal {
+    position: fixed;
+    height: fit-content;
+    top: 25%;
+    left: 0;
+    border-radius: 8px;
+    padding: 24px;
+    margin: 0 16px;
+    background-color: rgba(188, 194, 244, 1);
+    z-index: 10;
+    color: rgba(20, 27, 92, 1);
+}
 
+.ns_modal a {
+    float: right;
 }
 
-@media screen and (min-width: 600px) {
+.modal img {
+    width: 32px;
+    height: 32px;
+    right: 0;
+}
+
+@media screen and (min-width: 768px) {
     .ns_table {
         color: #000000;
-
     }
 
     .ns_table thead {
@@ -53,7 +77,6 @@
 
     .ns_table tbody {
         background-color: rgba(20, 27, 92, 0.3);
-
     }
 
     .ns_table tr {
@@ -89,6 +112,14 @@
         text-transform: uppercase;
     }
 
+    /* Button Group  */
+    .ns_button_group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
     @media screen and (min-width: 990px) {
         .ns_table {
             padding: 0 48px;
@@ -101,5 +132,15 @@
         .ns_table tr {
             font-size: 24px;
         }
+
+        /* Search Input  */
+        .ns_search_input {
+            padding: 0 40px;
+        }
+
+        /* Button Group  */
+        .ns_button_group {
+            padding: 0 48px;
+        }
     }
 }

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonGroup";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonGroup";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.40",
+    "version": "1.3.42",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",

package/src/App.tsx

@@ -1,15 +1,53 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayoutTitle } from './main';
+import { NSLayoutTitle, NSTable } from './main';
 
 export function App()
 {
+    let columns = {
+        "id": "ID",
+        "project": "Project",
+        "level": "Level",
+        "message": "Message",
+        "cent": "Cent",
+        "status": "Status",
+
+    }
+    let rows = [{
+        id: 1,
+        project: "Namirasoft Account",
+        level: "Debug",
+        message: "Lorem ipsum dolor sit amet, consetetur ",
+        cent: "24",
+        status: "Done"
+    },
+    {
+        id: 2,
+        project: "Namirasoft Account",
+        level: "Debug",
+        message: "Lorem ipsum dolor sit amet, consetetur ",
+        cent: "24",
+        status: "Done"
+    }
+    ]
+    interface Row
+    {
+        id: number,
+        project: string,
+        level: string,
+        message: string,
+        cent: string,
+        status: string
+    }
+    function getCell(row: Row, column: string): any
+    {
+        return (row as any)[column];
+    }
     return (
-        <div className="App">
-            <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
-                <div>
-                </div>
-            </NSLayoutTitle>
-        </div>
+        <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
+            <div className="container">
+                <NSTable columns={columns} rows={rows} getCell={getCell} getColumnAttributes={() => { return {} }} getRowKey={row => row.id.toString()} />
+            </div>
+        </NSLayoutTitle>
     );
-}   
+}   

package/src/components/NSButtonGroup.module.css

@@ -0,0 +1,38 @@
+.ns_button_group_desktop {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.ns_button_group_desktop button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    width: 128px;
+    height: 48px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+}
+
+.ns_export_button {
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_refresh_button {
+    border: 1px solid rgba(3, 119, 255, 1);
+}
+
+.ns_project img {
+    margin-right: 8px;
+}
+
+@media only screen and (min-width:768px) {
+    .ns_button_group_desktop {
+        gap: 24px;
+    }
+}

package/src/components/NSButtonGroup.tsx

@@ -0,0 +1,12 @@
+import Styles from './NSButtonGroup.module.css'
+function NSButtonGroup()
+{
+    return (
+        <div className={Styles.ns_button_group_desktop}>
+            <button onClick={() => window.print()} className={Styles.ns_export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
+            <button onClick={() => window.location.reload()} className={Styles.ns_refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
+        </div>
+    );
+}
+
+export default NSButtonGroup;

package/src/components/NSInputDuration.tsx

@@ -6,7 +6,9 @@ import IconInputDuration from '../assets/images/icon-input-duration.svg';
 
 export interface NSInputDurationProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputDurationState
@@ -19,25 +21,27 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+	}
+	getValue(): string
     {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
+        return this.state.value;
+	}
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
-    }
-    override render()
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+	}
+	override render()
     {
         return (
             <div className={`${Styles.ns_input_parent} p-2`}>
@@ -51,7 +55,7 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+					onChange={this.onChanged}
                     type="time"
                     className={Styles.ns_input}
                     placeholder="21:44:06"

package/src/components/NSInputEmail.tsx

@@ -8,6 +8,8 @@ import Danger from '../assets/images/danger.svg';
 export interface NSInputEmailProps
 {
     title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputEmailState
@@ -21,32 +23,35 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
     {
         super(props);
         this.state = {
-            value: "",
+			value: props.defaultValue ?? "",
             error: false,
         };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+		this.onChanged = this.onChanged.bind(this);
+	}
+    getValue(): string
     {
-        let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        if (!email.test(e.target.value))
+        return this.state.value;
+	}
+    setValue(value: string): void
+    {
+		let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		debugger
+        if (!email.test(value))
         {
-            this.setState({ error: true, value: e.target.value });
+            this.setState({ error: true, value });
         }
         else
         {
-            this.setState({ error: false, value: e.target.value });
+            this.setState({ error: false, value });
         }
-    }
-    setDefaultValue(value: string): void
+	}
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        this.setState({ value });
-    }
-    getValue(): string
-    {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -63,7 +68,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                     />
                     <input
                         value={this.state.value}
-                        onChange={this.setValue}
+                        onChange={this.onChanged}
                         type="email"
                         className={`${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
                         placeholder="Sample@gmail.com"

package/src/components/NSInputFloat.tsx

@@ -6,7 +6,9 @@ import IconInputFloat from '../assets/images/icon-input-float.svg';
 
 export interface NSInputFloatProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputFloatState
@@ -19,23 +21,26 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
+        return this.state.value;
+	}
+    setValue(value: string): void
     {
         this.setState({ value });
-    }
-    getValue(): string
+	}
+	
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +56,7 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="1.2"

package/src/components/NSInputIP.tsx

@@ -6,7 +6,9 @@ import IconInputId from '../assets/images/icon-input-id.svg';
 
 export interface NSInputIPProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputIPState
@@ -19,23 +21,25 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="192.158.1.38"

package/src/components/NSInputInteger.tsx

@@ -6,7 +6,9 @@ import IconInputInteger from '../assets/images/icon-input-integer.svg';
 
 export interface NSInputIntegerProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputIntegerState
@@ -19,23 +21,25 @@ export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInput
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInput
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="number"
                     className={Styles.ns_input}
                     placeholder="1234"