namirasoft-site-react 1.3.396 → 1.3.398

package/src/components/NSPanel.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react";
-import Styles from './NSPanel.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSPanelProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    grid: boolean;
-}
-export function NSPanel(props: NSPanelProps)
-{
-    return (
-        <section id={props.id}
-            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
-            style={props.style}
-        >
-            {props.children}
-        </section>
-    );
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSPanelProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    grid: boolean;
+}
+export function NSPanel(props: NSPanelProps)
+{
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSProductList.tsx

@@ -1,41 +1,41 @@
-import { NSCard } from "../main";
-import { useState, useEffect } from "react";
-import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
-
-export interface NSProductListProps
-{
-    scope: string;
-    name: string;
-}
-
-interface NSProductListState
-{
-    products: ProductFullRow[];
-}
-
-export function NSProductList(props: NSProductListProps)
-{
-    const [state, setState] = useState<NSProductListState>({ products: [] });
-
-    useEffect(() =>
-    {
-        let server = new NamirasoftAPIProductServer(console.error);
-        server.filter.ListProducts(props.scope, props.name, null, null, null).then((products) =>
-        {
-            setState({ products: products.rows });
-        }).catch(() => { });
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps 
-    }, []);
-
-    return (
-        <div className="d-flex gap-3 flex-wrap justify-content-between container">
-            {state.products.map((product: ProductFullRow) =>
-            {
-                return (
-                    <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
-                );
-            })}
-        </div>
-    );
+import { NSCard } from "../main";
+import { useState, useEffect } from "react";
+import { NamirasoftAPIProductServer, ProductFullRow } from "namirasoft-api-product";
+
+export interface NSProductListProps
+{
+    scope: string;
+    name: string;
+}
+
+interface NSProductListState
+{
+    products: ProductFullRow[];
+}
+
+export function NSProductList(props: NSProductListProps)
+{
+    const [state, setState] = useState<NSProductListState>({ products: [] });
+
+    useEffect(() =>
+    {
+        let server = new NamirasoftAPIProductServer(console.error);
+        server.filter.ListProducts(props.scope, props.name, null, null, null).then((products) =>
+        {
+            setState({ products: products.rows });
+        }).catch(() => { });
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps 
+    }, []);
+
+    return (
+        <div className="d-flex gap-3 flex-wrap justify-content-between container">
+            {state.products.map((product: ProductFullRow) =>
+            {
+                return (
+                    <NSCard key={product.id} link={{ href: product.link ?? "" }} title={product.name} image={{ src: product.logo ?? '', alt: product.name }} />
+                );
+            })}
+        </div>
+    );
 }

package/src/components/NSRadioButton.module.css

@@ -1,65 +1,65 @@
-.ns_input_parent {
-    display: flex;
-    flex-direction: column;
-    width: fit-content;
-    color: #141B5C;
-    position: relative;
-    justify-content: center;
-    max-width: 272px;
-    width: 100%;
-    border: 1px solid rgba(0, 0, 0, 1) !important;
-    background-color: #fff;
-    border-radius: 8px;
-}
-
-.ns_input_title {
-    font-size: 16px;
-    font-weight: 400;
-    margin-bottom: 2px;
-}
-
-.ns_checkbox_parent {
-    padding: 10px 12px 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    height: 48px;
-    gap: 5px;
-}
-
-.ns_input {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-}
-
-.ns_input:checked {
-    accent-color: #141B5C;
-}
-
-.ns_checkbox_parent label {
-    cursor: pointer;
-    color: #141B5C;
-    font-size: 16px;
-    font-weight: 300;
-    font-family: inherit;
-}
-
-@media only screen and (min-width: 380px) {
-    .ns_checkbox_parent {
-        width: 100%;
-    }
-}
-
-.ns_input_transparent {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: transparent;
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    color: #141B5C;
+    position: relative;
+    justify-content: center;
+    max-width: 272px;
+    width: 100%;
+    border: 1px solid rgba(0, 0, 0, 1) !important;
+    background-color: #fff;
+    border-radius: 8px;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 2px;
+}
+
+.ns_checkbox_parent {
+    padding: 10px 12px 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    height: 48px;
+    gap: 5px;
+}
+
+.ns_input {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.ns_input:checked {
+    accent-color: #141B5C;
+}
+
+.ns_checkbox_parent label {
+    cursor: pointer;
+    color: #141B5C;
+    font-size: 16px;
+    font-weight: 300;
+    font-family: inherit;
+}
+
+@media only screen and (min-width: 380px) {
+    .ns_checkbox_parent {
+        width: 100%;
+    }
+}
+
+.ns_input_transparent {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: transparent;
 }

package/src/components/NSRadioButton.tsx

@@ -1,105 +1,105 @@
-import React from "react";
-import Styles from "./NSRadioButton.module.css";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { IValidationStringProps } from "../props/IValidationStringProps";
-import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-
-export interface INSRadioButtonProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
-{
-    title: string;
-    placeholder?: string;
-    defaultValue?: boolean;
-    isSelected?: boolean;
-    onChanged?: (e: NSRadioButton) => void;
-    onClick?: () => void;
-}
-
-export interface INSBoxBooleanState
-{
-    value: boolean;
-    error?: string;
-}
-
-export class NSRadioButton extends React.Component<INSRadioButtonProps, INSBoxBooleanState>
-{
-    constructor(props: INSRadioButtonProps)
-    {
-        super(props);
-        this.state = { value: props.defaultValue ?? false };
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.onClicked = this.onClicked.bind(this);
-    }
-
-    getError(): string | null
-    {
-        return null;
-    }
-
-    getValue(checkError: boolean = true): boolean
-    {
-        if (checkError)
-        {
-            let error = this.getError();
-            if (error)
-            {
-                this.setState({ error });
-                throw new Error(error);
-            }
-        }
-        return this.state.value;
-    }
-
-    setValue(value: boolean): void
-    {
-        this.setState({ value }, () =>
-        {
-            if (this.props.onChanged)
-                this.props.onChanged(this);
-        });
-    }
-
-    private onClicked(): void
-    {
-        this.setValue(true);
-        if (this.props.onClick)
-            this.props.onClick();
-    }
-
-    override componentDidUpdate(prevProps: INSRadioButtonProps)
-    {
-        if (prevProps.isSelected !== this.props.isSelected)
-        {
-            this.setValue(this.props.isSelected ?? false);
-        }
-    }
-
-    override render()
-    {
-        return (
-            <>
-                <div
-                    id={this.props.id}
-                    className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`}
-                    style={this.props.style}
-                >
-                    <div className={Styles.ns_input_transparent} onClick={this.onClicked}></div>
-                    <div className={Styles.ns_checkbox_parent} >
-                        <input
-                            type="radio"
-                            name={this.props.name}
-                            className={Styles.ns_input}
-                            checked={this.state.value}
-                            onChange={() => { }}
-                        />
-                        <span className={Styles.ns_input_title}>
-                            {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title}
-                        </span>
-                    </div>
-                </div>
-                <NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
-            </>
-        );
-    }
+import React from "react";
+import Styles from "./NSRadioButton.module.css";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { IValidationStringProps } from "../props/IValidationStringProps";
+import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
+
+export interface INSRadioButtonProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
+{
+    title: string;
+    placeholder?: string;
+    defaultValue?: boolean;
+    isSelected?: boolean;
+    onChanged?: (e: NSRadioButton) => void;
+    onClick?: () => void;
+}
+
+export interface INSBoxBooleanState
+{
+    value: boolean;
+    error?: string;
+}
+
+export class NSRadioButton extends React.Component<INSRadioButtonProps, INSBoxBooleanState>
+{
+    constructor(props: INSRadioButtonProps)
+    {
+        super(props);
+        this.state = { value: props.defaultValue ?? false };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onClicked = this.onClicked.bind(this);
+    }
+
+    getError(): string | null
+    {
+        return null;
+    }
+
+    getValue(checkError: boolean = true): boolean
+    {
+        if (checkError)
+        {
+            let error = this.getError();
+            if (error)
+            {
+                this.setState({ error });
+                throw new Error(error);
+            }
+        }
+        return this.state.value;
+    }
+
+    setValue(value: boolean): void
+    {
+        this.setState({ value }, () =>
+        {
+            if (this.props.onChanged)
+                this.props.onChanged(this);
+        });
+    }
+
+    private onClicked(): void
+    {
+        this.setValue(true);
+        if (this.props.onClick)
+            this.props.onClick();
+    }
+
+    override componentDidUpdate(prevProps: INSRadioButtonProps)
+    {
+        if (prevProps.isSelected !== this.props.isSelected)
+        {
+            this.setValue(this.props.isSelected ?? false);
+        }
+    }
+
+    override render()
+    {
+        return (
+            <>
+                <div
+                    id={this.props.id}
+                    className={`${Styles.ns_input_parent} ${this.props.classList?.join(" ")}`}
+                    style={this.props.style}
+                >
+                    <div className={Styles.ns_input_transparent} onClick={this.onClicked}></div>
+                    <div className={Styles.ns_checkbox_parent} >
+                        <input
+                            type="radio"
+                            name={this.props.name}
+                            className={Styles.ns_input}
+                            checked={this.state.value}
+                            onChange={() => { }}
+                        />
+                        <span className={Styles.ns_input_title}>
+                            {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title}
+                        </span>
+                    </div>
+                </div>
+                <NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
+            </>
+        );
+    }
 }