namirasoft-site-react 1.3.90 → 1.3.91
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 +7 -11
- package/dist/App.js.map +1 -1
- package/dist/components/NSTabPage.js +1 -1
- package/dist/components/NSTabPage.js.map +1 -1
- package/dist/components/NSTabPage.module.css +18 -12
- package/package.json +1 -1
- package/src/App.tsx +7 -11
- package/src/components/NSTabPage.module.css +18 -12
- package/src/components/NSTabPage.tsx +18 -16
package/dist/App.js
CHANGED
|
@@ -1,20 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './App.css';
|
|
3
3
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
4
4
|
import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
|
|
5
5
|
import { useRef } from 'react';
|
|
6
6
|
export function App() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
let c1 = () => _jsxs("p", { children: ["Content for Tab ", f(1)] });
|
|
12
|
-
let c2 = () => _jsxs("p", { children: ["Content for Tab ", f(2)] });
|
|
13
|
-
let c3 = () => _jsxs("p", { children: ["Content for Tab ", f(3)] });
|
|
7
|
+
let content1 = () => _jsx("p", { children: "Content for Tab" });
|
|
8
|
+
let content2 = () => _jsx("p", { children: "Content for Tab" });
|
|
9
|
+
let content3 = () => _jsx("p", { children: "Content for Tab" });
|
|
14
10
|
const tabs = [
|
|
15
|
-
{ title: 'Information', getContent:
|
|
16
|
-
{ title: 'Price History', getContent:
|
|
17
|
-
{ title: 'Price Estimator', getContent:
|
|
11
|
+
{ title: 'Information', getContent: content1 },
|
|
12
|
+
{ title: 'Price History', getContent: content2 },
|
|
13
|
+
{ title: 'Price Estimator', getContent: content3 }
|
|
18
14
|
];
|
|
19
15
|
let columns = {
|
|
20
16
|
"id": "ID",
|
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,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAGlB,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC,0CAAsB,CAAC;IAC5C,MAAM,IAAI,GAAG;QACZ,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE;QAC9C,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE;KAClD,CAAC;IACF,IAAI,OAAO,GAAG;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IACD,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,OAAO,CACN,8BACC,KAAC,QAAQ,IACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,EACxE,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,GACnD,EACF,wBACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAClC,GACG,EACN,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,EACzB,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}
|
|
@@ -4,6 +4,6 @@ import Styles from './NSTabPage.module.css';
|
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
export function NSTabPage(props) {
|
|
6
6
|
const [state, setState] = useState({ activeTabIndex: 0 });
|
|
7
|
-
return (
|
|
7
|
+
return (_jsx("div", { className: `container ${Styles.ns_tab_page}`, children: _jsxs("div", { className: ` ${Styles.ns_tab_page_panel}`, children: [_jsx("ul", { children: props.tabs.map((tab, index) => (_jsx("li", { className: state.activeTabIndex === index ? Styles.active : '', onClick: () => setState({ activeTabIndex: index }), children: tab.title }, index))) }), _jsx("div", { className: Styles.ns_tab_content, children: props.tabs[state.activeTabIndex].getContent() })] }) }));
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=NSTabPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTabPage.js","sourceRoot":"","sources":["../../src/components/NSTabPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAkBjC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;IAE1E,OAAO,CACH,
|
|
1
|
+
{"version":3,"file":"NSTabPage.js","sourceRoot":"","sources":["../../src/components/NSTabPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAkBjC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;IAE1E,OAAO,CACH,cAAK,SAAS,EAAE,aAAa,MAAM,CAAC,WAAW,EAAE,YAC7C,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,EAAE,aAC1C,uBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,aAEI,SAAS,EAAE,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAEjD,GAAG,CAAC,KAAK,IAJL,KAAK,CAKT,CACR,CAAC,GAEL,EACL,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YAChC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,UAAU,EAAE,GAC5C,IACJ,GACJ,CACT,CAAC;AACN,CAAC"}
|
|
@@ -1,36 +1,42 @@
|
|
|
1
|
-
.
|
|
1
|
+
.ns_tab_page_panel {
|
|
2
2
|
border-radius: 8px;
|
|
3
3
|
overflow: hidden;
|
|
4
|
-
background: #
|
|
4
|
+
background: #141B5C;
|
|
5
5
|
padding: 16px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.
|
|
8
|
+
.ns_tab_page_panel ul {
|
|
9
9
|
list-style-type: none;
|
|
10
10
|
margin: 0;
|
|
11
11
|
padding: 0;
|
|
12
12
|
display: flex;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
16
|
-
flex: 1;
|
|
15
|
+
.ns_tab_page_panel li {
|
|
17
16
|
text-align: center;
|
|
18
|
-
padding:
|
|
17
|
+
padding: 14px 16px;
|
|
19
18
|
cursor: pointer;
|
|
20
|
-
|
|
19
|
+
color: #fff;
|
|
20
|
+
font-size: 16px;
|
|
21
|
+
font-weight: 600;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
.
|
|
24
|
+
.ns_tab_page_panel li:last-child {
|
|
24
25
|
border-right: none;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
.
|
|
28
|
-
background-color:
|
|
28
|
+
.ns_tab_page_panel li.active {
|
|
29
|
+
background-color: #fff;
|
|
29
30
|
border-radius: 8px 8px 0 0;
|
|
31
|
+
color: #141B5C;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
.ns_tab_content {
|
|
33
35
|
padding: 16px;
|
|
34
|
-
border-radius: 0
|
|
35
|
-
background-color: #
|
|
36
|
+
border-radius: 0 8px 8px 8px;
|
|
37
|
+
background-color: #fff;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ns_tab_page {
|
|
41
|
+
padding: 0 48px;
|
|
36
42
|
}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -5,18 +5,14 @@ import { useRef } from 'react';
|
|
|
5
5
|
|
|
6
6
|
export function App()
|
|
7
7
|
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
let c1 = () => <p>Content for Tab {f(1)}</p>;
|
|
14
|
-
let c2 = () => <p>Content for Tab {f(2)}</p>;
|
|
15
|
-
let c3 = () => <p>Content for Tab {f(3)}</p>;
|
|
8
|
+
|
|
9
|
+
let content1 = () => <p>Content for Tab</p>;
|
|
10
|
+
let content2 = () => <p>Content for Tab</p>;
|
|
11
|
+
let content3 = () => <p>Content for Tab</p>;
|
|
16
12
|
const tabs = [
|
|
17
|
-
{ title: 'Information', getContent:
|
|
18
|
-
{ title: 'Price History', getContent:
|
|
19
|
-
{ title: 'Price Estimator', getContent:
|
|
13
|
+
{ title: 'Information', getContent: content1 },
|
|
14
|
+
{ title: 'Price History', getContent: content2 },
|
|
15
|
+
{ title: 'Price Estimator', getContent: content3 }
|
|
20
16
|
];
|
|
21
17
|
let columns = {
|
|
22
18
|
"id": "ID",
|
|
@@ -1,36 +1,42 @@
|
|
|
1
|
-
.
|
|
1
|
+
.ns_tab_page_panel {
|
|
2
2
|
border-radius: 8px;
|
|
3
3
|
overflow: hidden;
|
|
4
|
-
background: #
|
|
4
|
+
background: #141B5C;
|
|
5
5
|
padding: 16px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.
|
|
8
|
+
.ns_tab_page_panel ul {
|
|
9
9
|
list-style-type: none;
|
|
10
10
|
margin: 0;
|
|
11
11
|
padding: 0;
|
|
12
12
|
display: flex;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
16
|
-
flex: 1;
|
|
15
|
+
.ns_tab_page_panel li {
|
|
17
16
|
text-align: center;
|
|
18
|
-
padding:
|
|
17
|
+
padding: 14px 16px;
|
|
19
18
|
cursor: pointer;
|
|
20
|
-
|
|
19
|
+
color: #fff;
|
|
20
|
+
font-size: 16px;
|
|
21
|
+
font-weight: 600;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
.
|
|
24
|
+
.ns_tab_page_panel li:last-child {
|
|
24
25
|
border-right: none;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
.
|
|
28
|
-
background-color:
|
|
28
|
+
.ns_tab_page_panel li.active {
|
|
29
|
+
background-color: #fff;
|
|
29
30
|
border-radius: 8px 8px 0 0;
|
|
31
|
+
color: #141B5C;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
.ns_tab_content {
|
|
33
35
|
padding: 16px;
|
|
34
|
-
border-radius: 0
|
|
35
|
-
background-color: #
|
|
36
|
+
border-radius: 0 8px 8px 8px;
|
|
37
|
+
background-color: #fff;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ns_tab_page {
|
|
41
|
+
padding: 0 48px;
|
|
36
42
|
}
|
|
@@ -24,22 +24,24 @@ export function NSTabPage(props: NSTabPageProps)
|
|
|
24
24
|
const [state, setState] = useState<NSTabPageState>({ activeTabIndex: 0 });
|
|
25
25
|
|
|
26
26
|
return (
|
|
27
|
-
<div className={`container ${Styles.
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{
|
|
27
|
+
<div className={`container ${Styles.ns_tab_page}`}>
|
|
28
|
+
<div className={` ${Styles.ns_tab_page_panel}`}>
|
|
29
|
+
<ul>
|
|
30
|
+
{
|
|
31
|
+
props.tabs.map((tab, index) => (
|
|
32
|
+
<li
|
|
33
|
+
key={index}
|
|
34
|
+
className={state.activeTabIndex === index ? Styles.active : ''}
|
|
35
|
+
onClick={() => setState({ activeTabIndex: index })}
|
|
36
|
+
>
|
|
37
|
+
{tab.title}
|
|
38
|
+
</li>
|
|
39
|
+
))
|
|
40
|
+
}
|
|
41
|
+
</ul>
|
|
42
|
+
<div className={Styles.ns_tab_content}>
|
|
43
|
+
{props.tabs[state.activeTabIndex].getContent()}
|
|
44
|
+
</div>
|
|
43
45
|
</div>
|
|
44
46
|
</div>
|
|
45
47
|
);
|