namirasoft-site-react 1.3.404 → 1.3.405

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.d.ts CHANGED
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
17
17
  export * from "./components/NSBoxIPV4";
18
18
  export * from "./components/NSBoxIPV6";
19
19
  export * from "./components/NSBoxLabel";
20
- export * from "./components/NSBoxOTP";
21
20
  export * from "./components/NSBoxPassword";
22
21
  export * from "./components/NSBoxPhone";
23
22
  export * from "./components/NSBoxPrice";
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
66
65
  export * from "./components/NSTag";
67
66
  export * from "./components/NSTabPage";
68
67
  export * from "./components/NSTitle";
69
- export * from "./components/NSVerification";
70
68
  export * from "./formatter/BackColorFormatter";
71
69
  export * from "./formatter/BaseColumnFormatter";
72
70
  export * from "./formatter/BooleanFormatter";
package/dist/main.js CHANGED
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
17
17
  export * from "./components/NSBoxIPV4";
18
18
  export * from "./components/NSBoxIPV6";
19
19
  export * from "./components/NSBoxLabel";
20
- export * from "./components/NSBoxOTP";
21
20
  export * from "./components/NSBoxPassword";
22
21
  export * from "./components/NSBoxPhone";
23
22
  export * from "./components/NSBoxPrice";
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
66
65
  export * from "./components/NSTag";
67
66
  export * from "./components/NSTabPage";
68
67
  export * from "./components/NSTitle";
69
- export * from "./components/NSVerification";
70
68
  export * from "./formatter/BackColorFormatter";
71
69
  export * from "./formatter/BaseColumnFormatter";
72
70
  export * from "./formatter/BooleanFormatter";
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.404",
11
+ "version": "1.3.405",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
package/src/main.ts CHANGED
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
17
17
  export * from "./components/NSBoxIPV4";
18
18
  export * from "./components/NSBoxIPV6";
19
19
  export * from "./components/NSBoxLabel";
20
- export * from "./components/NSBoxOTP";
21
20
  export * from "./components/NSBoxPassword";
22
21
  export * from "./components/NSBoxPhone";
23
22
  export * from "./components/NSBoxPrice";
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
66
65
  export * from "./components/NSTag";
67
66
  export * from "./components/NSTabPage";
68
67
  export * from "./components/NSTitle";
69
- export * from "./components/NSVerification";
70
68
  export * from "./formatter/BackColorFormatter";
71
69
  export * from "./formatter/BaseColumnFormatter";
