namirasoft-account-react 1.3.162 → 1.3.164

package/dist/App.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import NSAProductListModal from "./components/NSAProductListModal";
 export function App() {
-    return (_jsx("div", {}));
+    return (_jsx("div", { children: _jsx(NSAProductListModal, { onClose: () => { } }) }));
 }
 ;
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,eACM,CACT,CAAC;AACN,CAAC;AAAA,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AAEnE,MAAM,UAAU,GAAG;IAEf,OAAO,CACH,wBACI,KAAC,mBAAmB,IAAC,OAAO,EAAE,GAAE,EAAE,GAAC,CAAC,GAAG,GACrC,CACT,CAAC;AACN,CAAC;AAAA,CAAC"}

package/dist/components/NSAProductListModal.d.ts

@@ -1,5 +1,5 @@
-import { ProductFullRow } from 'namirasoft-api-product';
 import { Component } from 'react';
+import { ProductFullRow } from 'namirasoft-api-product';
 export interface NSAProductListProps {
     onClose: () => void;
 }
@@ -7,6 +7,7 @@ interface NSAProductListState {
     products: ProductFullRow[];
 }
 export declare class NSAProductListModal extends Component<NSAProductListProps, NSAProductListState> {
+    private toastRef;
     constructor(props: NSAProductListProps);
     componentWillUnmount(): void;
     private onClickOutside;

package/dist/components/NSAProductListModal.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component, createRef } from 'react';
 import { NSBoxString } from 'namirasoft-site-react';
 import Styles from './NSAProductListModal.module.css';
 import { NamirasoftAPIProductServer } from 'namirasoft-api-product';
 import { useEffect, useState } from 'react';
-import { Component } from 'react';
 function ProductName() {
     const [state, setState] = useState({ products: [] });
     useEffect(() => {
@@ -17,17 +17,19 @@ function ProductName() {
 export class NSAProductListModal extends Component {
     constructor(props) {
         super(props);
+        this.toastRef = createRef();
         this.onClickOutside = this.onClickOutside.bind(this);
     }
     componentWillUnmount() {
         document.removeEventListener('mousedown', this.onClickOutside);
     }
     onClickOutside(event) {
-        console.log(event);
-        this.props.onClose();
+        debugger;
+        if (this.toastRef.current && !this.toastRef.current.contains(event.target))
+            this.props.onClose();
     }
     render() {
-        return (_jsx("div", { className: Styles.nsa_product_container, children: _jsxs("div", { className: Styles.nsa_product_group, children: [_jsx(NSBoxString, { title: 'Search', onClicked: () => { }, required: false }), _jsx(ProductName, {})] }) }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: Styles.nsa_product_container, ref: this.toastRef, children: _jsxs("div", { className: Styles.nsa_product_group, children: [_jsx(NSBoxString, { title: 'Search', onClicked: () => { }, required: false }), _jsx(ProductName, {})] }) }), _jsx("div", { className: Styles.nsa_toast_background })] }));
     }
 }
 export default NSAProductListModal;

