namirasoft-site-react 1.5.21 → 1.5.23

package/src/App.tsx

@@ -1,168 +1,177 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { Component, createRef } from 'react';
-import './App.css';
-import { NSLayout } from './components/NSLayout';
-import { PercentFormatter } from './formatter/PercentFormatter';
-import { DateTimeFormatter, EmailFormatter, IntegerFormatter, KeyOperation, NSButtonBlue, NSTable, PhoneFormatter, StringFormatter } from './main';
-
-type TestRow = {
-    id: string,
-    name: string,
-    city: string,
-    department: string,
-    age: number,
-    salary: number,
-    score: number,
-    experience: number,
-    percentage: number,
-    phone: string,
-    email: string,
-    created_at: string,
-};
-
-const FIRST_NAMES = ["Amin", "Negar", "Milad", "Sara", "Reza", "Maryam", "Ali", "Fatemeh", "Hossein", "Zahra", "Mohammad", "Narges", "Saeed", "Leila", "Hamed"];
-const LAST_NAMES = ["Pasban", "Sharifpour", "Nazirzadeh", "Ahmadi", "Karimi", "Hosseini", "Rezaei", "Moradi", "Jafari", "Bagheri", "Salehi", "Ghasemi", "Akbari", "Mousavi", "Tavakoli"];
-const CITIES = ["Tehran", "Shiraz", "Tabriz", "Isfahan", "Mashhad"];
-const DEPARTMENTS = ["Engineering", "Sales", "Marketing", "Support", "Finance"];
-
-const ALL_ROWS: TestRow[] = Array.from({ length: 45 }, (_, i) =>
-{
-    const n = i + 1;
-    return {
-        id: n.toString(),
-        name: `${FIRST_NAMES[i % FIRST_NAMES.length]} ${LAST_NAMES[(i * 7) % LAST_NAMES.length]}`,
-        city: CITIES[i % CITIES.length],
-        department: DEPARTMENTS[(i * 3) % DEPARTMENTS.length],
-        age: 22 + (i * 5) % 35,
-        salary: 30000 + (i * 1700) % 90000,
-        score: 40 + (i * 11) % 60,
-        experience: (i * 2) % 20,
-        percentage: 10 + (i * 13) % 80,
-        phone: "0912" + (1000000 + i).toString(),
-        email: `${FIRST_NAMES[i % FIRST_NAMES.length].toLowerCase()}.${n}@example.com`,
-        created_at: new Date(Date.now() - i * 86400000 - i * 3600000).toISOString()
-    };
-});
-
-interface AppProps { }
-interface AppState { }
-
-export class App extends Component<AppProps, AppState>
-{
-    NSTableRef = createRef<NSTable<TestRow>>();
-
-    constructor(props: AppProps)
-    {
-        super(props);
-        this.state = {}
-    };
-
-    override componentDidMount(): void
-    {
-        KeyOperation.start();
-    }
-
-    override componentWillUnmount(): void
-    {
-        KeyOperation.stop();
-    }
-
-    override render()
-    {
-        return (
-            <NSLayout
-                header={{
-                    right: {
-                        icons: [
-                            {
-                                onClicked: () => { },
-                                src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png",
-                                count: 2
-                            }
-                        ],
-                    },
-                    mega_menu: true,
-                    onCollapse: () => { },
-                }}
-                isLoggedIn={() => true}
-                logo='https://static.namirasoft.com/image/namirasoft/access/logo/base.png'
-                background={{ image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }}
-                notifications={[]}
-                notifier={{} as any}
-                scope=''
-            >
-                <NSTable<TestRow>
-                    ref={this.NSTableRef}
-                    name={"test_table"}
-                    checkbox
-                    columns={[
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 0, type: "String", name: "name", text: "Name", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 1, type: "String", name: "city", text: "City", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 2, type: "String", name: "department", text: "Department", formatter: new StringFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 3, type: "Number", name: "age", text: "Age", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 4, type: "Number", name: "salary", text: "Salary", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 5, type: "Number", name: "score", text: "Score", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 6, type: "Number", name: "experience", text: "Experience", formatter: new IntegerFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 7, type: "Number", name: "percentage", text: "Percentage", formatter: new PercentFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 8, type: "String", name: "phone", text: "Phone", formatter: new PhoneFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 9, type: "String", name: "email", text: "Email", formatter: new EmailFormatter()
-                        },
-                        {
-                            table: { name: "test_table", text: "Test Table" },
-                            index: 10, type: "DateTime", name: "created_at", text: "Created At", formatter: new DateTimeFormatter()
-                        },
-                    ]}
-                    getRowKey={(item) => item.value.id}
-                    getRows={async (page, size) =>
-                    {
-                        const start = (page - 1) * size;
-                        return {
-                            count: ALL_ROWS.length,
-                            rows: ALL_ROWS.slice(start, start + size)
-                        };
-                    }}
-                    getRowCheckboxDisabled={row => row.value.percentage < 20}
-                />
-                <NSButtonBlue
-                    title={"Log"}
-                    onClick={{
-                        showLoading: false,
-                        action: () =>
-                        {
-                            console.log(KeyOperation.isControlPressed());
-                        }
-                    }}
-                />
-            </NSLayout>
-        );
-    }
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { TimeOperation } from 'namirasoft-core';
+import { Component, createRef } from 'react';
+import './App.css';
+import { NSLayout } from './components/NSLayout';
+import { DateTimeFormatter, IntegerFormatter, JsonFormatter, NSBoxCombo, NSBoxDate, NSBoxDateTime, NSButtonBlue, NSColumn, NSTable, PhoneFormatter, SensitiveFormatter, StringFormatter } from './main';
+
+type TableRow = {
+    id: string,
+    parent_id?: string,
+    name: string,
+    age: number,
+    experience: number,
+    salary: number,
+    city: string,
+    phone: string,
+    json?: string,
+    national_code: string,
+    created_at: string,
+};
+
+interface AppProps { }
+interface AppState { }
+
+export class App extends Component<AppProps, AppState>
+{
+    private NSTableRef = createRef<NSTable<TableRow>>();
+    private NSBoxDateRef = createRef<NSBoxDate>();
+    private NSBoxDateTimeRef = createRef<NSBoxDateTime>();
+
+    constructor(props: AppProps)
+    {
+        super(props);
+        this.state = {}
+    };
+
+    override render()
+    {
+        return (
+            <NSLayout
+                header={{
+                    right: {
+                        icons: [
+                            {
+                                onClicked: () => { },
+                                src: "https://static.namirasoft.com/image/namirasoft/access/logo/base.png",
+                                count: 2
+                            }
+                        ],
+                    },
+                    mega_menu: true,
+                    onCollapse: () => { },
+                }}
+                isLoggedIn={() => true}
+                logo='https://static.namirasoft.com/image/namirasoft/access/logo/base.png'
+                background={{ image: "https://static.namirasoft.com/image/namirasoft/access/background/base.svg" }}
+                notifications={[]}
+                notifier={{} as any}
+                scope=''
+            >
+                <NSTable<TableRow>
+                    ref={this.NSTableRef}
+                    name={"table"}
+                    checkbox
+                    columns={[
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 0, type: "String", name: "id", text: "ID", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 1, type: "String", name: "name", text: "Name", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 2, type: "Number", name: "age", text: "Age", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 3, type: "Number", name: "experience", text: "Experience", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 4, type: "Number", name: "salary", text: "Salary", formatter: new IntegerFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 5, type: "String", name: "city", text: "City", formatter: new StringFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 6, type: "String", name: "phone", text: "Phone", formatter: new PhoneFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 7, type: "String", name: "national_code", text: "National Code", formatter: new SensitiveFormatter<TableRow>(
+                                async (value) =>
+                                {
+                                    await new Promise(resolve => setTimeout(resolve, 1000));
+                                    return value;
+                                },
+                                () => true
+                            )
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 8, type: "DateTime", name: "created_at", text: "Created At", formatter: new DateTimeFormatter()
+                        },
+                        {
+                            table: { name: "table", text: "Table" },
+                            index: 9, type: "String", name: "json", text: "Json", formatter: new JsonFormatter()
+                        },
+                    ]}
+                    getRowKey={(item) => item.value.id}
+                    getRows={async () => ({
+                        count: 5,
+                        rows: [
+                            { id: "a1", name: "Amin Pasban", age: 28, experience: 6, salary: 12000, city: "Rasht", phone: "09117579093", national_code: "2670000001", json: JSON.stringify({ role: "Developer", skills: ["React", "TypeScript"], active: true, projects: { count: 3, latest: "Site Package" } }), created_at: TimeOperation.daysAgo(1, new Date()).toDateString() },
+                            { id: "c3", name: "Negar Sharifpour", age: 28, experience: 2, salary: 9000, city: "Rasht", phone: "09117579092", national_code: "2670000002", created_at: TimeOperation.daysAgo(2, new Date()).toDateString() },
+                            { id: "b2", name: "Milad Nazirzadeh", age: 28, experience: 6, salary: 18000, city: "Tehran", phone: "09127576063", national_code: "0070000003", created_at: TimeOperation.daysAgo(10, new Date()).toDateString() },
+                            { id: "d4", name: "Mohammad Nazirzadeh", age: 29, experience: 4, salary: 8000, city: "Tehran", phone: "09127576063", national_code: "0070000004", created_at: TimeOperation.daysAgo(20, new Date()).toDateString() },
+                            { id: "e5", name: "Hadiseh Pasban", age: 22, experience: 3, salary: 9500, city: "Rasht", phone: "09116463032", national_code: "2670000005", created_at: TimeOperation.daysAgo(100, new Date()).toDateString() },
+                        ]
+                    })}
+                    ui={{
+                        pagination: false,
+                    }}
+                />
+                <NSColumn style={{ marginTop: "1.5rem", alignItems: "center" }}>
+                    <NSBoxCombo
+                        title='Combo'
+                        required={true}
+                        multiple={false}
+                        getOptions={() => [
+                            { title: "Option 9 Option 9 Option 9 Option 9 Option 9 Option 9", value: "options9" },
+                            { title: "Option 8", value: "options8" },
+                            { title: "Option 7", value: "options7" },
+                            { title: "Option 6", value: "options6" },
+                            { title: "Option 5", value: "options5" },
+                            { title: "Option 4", value: "options4" },
+                            { title: "Option 3", value: "options3" },
+                            { title: "Option 2", value: "options2" },
+                            { title: "Option 1", value: "options1" },
+                        ]}
+                    />
+                    <NSBoxCombo
+                        title='Combo'
+                        required={true}
+                        multiple={true}
+                        getOptions={() => [
+                            { title: "Option 9", value: "options9" },
+                            { title: "Option 8", value: "options8" },
+                            { title: "Option 7", value: "options7" },
+                            { title: "Option 6", value: "options6" },
+                            { title: "Option 5", value: "options5" },
+                            { title: "Option 4", value: "options4" },
+                            { title: "Option 3", value: "options3" },
+                            { title: "Option 2", value: "options2" },
+                            { title: "Option 1", value: "options1" },
+                        ]}
+                    />
+                    <NSButtonBlue
+                        title={"Log"}
+                        onClick={{
+                            showLoading: false,
+                            action: () =>
+                            {
+                                console.log("Date:", this.NSBoxDateRef.current?.getValueString(false));
+                                console.log("DateTime:", this.NSBoxDateTimeRef.current?.getValueString(false));
+                            }
+                        }}
+                    />
+                </NSColumn>
+            </NSLayout>
+        );
+    }
 }

