namirasoft-site-react 1.3.256 → 1.3.257

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/NSGroupedList.d.ts +7 -1
  2. package/dist/components/NSGroupedList.js +25 -6
  3. package/dist/components/NSGroupedList.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/NSGroupedList.tsx +58 -33
package/dist/components/NSGroupedList.d.ts CHANGED
@@ -16,8 +16,14 @@ export interface INSGroupedListProps_Item {
16
16
  description?: string;
17
17
  }
18
18
  interface INSGroupedListState {
19
+ isVisible: boolean;
19
20
  }
20
21
  export default class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState> {
21
- render(): import("react/jsx-runtime").JSX.Element;
22
+ private wrapperRef;
23
+ constructor(props: INSGroupedListProps);
24
+ componentDidMount(): void;
25
+ componentWillUnmount(): void;
26
+ handleClickOutside(event: MouseEvent): void;
27
+ render(): import("react/jsx-runtime").JSX.Element | null;
22
28
  }
23
29
  export {};
package/dist/components/NSGroupedList.js CHANGED
@@ -1,13 +1,32 @@
1
1
  "use client";
2
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
3
- import { Component } from 'react';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Component, createRef } from 'react';
4
4
  import Styles from "./NSGroupedList.module.css";
5
5
  export default class NSGroupedList extends Component {
6
+ constructor(props) {
7
+ super(props);
8
+ this.wrapperRef = createRef();
9
+ this.state = {
10
+ isVisible: true,
11
+ };
12
+ this.handleClickOutside = this.handleClickOutside.bind(this);
13
+ }
14
+ componentDidMount() {
15
+ document.addEventListener('mousedown', this.handleClickOutside);
16
+ }
17
+ componentWillUnmount() {
18
+ document.removeEventListener('mousedown', this.handleClickOutside);
19
+ }
20
+ handleClickOutside(event) {
21
+ if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
22
+ this.setState({ isVisible: false });
23
+ }
24
+ }
6
25
  render() {
7
- console.log(this.props.groups);
8
- return (_jsx("div", { className: Styles.ns_group_list_parent, children: this.props.groups.map((group, index) => _jsxs("ul", { className: Styles.ns_group_list, children: [_jsxs("span", { className: Styles.ns_group_category, children: [" ", group.text, " "] }), group.items.map((item, index) => _jsx("li", { onClick: () => this.props.onClick(group.name, item.name), children: _jsxs("div", { className: Styles.ns_group_item, children: [_jsx("span", { children: item.text && _jsx("span", { children: item.text }) }), _jsx("span", { style: item.text_bold ? { fontWeight: "bold" } : {}, children: _jsxs("b", { children: [" ", " ", " ", item.text_bold] }) }), item.description &&
9
- _jsx("span", { className: Styles.ns_block, children: item.description })] }) }, index))] }, index)) }));
26
+ if (!this.state.isVisible) {
27
+ return null;
28
+ }
29
+ return (_jsx("div", { ref: this.wrapperRef, className: Styles.ns_group_list_parent, children: this.props.groups.map((group, index) => (_jsxs("ul", { className: Styles.ns_group_list, children: [_jsx("span", { className: Styles.ns_group_category, children: group.text }), group.items.map((item, index) => (_jsx("li", { onClick: () => this.props.onClick(group.name, item.name), children: _jsxs("div", { className: Styles.ns_group_item, children: [_jsx("span", { children: item.text && _jsx("span", { children: item.text }) }), _jsx("span", { style: item.text_bold ? { fontWeight: 'bold' } : {}, children: _jsxs("b", { children: [" ", item.text_bold] }) }), item.description && _jsx("span", { className: Styles.ns_block, children: item.description })] }) }, index)))] }, index))) }));
10
30
  }
11
31
  }
12
- ;
13
32
  //# sourceMappingURL=NSGroupedList.js.map