72
70
  export * from "./formatter/BooleanFormatter";
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { IBaseComponentProps } from '../props/IBaseComponentProps';
3
- interface INSBoxOTPProps extends IBaseComponentProps {
4
- placeholder?: string;
5
- defaultValue?: string;
6
- onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
7
- }
8
- export declare function NSBoxOTP(props: INSBoxOTPProps): import("react/jsx-runtime").JSX.Element;
9
- export {};
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useState, useRef } from 'react';
3
- import Styles from './NSBoxOTP.module.css';
4
- export function NSBoxOTP(props) {
5
- var _a;
6
- let [state, setState] = useState("");
7
- const [values, setValues] = useState(Array(6).fill(''));
8
- const inputsRef = useRef([]);
9
- const handleChange = (index) => (event) => {
10
- var _a;
11
- const newValue = event.target.value;
12
- setState(state + newValue);
13
- if (/^\d?$/.test(newValue)) {
14
- const updatedValues = [...values];
15
- updatedValues[index] = newValue;
16
- setValues(updatedValues);
17
- if (newValue && index < 5) {
18
- (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
19
- }
20
- }
21
- if (props.onChanged)
22
- props.onChanged(event);
23
- };
24
- const handleKeyDown = (index) => (event) => {
25
- var _a;
26
- if (event.key === 'Backspace' && !values[index] && index > 0) {
27
- (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
28
- }
29
- };
30
- return (_jsx("div", { id: props.id, className: `${Styles.ns_input_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: Object.assign(Object.assign({}, props.style), { display: 'flex', gap: '10px' }), children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index + 10))) }));
31
- }
32
- ;
33
- //# sourceMappingURL=NSBoxOTP.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAS1C,MAAM,UAAU,QAAQ,CAAC,KAAqB;;IAE1C,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAE7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAA;QAC1B,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC1B;YACI,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EACzB;gBACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;QACD,IAAI,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QAEtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAC5D;YACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,kCAAO,KAAK,CAAC,KAAK,KAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,eAEtI,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,GAAG,EAAE,CASjB,CACL,CAAC,GAEH,CACV,CAAC;AACN,CAAC;AAAA,CAAC"}
@@ -1,11 +0,0 @@
1
- .ns_otp_input{
2
- border: none;
3
- background-color: transparent;
4
- border-bottom: 2px solid #141B5C;
5
- }
6
-
7
- .ns_otp_input:focus{
8
- border: none;
9
- outline: none;
10
- border-bottom: 2px solid #141B5C;
11
- }
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- import { IBaseComponentProps } from '../props/IBaseComponentProps';
3
- import { IImageProps } from '../props/IImageProps';
4
- interface INSVerificationProps extends IBaseComponentProps {
5
- verificationType: string;
6
- onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
7
- image?: IImageProps;
8
- }
9
- export declare function NSVerification(props: INSVerificationProps): import("react/jsx-runtime").JSX.Element;
10
- export {};
@@ -1,18 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from "react";
3
- import { NSBoxOTP } from './NSBoxOTP';
4
- import Styles from './NSVerification.module.css';
5
- import vector from '../assets/images/verify.png';
6
- export function NSVerification(props) {
7
- var _a, _b, _c, _d, _e;
8
- const [values, setValue] = useState('');
9
- function onChanged(event) {
10
- setValue(prevValues => [...prevValues, event.target.value].join(''));
11
- if (props.onChanged)
12
- props.onChanged(event);
13
- console.log(values);
14
- return (values);
15
- }
16
- return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, { onChanged: onChanged })] }));
17
- }
18
- //# sourceMappingURL=NSVerification.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IACrD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE/C,SAAS,SAAS,CAAC,KAA0C;QAE/D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,EAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,KAAK,CAAC,SAAS;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IACE,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,GAAG,IAC/B,CACT,CAAC;AACN,CAAC"}
@@ -1,23 +0,0 @@
1
- .ns_verification_container {
2
- background-color: #FFF;
3
- border: 1px solid #A1A4B0;
4
- backdrop-filter: blur(5px);
5
- border-radius: 8px;
6
- width: 100%;
7
- max-width: 594px;
8
- padding: 16px;
9
- color: #141B5C !important;
10
- display: flex;
11
- flex-direction: column;
12
- gap: 16px;
13
- align-items: center;
14
- }
15
-
16
- .ns_verification_container p{
17
- text-align: center;
18
- }
19
-
20
- .ns_verification_vector{
21
- width: 224px;
22
- height: 224px;
23
- }
@@ -1,11 +0,0 @@
1
- .ns_otp_input{
2
- border: none;
3
- background-color: transparent;
4
- border-bottom: 2px solid #141B5C;
5
- }
6
-
7
- .ns_otp_input:focus{
8
- border: none;
9
- outline: none;
10
- border-bottom: 2px solid #141B5C;
11
- }
@@ -1,64 +0,0 @@
1
- import React, { useState, ChangeEvent, useRef } from 'react';
2
- import { IBaseComponentProps } from '../props/IBaseComponentProps';
3
- import Styles from './NSBoxOTP.module.css'
4
-
5
- interface INSBoxOTPProps extends IBaseComponentProps
6
- {
7
- placeholder?: string;
8
- defaultValue?: string;
9
- onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
10
- }
11
-
12
- export function NSBoxOTP(props: INSBoxOTPProps)
13
- {
14
- let [state, setState] = useState("");
15
-
16
- const [values, setValues] = useState<string[]>(Array(6).fill(''));
17
- const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
18
-
19
- const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
20
- {
21
- const newValue = event.target.value;
22
- setState(state + newValue)
23
- if (/^\d?$/.test(newValue))
24
- {
25
- const updatedValues = [...values];
26
- updatedValues[index] = newValue;
27
- setValues(updatedValues);
28
- if (newValue && index < 5)
29
- {
30
- inputsRef.current[index + 1]?.focus();
31
- }
32
- }
33
- if (props.onChanged)
34
- props.onChanged(event);
35
- };
36
-
37
- const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
38
- {
39
- if (event.key === 'Backspace' && !values[index] && index > 0)
40
- {
41
- inputsRef.current[index - 1]?.focus();
42
- }
43
- };
44
-
45
- return (
46
- <div id={props.id} className={`${Styles.ns_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
47
- {
48
- values.map((value, index) => (
49
- <input
50
- key={index + 10}
51
- ref={el => inputsRef.current[index] = el}
52
- type="text"
53
- value={value}
54
- onChange={handleChange(index)}
55
- onKeyDown={handleKeyDown(index)}
56
- maxLength={1}
57
- style={{ width: '30px', textAlign: 'center' }}
58
- className={Styles.ns_otp_input}
59
- />
60
- ))
61
- }
62
- </div >
63
- );
64
- };
@@ -1,23 +0,0 @@
1
- .ns_verification_container {
2
- background-color: #FFF;
3
- border: 1px solid #A1A4B0;
4
- backdrop-filter: blur(5px);
5
- border-radius: 8px;
6
- width: 100%;
7
- max-width: 594px;
8
- padding: 16px;
9
- color: #141B5C !important;
10
- display: flex;
11
- flex-direction: column;
12
- gap: 16px;
13
- align-items: center;
14
- }
15
-
16
- .ns_verification_container p{
17
- text-align: center;
18
- }
19
-
20
- .ns_verification_vector{
21
- width: 224px;
22
- height: 224px;
23
- }
@@ -1,41 +0,0 @@
1
- import React, { useState } from "react";
2
- import { IBaseComponentProps } from '../props/IBaseComponentProps';
3
- import { IImageProps } from '../props/IImageProps';
4
- import { NSBoxOTP } from './NSBoxOTP';
5
- import Styles from './NSVerification.module.css'
6
- import vector from '../assets/images/verify.png'
7
-
8
- interface INSVerificationProps extends IBaseComponentProps {
9
- verificationType : string;
10
- onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
11
- image ?: IImageProps;
12
- }
13
-
14
-
15
-
16
- export function NSVerification(props:INSVerificationProps) {
17
- const [values, setValue] = useState<string>('')
18
-
19
- function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
20
- {
21
- setValue(prevValues => [...prevValues , event.target.value].join(''));
22
- if (props.onChanged)
23
- props.onChanged(event);
24
- console.log(values);
25
- return (values);
26
- }
27
- return (
28
- <div
29
- className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
30
- style={props.style}
31
- >
32
- <img
33
- src={props.image?.src ?? vector}
34
- alt={props.image?.alt ?? 'verification vector'}
35
- className={Styles.ns_verification_vector}
36
- />
37
- <p>Please enter code sent to {props.verificationType}</p>
38
- <NSBoxOTP onChanged={onChanged}/>
39
- </div>
40
- );
41
- }