namirasoft-site-react 1.3.94 → 1.3.96

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 (32) hide show
  1. package/dist/App.js +55 -5
  2. package/dist/App.js.map +1 -1
  3. package/dist/components/NSActionMenu.js +1 -1
  4. package/dist/components/NSActionMenu.js.map +1 -1
  5. package/dist/components/NSActionMenu.module.css +5 -2
  6. package/dist/components/NSButtonBlue.module.css +1 -1
  7. package/dist/components/NSLayoutAction.d.ts +3 -0
  8. package/dist/components/NSLayoutAction.js +10 -2
  9. package/dist/components/NSLayoutAction.js.map +1 -1
  10. package/dist/components/NSLayoutAction.module.css +44 -3
  11. package/dist/components/NSModal.d.ts +5 -1
  12. package/dist/components/NSModal.js +25 -4
  13. package/dist/components/NSModal.js.map +1 -1
  14. package/dist/components/NSModal.module.css +51 -11
  15. package/dist/components/NSSelectBox.module.css +1 -1
  16. package/dist/components/NSTabPage.module.css +3 -1
  17. package/dist/components/NSTable.js +1 -1
  18. package/dist/components/NSTable.js.map +1 -1
  19. package/dist/components/NSTable.module.css +2 -0
  20. package/package.json +1 -1
  21. package/src/App.tsx +80 -21
  22. package/src/components/NSActionMenu.module.css +5 -2
  23. package/src/components/NSActionMenu.tsx +1 -1
  24. package/src/components/NSButtonBlue.module.css +1 -1
  25. package/src/components/NSLayoutAction.module.css +44 -3
  26. package/src/components/NSLayoutAction.tsx +34 -3
  27. package/src/components/NSModal.module.css +51 -11
  28. package/src/components/NSModal.tsx +58 -15
  29. package/src/components/NSSelectBox.module.css +1 -1
  30. package/src/components/NSTabPage.module.css +3 -1
  31. package/src/components/NSTable.module.css +2 -0
  32. package/src/components/NSTable.tsx +1 -2
package/dist/App.js CHANGED
@@ -1,9 +1,56 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import './App.css';
3
3
  import 'bootstrap/dist/css/bootstrap.min.css';
4
- import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
4
+ import { NSTable } from './main';
5
5
  import { useRef } from 'react';
