namirasoft-site-react 1.3.83 → 1.3.85

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 (29) hide show
  1. package/dist/App.js +32 -2
  2. package/dist/App.js.map +1 -1
  3. package/dist/components/NSButton.d.ts +1 -1
  4. package/dist/components/NSButton.module.css +1 -0
  5. package/dist/components/NSInput.module.css +6 -5
  6. package/dist/components/NSInputSearch.js +1 -1
  7. package/dist/components/NSInputSearch.js.map +1 -1
  8. package/dist/components/NSModal.d.ts +6 -1
  9. package/dist/components/NSModal.js +15 -3
  10. package/dist/components/NSModal.js.map +1 -1
  11. package/dist/components/NSModal.module.css +14 -0
  12. package/dist/components/NSPanel.module.css +13 -9
  13. package/dist/components/NSTable.d.ts +10 -3
  14. package/dist/components/NSTable.js +28 -4
  15. package/dist/components/NSTable.js.map +1 -1
  16. package/dist/components/NSTable.module.css +28 -28
  17. package/package.json +1 -1
  18. package/public/assets/images/export-vector.png +0 -0
  19. package/public/assets/images/refresh-vector.png +0 -0
  20. package/src/App.tsx +63 -120
  21. package/src/components/NSButton.module.css +1 -0
  22. package/src/components/NSButton.tsx +1 -1
  23. package/src/components/NSInput.module.css +6 -5
  24. package/src/components/NSInputSearch.tsx +1 -1
  25. package/src/components/NSModal.module.css +14 -0
  26. package/src/components/NSModal.tsx +46 -12
  27. package/src/components/NSPanel.module.css +13 -9
  28. package/src/components/NSTable.module.css +28 -28
  29. package/src/components/NSTable.tsx +46 -15
package/dist/App.js CHANGED
@@ -1,8 +1,38 @@
1
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
- import { NSFooter, NSHeader } from './main';
4
+ import { NSFooter, NSHeader, NSTable } from './main';
5
+ import { useRef } from 'react';
5
6
  export function App() {
6
- return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsx("div", {}), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
7
+ let columns = {
8
+ "id": "ID",
9
+ "project": "Project",
10
+ "level": "Level",
11
+ "message": "Message",
12
+ "cent": "Cent",
13
+ "status": "Status",
14
+ };
15
+ let rows = [{
16
+ id: 1,
17
+ project: "Namirasoft Account",
18
+ level: "Debug",
19
+ message: "Lorem ipsum dolor sit amet, consetetur ",
20
+ cent: "26",
21
+ status: "pending"
22
+ },
23
+ {
24
+ id: 2,
25
+ project: "Namirasoft Account",
26
+ level: "Debug",
27
+ message: "Lorem ipsum dolor sit amet, consetetur ",
28
+ cent: "24",
29
+ status: "Done"
30
+ }
31
+ ];
32
+ function getCell(row, column) {
33
+ return row[column];
34
+ }
35
+ let table = useRef(null);
36
+ return (_jsxs(_Fragment, { children: [_jsx(NSHeader, { name: 'Header', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', account: false, style: { backgroundColor: "transparent !important" } }), _jsx("div", { children: _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }) }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
7
37
  }
8
38
  //# 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,OACC,EACC,QAAQ,EAAE,QAAQ,EAElB,MAAM,QAAQ,CAAC;AA0DjB,MAAM,UAAU,GAAG;IAwCf,OAAO,CACH,8BACI,KAAC,QAAQ,IACL,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,EACxE,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,GACtD,EACF,eAQM,EACN,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACxI,CACN,CAAC;AACN,CAAC"}
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,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,UAAU,GAAG;IAElB,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,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,mEAAmE,GAAG,IACrI,CACH,CAAC;AACH,CAAC"}
package/dist/components/NSButton.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
3
3
  import { IImageProps } from "../props/IImageProps";
4
4
  export interface INSButtonProps extends IBaseComponentProps {
5
- title: string;
5
+ title?: string;
6
6
  icon?: IImageProps;
7
7
  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
8
8
  }
package/dist/components/NSButton.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  text-decoration: none;
13
13
  max-width: 100%;
14
14
  transition: all 0.2s ease-in-out;
15
+ width: 100%;
15
16
  }
16
17
 
17
18
  .ns_button:hover {
package/dist/components/NSInput.module.css CHANGED
@@ -19,7 +19,9 @@
19
19
  margin: 0 !important;
20
20
  position: absolute;
21
21
  right: 12px;
22
-
22
+ background-color: #fff;
23
+ padding: 0 4px;
24
+ direction: rtl;
23
25
  }
24
26
 
25
27
  .ns_input {
@@ -41,9 +43,8 @@
41
43
  font-weight: 400;
42
44
  }
43
45
 
44
-
45
46
  @media only screen and (min-width: 380px) {
46
- .ns_input {
47
- max-width: 272px;
48
- }
47
+ .ns_input {
48
+ max-width: 272px;
49
+ }
49
50
  }
package/dist/components/NSInputSearch.js CHANGED
@@ -36,7 +36,7 @@ export class NSInputSearch extends React.Component {
36
36
  }
37
37
  render() {
38
38
  var _a;
39
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsxs("div", { className: Styles.ns_input_container, children: [_jsx("figure", { className: Styles.ns_input_icon_container, children: _jsx("img", { src: "/static/media/icon-input-search.4d82efd478e5b2ebac81964cfb394705.svg", alt: "input-icon", width: 24, height: 24 }) }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] })] }), _jsx(NSInputErrorNotifier, { error: this.state.error })] }));
39
+ return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${Styles.ns_input_parent} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [" ", this.props.required && _jsx("span", { style: { color: "red" }, children: "*" }), " ", this.props.title, " "] }), _jsxs("div", { className: Styles.ns_input_container, children: [_jsx("figure", { className: Styles.ns_input_icon_container, children: _jsx("img", { src: "https://static.namirasoft.com/image/concept/magnifier/blue.svg", alt: "input-icon", width: 24, height: 24 }) }), _jsx("input", { id: this.props.id, value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: this.props.placeholder })] })] }), _jsx(NSInputErrorNotifier, { error: this.state.error })] }));
40
40
  }