package/dist/components/NSAProductListModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSAProductListModal.js","sourceRoot":"","sources":["../../src/components/NSAProductListModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAkB,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlC,SAAS,WAAW;IAEhB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QAEX,IAAI,MAAM,GAAG,IAAI,0BAA0B,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YAEpD,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAEtC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACnC,cAAK,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAC,gBAAgB,GAAG,EACxF,wBAEI,uBAAK,SAAS,GAAM,GAClB,IACJ,CACT,CAAC,GAEJ,CACT,CAAA;AACL,CAAC;AACD,MAAM,OAAO,mBAAoB,SAAQ,SAAmD;IAExF,YAAY,KAA0B;QAElC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IACQ,oBAAoB;QAEzB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACnE,CAAC;IACO,cAAc,CAAC,KAAiB;QAEpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAEd,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;IACQ,MAAM;QAEf,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,YACxC,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,aACpC,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,EACrE,KAAC,WAAW,KAAG,IACb,GACJ,CACL,CAAC;IACN,CAAC;CACJ;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"NSAProductListModal.js","sourceRoot":"","sources":["../../src/components/NSAProductListModal.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAkB,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAW5C,SAAS,WAAW;IAEhB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QAEX,IAAI,MAAM,GAAG,IAAI,0BAA0B,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YAEpD,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAEtC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACnC,cAAK,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAC,gBAAgB,GAAG,EACxF,wBAEI,uBAAK,SAAS,GAAM,GAClB,IACJ,CACT,CAAC,GAEJ,CACT,CAAA;AACL,CAAC;AACD,MAAM,OAAO,mBAAoB,SAAQ,SAAmD;IAGxF,YAAY,KAA0B;QAElC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,QAAQ,GAAG,SAAS,EAAE,CAAC;QAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IACQ,oBAAoB;QAEzB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACnE,CAAC;IACO,cAAc,CAAC,KAAiB;QAEpC,QAAQ,CAAA;QACR,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAC9E,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC7B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,8BACI,cAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,YAC5D,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,aACpC,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,EACrE,KAAC,WAAW,KAAG,IACb,GACJ,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,GACrC,IACP,CACN,CAAC;IACN,CAAC;CACJ;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/NSAProductListModal.module.css

@@ -1,8 +1,12 @@
 .nsa_product_container {
-    display: flex;
     flex-direction: column;
     justify-content: left;
     align-items: flex-start;
+    position: fixed;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .nsa_product_group {
@@ -11,12 +15,12 @@
     align-items: center;
     gap: 16px;
     border: 8px solid rgb(233, 232, 232);
-    margin: 48px;
     width: 350px;
     border-radius: 24px;
     height: 450px;
     overflow: auto;
     padding: 16px 0;
+    background: #fff;
 }
 
 .nsa_product_list {
@@ -43,4 +47,17 @@
     text-align: center;
     cursor: default;
     padding-left: 8px;
+}
+
+.nsa_toast_background {
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000059;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: auto;
 }

package/package.json

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

package/src/App.tsx

@@ -1,7 +1,10 @@
+import NSAProductListModal from "./components/NSAProductListModal";
+
 export function App()  
 {
     return (
         <div>
+            <NSAProductListModal onClose={()=>{}}/>
         </div>
     );
 };

package/src/components/NSAProductListModal.module.css

@@ -1,8 +1,12 @@
 .nsa_product_container {
-    display: flex;
     flex-direction: column;
     justify-content: left;
     align-items: flex-start;
+    position: fixed;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .nsa_product_group {
@@ -11,12 +15,12 @@
     align-items: center;
     gap: 16px;
     border: 8px solid rgb(233, 232, 232);
-    margin: 48px;
     width: 350px;
     border-radius: 24px;
     height: 450px;
     overflow: auto;
     padding: 16px 0;
+    background: #fff;
 }
 
 .nsa_product_list {
@@ -43,4 +47,17 @@
     text-align: center;
     cursor: default;
     padding-left: 8px;
+}
+
+.nsa_toast_background {
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000059;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: auto;
 }

package/src/components/NSAProductListModal.tsx

@@ -1,9 +1,9 @@
+import React, { Component, createRef } from 'react';
 import { NSBoxString } from 'namirasoft-site-react';
 import Styles from './NSAProductListModal.module.css';
 import { NamirasoftAPIProductServer, ProductFullRow } from 'namirasoft-api-product';
 import { useEffect, useState } from 'react';
 
-import { Component } from 'react';
 export interface NSAProductListProps 
 {
     onClose: () => void;
@@ -45,9 +45,11 @@ function ProductName()
 }
 export class NSAProductListModal extends Component<NSAProductListProps, NSAProductListState>
 {
+    private toastRef: React.RefObject<HTMLDivElement>;
     constructor(props: NSAProductListProps)
     {
         super(props);
+        this.toastRef = createRef();
         this.onClickOutside = this.onClickOutside.bind(this);
     }
     override componentWillUnmount(): void
@@ -56,19 +58,23 @@ export class NSAProductListModal extends Component<NSAProductListProps, NSAProdu
     }
     private onClickOutside(event: MouseEvent)
     {
-        console.log(event)
-        // if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+        debugger
+        if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
             this.props.onClose();
     }
     override render()
     {
-    return (
-        <div className={Styles.nsa_product_container}>
-            <div className={Styles.nsa_product_group}>
-                <NSBoxString title='Search' onClicked={() => { }} required={false} />
-                <ProductName />
-            </div>
-        </div>
+        return (
+            <>
+                <div className={Styles.nsa_product_container} ref={this.toastRef}>
+                    <div className={Styles.nsa_product_group}>
+                        <NSBoxString title='Search' onClicked={() => { }} required={false} />
+                        <ProductName />
+                    </div>
+                </div>
+                <div className={Styles.nsa_toast_background}>
+                </div>
+            </>
         );
     }
 }