6
- import { NSPanel } from './components/NSPanel';
6
+ import { NSLayoutAction } from './components/NSLayoutAction';
7
+ const actions = [
8
+ {
9
+ group: "test-1",
10
+ items: [
11
+ {
12
+ id: "1",
13
+ menu_item: "View",
14
+ handler() {
15
+ console.log("View");
16
+ },
17
+ isActive() {
18
+ return true;
19
+ }
20
+ },
21
+ {
22
+ id: "2",
23
+ menu_item: "View History",
24
+ handler() {
25
+ console.log("View History");
26
+ },
27
+ isActive() {
28
+ return true;
29
+ }
30
+ },
31
+ {
32
+ id: "3",
33
+ menu_item: "Edit",
34
+ handler() {
35
+ console.log("Edit");
36
+ },
37
+ isActive() {
38
+ return true;
39
+ }
40
+ },
41
+ {
42
+ id: "4",
43
+ menu_item: "Delete",
44
+ handler() {
45
+ console.log("Delete");
46
+ },
47
+ isActive() {
48
+ return true;
49
+ }
50
+ },
51
+ ]
52
+ }
53
+ ];
7
54
  export function App() {
8
55
  let content1 = () => _jsx("p", { children: "Content for Tab" });
9
56
  let content2 = () => _jsx("p", { children: "Content for Tab" });
@@ -11,7 +58,9 @@ export function App() {
11
58
  const tabs = [
12
59
  { title: 'Information', getContent: content1 },
13
60
  { title: 'Price History', getContent: content2 },
14
- { title: 'Price Estimator', getContent: content3 }
61
+ { title: 'Price Estimator', getContent: content3 },
62
+ { title: 'Price Estimator2', getContent: content3 },
63
+ { title: 'Price Estimator3', getContent: content3 }
15
64
  ];
16
65
  let columns = {
17
66
  "id": "ID",
@@ -42,6 +91,7 @@ export function App() {
42
91
  return row[column];
43
92
  }
44
93
  let table = useRef(null);
45
- 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" } }), _jsxs("div", { children: [_jsx(NSPanel, { grid: true, children: _jsx("div", { children: "NS Panel" }) }), _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() })] }), _jsx(NSTabPage, { tabs: tabs }), _jsx(NSFooter, { name: 'Footer', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png' })] }));
94
+ console.log(tabs);
95
+ return (_jsx(_Fragment, { children: _jsx(NSLayoutAction, { notifications: [], actions: actions, title: 'Test', description: 'Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem ', scope: 'Namira Software Corporation', logo: 'https://static.namirasoft.com/image/namirasoft/site/logo/base.png', children: _jsx("div", { children: _jsx(NSTable, { ref: table, columns: columns, rows: rows, getCell: getCell, getColumnAttributes: () => { return {}; }, getRowKey: row => row.id.toString() }) }) }) }));
46
96
  }
47
97
  //# 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,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAG,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,UAAU,GAAG;IAElB,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,0BACC,KAAC,OAAO,IAAC,IAAI,kBAAC,qCAAmB,GAAU,EAC3C,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,IACG,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"}
1
+ {"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,MAAM,OAAO,GAAG;IACf;QACC,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE;YACN;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,MAAM;gBACjB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACpB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,cAAc;gBACzB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;gBAC5B,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,MAAM;gBACjB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACpB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,QAAQ;gBACnB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;gBACtB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;SACD;KACD;CACD,CAAA;AAED,MAAM,UAAU,GAAG;IAElB,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;QAClD,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAE;QACnD,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAE;KACnD,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,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACjB,OAAO,CACN,4BACC,KAAC,cAAc,IACd,aAAa,EAAE,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,wGAAwG,EACpH,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,YAExE,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,GACU,GACf,CACH,CAAC;AACH,CAAC"}
package/dist/components/NSActionMenu.js CHANGED
@@ -6,7 +6,7 @@ export function NSActionMenu(props) {
6
6
  const [state, setState] = useState({
7
7
  isShow: false
8
8
  });
9
- return (_jsx(_Fragment, { children: props.items.length !== 1 ?
9
+ return (_jsx(_Fragment, { children: props.items.length >= 1 ?
10
10
  _jsxs("div", { className: Styles.ns_action_bar, children: [_jsxs("button", { onClick: () => setState((prevState) => (Object.assign(Object.assign({}, prevState), { isShow: !state.isShow }))), children: ["Action Menu", _jsx("img", { className: Styles.ns_action_menu_icon, src: "https://static.namirasoft.com/image/concept/ellipsis/vertical-blue.png", alt: "Icon", width: 8, height: 24 })] }), _jsx("ul", { className: `${Styles.ns_action_item_holder} ${state.isShow ? Styles.ns_show : Styles.ns_hide} `, children: props.items.map((item) => _jsx("li", { onClick: item.handler, className: `${Styles.ns_action_item}
11
11
  ${item.isActive() ? Styles.ns_active_item : Styles.ns_deActive_item}
12
12
  `, children: item.menu_item }, item.id)) })] })
package/dist/components/NSActionMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAkB/C,MAAM,UAAU,YAAY,CAAC,KAAyB;IAErD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAA;IACF,OAAO,CACN,4BACE,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;YAE1B,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,4BAEF,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,YACjG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACzB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;WAChC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;UAClE,YAED,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GACG,IACA;YACN,CAAC;gBACD,4BACC,KAAC,YAAY,IACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,GACA,GAEF,CACH,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"NSActionMenu.js","sourceRoot":"","sources":["../../src/components/NSActionMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAkB/C,MAAM,UAAU,YAAY,CAAC,KAAyB;IAErD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB;QACtD,MAAM,EAAE,KAAK;KACb,CAAC,CAAA;IACF,OAAO,CACN,4BACE,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;YAEzB,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aACnC,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,iCAC3C,SAAS,KAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAClC,CAAC,4BAEF,cACC,SAAS,EAAE,MAAM,CAAC,mBAAmB,EACrC,GAAG,EAAC,wEAAwE,EAC5E,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,EAAE,GACT,IACM,EACT,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,YACjG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACzB,aAEC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc;WAChC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;UAClE,YAED,IAAI,CAAC,SAAS,IANV,IAAI,CAAC,EAAE,CAOR,CACL,GACG,IACA;YACN,CAAC;gBACD,4BACC,KAAC,YAAY,IACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAC9B,GACA,GAEF,CACH,CAAC;AACH,CAAC"}
package/dist/components/NSActionMenu.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  padding: 10px 12px;
13
13
  font-size: 16px;
14
14
  font-weight: 400;
15
- border: 1px solid rgba(47, 0, 236, 0.6) !important;
15
+ border: 1px solid #000;
16
16
  max-width: 100%;
17
17
  height: max-content !important;
18
18
  background: #fff;
@@ -39,6 +39,9 @@
39
39
  top: 64px;
40
40
  left: 0;
41
41
  width: 100%;
42
+ box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
43
+ -webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
44
+ -moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
42
45
  }
43
46
 
44
47
  .ns_action_item {
@@ -50,7 +53,7 @@
50
53
  padding: 0 16px;
51
54
  cursor: pointer;
52
55
  position: relative;
53
- z-index: 1;
56
+ z-index: 11;
54
57
  }
55
58
 
56
59
  .ns_action_item:hover {
package/dist/components/NSButtonBlue.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ns_button_blue {
2
2
  background-color: rgba(3, 119, 255, 1);
3
- box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
3
+ box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
4
4
  color: #fff !important;
5
5
  }
package/dist/components/NSLayoutAction.d.ts CHANGED
@@ -8,4 +8,7 @@ export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProp
8
8
  actions: INSActionMenuProps[];
9
9
  children: ReactNode;
10
10
  }
11
+ export interface INSLaoutActionState {
12
+ showDescription: boolean;
13
+ }
11
14
  export declare function NSLayoutAction(props: INSLayoutActionProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSLayoutAction.js CHANGED
@@ -1,13 +1,21 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useState } from 'react';
2
3
  import { NSLayout } from './NSLayout';
3
4
  import { NSSpace, NSSpaceSizeType } from './NSSpace';
4
5
  import Styles from './NSLayoutAction.module.css';
5
6
  import { NSActionMenu } from './NSActionMenu';
7
+ import { NSModal } from './NSModal';
6
8
  export function NSLayoutAction(props) {
7
9
  var _a;
8
10
  let lines = ((_a = props.description) !== null && _a !== void 0 ? _a : "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
11
+ const [state, setState] = useState({
12
+ showDescription: false
13
+ });
9
14
  const filtered_actions = props.actions.filter((action) => action.group);
10
- return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: Styles.ns_action_bar_title, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
15
+ const showHandler = () => {
16
+ setState(prevState => (Object.assign(Object.assign({}, prevState), { showDescription: !state.showDescription })));
17
+ };
18
+ return (_jsxs(NSLayout, Object.assign({}, props, { children: [_jsxs("div", { className: Styles.ns_action_bar_holder, children: [_jsxs("div", { className: `d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), _jsxs("button", { className: Styles.ns_info_container, onClick: showHandler, children: [_jsx("img", { src: 'https://static.namirasoft.com/image/concept/info/white-blue.svg', alt: 'info-icon', width: 24, height: 24 }), _jsx("span", { children: " Info " })] }), _jsx(NSModal, { show: state.showDescription, description: props.description, title: props.title })] }), _jsxs("div", { className: `d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`, children: [_jsx("h1", { className: Styles.title, children: props.title }), props.description && lines &&
11
19
  _jsxs(_Fragment, { children: [_jsx("p", { className: Styles.description, children: lines.map((line, index) => {
12
20
  return _jsxs(_Fragment, { children: [line.trim(), index != lines.length - 1 && _jsx("br", {})] });
13
21
  }) }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI })] })] }), _jsx("div", { className: Styles.ns_actions_hodler, children: filtered_actions.map((action) => _jsx(NSActionMenu, { group: action.group, items: action.items }, action.id)) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), props.children] })));
package/dist/components/NSLayoutAction.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAUlE,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAEvE,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAElB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAC1C,eAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,aACzC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;gCAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gDAEzB,OAAO,8BACL,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,IAClC,CAAA;4CACJ,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IAED,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"NSLayoutAction.js","sourceRoot":"","sources":["../../src/components/NSLayoutAction.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAkB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAapC,MAAM,UAAU,cAAc,CAAC,KAA2B;;IAEzD,IAAI,KAAK,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACzE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB;QACvD,eAAe,EAAE,KAAK;KACtB,CAAC,CAAA;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAEvE,MAAM,WAAW,GAAG,GAAS,EAAE;QAE9B,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,iCAClB,SAAS,KAAE,eAAe,EAAE,CAAC,KAAK,CAAC,eAAe,IACpD,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACN,MAAC,QAAQ,oBAAK,KAAK,eAElB,eAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAE1C,eAAK,SAAS,EAAE,oBAAoB,MAAM,CAAC,2BAA2B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE/C,kBAAQ,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,aAChE,cAAK,GAAG,EAAC,iEAAiE,EAAC,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACpH,oCAAmB,IACX,EAET,KAAC,OAAO,IACP,IAAI,EAAE,KAAK,CAAC,eAAe,EAC3B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GACjB,IACG,EAGN,eAAK,SAAS,EAAE,qBAAqB,MAAM,CAAC,0BAA0B,EAAE,aACvE,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,CAAC,KAAK,GAAM,EAE9C,KAAK,CAAC,WAAW,IAAI,KAAK;gCAC1B,8BACC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAE9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gDAEzB,OAAO,8BACL,IAAI,CAAC,IAAI,EAAE,EACX,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAM,IAClC,CAAA;4CACJ,CAAC,CAAC,GAEA,EACJ,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,IACrC,IAEC,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,KAAC,YAAY,IAEZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,EAAE,CAGb,CACF,GACI,IAED,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACvC,KAAK,CAAC,QAAQ,KACL,CACX,CAAC;AACH,CAAC"}
package/dist/components/NSLayoutAction.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  padding: 16px;
14
14
  position: sticky;
15
15
  top: 0;
16
- background-color: rgba(20, 27, 92, 0.3);
16
+ background-color: #fff;
17
17
  width: 100%;
18
18
  height: 100%;
19
19
  display: flex;
@@ -21,6 +21,9 @@
21
21
  flex-wrap: wrap;
22
22
  justify-content: center;
23
23
  align-items: center;
24
+ box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
25
+ -webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
26
+ -moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
24
27
  }
25
28
 
26
29
  .ns_actions_hodler {
@@ -32,14 +35,52 @@
32
35
  gap: 16px;
33
36
  }
34
37
 
35
- @media only screen and (min-width: 768px) {
38
+ .ns_info_container {
39
+ border: none;
40
+ outline: none;
41
+ background: none;
42
+ }
43
+
44
+ .ns_layout_description_holder {
45
+ display: flex;
46
+ }
47
+
48
+ .ns_hide {
49
+ display: none;
50
+ }
51
+
52
+ .ns_show {
53
+ display: flex;
54
+ }
55
+
56
+ .ns_desktop_action_bar_title {
57
+ display: none;
58
+ }
59
+
60
+ .ns_mobile_action_bar_title {
61
+ display: block;
62
+ }
63
+
64
+ @media only screen and (min-width: 992px) {
36
65
  .ns_action_bar_holder {
37
66
  justify-content: space-between;
38
67
  min-height: 80px;
39
68
  }
40
69
 
41
- .ns_action_bar_title {
70
+ .ns_desktop_action_bar_title {
71
+ display: flex;
72
+ }
73
+
74
+ .ns_mobile_action_bar_title {
75
+ display: none;
76
+ }
77
+
78
+ .ns_info_container {
79
+ margin: 0;
42
80
  display: flex;
81
+ align-items: center;
82
+ justify-content: flex-start;
83
+ gap: 4px;
43
84
  }
44
85
 
45
86
  }
package/dist/components/NSModal.d.ts CHANGED
@@ -1,9 +1,13 @@
1
+ /// <reference types="react" />
1
2
  import { IBaseComponentProps } from "../main";
2
3
  export interface INSModalProps extends IBaseComponentProps {
3
4
  title?: string;
4
5
  description?: string;
6
+ show: boolean;
7
+ children?: React.ReactNode;
5
8
  }
6
9
  export interface INSModalState {
7
- isShowModal: boolean;
10
+ closeModal: boolean;
11
+ visibilityClassNames: string;
8
12
  }
9
13
  export declare function NSModal(props: INSModalProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/NSModal.js CHANGED
@@ -1,12 +1,33 @@
1
+ "use client";
1
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { useState } from "react";
2
4
  import { NSSpace, NSSpaceSizeType, NSTitle } from "../main";
3
5
  import Styles from './NSModal.module.css';
6
+ import NSButton from "./NSButton";
4
7
  export function NSModal(props) {
5
8
  var _a;
6
- return (_jsx("section", { id: props.id, className: `
9
+ const [state, setState] = useState({
10
+ closeModal: false,
11
+ visibilityClassNames: ""
12
+ });
13
+ const closeModalHandler = () => {
14
+ setState(prevState => (Object.assign(Object.assign({}, prevState), { closeModal: !state.closeModal })));
15
+ };
16
+ let classNames;
17
+ const modalVisibilityClassName = () => {
18
+ if (state.closeModal && !props.show)
19
+ classNames = `${Styles.ns_hide}`;
20
+ else if (!state.closeModal && props.show)
21
+ classNames = `${Styles.ns_show}`;
22
+ else if (state.closeModal && props.show)
23
+ classNames = `${Styles.ns_hide}`;
24
+ return classNames;
25
+ };
26
+ let modalClassNames = modalVisibilityClassName();
27
+ return (_jsx("section", { onClick: closeModalHandler, id: props.id, className: `${modalClassNames}
7
28
  ${Styles.ns_modal}
8
- ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [props.title &&
9
- _jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }), props.description &&
10
- _jsxs("p", { className: Styles.ns_modal_description, children: [" ", props.description, " "] })] }) }));
29
+ ${(_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: closeModalHandler, icon: { src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), _jsxs("div", { className: Styles.ns_modal_content, children: [props.title &&
30
+ _jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }), props.description &&
31
+ _jsxs("p", { className: Styles.ns_modal_description, children: [" ", props.description, " "] })] })] }) }));
11
32
  }
12
33
  //# 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":";AAAA,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAW1C,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAG3C,OAAO,CACN,kBAEC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE;KACT,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,aAEvC,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,IAEjE,GACI,CACX,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAclC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB;QACjD,UAAU,EAAE,KAAK;QACjB,oBAAoB,EAAE,EAAE;KACxB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,GAAS,EAAE;QAEpC,QAAQ,CAAC,SAAS,CAAC,EAAE,CACrB,iCACI,SAAS,KAAE,UAAU,EAAE,CAAC,KAAK,CAAC,UAAU,IAC1C,CAAC,CAAC;IACL,CAAC,CAAA;IAED,IAAI,UAAkB,CAAC;IACvB,MAAM,wBAAwB,GAAG,GAAW,EAAE;QAE7C,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,IAAI;YAClC,UAAU,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,CAAA;aAC5B,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI;YACvC,UAAU,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,CAAA;aAC5B,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI;YACtC,UAAU,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,CAAA;QACjC,OAAO,UAAU,CAAC;IACnB,CAAC,CAAA;IAGD,IAAI,eAAe,GAAW,wBAAwB,EAAE,CAAC;IAEzD,OAAO,CAEN,kBACC,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,GAAG,eAAe;KAC3B,MAAM,CAAC,QAAQ;KACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAE9B,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,KAAC,QAAQ,IACR,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAE,EAAE,GAAG,EAAE,4DAA4D,EAAE,GAAG,EAAE,aAAa,EAAE,EAC/F,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EAEF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACrC,KAAK,CAAC,KAAK;4BACX,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;4BACjB,aAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,kBAAK,KAAK,CAAC,WAAW,SAAM,IAEjE,IACD,GACI,CACX,CAAC;AACH,CAAC"}
package/dist/components/NSModal.module.css CHANGED
@@ -1,14 +1,54 @@
1
-
2
1
  /* Modal */
3
2
  .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);
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ border-radius: 8px;
7
+ padding: 24px;
8
+ margin: 0 16px;
9
+ z-index: 10;
10
+ color: rgba(20, 27, 92, 1);
11
+ width: 100%;
12
+ height: 100%;
13
+ background: #ffffff2a;
14
+ right: 0;
15
+ bottom: 0;
16
+ margin: 0;
17
+ display: none;
18
+ justify-content: center;
19
+ align-items: center;
20
+ z-index: 99;
21
+ }
22
+
23
+ .ns_modal_container {
24
+ background-color: #fff;
25
+ width: 80%;
26
+ height: 80%;
27
+ position: relative;
28
+ border-radius: 24px;
29
+ }
30
+
31
+ .ns_close_modal {
32
+ border: none;
33
+ position: absolute;
34
+ right: 0;
35
+ top: 24px;
36
+ width: 128px;
37
+ }
38
+
39
+ .ns_modal_content {
40
+ display: flex;
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ align-items: center;
44
+ height: 100%;
45
+ }
46
+
47
+
48
+
49
+ .ns_show {
50
+ display: block;
14
51
  }
52
+ .ns_hide {
53
+ display: none;
54
+ }
package/dist/components/NSSelectBox.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  .ns_input_select {
8
8
  height: 48px;
9
- border: 1px solid rgba(47, 0, 236, 0.6) !important;
9
+ border: 1px solid #000 !important;
10
10
  border-radius: 8px;
11
11
  width: 272px !important;
12
12
  }
package/dist/components/NSTabPage.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  overflow: hidden;
4
4
  background: #141B5C;
5
5
  padding: 16px;
6
+ width: 100%;
6
7
  }
7
8
 
8
9
  .ns_tab_page_panel ul {
@@ -10,6 +11,7 @@
10
11
  margin: 0;
11
12
  padding: 0;
12
13
  display: flex;
14
+ overflow: scroll;
13
15
  }
14
16
 
15
17
  .ns_tab_page_panel li {
@@ -35,4 +37,4 @@
35
37
  padding: 16px;
36
38
  border-radius: 0 8px 8px 8px;
37
39
  background-color: #fff;
38
- }
40
+ }
package/dist/components/NSTable.js CHANGED
@@ -57,7 +57,7 @@ export class NSTable extends Component {
57
57
  if (!overided)
58
58
  this.showModal(getCell(row, column, rowIndex, columnIndex));
59
59
  };
60
- return (_jsxs("div", { id: this.props.id, className: `${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, style: { padding: "0", margin: "0" } }) }), _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 })] }));
60
+ return (_jsxs("div", { id: this.props.id, className: `${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, style: { padding: "0", margin: "0" } }) }), _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, { show: this.state.model.show, description: this.state.model.description })] }));
61
61
  }
62
62
  }
63
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
@@ -9,6 +9,8 @@
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
11
  flex-wrap: wrap;
12
+ position: relative;
13
+ z-index: -1;
12
14
  }
13
15
 
14
16
  .ns_table thead {
package/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "framework": "npm",
9
9
  "application": "package",
10
10
  "private": false,
11
- "version": "1.3.94",
11
+ "version": "1.3.96",
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,8 +1,65 @@
1
1
  import './App.css';
2
2
  import 'bootstrap/dist/css/bootstrap.min.css';
3
- import { NSFooter, NSHeader, NSTable, NSTabPage } from './main';
3
+ import { NSTable } from './main';
4
4
  import { useRef } from 'react';
5
- import { NSPanel } from './components/NSPanel';
5
+ import { NSLayoutAction } from './components/NSLayoutAction';
6
+
7
+
8
+ const actions = [
9
+ {
10
+ group: "test-1",
11
+ items: [
12
+ {
13
+ id: "1",
14
+ menu_item: "View",
15
+ handler()
16
+ {
17
+ console.log("View")
18
+ },
19
+ isActive()
20
+ {
21
+ return true
22
+ }
23
+ },
24
+ {
25
+ id: "2",
26
+ menu_item: "View History",
27
+ handler()
28
+ {
29
+ console.log("View History")
30
+ },
31
+ isActive()
32
+ {
33
+ return true
34
+ }
35
+ },
36
+ {
37
+ id: "3",
38
+ menu_item: "Edit",
39
+ handler()
40
+ {
41
+ console.log("Edit")
42
+ },
43
+ isActive()
44
+ {
45
+ return true
46
+ }
47
+ },
48
+ {
49
+ id: "4",
50
+ menu_item: "Delete",
51
+ handler()
52
+ {
53
+ console.log("Delete")
54
+ },
55
+ isActive()
56
+ {
57
+ return true
58
+ }
59
+ },
60
+ ]
61
+ }
62
+ ]
6
63
 
7
64
  export function App()
8
65
  {
@@ -12,7 +69,9 @@ export function App()
12
69
  const tabs = [
13
70
  { title: 'Information', getContent: content1 },
14
71
  { title: 'Price History', getContent: content2 },
15
- { title: 'Price Estimator', getContent: content3 }
72
+ { title: 'Price Estimator', getContent: content3 },
73
+ { title: 'Price Estimator2', getContent: content3 },
74
+ { title: 'Price Estimator3', getContent: content3 }
16
75
  ];
17
76
  let columns = {
18
77
  "id": "ID",
@@ -53,28 +112,28 @@ export function App()
53
112
  return (row as any)[column];
54
113
  }
55
114
  let table = useRef<NSTable<Row>>(null);
115
+ console.log(tabs)
56
116
  return (
57
117
  <>
58
- <NSHeader
59
- name='Header'
118
+ <NSLayoutAction
119
+ notifications={[]}
120
+ actions={actions}
121
+ title='Test'
122
+ description='Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem Lorem lorem orem '
60
123
  scope='Namira Software Corporation'
61
124
  logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png'
62
- account={false}
63
- style={{ backgroundColor: "transparent !important" }}
64
- />
65
- <div>
66
- <NSPanel grid><div>NS Panel</div></NSPanel>
67
- <NSTable
68
- ref={table}
69
- columns={columns}
70
- rows={rows}
71
- getCell={getCell}
72
- getColumnAttributes={() => { return {} }}
73
- getRowKey={row => row.id.toString()}
74
- />
75
- </div>
76
- <NSTabPage tabs={tabs} />
77
- <NSFooter name='Footer' scope='Namira Software Corporation' logo='https://static.namirasoft.com/image/namirasoft/site/logo/base.png' />
125
+ >
126
+ <div>
127
+ <NSTable
128
+ ref={table}
129
+ columns={columns}
130
+ rows={rows}
131
+ getCell={getCell}
132
+ getColumnAttributes={() => { return {} }}
133
+ getRowKey={row => row.id.toString()}
134
+ />
135
+ </div>
136
+ </NSLayoutAction>
78
137
  </>
79
138
  );
80
139
  }
package/src/components/NSActionMenu.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  padding: 10px 12px;
13
13
  font-size: 16px;
14
14
  font-weight: 400;
15
- border: 1px solid rgba(47, 0, 236, 0.6) !important;
15
+ border: 1px solid #000;
16
16
  max-width: 100%;
17
17
  height: max-content !important;
18
18
  background: #fff;
@@ -39,6 +39,9 @@
39
39
  top: 64px;
40
40
  left: 0;
41
41
  width: 100%;
42
+ box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
43
+ -webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
44
+ -moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
42
45
  }
43
46
 
44
47
  .ns_action_item {
@@ -50,7 +53,7 @@
50
53
  padding: 0 16px;
51
54
  cursor: pointer;
52
55
  position: relative;
53
- z-index: 1;
56
+ z-index: 11;
54
57
  }
55
58
 
56
59
  .ns_action_item:hover {
package/src/components/NSActionMenu.tsx CHANGED
@@ -25,7 +25,7 @@ export function NSActionMenu(props: INSActionMenuProps)
25
25
  })
26
26
  return (
27
27
  <>
28
- {props.items.length !== 1 ?
28
+ {props.items.length >= 1 ?
29
29
 
30
30
  <div className={Styles.ns_action_bar}>
31
31
  <button onClick={() => setState((prevState) => ({
package/src/components/NSButtonBlue.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ns_button_blue {
2
2
  background-color: rgba(3, 119, 255, 1);
3
- box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
3
+ box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%),inset 0 4px 4px 0px rgba(255, 255, 255, 0.25);
4
4
  color: #fff !important;
5
5
  }
package/src/components/NSLayoutAction.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  padding: 16px;
14
14
  position: sticky;
15
15
  top: 0;
16
- background-color: rgba(20, 27, 92, 0.3);
16
+ background-color: #fff;
17
17
  width: 100%;
18
18
  height: 100%;
19
19
  display: flex;
@@ -21,6 +21,9 @@
21
21
  flex-wrap: wrap;
22
22
  justify-content: center;
23
23
  align-items: center;
24
+ box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
25
+ -webkit-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
26
+ -moz-box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
24
27
  }
25
28
 
26
29
  .ns_actions_hodler {
@@ -32,14 +35,52 @@
32
35
  gap: 16px;
33
36
  }
34
37
 
35
- @media only screen and (min-width: 768px) {
38
+ .ns_info_container {
39
+ border: none;
40
+ outline: none;
41
+ background: none;
42
+ }
43
+
44
+ .ns_layout_description_holder {
45
+ display: flex;
46
+ }
47
+
48
+ .ns_hide {
49
+ display: none;
50
+ }
51
+
52
+ .ns_show {
53
+ display: flex;
54
+ }
55
+
56
+ .ns_desktop_action_bar_title {
57
+ display: none;
58
+ }
59
+
60
+ .ns_mobile_action_bar_title {
61
+ display: block;
62
+ }
63
+
64
+ @media only screen and (min-width: 992px) {
36
65
  .ns_action_bar_holder {
37
66
  justify-content: space-between;
38
67
  min-height: 80px;
39
68
  }
40
69
 
41
- .ns_action_bar_title {
70
+ .ns_desktop_action_bar_title {
71
+ display: flex;
72
+ }
73
+
74
+ .ns_mobile_action_bar_title {
75
+ display: none;
76
+ }
77
+
78
+ .ns_info_container {
79
+ margin: 0;
42
80
  display: flex;
81
+ align-items: center;
82
+ justify-content: flex-start;
83
+ gap: 4px;
43
84
  }
44
85
 
45
86
  }
package/src/components/NSLayoutAction.tsx CHANGED
@@ -1,9 +1,10 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactNode, useState } from 'react';
2
2
  import { NSLayout, INSLayoutProps } from './NSLayout';
3
3
  import { NSSpace, NSSpaceSizeType } from './NSSpace';
4
4
  import { IBaseComponentProps } from '../props/IBaseComponentProps';
5
5
  import Styles from './NSLayoutAction.module.css';
6
6
  import { INSActionMenuProps, NSActionMenu } from './NSActionMenu';
7
+ import { NSModal } from './NSModal';
7
8
 
8
9
  export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProps
9
10
  {
@@ -12,18 +13,48 @@ export interface INSLayoutActionProps extends INSLayoutProps, IBaseComponentProp
12
13
  actions: INSActionMenuProps[];
13
14
  children: ReactNode;
14
15
  }
15
-
16
+ export interface INSLaoutActionState
17
+ {
18
+ showDescription: boolean
19
+ }
16
20
  export function NSLayoutAction(props: INSLayoutActionProps)
17
21
  {
18
22
  let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
23
+ const [state, setState] = useState<INSLaoutActionState>({
24
+ showDescription: false
25
+ })
19
26
 
20
27
  const filtered_actions = props.actions.filter((action) => action.group)
21
28
 
29
+ const showHandler = (): void =>
30
+ {
31
+ setState(prevState => ({
32
+ ...prevState, showDescription: !state.showDescription
33
+ }))
34
+ }
35
+
22
36
  return (
23
37
  <NSLayout {...props}>
24
38
 
25
39
  <div className={Styles.ns_action_bar_holder}>
26
- <div className={Styles.ns_action_bar_title}>
40
+ {/* Desktop */}
41
+ <div className={`d-none d-lg-flex ${Styles.ns_desktop_action_bar_title}`}>
42
+ <h1 className={Styles.title}>{props.title}</h1>
43
+
44
+ <button className={Styles.ns_info_container} onClick={showHandler}>
45
+ <img src='https://static.namirasoft.com/image/concept/info/white-blue.svg' alt='info-icon' width={24} height={24} />
46
+ <span> Info </span>
47
+ </button>
48
+
49
+ <NSModal
50
+ show={state.showDescription}
51
+ description={props.description}
52
+ title={props.title}
53
+ />
54
+ </div>
55
+
56
+ {/* Mobile */}
57
+ <div className={`d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
27
58
  <h1 className={Styles.title}>{props.title}</h1>
28
59
  {
29
60
  props.description && lines &&
package/src/components/NSModal.module.css CHANGED
@@ -1,14 +1,54 @@
1
-
2
1
  /* Modal */
3
2
  .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);
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ border-radius: 8px;
7
+ padding: 24px;
8
+ margin: 0 16px;
9
+ z-index: 10;
10
+ color: rgba(20, 27, 92, 1);
11
+ width: 100%;
12
+ height: 100%;
13
+ background: #ffffff2a;
14
+ right: 0;
15
+ bottom: 0;
16
+ margin: 0;
17
+ display: none;
18
+ justify-content: center;
19
+ align-items: center;
20
+ z-index: 99;
21
+ }
22
+
23
+ .ns_modal_container {
24
+ background-color: #fff;
25
+ width: 80%;
26
+ height: 80%;
27
+ position: relative;
28
+ border-radius: 24px;
29
+ }
30
+
31
+ .ns_close_modal {
32
+ border: none;
33
+ position: absolute;
34
+ right: 0;
35
+ top: 24px;
36
+ width: 128px;
37
+ }
38
+
39
+ .ns_modal_content {
40
+ display: flex;
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ align-items: center;
44
+ height: 100%;
45
+ }
46
+
47
+
48
+
49
+ .ns_show {
50
+ display: block;
14
51
  }
52
+ .ns_hide {
53
+ display: none;
54
+ }
package/src/components/NSModal.tsx CHANGED
@@ -1,38 +1,81 @@
1
+ "use client"
2
+
3
+ import { useState } from "react";
1
4
  import { IBaseComponentProps, NSSpace, NSSpaceSizeType, NSTitle } from "../main";
2
5
  import Styles from './NSModal.module.css';
6
+ import NSButton from "./NSButton";
3
7
 
4
8
  export interface INSModalProps extends IBaseComponentProps
5
9
  {
6
- title?: string
7
- description?: string
10
+ title?: string;
11
+ description?: string;
12
+ show: boolean;
13
+ children?: React.ReactNode;
8
14
  }
9
15
  export interface INSModalState
10
16
  {
11
- isShowModal: boolean
17
+ closeModal: boolean;
18
+ visibilityClassNames: string;
12
19
  }
13
20
  export function NSModal(props: INSModalProps)
14
21
  {
22
+ const [state, setState] = useState<INSModalState>({
23
+ closeModal: false,
24
+ visibilityClassNames: ""
25
+ });
26
+
27
+ const closeModalHandler = (): void =>
28
+ {
29
+ setState(prevState =>
30
+ ({
31
+ ...prevState, closeModal: !state.closeModal
32
+ }));
33
+ }
15
34
 
35
+ let classNames: string;
36
+ const modalVisibilityClassName = (): string =>
37
+ {
38
+ if (state.closeModal && !props.show)
39
+ classNames = `${Styles.ns_hide}`
40
+ else if (!state.closeModal && props.show)
41
+ classNames = `${Styles.ns_show}`
42
+ else if (state.closeModal && props.show)
43
+ classNames = `${Styles.ns_hide}`
44
+ return classNames;
45
+ }
46
+ // show -> true va close -> false --> show
47
+ // show -> false va close -> true --> hiden
48
+ let modalClassNames: string = modalVisibilityClassName();
49
+
16
50
  return (
17
- <section
18
51
 
52
+ <section
53
+ onClick={closeModalHandler}
19
54
  id={props.id}
20
- className={`
55
+ className={`${modalClassNames}
21
56
  ${Styles.ns_modal}
22
- ${props.classList?.join(" ")}`}
57
+ ${props.classList?.join(" ")}`
58
+ }
23
59
  style={props.style}
24
60
  >
25
61
  <div className={Styles.ns_modal_container}>
62
+ <NSButton
63
+ onClick={closeModalHandler}
64
+ icon={{ src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close modal" }}
65
+ classList={[Styles.ns_close_modal]}
66
+ />
26
67
 
27
- {props.title &&
28
- <>
29
- <NSTitle title={props.title} />
30
- <NSSpace size={NSSpaceSizeType.NORMAL} />
31
- </>
32
- }
33
- {props.description &&
34
- <p className={Styles.ns_modal_description} > {props.description} </p>
35
- }
68
+ <div className={Styles.ns_modal_content}>
69
+ {props.title &&
70
+ <>
71
+ <NSTitle title={props.title} />
72
+ <NSSpace size={NSSpaceSizeType.NORMAL} />
73
+ </>
74
+ }
75
+ {props.description &&
76
+ <p className={Styles.ns_modal_description} > {props.description} </p>
77
+ }
78
+ </div>
36
79
  </div>
37
80
  </section >
38
81
  );
package/src/components/NSSelectBox.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  .ns_input_select {
8
8
  height: 48px;
9
- border: 1px solid rgba(47, 0, 236, 0.6) !important;
9
+ border: 1px solid #000 !important;
10
10
  border-radius: 8px;
11
11
  width: 272px !important;
12
12
  }
package/src/components/NSTabPage.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  overflow: hidden;
4
4
  background: #141B5C;
5
5
  padding: 16px;
6
+ width: 100%;
6
7
  }
7
8
 
8
9
  .ns_tab_page_panel ul {
@@ -10,6 +11,7 @@
10
11
  margin: 0;
11
12
  padding: 0;
12
13
  display: flex;
14
+ overflow: scroll;
13
15
  }
14
16
 
15
17
  .ns_tab_page_panel li {
@@ -35,4 +37,4 @@
35
37
  padding: 16px;
36
38
  border-radius: 0 8px 8px 8px;
37
39
  background-color: #fff;
38
- }
40
+ }
package/src/components/NSTable.module.css CHANGED
@@ -9,6 +9,8 @@
9
9
  justify-content: space-between;
10
10
  align-items: center;
11
11
  flex-wrap: wrap;
12
+ position: relative;
13
+ z-index: -1;
12
14
  }
13
15
 
14
16
  .ns_table thead {
package/src/components/NSTable.tsx CHANGED
@@ -133,8 +133,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
133
133
  </section>
134
134
  <NSSpace size={NSSpaceSizeType.SMALL} />
135
135
  <NSModal
136
- style={{ display: this.state.model.show ? "block" : "none" }}
137
- // todo show={this.state.model.show}
136
+ show={this.state.model.show}
138
137
  description={this.state.model.description}
139
138
  />
140
139
  </div >