package/src/BrowserDetector.ts

@@ -1,110 +1,110 @@
-export enum Browser
-{
-    Chrome = "Chrome",
-    Edge = "Edge",
-    Brave = "Brave",
-    Opera = "Opera",
-    Samsung = "Samsung",
-    Firefox = "Firefox",
-    Safari = "Safari",
-    Unknown = "Unknown",
-}
-
-interface UserAgentBrand
-{
-    brand: string;
-    version: string;
-}
-
-interface UserAgentData
-{
-    brands: UserAgentBrand[];
-    mobile: boolean;
-    platform: string;
-}
-
-export class BrowserDetector
-{
-    private static cached?: Browser;
-
-    private static get userAgentData(): UserAgentData | undefined
-    {
-        if (typeof navigator === "undefined")
-            return undefined;
-        return (navigator as any).userAgentData as UserAgentData | undefined;
-    }
-
-    private static getUserAgent(): string
-    {
-        if (typeof navigator === "undefined")
-            return "";
-        return navigator.userAgent;
-    }
-
-    private static isBrave(): boolean
-    {
-        return typeof navigator !== "undefined" && (navigator as any).brave !== undefined;
-    }
-
-    private static detectFromBrands(brands: UserAgentBrand[]): Browser | undefined
-    {
-        const names = brands.map(entry => entry.brand.toLowerCase());
-        const has = (value: string): boolean => names.some(name => name.includes(value));
-
-        if (BrowserDetector.isBrave())
-            return Browser.Brave;
-        if (has("microsoft edge"))
-            return Browser.Edge;
-        if (has("opera"))
-            return Browser.Opera;
-        if (has("samsung"))
-            return Browser.Samsung;
-        if (has("google chrome") || has("chromium"))
-            return Browser.Chrome;
-
-        return undefined;
-    }
-
-    private static detectFromUserAgent(): Browser
-    {
-        const ua = BrowserDetector.getUserAgent();
-
-        if (BrowserDetector.isBrave())
-            return Browser.Brave;
-        if (ua.includes("Edg/"))
-            return Browser.Edge;
-        if (ua.includes("OPR/") || ua.includes("Opera/"))
-            return Browser.Opera;
-        if (ua.includes("SamsungBrowser/"))
-            return Browser.Samsung;
-        if (ua.includes("Firefox/"))
-            return Browser.Firefox;
-        if (ua.includes("Chrome/"))
-            return Browser.Chrome;
-        if (ua.includes("Safari/"))
-            return Browser.Safari;
-
-        return Browser.Unknown;
-    }
-
-    static detect(): Browser
-    {
-        if (BrowserDetector.cached)
-            return BrowserDetector.cached;
-
-        const data = BrowserDetector.userAgentData;
-        const detected = data ? BrowserDetector.detectFromBrands(data.brands) : undefined;
-        BrowserDetector.cached = detected ?? BrowserDetector.detectFromUserAgent();
-        return BrowserDetector.cached;
-    }
-
-    static is(browser: Browser): boolean
-    {
-        return BrowserDetector.detect() === browser;
-    }
-
-    static reset(): void
-    {
-        BrowserDetector.cached = undefined;
-    }
+export enum Browser
+{
+    Chrome = "Chrome",
+    Edge = "Edge",
+    Brave = "Brave",
+    Opera = "Opera",
+    Samsung = "Samsung",
+    Firefox = "Firefox",
+    Safari = "Safari",
+    Unknown = "Unknown",
+}
+
+interface UserAgentBrand
+{
+    brand: string;
+    version: string;
+}
+
+interface UserAgentData
+{
+    brands: UserAgentBrand[];
+    mobile: boolean;
+    platform: string;
+}
+
+export class BrowserDetector
+{
+    private static cached?: Browser;
+
+    private static get userAgentData(): UserAgentData | undefined
+    {
+        if (typeof navigator === "undefined")
+            return undefined;
+        return (navigator as any).userAgentData as UserAgentData | undefined;
+    }
+
+    private static getUserAgent(): string
+    {
+        if (typeof navigator === "undefined")
+            return "";
+        return navigator.userAgent;
+    }
+
+    private static isBrave(): boolean
+    {
+        return typeof navigator !== "undefined" && (navigator as any).brave !== undefined;
+    }
+
+    private static detectFromBrands(brands: UserAgentBrand[]): Browser | undefined
+    {
+        const names = brands.map(entry => entry.brand.toLowerCase());
+        const has = (value: string): boolean => names.some(name => name.includes(value));
+
+        if (BrowserDetector.isBrave())
+            return Browser.Brave;
+        if (has("microsoft edge"))
+            return Browser.Edge;
+        if (has("opera"))
+            return Browser.Opera;
+        if (has("samsung"))
+            return Browser.Samsung;
+        if (has("google chrome") || has("chromium"))
+            return Browser.Chrome;
+
+        return undefined;
+    }
+
+    private static detectFromUserAgent(): Browser
+    {
+        const ua = BrowserDetector.getUserAgent();
+
+        if (BrowserDetector.isBrave())
+            return Browser.Brave;
+        if (ua.includes("Edg/"))
+            return Browser.Edge;
+        if (ua.includes("OPR/") || ua.includes("Opera/"))
+            return Browser.Opera;
+        if (ua.includes("SamsungBrowser/"))
+            return Browser.Samsung;
+        if (ua.includes("Firefox/"))
+            return Browser.Firefox;
+        if (ua.includes("Chrome/"))
+            return Browser.Chrome;
+        if (ua.includes("Safari/"))
+            return Browser.Safari;
+
+        return Browser.Unknown;
+    }
+
+    static detect(): Browser
+    {
+        if (BrowserDetector.cached)
+            return BrowserDetector.cached;
+
+        const data = BrowserDetector.userAgentData;
+        const detected = data ? BrowserDetector.detectFromBrands(data.brands) : undefined;
+        BrowserDetector.cached = detected ?? BrowserDetector.detectFromUserAgent();
+        return BrowserDetector.cached;
+    }
+
+    static is(browser: Browser): boolean
+    {
+        return BrowserDetector.detect() === browser;
+    }
+
+    static reset(): void
+    {
+        BrowserDetector.cached = undefined;
+    }
 }

package/src/Color.tsx

@@ -1,11 +1,11 @@
-export class Color
-{
-    static getColor(percentage: number): string
-    {
-        if (percentage >= 75) return '#368F01';
-        if (percentage >= 60) return ' #44B400';
-        if (percentage >= 50) return '#56E500';
-        if (percentage >= 25) return '#FAFF00';
-        return 'red';
-    }
+export class Color
+{
+    static getColor(percentage: number): string
+    {
+        if (percentage >= 75) return '#368F01';
+        if (percentage >= 60) return ' #44B400';
+        if (percentage >= 50) return '#56E500';
+        if (percentage >= 25) return '#FAFF00';
+        return 'red';
+    }
 }

package/src/CopyToClipboard.ts

@@ -1,7 +1,7 @@
-export class CopyToClipboard
-{
-    static copyToClipboard(value: string): void
-    {
-        navigator.clipboard.writeText(value);
-    }
+export class CopyToClipboard
+{
+    static copyToClipboard(value: string): void
+    {
+        navigator.clipboard.writeText(value);
+    }
 };