namirasoft-site-react 1.4.48 → 1.4.49

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.
Files changed (5) hide show
  1. package/dist/components/NSTabPage.d.ts +1 -0
  2. package/dist/components/NSTabPage.js +10 -3
  3. package/dist/components/NSTabPage.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/NSTabPage.tsx +52 -33
package/dist/components/NSTabPage.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface NSTabPageProps extends IBaseComponentProps {
10
10
  }
11
11
  export interface NSTabPageState {
12
12
  activeTabIndex: number;
13
+ isClicked: boolean[];
13
14
  }
14
15
  export declare class NSTabPage extends Component<NSTabPageProps, NSTabPageState> {
15
16
  constructor(props: NSTabPageProps);
package/dist/components/NSTabPage.js CHANGED
@@ -1,14 +1,21 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import Styles from './NSTabPage.module.css';
4
4
  import { Component } from "react";
5
5
  export class NSTabPage extends Component {
6
6
  constructor(props) {
7
7
  super(props);
8
- this.state = { activeTabIndex: 0 };
8
+ this.state = {
9
+ activeTabIndex: 0,
10
+ isClicked: [true]
11
+ };
9
12
  }
10
13
  render() {
11
- return (_jsxs("div", { className: ` ${Styles.ns_tab_page_panel} ${this.props.classList}`, style: this.props.style, children: [_jsx("ul", { children: this.props.tabs.map((tab, index) => (_jsx("li", { className: this.state.activeTabIndex === index ? Styles.active : '', onClick: () => this.setState({ activeTabIndex: index }), children: tab.title }, index))) }), _jsx("div", { className: this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column, children: this.props.tabs[this.state.activeTabIndex].getContent() })] }));
14
+ return (_jsxs("div", { className: ` ${Styles.ns_tab_page_panel} ${this.props.classList}`, style: this.props.style, children: [_jsx("ul", { children: this.props.tabs.map((tab, index) => (_jsx("li", { className: this.state.activeTabIndex === index ? Styles.active : '', onClick: () => {
15
+ let isClicked = this.state.isClicked;
16
+ isClicked[index] = true;
17
+ this.setState({ activeTabIndex: index, isClicked });
18
+ }, children: tab.title }, index))) }), this.props.tabs.map((tab, index) => (_jsx("div", { className: this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column, style: { display: index === this.state.activeTabIndex ? "block" : "none" }, children: this.state.isClicked[index] ? tab.getContent() : _jsx(_Fragment, {}) })))] }));
12
19
  }
13
20
  }
14
21
  //# sourceMappingURL=NSTabPage.js.map
package/dist/components/NSTabPage.js.map CHANGED
@@ -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,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBlC,MAAM,OAAO,SAAU,SAAQ,SAAyC;IAEpE,YAAY,KAAqB;QAE7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC;IACvC,CAAC;IACQ,MAAM;QAGX,OAAO,CACH,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC3F,uBAEQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,aAEI,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,YAEtD,GAAG,CAAC,KAAK,IAJL,KAAK,CAKT,CACR,CAAC,GAEL,EACL,cAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,YACtF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,UAAU,EAAE,GACtD,IACJ,CACT,CAAC;IACN,CAAC;CACJ"}
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,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBlC,MAAM,OAAO,SAAU,SAAQ,SAAyC;IAEvE,YAAY,KAAqB;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,cAAc,EAAE,CAAC;YACjB,SAAS,EAAE,CAAC,IAAI,CAAC;SACjB,CAAC;IACH,CAAC;IACQ,MAAM;QAGd,OAAO,CACN,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC9F,uBAEE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,aAEC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE;4BAEb,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;4BACrC,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;4BACxB,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;wBACpD,CAAC,YAEA,GAAG,CAAC,KAAK,IATL,KAAK,CAUN,CACL,CAAC,GAEC,EAEJ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,EACtF,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,YAGzE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,mBAAK,GAGlD,CACN,CAAC,IAEE,CACN,CAAC;IACH,CAAC;CACD"}
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.4.48",
11
+ "version": "1.4.49",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "dependencies": {
24
24
  "@ant-design/charts": "^2.2.1",
25
- "@types/node": "^22.8.4",
25
+ "@types/node": "^22.8.7",
26
26
  "@types/react": "^18.3.12",
27
27
  "@types/react-bootstrap": "^0.32.37",
28
28
  "@types/react-dom": "^18.3.1",
package/src/components/NSTabPage.tsx CHANGED
@@ -5,50 +5,69 @@ import { Component } from "react";
5
5
 
6
6
  export interface NSTabPageTab
7
7
  {
8
- title: string;
9
- getContent: () => React.ReactNode;
8
+ title: string;
9
+ getContent: () => React.ReactNode;
10
10
  }
11
11
 
12
12
  export interface NSTabPageProps extends IBaseComponentProps
13
13
  {
14
- tabs: NSTabPageTab[]
15
- grid?: boolean;
14
+ tabs: NSTabPageTab[]
15
+ grid?: boolean;
16
16
  }
17
17
 
18
18
  export interface NSTabPageState
19
19
  {
20
- activeTabIndex: number
20
+ activeTabIndex: number;
21
+ isClicked: boolean[];
21
22
  }
22
23
 
23
24
  export class NSTabPage extends Component<NSTabPageProps, NSTabPageState>
24
25
  {
25
- constructor(props: NSTabPageProps)
26
- {
27
- super(props);
28
- this.state = { activeTabIndex: 0 };
29
- }
30
- override render()
31
- {
26
+ constructor(props: NSTabPageProps)
27
+ {
28
+ super(props);
29
+ this.state = {
30
+ activeTabIndex: 0,
31
+ isClicked: [true]
32
+ };
33
+ }
34
+ override render()
35
+ {
32
36
 
33
- return (
34
- <div className={` ${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style}>
35
- <ul>
36
- {
37
- this.props.tabs.map((tab, index) => (
38
- <li
39
- key={index}
40
- className={this.state.activeTabIndex === index ? Styles.active : ''}
41
- onClick={() => this.setState({ activeTabIndex: index })}
42
- >
43
- {tab.title}
44
- </li>
45
- ))
46
- }
47
- </ul>
48
- <div className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}>
49
- {this.props.tabs[this.state.activeTabIndex].getContent()}
50
- </div>
51
- </div>
52
- );
53
- }
37
+ return (
38
+ <div className={` ${Styles.ns_tab_page_panel} ${this.props.classList}`} style={this.props.style}>
39
+ <ul>
40
+ {
41
+ this.props.tabs.map((tab, index) => (
42
+ <li
43
+ key={index}
44
+ className={this.state.activeTabIndex === index ? Styles.active : ''}
45
+ onClick={() =>
46
+ {
47
+ let isClicked = this.state.isClicked;
48
+ isClicked[index] = true;
49
+ this.setState({ activeTabIndex: index, isClicked })
50
+ }}
51
+ >
52
+ {tab.title}
53
+ </li>
54
+ ))
55
+ }
56
+ </ul>
57
+ {
58
+ this.props.tabs.map((tab, index) => (
59
+ <div
60
+ className={this.props.grid ? Styles.ns_tab_content_grid : Styles.ns_tab_content_column}
61
+ style={{ display: index === this.state.activeTabIndex ? "block" : "none" }}
62
+ >
63
+ {
64
+ this.state.isClicked[index] ? tab.getContent() : <></>
65
+
66
+ }
67
+ </div>
68
+ ))
69
+ }
70
+ </div>
71
+ );
72
+ }
54
73
  }