package/dist/components/NSGroupedList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSGroupedList.js","sourceRoot":"","sources":["../../src/components/NSGroupedList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAA;AA0B/C,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,SAAmD;IAEpF,MAAM;QAEd,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC/B,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAEzC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACtC,cAAgB,SAAS,EAAE,MAAM,CAAC,aAAa,aAC9C,gBAAM,SAAS,EAAE,MAAM,CAAC,iBAAiB,kBAAI,KAAK,CAAC,IAAI,SAAS,EAE/D,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,aAAgB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,YACvE,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,yBACE,IAAI,CAAC,IAAI,IAAI,yBAAO,IAAI,CAAC,IAAI,GAAQ,GAChC,EACP,eAAM,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,YACxD,6BAAK,GAAG,OAAG,IAAI,CAAC,SAAS,IAAK,GACxB,EAEN,IAAI,CAAC,WAAW;oCAChB,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,IAAI,CAAC,WAAW,GAAQ,IAEvD,IAZE,KAAK,CAaT,CACL,KAlBM,KAAK,CAoBT,CACL,GAEG,CACN,CAAC;IACH,CAAC;CACD;AAAA,CAAC"}
1
+ {"version":3,"file":"NSGroupedList.js","sourceRoot":"","sources":["../../src/components/NSGroupedList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AA4BhD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,SAAmD;IAG7F,YAAY,KAA0B;QAErC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJN,eAAU,GAAG,SAAS,EAAkB,CAAC;QAKhD,IAAI,CAAC,KAAK,GAAG;YACZ,SAAS,EAAE,IAAI;SACf,CAAC;QACF,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAEQ,iBAAiB;QAEzB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAEQ,oBAAoB;QAE5B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACpE,CAAC;IAED,kBAAkB,CAAC,KAAiB;QAEnC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACtF;YACC,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;SACpC;IACF,CAAC;IAEQ,MAAM;QAEd,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EACzB;YACC,OAAO,IAAI,CAAC;SACZ;QAED,OAAO,CACN,cAAK,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAC/D,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,cAAgB,SAAS,EAAE,MAAM,CAAC,aAAa,aAC9C,eAAM,SAAS,EAAE,MAAM,CAAC,iBAAiB,YAAG,KAAK,CAAC,IAAI,GAAQ,EAC7D,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,aAAgB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,YACvE,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,yBAAO,IAAI,CAAC,IAAI,IAAI,yBAAO,IAAI,CAAC,IAAI,GAAQ,GAAQ,EACpD,eAAM,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,YACxD,6BAAK,IAAI,CAAC,SAAS,IAAK,GAClB,EACN,IAAI,CAAC,WAAW,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,IAAI,CAAC,WAAW,GAAQ,IAC3E,IAPE,KAAK,CAQT,CACL,CAAC,KAZM,KAAK,CAaT,CACL,CAAC,GACG,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.3.256",
11
+ "version": "1.3.257",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
@@ -21,7 +21,7 @@
21
21
  "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
22
22
  },
23
23
  "dependencies": {
24
- "@types/node": "^20.14.7",
24
+ "@types/node": "^20.14.8",
25
25
  "@types/react": "^18.3.3",
26
26
  "@types/react-dom": "^18.3.0",
27
27
  "antd": "^5.18.3",
package/src/components/NSGroupedList.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
- import { Component } from 'react';
2
+ import { Component, createRef } from 'react';
3
3
  import { IBaseComponentProps } from '../main';
4
- import Styles from "./NSGroupedList.module.css"
4
+ import Styles from "./NSGroupedList.module.css";
5
5
 
6
6
  export interface INSGroupedListProps extends IBaseComponentProps
7
7
  {
@@ -25,41 +25,66 @@ export interface INSGroupedListProps_Item
25
25
  }
26
26
 
27
27
  interface INSGroupedListState
28
- { }
29
-
30
- export default class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
31
28
  {
29
+ isVisible: boolean;
30
+ }
31
+
32
+ export default class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState> {
33
+ private wrapperRef = createRef<HTMLDivElement>();
34
+
35
+ constructor(props: INSGroupedListProps)
36
+ {
37
+ super(props);
38
+ this.state = {
39
+ isVisible: true,
40
+ };
41
+ this.handleClickOutside = this.handleClickOutside.bind(this);
42
+ }
43
+
44
+ override componentDidMount()
45
+ {
46
+ document.addEventListener('mousedown', this.handleClickOutside);
47
+ }
48
+
49
+ override componentWillUnmount()
50
+ {
51
+ document.removeEventListener('mousedown', this.handleClickOutside);
52
+ }
53
+
54
+ handleClickOutside(event: MouseEvent)
55
+ {
56
+ if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node))
57
+ {
58
+ this.setState({ isVisible: false });
59
+ }
60
+ }
61
+
32
62
  override render()
33
63
  {
34
- console.log(this.props.groups);
64
+ if (!this.state.isVisible)
65
+ {
66
+ return null;
67
+ }
68
+
35
69
  return (
36
- <div className={Styles.ns_group_list_parent}>
37
- {
38
- this.props.groups.map((group, index) =>
39
- <ul key={index} className={Styles.ns_group_list}>
40
- <span className={Styles.ns_group_category}> {group.text} </span>
41
- {
42
- group.items.map((item, index) =>
43
- <li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
44
- <div className={Styles.ns_group_item}>
45
- <span>
46
- {item.text && <span>{item.text}</span>}
47
- </span>
48
- <span style={item.text_bold ? { fontWeight: "bold" } : {}}>
49
- <b> {" "} {item.text_bold}</b>
50
- </span>
51
- {
52
- item.description &&
53
- <span className={Styles.ns_block}>{item.description}</span>
54
- }
55
- </div>
56
- </li>
57
- )
58
- }
59
- </ul>
60
- )
61
- }
70
+ <div ref={this.wrapperRef} className={Styles.ns_group_list_parent}>
71
+ {this.props.groups.map((group, index) => (
72
+ <ul key={index} className={Styles.ns_group_list}>
73
+ <span className={Styles.ns_group_category}>{group.text}</span>
74
+ {group.items.map((item, index) => (
75
+ <li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
76
+ <div className={Styles.ns_group_item}>
77
+ <span>{item.text && <span>{item.text}</span>}</span>
78
+ <span style={item.text_bold ? { fontWeight: 'bold' } : {}}>
79
+ <b> {item.text_bold}</b>
80
+ </span>
81
+ {item.description && <span className={Styles.ns_block}>{item.description}</span>}
82
+ </div>
83
+ </li>
84
+ ))}
85
+ </ul>
86
+ ))}
62
87
  </div>
63
88
  );
64
89
  }
65
- };
90
+ }