41
41
  }
42
42
  //# sourceMappingURL=NSInputSearch.js.map
package/dist/components/NSInputSearch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSInputSearch.js","sourceRoot":"","sources":["../../src/components/NSInputSearch.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSModal.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  import { IBaseComponentProps } from "../main";
2
2
  export interface INSModalProps extends IBaseComponentProps {
3
+ title?: string;
4
+ description?: string;
3
5
  }
4
- export declare function NSModal(): import("react/jsx-runtime").JSX.Element;
6
+ export interface INSModalState {
7
+ isShowModal: boolean;
8
+ }
9
+ export declare function NSModal(props: INSModalProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSModal.js CHANGED
@@ -1,6 +1,18 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ import { NSSpace, NSSpaceSizeType, NSTitle } from "../main";
4
+ import NSButton from "./NSButton";
2
5
  import Styles from './NSModal.module.css';
3
- export function NSModal() {
4
- return (_jsx("section", { className: Styles.ns_modal, children: _jsx("div", { className: Styles.ns_modal_container, children: _jsx("img", { src: "", width: 24, height: 24, alt: "close modal" }) }) }));
6
+ export function NSModal(props) {
7
+ var _a;
8
+ const [state, setState] = useState({
9
+ isShowModal: true
10
+ });
11
+ return (_jsx("section", { onClick: () => setState(prevState => (Object.assign(Object.assign({}, prevState), { isShowModal: false }))), id: props.id, className: `
12
+ ${state.isShowModal && Styles.ns_hide}
13
+ ${Styles.ns_modal}
14
+ ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [_jsx(NSButton, { onClick: () => setState(prevState => (Object.assign(Object.assign({}, prevState), { isShowModal: false }))), icon: { src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), props.title &&
15
+ _jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }), props.description &&
16
+ _jsxs("p", { className: Styles.ns_modal_description, children: [" ", props.description, " "] })] }) }));
5
17
  }
6
18
  //# sourceMappingURL=NSModal.js.map
package/dist/components/NSModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAI1C,MAAM,UAAU,OAAO;IAEtB,OAAO,CACN,kBAAS,SAAS,EAAE,MAAM,CAAC,QAAQ,YAClC,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,YACxC,cACC,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,aAAa,GAChB,GACG,GACG,CACV,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAW1C,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB;QACjD,WAAW,EAAE,IAAI;KACjB,CAAC,CAAC;IACH,OAAO,CACN,kBACC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CACpC,iCACI,SAAS,KAAE,WAAW,EAAE,KAAK,IAC/B,CAAC,EACH,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE;KACT,KAAK,CAAC,WAAW,IAAG,MAAM,CAAC,OAAO;KAClC,MAAM,CAAC,QAAQ;KACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,KAAC,QAAQ,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CACpC,iCACI,SAAS,KAAE,WAAW,EAAE,KAAK,IAC/B,CAAC,EACH,IAAI,EAAE,EAAE,GAAG,EAAE,4DAA4D,EAAE,GAAG,EAAE,aAAa,EAAE,EAC/F,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EACD,KAAK,CAAC,KAAK;oBACX,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAC/B,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,EAEH,KAAK,CAAC,WAAW;oBACjB,aAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,kBAAK,KAAK,CAAC,WAAW,SAAM,IAGjE,GACI,CACX,CAAC;AACH,CAAC"}
package/dist/components/NSModal.module.css CHANGED
@@ -0,0 +1,14 @@
1
+
2
+ /* Modal */
3
+ .ns_modal {
4
+ position: fixed;
5
+ height: fit-content;
6
+ top: 25%;
7
+ left: 0;
8
+ border-radius: 8px;
9
+ padding: 24px;
10
+ margin: 0 16px;
11
+ background-color: rgba(188, 194, 244, 1);
12
+ z-index: 10;
13
+ color: rgba(20, 27, 92, 1);
14
+ }
package/dist/components/NSPanel.module.css CHANGED
@@ -6,15 +6,7 @@
6
6
  align-items: center;
7
7
  gap: 8px;
8
8
  border-radius: 8px;
9
- margin: 0 auto;
10
- }
11
-
12
- @media only screen and (min-width: 768px) {
13
- .ns_panel_grid {
14
- flex-direction: row;
15
- max-width: 700px;
16
- flex-wrap: wrap;
17
- }
9
+ margin: 0 auto;
18
10
  }
19
11
 
20
12
  .ns_panel_column {
@@ -25,10 +17,22 @@ margin: 0 auto;
25
17
  align-items: center;
26
18
  border-radius: 8px;
27
19
  margin: 0 auto;
20
+ width: 100%;
28
21
  }
29
22
 
30
23
  @media only screen and (min-width: 768px) {
31
24
  .ns_panel_column {
32
25
  max-width: 700px;
33
26
  }
27
+ .ns_panel_grid {
28
+ flex-direction: row;
29
+ max-width: 700px;
30
+ flex-wrap: wrap;
31
+ }
32
+ }
33
+
34
+ @media only screen and (min-width: 380px) {
35
+ .ns_panel_column {
36
+ width: max-content;
37
+ }
34
38
  }
package/dist/components/NSTable.d.ts CHANGED
@@ -11,21 +11,28 @@ export interface INSTableProps<RowType> extends IBaseComponentProps {
11
11
  [key: string]: string;
12
12
  };
13
13
  getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
14
- onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
14
+ onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
15
+ onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
15
16
  }
16
17
  export interface NSTableState<RowType> {
17
18
  columns: {
18
19
  [key: string]: string;
19
20
  };
20
21
  rows: RowType[];
21
- modalState: boolean;
22
+ model: {
23
+ show: boolean;
24
+ description?: string;
25
+ };
22
26
  }
23
27
  export declare class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>> {
28
+ private search?;
24
29
  constructor(props: INSTableProps<RowType>);
25
30
  setColumns(columns: {
26
31
  [key: string]: string;
27
32
  }): void;
28
33
  setRows(rows: RowType[]): void;
29
- getValueSearch(e: React.ChangeEvent<HTMLInputElement>): string;
34
+ getSearchValue(): string;
35
+ showModal(description: string): void;
36
+ hideModal(): void;
30
37
  render(): import("react/jsx-runtime").JSX.Element;
31
38
  }
package/dist/components/NSTable.js CHANGED
@@ -6,10 +6,11 @@ import { NSPagination } from './NSPagination';
6
6
  import { NSSpace, NSSpaceSizeType } from './NSSpace';
7
7
  import Styles from './NSTable.module.css';
8
8
  import { Component } from 'react';
9
+ import { NSModal } from './NSModal';
9
10
  export class NSTable extends Component {
10
11
  constructor(props) {
11
12
  super(props);
12
- this.state = { columns: props.columns, rows: props.rows, modalState: false };
13
+ this.state = { columns: props.columns, rows: props.rows, model: { show: false } };
13
14
  }
14
15
  setColumns(columns) {
15
16
  this.setState({ columns });
@@ -17,8 +18,15 @@ export class NSTable extends Component {
17
18
  setRows(rows) {
18
19
  this.setState({ rows });
19
20
  }
20
- getValueSearch(e) {
21
- return e.target.value;
21
+ getSearchValue() {
22
+ var _a, _b, _c;
23
+ return (_c = (_b = (_a = this.search) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getValue()) !== null && _c !== void 0 ? _c : "";
24
+ }
25
+ showModal(description) {
26
+ this.setState({ model: { show: true, description } });
27
+ }
28
+ hideModal() {
29
+ this.setState({ model: { show: false } });
22
30
  }
23
31
  render() {
24
32
  var _a;
@@ -33,7 +41,23 @@ export class NSTable extends Component {
33
41
  return this.props.getCell(row, column, rowIndex, columnIndex);
34
42
  return row[column];
35
43
  };
36
- return (_jsxs("div", { id: this.props.id, className: `container ${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { title: '', required: false, onChanged: this.getValueSearch }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
44
+ let onRowClick = (e, row, rowIndex) => {
45
+ if (this.props.onRowClick)
46
+ this.props.onRowClick(e, row, rowIndex);
47
+ };
48
+ let onCellClick = (e, row, column, rowIndex, columnIndex) => {
49
+ let overided = false;
50
+ if (this.props.onCellClick) {
51
+ let res = this.props.onCellClick(e, row, column, rowIndex, rowIndex);
52
+ if (res == undefined)
53
+ overided = true;
54
+ else
55
+ overided = res;
56
+ }
57
+ if (!overided)
58
+ this.showModal(getCell(row, column, rowIndex, columnIndex));
59
+ };
60
+ return (_jsxs("div", { id: this.props.id, className: `container ${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { ref: this.search, title: "Search", required: false, onChanged: this.getSearchValue }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { style: { display: this.state.model.show ? "block" : "none" }, description: this.state.model.description })] }));
37
61
  }
38
62
  }
39
63
  //# sourceMappingURL=NSTable.js.map
package/dist/components/NSTable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}
package/dist/components/NSTable.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  /* Modal */
54
- .ns_modal {
54
+ /* .ns_modal {
55
55
  position: fixed;
56
56
  height: fit-content;
57
57
  top: 25%;
@@ -62,7 +62,7 @@
62
62
  background-color: rgba(188, 194, 244, 1);
63
63
  z-index: 10;
64
64
  color: rgba(20, 27, 92, 1);
65
- }
65
+ } */
66
66
 
67
67
  .ns_modal a {
68
68
  float: right;
@@ -136,31 +136,31 @@
136
136
  align-items: center;
137
137
  gap: 24px;
138
138
  }
139
+ }
139
140
 
140
- @media screen and (min-width: 1024px) {
141
- .ns_table {
142
- padding: 0 48px;
143
- }
144
-
145
- .ns_table thead {
146
- font-size: 24px;
147
- }
148
-
149
- .ns_table tr {
150
- font-size: 24px;
151
- }
152
-
153
- /* Search Input */
154
- .ns_search_input {
155
- padding: 0 40px;
156
- }
157
-
158
- /* Button Group */
159
- .ns_pagination_button {
160
- display: flex;
161
- flex-direction: row;
162
- width: 100%;
163
- padding: 16px 48px;
164
- }
165
- }
141
+ @media screen and (min-width: 1024px) {
142
+ .ns_table {
143
+ padding: 0 48px;
144
+ }
145
+
146
+ .ns_table thead {
147
+ font-size: 24px;
148
+ }
149
+
150
+ .ns_table tr {
151
+ font-size: 24px;
152
+ }
153
+
154
+ /* Search Input */
155
+ .ns_search_input {
156
+ padding: 0 40px;
157
+ }
158
+
159
+ /* Button Group */
160
+ .ns_pagination_button {
161
+ display: flex;
162
+ flex-direction: row;
163
+ width: 100%;
164
+ padding: 16px 48px;
165
+ }
166
166
  }
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.83",
11
+ "version": "1.3.85",
12
12
  "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
13
13
  "license": "MIT",
14
14
  "main": "./dist/main.js",
package/src/App.tsx CHANGED
@@ -1,126 +1,69 @@
1
1
  import './App.css';
2
2
  import 'bootstrap/dist/css/bootstrap.min.css';
3
- import
4
- {
5
- NSFooter, NSHeader
6
- // , NSNotificationColor, NSTable, NotificationType
7
- } from './main';
3
+ import { NSFooter, NSHeader, NSTable } from './main';
4
+ import { useRef } from 'react';
8
5
 
9
- // const actions = [
10
- // {
11
- // group: "test-1",
12
- // items: [
13
- // {
14
- // id: "1",
15
- // menu_item: "test-1-1",
16
- // handler()
17
- // {
18
- // console.log("test-1-1-1")
19
- // },
20
- // isActive()
21
- // {
22
- // return false
23
- // }
24
- // },
25
- // {
26
- // id: "5",
27
- // menu_item: "test-3-3",
28
- // handler()
29
- // {
30
- // console.log("test-3-3-3")
31
- // },
32
- // isActive()
33
- // {
34
- // return true
35
- // }
36
- // }
37
- // ]
38
- // },
39
- // {
40
- // group: "test-2",
41
- // items: [
42
- // {
43
- // id: "9",
44
- // menu_item: "test-2-2",
45
- // handler()
46
- // {
47
- // console.log("test-2-2-2")
48
- // },
49
- // isActive()
50
- // {
51
- // return true
52
- // }
53
- // }
54
- // ]
55
- // }
56
- // ]
57
- // const notifications = [
58
- // {
59
- // type: NotificationType.Error,
60
- // color: NSNotificationColor.RED,
61
- // text: "hello there its test ",
62
- // onClose: () => console.log("test-closed")
63
- // }
64
- // ]
65
6
  export function App()
66
7
  {
67
- // let columns = {
68
- // "id": "ID",
69
- // "project": "Project",
70
- // "level": "Level",
71
- // "message": "Message",
72
- // "cent": "Cent",
73
- // "status": "Status",
74
- // }
75
- // let rows = [{
76
- // id: 1,
77
- // project: "Namirasoft Account",
78
- // level: "Debug",
79
- // message: "Lorem ipsum dolor sit amet, consetetur ",
80
- // cent: "26",
81
- // status: "pending"
82
- // },
83
- // {
84
- // id: 2,
85
- // project: "Namirasoft Account",
86
- // level: "Debug",
87
- // message: "Lorem ipsum dolor sit amet, consetetur ",
88
- // cent: "24",
89
- // status: "Done"
90
- // }
91
- // ]
92
- // interface Row
93
- // {
94
- // id: number,
95
- // project: string,
96
- // level: string,
97
- // message: string,
98
- // cent: string,
99
- // status: string
100
- // }
101
- // function getCell(row: Row, column: string): any
102
- // {
103
- // return (row as any)[column];
104
- // }
105
- return (
106
- <>
107
- <NSHeader
108
- name='Header'
109
- scope='Namira Software Corporation'
110
- logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png'
111
- account={false}
112
- style={{ backgroundColor: "transparent !important" }}
113
- />
114
- <div>
115
- {/* <NSTable
116
- columns={columns}
117
- rows={rows}
118
- getCell={getCell}
119
- getColumnAttributes={() => { return {} }}
120
- getRowKey={row => row.id.toString()} /> */}
121
-
122
- </div>
123
- <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
124
- </>
125
- );
8
+ let columns = {
9
+ "id": "ID",
10
+ "project": "Project",
11
+ "level": "Level",
12
+ "message": "Message",
13
+ "cent": "Cent",
14
+ "status": "Status",
15
+ }
16
+ let rows = [{
17
+ id: 1,
18
+ project: "Namirasoft Account",
19
+ level: "Debug",
20
+ message: "Lorem ipsum dolor sit amet, consetetur ",
21
+ cent: "26",
22
+ status: "pending"
23
+ },
24
+ {
25
+ id: 2,
26
+ project: "Namirasoft Account",
27
+ level: "Debug",
28
+ message: "Lorem ipsum dolor sit amet, consetetur ",
29
+ cent: "24",
30
+ status: "Done"
31
+ }
32
+ ]
33
+ interface Row
34
+ {
35
+ id: number,
36
+ project: string,
37
+ level: string,
38
+ message: string,
39
+ cent: string,
40
+ status: string
41
+ }
42
+ function getCell(row: Row, column: string): any
43
+ {
44
+ return (row as any)[column];
45
+ }
46
+ let table = useRef<NSTable<Row>>(null);
47
+ return (
48
+ <>
49
+ <NSHeader
50
+ name='Header'
51
+ scope='Namira Software Corporation'
52
+ logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png'
53
+ account={false}
54
+ style={{ backgroundColor: "transparent !important" }}
55
+ />
56
+ <div>
57
+ <NSTable
58
+ ref={table}
59
+ columns={columns}
60
+ rows={rows}
61
+ getCell={getCell}
62
+ getColumnAttributes={() => { return {} }}
63
+ getRowKey={row => row.id.toString()}
64
+ />
65
+ </div>
66
+ <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
67
+ </>
68
+ );
126
69
  }
package/src/components/NSButton.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
  text-decoration: none;
13
13
  max-width: 100%;
14
14
  transition: all 0.2s ease-in-out;
15
+ width: 100%;
15
16
  }
16
17
 
17
18
  .ns_button:hover {
package/src/components/NSButton.tsx CHANGED
@@ -4,7 +4,7 @@ import { IImageProps } from "../props/IImageProps";
4
4
 
5
5
  export interface INSButtonProps extends IBaseComponentProps
6
6
  {
7
- title: string;
7
+ title?: string;
8
8
  icon?: IImageProps;
9
9
  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
10
10
  }
package/src/components/NSInput.module.css CHANGED
@@ -19,7 +19,9 @@
19
19
  margin: 0 !important;
20
20
  position: absolute;
21
21
  right: 12px;
22
-
22
+ background-color: #fff;
23
+ padding: 0 4px;
24
+ direction: rtl;
23
25
  }
24
26
 
25
27
  .ns_input {
@@ -41,9 +43,8 @@
41
43
  font-weight: 400;
42
44
  }
43
45
 
44
-
45
46
  @media only screen and (min-width: 380px) {
46
- .ns_input {
47
- max-width: 272px;
48
- }
47
+ .ns_input {
48
+ max-width: 272px;
49
+ }
49
50
  }
package/src/components/NSInputSearch.tsx CHANGED
@@ -69,7 +69,7 @@ export class NSInputSearch extends React.Component<INSInputSearchProps, NSInputS
69
69
  <div className={Styles.ns_input_container}>
70
70
  <figure className={Styles.ns_input_icon_container}>
71
71
  <img
72
- src="/static/media/icon-input-search.4d82efd478e5b2ebac81964cfb394705.svg"
72
+ src="https://static.namirasoft.com/image/concept/magnifier/blue.svg"
73
73
  alt="input-icon"
74
74
  width={24}
75
75
  height={24}
package/src/components/NSModal.module.css CHANGED
@@ -0,0 +1,14 @@
1
+
2
+ /* Modal */
3
+ .ns_modal {
4
+ position: fixed;
5
+ height: fit-content;
6
+ top: 25%;
7
+ left: 0;
8
+ border-radius: 8px;
9
+ padding: 24px;
10
+ margin: 0 16px;
11
+ background-color: rgba(188, 194, 244, 1);
12
+ z-index: 10;
13
+ color: rgba(20, 27, 92, 1);
14
+ }
package/src/components/NSModal.tsx CHANGED
@@ -1,21 +1,55 @@
1
- import { IBaseComponentProps } from "../main";
1
+ import { useState } from "react";
2
+ import { IBaseComponentProps, NSSpace, NSSpaceSizeType, NSTitle } from "../main";
3
+ import NSButton from "./NSButton";
2
4
  import Styles from './NSModal.module.css';
3
5
 
4
6
  export interface INSModalProps extends IBaseComponentProps
5
- { }
6
- export function NSModal()
7
7
  {
8
+ title?: string
9
+ description?: string
10
+ }
11
+ export interface INSModalState
12
+ {
13
+ isShowModal: boolean
14
+ }
15
+ export function NSModal(props: INSModalProps)
16
+ {
17
+ const [state, setState] = useState<INSModalState>({
18
+ isShowModal: true
19
+ });
8
20
  return (
9
- <section className={Styles.ns_modal}>
21
+ <section
22
+ onClick={() => setState(prevState =>
23
+ ({
24
+ ...prevState, isShowModal: false
25
+ }))}
26
+ id={props.id}
27
+ className={`
28
+ ${state.isShowModal&& Styles.ns_hide}
29
+ ${Styles.ns_modal}
30
+ ${props.classList?.join(" ")}`}
31
+ style={props.style}
32
+ >
10
33
  <div className={Styles.ns_modal_container}>
11
- <img
12
- src=""
13
- width={24}
14
- height={24}
15
- alt="close modal"
34
+ <NSButton
35
+ onClick={() => setState(prevState =>
36
+ ({
37
+ ...prevState, isShowModal: false
38
+ }))}
39
+ icon={{ src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }}
40
+ classList={[Styles.ns_close_modal]}
16
41
  />
42
+ {props.title &&
43
+ <>
44
+ <NSTitle title={props.title} />
45
+ <NSSpace size={NSSpaceSizeType.NORMAL} />
46
+ </>
47
+ }
48
+ {props.description &&
49
+ <p className={Styles.ns_modal_description} > {props.description} </p>
50
+ }
51
+
17
52
  </div>
18
- </section>
53
+ </section >
19
54
  );
20
- }
21
-
55
+ }
package/src/components/NSPanel.module.css CHANGED
@@ -6,15 +6,7 @@
6
6
  align-items: center;
7
7
  gap: 8px;
8
8
  border-radius: 8px;
9
- margin: 0 auto;
10
- }
11
-
12
- @media only screen and (min-width: 768px) {
13
- .ns_panel_grid {
14
- flex-direction: row;
15
- max-width: 700px;
16
- flex-wrap: wrap;
17
- }
9
+ margin: 0 auto;
18
10
  }
19
11
 
20
12
  .ns_panel_column {
@@ -25,10 +17,22 @@ margin: 0 auto;
25
17
  align-items: center;
26
18
  border-radius: 8px;
27
19
  margin: 0 auto;
20
+ width: 100%;
28
21
  }
29
22
 
30
23
  @media only screen and (min-width: 768px) {
31
24
  .ns_panel_column {
32
25
  max-width: 700px;
33
26
  }
27
+ .ns_panel_grid {
28
+ flex-direction: row;
29
+ max-width: 700px;
30
+ flex-wrap: wrap;
31
+ }
32
+ }
33
+
34
+ @media only screen and (min-width: 380px) {
35
+ .ns_panel_column {
36
+ width: max-content;
37
+ }
34
38
  }
package/src/components/NSTable.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  /* Modal */
54
- .ns_modal {
54
+ /* .ns_modal {
55
55
  position: fixed;
56
56
  height: fit-content;
57
57
  top: 25%;
@@ -62,7 +62,7 @@
62
62
  background-color: rgba(188, 194, 244, 1);
63
63
  z-index: 10;
64
64
  color: rgba(20, 27, 92, 1);
65
- }
65
+ } */
66
66
 
67
67
  .ns_modal a {
68
68
  float: right;
@@ -136,31 +136,31 @@
136
136
  align-items: center;
137
137
  gap: 24px;
138
138
  }
139
+ }
139
140
 
140
- @media screen and (min-width: 1024px) {
141
- .ns_table {
142
- padding: 0 48px;
143
- }
144
-
145
- .ns_table thead {
146
- font-size: 24px;
147
- }
148
-
149
- .ns_table tr {
150
- font-size: 24px;
151
- }
152
-
153
- /* Search Input */
154
- .ns_search_input {
155
- padding: 0 40px;
156
- }
157
-
158
- /* Button Group */
159
- .ns_pagination_button {
160
- display: flex;
161
- flex-direction: row;
162
- width: 100%;
163
- padding: 16px 48px;
164
- }
165
- }
141
+ @media screen and (min-width: 1024px) {
142
+ .ns_table {
143
+ padding: 0 48px;
144
+ }
145
+
146
+ .ns_table thead {
147
+ font-size: 24px;
148
+ }
149
+
150
+ .ns_table tr {
151
+ font-size: 24px;
152
+ }
153
+
154
+ /* Search Input */
155
+ .ns_search_input {
156
+ padding: 0 40px;
157
+ }
158
+
159
+ /* Button Group */
160
+ .ns_pagination_button {
161
+ display: flex;
162
+ flex-direction: row;
163
+ width: 100%;
164
+ padding: 16px 48px;
165
+ }
166
166
  }
package/src/components/NSTable.tsx CHANGED
@@ -8,6 +8,7 @@ import Styles from './NSTable.module.css';
8
8
  import { Component } from 'react';
9
9
  import { IBaseComponentProps } from "../props/IBaseComponentProps";
10
10
  import React from "react";
11
+ import { NSModal } from './NSModal';
11
12
 
12
13
  export interface INSTableProps<RowType> extends IBaseComponentProps
13
14
  {
@@ -16,22 +17,27 @@ export interface INSTableProps<RowType> extends IBaseComponentProps
16
17
  getRowKey: (row: RowType, rowIndex: number) => string;
17
18
  getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
18
19
  getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
19
- onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
20
+ onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
21
+ onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
20
22
  }
21
23
 
22
24
  export interface NSTableState<RowType>
23
25
  {
24
26
  columns: { [key: string]: string };
25
27
  rows: RowType[];
26
- modalState: boolean
28
+ model: {
29
+ show: boolean;
30
+ description?: string;
31
+ }
27
32
  }
28
33
 
29
34
  export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
30
35
  {
36
+ private search?: React.RefObject<NSInputSearch>;
31
37
  constructor(props: INSTableProps<RowType>)
32
38
  {
33
39
  super(props);
34
- this.state = { columns: props.columns, rows: props.rows, modalState: false };
40
+ this.state = { columns: props.columns, rows: props.rows, model: { show: false } };
35
41
  }
36
42
  setColumns(columns: { [key: string]: string })
37
43
  {
@@ -41,9 +47,17 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
41
47
  {
42
48
  this.setState({ rows });
43
49
  }
44
- getValueSearch(e: React.ChangeEvent<HTMLInputElement>): string
50
+ getSearchValue(): string
51
+ {
52
+ return this.search?.current?.getValue() ?? "";
53
+ }
54
+ showModal(description: string)
55
+ {
56
+ this.setState({ model: { show: true, description } })
57
+ }
58
+ hideModal()
45
59
  {
46
- return e.target.value
60
+ this.setState({ model: { show: false } })
47
61
  }
48
62
  override render()
49
63
  {
@@ -60,12 +74,31 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
60
74
  return this.props.getCell(row, column, rowIndex, columnIndex);
61
75
  return (row as any)[column];
62
76
  }
77
+ let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
78
+ {
79
+ if (this.props.onRowClick)
80
+ this.props.onRowClick(e, row, rowIndex);
81
+ };
82
+ let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
83
+ {
84
+ let overided = false;
85
+ if (this.props.onCellClick)
86
+ {
87
+ let res = this.props.onCellClick(e, row, column, rowIndex, rowIndex);
88
+ if (res == undefined)
89
+ overided = true;
90
+ else
91
+ overided = res;
92
+ }
93
+ if (!overided)
94
+ this.showModal(getCell(row, column, rowIndex, columnIndex));
95
+ };
63
96
  return (
64
97
  <div id={this.props.id}
65
98
  className={`container ${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
66
99
  style={this.props.style}>
67
100
  <section className={Styles.ns_search_input}>
68
- <NSInputSearch title='' required={false} onChanged={this.getValueSearch} />
101
+ <NSInputSearch ref={this.search} title="Search" required={false} onChanged={this.getSearchValue} />
69
102
  </section>
70
103
  <NSSpace size={NSSpaceSizeType.SMALL} />
71
104
  <table className={Styles.ns_table} >
@@ -77,10 +110,10 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
77
110
  <tbody className={Styles.ns_tbody}>
78
111
  {
79
112
  this.state.rows.map((row, rowIndex) =>
80
- <tr key={this.props.getRowKey(row, rowIndex)} onClick={() => this.setState({ modalState: !this.state.modalState })}>
113
+ <tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
81
114
  {
82
115
  column_keys.map((column, columnIndex) => (
83
- <td {...getColumnAttributes(column, columnIndex)} data-label={`${this.state.columns[column]} : `}>
116
+ <td {...getColumnAttributes(column, columnIndex)} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex); }}>
84
117
  {getCell(row, column, rowIndex, columnIndex)}
85
118
  </td>
86
119
  ))
@@ -99,13 +132,11 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
99
132
  </div>
100
133
  </section>
101
134
  <NSSpace size={NSSpaceSizeType.SMALL} />
102
- <section onClick={() => this.setState({ modalState: !this.state.modalState })} className={Styles.ns_modal} style={{ display: this.state.modalState ? "block" : "none" }}>
103
- <a><img src='/assets/images/close-vector.png' /></a>
104
- <p>
105
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.
106
- In convallis. Phasellus rhoncus..
107
- </p>
108
- </section>
135
+ <NSModal
136
+ style={{ display: this.state.model.show ? "block" : "none" }}
137
+ // todo show={this.state.model.show}
138
+ description={this.state.model.description}
139
+ />
109
140
  </div >
110
141
  )
111
142
  }