namirasoft-site-react 1.3.199 → 1.3.200
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/App.js +2 -1
- package/dist/App.js.map +1 -1
- package/dist/components/NSBoxOTP.js +2 -0
- package/dist/components/NSBoxOTP.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +3 -1
- package/src/components/NSBoxOTP.tsx +17 -8
package/dist/App.js
CHANGED
|
@@ -3,6 +3,7 @@ import './App.css';
|
|
|
3
3
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
4
4
|
import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout, NSTabPage } from './main';
|
|
5
5
|
import { NSBoxLabel } from './components/NSBoxLabel';
|
|
6
|
+
import NSBoxOTP from './components/NSBoxOTP';
|
|
6
7
|
export function App() {
|
|
7
8
|
const onClicked = () => {
|
|
8
9
|
console.log("clicked");
|
|
@@ -27,6 +28,6 @@ export function App() {
|
|
|
27
28
|
return (_jsx(_Fragment, { children: _jsx(NSLayout, { header: {
|
|
28
29
|
title: "any",
|
|
29
30
|
icons: icons
|
|
30
|
-
}, scope: "Namirasoft Account Console", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true }), _jsx(NSBoxString, { title: 'test', required: true }), _jsx(NSBoxText, { title: 'test', required: true }), _jsx(NSBoxTextArea, { title: 'test', required: true }), _jsx(NSBoxLabel, { title: "URL", children: _jsx("p", { style: { color: "#000" }, children: "http://URL.com" }) }), _jsx(NSTabPage, { tabs: tabs })] }) }) }));
|
|
31
|
+
}, scope: "Namirasoft Account Console", logo: "exampleLogoUrl", notifications: [], background: "", children: _jsxs(_Fragment, { children: [_jsx(NSBoxEmail, { title: 'test', required: true }), _jsx(NSBoxPhone, { title: 'test', required: true }), _jsx(NSBoxString, { title: 'test', required: true }), _jsx(NSBoxText, { title: 'test', required: true }), _jsx(NSBoxTextArea, { title: 'test', required: true }), _jsx(NSBoxLabel, { title: "URL", children: _jsx("p", { style: { color: "#000" }, children: "http://URL.com" }) }), _jsx(NSTabPage, { tabs: tabs }), _jsx(NSBoxOTP, {})] }) }) }));
|
|
31
32
|
}
|
|
32
33
|
//# sourceMappingURL=App.js.map
|
package/dist/App.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5G,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,11 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState, useRef } from 'react';
|
|
3
3
|
import Styles from './NSBoxOTP.module.css';
|
|
4
4
|
function NSBoxOTP(props) {
|
|
5
|
+
let [state, setState] = useState("");
|
|
5
6
|
const [values, setValues] = useState(Array(6).fill(''));
|
|
6
7
|
const inputsRef = useRef([]);
|
|
7
8
|
const handleChange = (index) => (event) => {
|
|
8
9
|
var _a;
|
|
9
10
|
const newValue = event.target.value;
|
|
11
|
+
setState(state + newValue);
|
|
10
12
|
if (/^\d?$/.test(newValue)) {
|
|
11
13
|
const updatedValues = [...values];
|
|
12
14
|
updatedValues[index] = newValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAQ1C,SAAS,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAQ1C,SAAS,QAAQ,CAAC,KAAqB;IAEnC,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,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YACvC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,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,GACA,CACT,CAAC;AACN,CAAC;AAAA,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import './App.css';
|
|
|
2
2
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
3
3
|
import { NSBoxEmail, NSBoxPhone, NSBoxString, NSBoxText, NSBoxTextArea, NSLayout, NSTabPage } from './main';
|
|
4
4
|
import { NSBoxLabel } from './components/NSBoxLabel';
|
|
5
|
+
import NSBoxOTP from './components/NSBoxOTP';
|
|
5
6
|
|
|
6
7
|
export function App()
|
|
7
8
|
{
|
|
@@ -21,7 +22,7 @@ export function App()
|
|
|
21
22
|
{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
|
|
22
23
|
];
|
|
23
24
|
let content1 = () => <>
|
|
24
|
-
<NSBoxLabel title="URL"><p style={{color:"#000"}}>http://URL.com</p></NSBoxLabel>
|
|
25
|
+
<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
|
|
25
26
|
<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
|
|
26
27
|
<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
|
|
27
28
|
<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
|
|
@@ -60,6 +61,7 @@ export function App()
|
|
|
60
61
|
<NSBoxTextArea title='test' required={true} />
|
|
61
62
|
<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
|
|
62
63
|
<NSTabPage tabs={tabs} />
|
|
64
|
+
<NSBoxOTP />
|
|
63
65
|
</>
|
|
64
66
|
</NSLayout>
|
|
65
67
|
</>
|
|
@@ -4,29 +4,38 @@ import { IBaseComponentProps } from '../main';
|
|
|
4
4
|
|
|
5
5
|
interface INSBoxOTPProps extends IBaseComponentProps
|
|
6
6
|
{
|
|
7
|
-
onChanged
|
|
7
|
+
onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
function NSBoxOTP(props:INSBoxOTPProps)
|
|
10
|
+
function NSBoxOTP(props: INSBoxOTPProps)
|
|
11
|
+
{
|
|
12
|
+
let [state, setState] = useState("");
|
|
13
|
+
|
|
11
14
|
const [values, setValues] = useState<string[]>(Array(6).fill(''));
|
|
12
15
|
const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
|
|
13
16
|
|
|
14
|
-
const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
|
|
17
|
+
const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
|
|
18
|
+
{
|
|
15
19
|
const newValue = event.target.value;
|
|
16
|
-
|
|
20
|
+
setState(state + newValue)
|
|
21
|
+
if (/^\d?$/.test(newValue))
|
|
22
|
+
{
|
|
17
23
|
const updatedValues = [...values];
|
|
18
24
|
updatedValues[index] = newValue;
|
|
19
25
|
setValues(updatedValues);
|
|
20
|
-
if (newValue && index < 5)
|
|
26
|
+
if (newValue && index < 5)
|
|
27
|
+
{
|
|
21
28
|
inputsRef.current[index + 1]?.focus();
|
|
22
29
|
}
|
|
23
30
|
}
|
|
24
31
|
if (props.onChanged)
|
|
25
|
-
|
|
32
|
+
props.onChanged(event);
|
|
26
33
|
};
|
|
27
34
|
|
|
28
|
-
const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
|
|
29
|
-
|
|
35
|
+
const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
|
|
36
|
+
{
|
|
37
|
+
if (event.key === 'Backspace' && !values[index] && index > 0)
|
|
38
|
+
{
|
|
30
39
|
inputsRef.current[index - 1]?.focus();
|
|
31
40
|
}
|
|
32
41
|
};
|