namirasoft-site-react 1.3.326 → 1.3.328

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 (356) hide show
  1. package/.dockerignore +86 -86
  2. package/Dockerfile +18 -18
  3. package/config-overrides.js +70 -70
  4. package/dist/App.css +17 -0
  5. package/dist/assets/images/1.png +0 -0
  6. package/dist/assets/images/2.png +0 -0
  7. package/dist/assets/images/3.png +0 -0
  8. package/dist/assets/images/4.png +0 -0
  9. package/dist/assets/images/404 image.svg +9 -9
  10. package/dist/assets/images/404 image_mobile.svg +9 -9
  11. package/dist/assets/images/5.jpg +0 -0
  12. package/dist/assets/images/arrow.svg +3 -3
  13. package/dist/assets/images/danger.svg +3 -3
  14. package/dist/assets/images/exit.svg +3 -3
  15. package/dist/assets/images/icon-export.svg +3 -0
  16. package/dist/assets/images/icon-input-copy.svg +3 -3
  17. package/dist/assets/images/icon-input-date.svg +9 -9
  18. package/dist/assets/images/icon-input-duration.svg +9 -9
  19. package/dist/assets/images/icon-input-email.svg +9 -9
  20. package/dist/assets/images/icon-input-float.svg +9 -9
  21. package/dist/assets/images/icon-input-id.svg +9 -0
  22. package/dist/assets/images/icon-input-integer.svg +9 -9
  23. package/dist/assets/images/icon-input-ip.svg +9 -9
  24. package/dist/assets/images/icon-input-phone.svg +9 -9
  25. package/dist/assets/images/icon-input-price.svg +9 -9
  26. package/dist/assets/images/icon-input-search.svg +3 -3
  27. package/dist/assets/images/icon-input-string.svg +9 -9
  28. package/dist/assets/images/icon-input-text.svg +9 -9
  29. package/dist/assets/images/icon-input-time.svg +9 -9
  30. package/dist/assets/images/icon-refresh.svg +3 -0
  31. package/dist/assets/images/icon-select-box.svg +3 -3
  32. package/dist/assets/images/logo.svg +9 -9
  33. package/dist/assets/images/menu.svg +3 -3
  34. package/dist/assets/images/namira.svg +9 -9
  35. package/dist/assets/images/rectangle.svg +3 -3
  36. package/dist/components/NSAccess.d.ts +2 -0
  37. package/dist/components/NSAccess.js +8 -0
  38. package/dist/components/NSAccess.js.map +1 -0
  39. package/dist/components/NSAccess.module.css +39 -0
  40. package/dist/components/NSActionMenu.js +2 -2
  41. package/dist/components/NSActionMenu.module.css +75 -75
  42. package/dist/components/NSAssistantButton.module.css +133 -133
  43. package/dist/components/NSBarAction.module.css +87 -87
  44. package/dist/components/NSBarHeroBanner.module.css +42 -42
  45. package/dist/components/NSBarNotification.module.css +34 -34
  46. package/dist/components/NSBarTitle.module.css +9 -9
  47. package/dist/components/NSBox.module.css +123 -123
  48. package/dist/components/NSBoxBoolean.module.css +53 -53
  49. package/dist/components/NSBoxCombo.module.css +16 -16
  50. package/dist/components/NSBoxDate.module.css +39 -39
  51. package/dist/components/NSBoxEntity.module.css +21 -21
  52. package/dist/components/NSBoxErrorNotifier.module.css +2 -2
  53. package/dist/components/NSBoxLabel.module.css +12 -12
  54. package/dist/components/NSBoxOTP.module.css +10 -10
  55. package/dist/components/NSBoxString.d.ts +1 -0
  56. package/dist/components/NSBoxString.js +5 -1
  57. package/dist/components/NSBoxString.js.map +1 -1
  58. package/dist/components/NSBoxText.d.ts +25 -0
  59. package/dist/components/NSBoxText.js +56 -0
  60. package/dist/components/NSBoxText.js.map +1 -0
  61. package/dist/components/NSBoxTextArea.module.css +76 -76
  62. package/dist/components/NSButton.module.css +27 -27
  63. package/dist/components/NSButtonBlue.module.css +4 -4
  64. package/dist/components/NSButtonGreen.module.css +4 -4
  65. package/dist/components/NSButtonRed.module.css +4 -4
  66. package/dist/components/NSCard.module.css +108 -108
  67. package/dist/components/NSCopyToClipboard.module.css +39 -39
  68. package/dist/components/NSElectronicCard.module.css +60 -60
  69. package/dist/components/NSEntityBar.module.css +77 -77
  70. package/dist/components/NSEntityCardBackground.module.css +27 -27
  71. package/dist/components/NSFilterBox.module.css +47 -47
  72. package/dist/components/NSFilterBoxDialog.module.css +36 -36
  73. package/dist/components/NSFilterItem.module.css +23 -23
  74. package/dist/components/NSFooter.module.css +123 -123
  75. package/dist/components/NSGroupedList.module.css +72 -72
  76. package/dist/components/NSHeader.module.css +271 -271
  77. package/dist/components/NSInput.module.css +74 -0
  78. package/dist/components/NSInputDate.d.ts +21 -0
  79. package/dist/components/NSInputDate.js +41 -0
  80. package/dist/components/NSInputDate.js.map +1 -0
  81. package/dist/components/NSInputDate.module.css +42 -0
  82. package/dist/components/NSInputDuration.d.ts +23 -0
  83. package/dist/components/NSInputDuration.js +42 -0
  84. package/dist/components/NSInputDuration.js.map +1 -0
  85. package/dist/components/NSInputEmail.d.ts +22 -0
  86. package/dist/components/NSInputEmail.js +43 -0
  87. package/dist/components/NSInputEmail.js.map +1 -0
  88. package/dist/components/NSInputErrorNotifier.d.ts +5 -0
  89. package/dist/components/NSInputErrorNotifier.js +7 -0
  90. package/dist/components/NSInputErrorNotifier.js.map +1 -0
  91. package/dist/components/NSInputErrorNotifier.module.css +3 -0
  92. package/dist/components/NSInputFloat.d.ts +22 -0
  93. package/dist/components/NSInputFloat.js +41 -0
  94. package/dist/components/NSInputFloat.js.map +1 -0
  95. package/dist/components/NSInputIP.d.ts +22 -0
  96. package/dist/components/NSInputIP.js +43 -0
  97. package/dist/components/NSInputIP.js.map +1 -0
  98. package/dist/components/NSInputInteger.d.ts +22 -0
  99. package/dist/components/NSInputInteger.js +41 -0
  100. package/dist/components/NSInputInteger.js.map +1 -0
  101. package/dist/components/NSInputPassword.d.ts +22 -0
  102. package/dist/components/NSInputPassword.js +42 -0
  103. package/dist/components/NSInputPassword.js.map +1 -0
  104. package/dist/components/NSInputPhone.d.ts +22 -0
  105. package/dist/components/NSInputPhone.js +38 -0
  106. package/dist/components/NSInputPhone.js.map +1 -0
  107. package/dist/components/NSInputPrice.d.ts +22 -0
  108. package/dist/components/NSInputPrice.js +41 -0
  109. package/dist/components/NSInputPrice.js.map +1 -0
  110. package/dist/components/NSInputSearch.d.ts +22 -0
  111. package/dist/components/NSInputSearch.js +41 -0
  112. package/dist/components/NSInputSearch.js.map +1 -0
  113. package/dist/components/NSInputString.d.ts +22 -0
  114. package/dist/components/NSInputString.js +42 -0
  115. package/dist/components/NSInputString.js.map +1 -0
  116. package/dist/components/NSInputText.d.ts +22 -0
  117. package/dist/components/NSInputText.js +42 -0
  118. package/dist/components/NSInputText.js.map +1 -0
  119. package/dist/components/NSInputTime.d.ts +22 -0
  120. package/dist/components/NSInputTime.js +43 -0
  121. package/dist/components/NSInputTime.js.map +1 -0
  122. package/dist/components/NSLayout.module.css +13 -13
  123. package/dist/components/NSLayoutAction.d.ts +5 -0
  124. package/dist/components/NSLayoutAction.js +20 -0
  125. package/dist/components/NSLayoutAction.js.map +1 -0
  126. package/dist/components/NSLayoutAction.module.css +88 -0
  127. package/dist/components/NSLayoutHeroBanner.d.ts +2 -0
  128. package/dist/components/NSLayoutHeroBanner.js +8 -0
  129. package/dist/components/NSLayoutHeroBanner.js.map +1 -0
  130. package/dist/components/NSLayoutHeroBanner.module.css +43 -0
  131. package/dist/components/NSLayoutTitle.d.ts +2 -0
  132. package/dist/components/NSLayoutTitle.js +11 -0
  133. package/dist/components/NSLayoutTitle.js.map +1 -0
  134. package/dist/components/NSLayoutTitle.module.css +10 -0
  135. package/dist/components/NSLink.module.css +36 -36
  136. package/dist/components/NSLoading.module.css +29 -29
  137. package/dist/components/NSModal.js +2 -2
  138. package/dist/components/NSModal.module.css +70 -70
  139. package/dist/components/NSNoData.module.css +8 -8
  140. package/dist/components/NSNotification.d.ts +21 -0
  141. package/dist/components/NSNotification.js +37 -0
  142. package/dist/components/NSNotification.js.map +1 -0
  143. package/dist/components/NSNotification.module.css +32 -0
  144. package/dist/components/NSPageSelectionModal.d.ts +1 -0
  145. package/dist/components/NSPageSelectionModal.js +59 -35
  146. package/dist/components/NSPageSelectionModal.js.map +1 -1
  147. package/dist/components/NSPageSelectionModal.module.css +101 -101
  148. package/dist/components/NSPagination.module.css +101 -101
  149. package/dist/components/NSPanel.module.css +46 -46
  150. package/dist/components/NSPrintModal.d.ts +15 -0
  151. package/dist/components/NSPrintModal.js +35 -0
  152. package/dist/components/NSPrintModal.js.map +1 -0
  153. package/dist/components/NSPrintModal.module.css +82 -0
  154. package/dist/components/NSRadioButton.module.css +28 -28
  155. package/dist/components/NSSection.module.css +10 -10
  156. package/dist/components/NSSectionBars.module.css +10 -10
  157. package/dist/components/NSSectionCards.module.css +38 -38
  158. package/dist/components/NSSelectBox.d.ts +24 -0
  159. package/dist/components/NSSelectBox.js +61 -0
  160. package/dist/components/NSSelectBox.js.map +1 -0
  161. package/dist/components/NSSelectBox.module.css +42 -0
  162. package/dist/components/NSTabPage.module.css +57 -57
  163. package/dist/components/NSTable.module.css +229 -229
  164. package/dist/components/NSTag.module.css +44 -44
  165. package/dist/components/NSTitle.module.css +15 -15
  166. package/dist/components/NSVerification.module.css +22 -22
  167. package/dist/index.css +6 -0
  168. package/dist/pages/NSLoginPage.module.css +19 -19
  169. package/dist/pages/NSNotFoundPage.module.css +18 -18
  170. package/dist/props/BaseComponentProps.d.ts +6 -0
  171. package/dist/props/BaseComponentProps.js +2 -0
  172. package/dist/props/BaseComponentProps.js.map +10 -0
  173. package/dist/props/INamirasoftProps.d.ts +4 -0
  174. package/dist/props/INamirasoftProps.js +2 -0
  175. package/dist/props/INamirasoftProps.js.map +1 -0
  176. package/dist/props/ImageProps.d.ts +4 -0
  177. package/dist/props/ImageProps.js +2 -0
  178. package/dist/props/ImageProps.js.map +10 -0
  179. package/dist/props/LinkProps.d.ts +5 -0
  180. package/dist/props/LinkProps.js +2 -0
  181. package/dist/props/LinkProps.js.map +10 -0
  182. package/dist/props/ValidationNumberProps.d.ts +4 -0
  183. package/dist/props/ValidationNumberProps.js +2 -0
  184. package/dist/props/ValidationNumberProps.js.map +10 -0
  185. package/dist/props/ValidationProps.d.ts +6 -0
  186. package/dist/props/ValidationProps.js +2 -0
  187. package/dist/props/ValidationProps.js.map +10 -0
  188. package/dist/props/ValidationRegexProps.d.ts +4 -0
  189. package/dist/props/ValidationRegexProps.js +2 -0
  190. package/dist/props/ValidationRegexProps.js.map +1 -0
  191. package/dist/props/ValidationStringProps.d.ts +4 -0
  192. package/dist/props/ValidationStringProps.js +2 -0
  193. package/dist/props/ValidationStringProps.js.map +10 -0
  194. package/package.json +67 -67
  195. package/public/index.html +38 -38
  196. package/src/App.css +16 -16
  197. package/src/App.tsx +166 -166
  198. package/src/CopyToClipboard.ts +6 -6
  199. package/src/Validator.ts +110 -110
  200. package/src/assets/images/404 image.svg +9 -9
  201. package/src/assets/images/404 image_mobile.svg +9 -9
  202. package/src/assets/images/arrow.svg +3 -3
  203. package/src/assets/images/danger.svg +3 -3
  204. package/src/assets/images/exit.svg +3 -3
  205. package/src/assets/images/icon-input-copy.svg +3 -3
  206. package/src/assets/images/icon-input-date.svg +9 -9
  207. package/src/assets/images/icon-input-duration.svg +9 -9
  208. package/src/assets/images/icon-input-email.svg +9 -9
  209. package/src/assets/images/icon-input-float.svg +9 -9
  210. package/src/assets/images/icon-input-integer.svg +9 -9
  211. package/src/assets/images/icon-input-ip.svg +9 -9
  212. package/src/assets/images/icon-input-phone.svg +9 -9
  213. package/src/assets/images/icon-input-price.svg +9 -9
  214. package/src/assets/images/icon-input-search.svg +3 -3
  215. package/src/assets/images/icon-input-string.svg +9 -9
  216. package/src/assets/images/icon-input-text.svg +9 -9
  217. package/src/assets/images/icon-input-time.svg +9 -9
  218. package/src/assets/images/icon-select-box.svg +3 -3
  219. package/src/assets/images/logo.svg +9 -9
  220. package/src/assets/images/menu.svg +3 -3
  221. package/src/assets/images/namira.svg +9 -9
  222. package/src/assets/images/rectangle.svg +3 -3
  223. package/src/components/NSActionMenu.module.css +75 -75
  224. package/src/components/NSActionMenu.tsx +88 -88
  225. package/src/components/NSAssistantButton.module.css +133 -133
  226. package/src/components/NSAssistantButton.tsx +74 -74
  227. package/src/components/NSBarAction.module.css +87 -87
  228. package/src/components/NSBarAction.tsx +86 -86
  229. package/src/components/NSBarHeroBanner.module.css +42 -42
  230. package/src/components/NSBarHeroBanner.tsx +61 -61
  231. package/src/components/NSBarNotification.module.css +34 -34
  232. package/src/components/NSBarNotification.tsx +63 -63
  233. package/src/components/NSBarTitle.module.css +9 -9
  234. package/src/components/NSBarTitle.tsx +28 -28
  235. package/src/components/NSBox.module.css +123 -123
  236. package/src/components/NSBoxBoolean.module.css +53 -53
  237. package/src/components/NSBoxBoolean.tsx +84 -84
  238. package/src/components/NSBoxCombo.module.css +16 -16
  239. package/src/components/NSBoxCombo.tsx +131 -131
  240. package/src/components/NSBoxDate.module.css +39 -39
  241. package/src/components/NSBoxDate.tsx +83 -83
  242. package/src/components/NSBoxDateTime.tsx +83 -83
  243. package/src/components/NSBoxDouble.tsx +88 -88
  244. package/src/components/NSBoxDuration.tsx +88 -88
  245. package/src/components/NSBoxEmail.tsx +104 -104
  246. package/src/components/NSBoxEntity.module.css +21 -21
  247. package/src/components/NSBoxEntity.tsx +134 -134
  248. package/src/components/NSBoxEnum.tsx +56 -56
  249. package/src/components/NSBoxErrorNotifier.module.css +2 -2
  250. package/src/components/NSBoxErrorNotifier.tsx +33 -33
  251. package/src/components/NSBoxIPV4.tsx +93 -93
  252. package/src/components/NSBoxIPV6.tsx +90 -90
  253. package/src/components/NSBoxInteger.tsx +86 -86
  254. package/src/components/NSBoxLabel.module.css +12 -12
  255. package/src/components/NSBoxLabel.tsx +29 -29
  256. package/src/components/NSBoxOTP.module.css +10 -10
  257. package/src/components/NSBoxOTP.tsx +65 -65
  258. package/src/components/NSBoxPassword.tsx +86 -86
  259. package/src/components/NSBoxPhone.tsx +88 -88
  260. package/src/components/NSBoxPrice.tsx +88 -88
  261. package/src/components/NSBoxSearch.tsx +103 -103
  262. package/src/components/NSBoxString.tsx +103 -98
  263. package/src/components/NSBoxTextArea.module.css +76 -76
  264. package/src/components/NSBoxTextArea.tsx +106 -106
  265. package/src/components/NSBoxTime.tsx +88 -88
  266. package/src/components/NSButton.module.css +27 -27
  267. package/src/components/NSButton.tsx +23 -23
  268. package/src/components/NSButtonBlue.module.css +4 -4
  269. package/src/components/NSButtonBlue.tsx +12 -12
  270. package/src/components/NSButtonGreen.module.css +4 -4
  271. package/src/components/NSButtonGreen.tsx +11 -11
  272. package/src/components/NSButtonRed.module.css +4 -4
  273. package/src/components/NSButtonRed.tsx +11 -11
  274. package/src/components/NSCard.module.css +108 -108
  275. package/src/components/NSCard.tsx +70 -70
  276. package/src/components/NSCopyToClipboard.module.css +39 -39
  277. package/src/components/NSCopyToClipboard.tsx +35 -35
  278. package/src/components/NSElectronicCard.module.css +60 -60
  279. package/src/components/NSElectronicCard.tsx +47 -47
  280. package/src/components/NSEntityBar.module.css +77 -77
  281. package/src/components/NSEntityBar.tsx +27 -27
  282. package/src/components/NSEntityCardBackground.module.css +27 -27
  283. package/src/components/NSEntityCardBackground.tsx +34 -34
  284. package/src/components/NSFilterBox.module.css +47 -47
  285. package/src/components/NSFilterBox.tsx +374 -374
  286. package/src/components/NSFilterBoxDialog.module.css +36 -36
  287. package/src/components/NSFilterBoxDialog.tsx +74 -74
  288. package/src/components/NSFilterItem.module.css +23 -23
  289. package/src/components/NSFilterItem.tsx +72 -72
  290. package/src/components/NSFooter.module.css +123 -123
  291. package/src/components/NSFooter.tsx +153 -153
  292. package/src/components/NSGroupedList.module.css +72 -72
  293. package/src/components/NSGroupedList.tsx +107 -107
  294. package/src/components/NSHeader.module.css +271 -271
  295. package/src/components/NSHeader.tsx +191 -191
  296. package/src/components/NSLayout.module.css +13 -13
  297. package/src/components/NSLayout.tsx +75 -75
  298. package/src/components/NSLine.tsx +18 -18
  299. package/src/components/NSLink.module.css +36 -36
  300. package/src/components/NSLink.tsx +25 -25
  301. package/src/components/NSLinkBlue.tsx +20 -20
  302. package/src/components/NSLinkGreen.tsx +5 -5
  303. package/src/components/NSLinkRed.tsx +5 -5
  304. package/src/components/NSLoading.module.css +29 -29
  305. package/src/components/NSLoading.tsx +19 -19
  306. package/src/components/NSModal.module.css +70 -70
  307. package/src/components/NSModal.tsx +49 -49
  308. package/src/components/NSNoData.module.css +8 -8
  309. package/src/components/NSNoData.tsx +24 -24
  310. package/src/components/NSPageSelectionModal.module.css +101 -101
  311. package/src/components/NSPageSelectionModal.tsx +190 -163
  312. package/src/components/NSPagination.module.css +101 -101
  313. package/src/components/NSPagination.tsx +191 -191
  314. package/src/components/NSPanel.module.css +46 -46
  315. package/src/components/NSPanel.tsx +19 -19
  316. package/src/components/NSRadioButton.module.css +28 -28
  317. package/src/components/NSRadioButton.tsx +117 -117
  318. package/src/components/NSSection.module.css +10 -10
  319. package/src/components/NSSection.tsx +23 -23
  320. package/src/components/NSSectionBars.module.css +10 -10
  321. package/src/components/NSSectionBars.tsx +25 -25
  322. package/src/components/NSSectionCards.module.css +38 -38
  323. package/src/components/NSSectionCards.tsx +51 -51
  324. package/src/components/NSSectionTitle.tsx +21 -21
  325. package/src/components/NSSpace.tsx +28 -28
  326. package/src/components/NSTabPage.module.css +57 -57
  327. package/src/components/NSTabPage.tsx +46 -46
  328. package/src/components/NSTable.module.css +229 -229
  329. package/src/components/NSTable.tsx +353 -353
  330. package/src/components/NSTag.module.css +44 -44
  331. package/src/components/NSTag.tsx +49 -49
  332. package/src/components/NSTitle.module.css +15 -15
  333. package/src/components/NSTitle.tsx +19 -19
  334. package/src/components/NSVerification.module.css +22 -22
  335. package/src/components/NSVerification.tsx +41 -41
  336. package/src/index.tsx +7 -7
  337. package/src/main.ts +80 -80
  338. package/src/pages/NSLoginPage.module.css +19 -19
  339. package/src/pages/NSLoginPage.tsx +30 -30
  340. package/src/pages/NSNotFoundPage.module.css +18 -18
  341. package/src/pages/NSNotFoundPage.tsx +11 -11
  342. package/src/props/IBaseComponentProps.ts +8 -8
  343. package/src/props/IHeaderIconProps.ts +9 -9
  344. package/src/props/IHeaderProps.ts +6 -6
  345. package/src/props/IImageProps.ts +4 -4
  346. package/src/props/ILinkProps.ts +5 -5
  347. package/src/props/IValidationNumberProps.ts +4 -4
  348. package/src/props/IValidationProps.ts +7 -7
  349. package/src/props/IValidationRegexProps.ts +4 -4
  350. package/src/props/IValidationStringProps.ts +4 -4
  351. package/src/routing/INSRouterMaker.ts +6 -6
  352. package/src/routing/INSRouterProps.ts +5 -5
  353. package/src/routing/INSRouterState.ts +5 -5
  354. package/src/routing/NSRouterMaker.tsx +33 -33
  355. package/src/routing/Notifier.ts +79 -79
  356. package/tsconfig.json +43 -43
package/src/components/NSTable.tsx CHANGED
@@ -1,354 +1,354 @@
1
- "use client";
2
-
3
- import NSButton from './NSButton';
4
- import { NSPagination } from './NSPagination';
5
- import { NSSpace, NSSpaceSizeType } from './NSSpace';
6
- import Styles from './NSTable.module.css';
7
- import { Component } from 'react';
8
- import { IBaseComponentProps } from "../props/IBaseComponentProps";
9
- import React from "react";
10
- import { NSModal } from './NSModal';
11
- import { NSPageSelectionModal } from './NSPageSelectionModal';
12
- import { NSLoading } from './NSLoading';
13
- import { NSNoData } from './NSNoData';
14
- import { writeFile, utils } from 'xlsx';
15
-
16
- export interface INSTableProps<RowType> extends IBaseComponentProps
17
- {
18
- columns: { [key: string]: string };
19
- totalItems: number;
20
- checkbox: boolean;
21
- getRows: (page: number, size: number) => Promise<RowType[]>;
22
- getRowKey: (row: RowType, rowIndex: number) => string;
23
- getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
24
- getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
25
- onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
26
- onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
27
- onSelectedIDsChanged?: () => void;
28
- }
29
-
30
- interface NSTableState<RowType>
31
- {
32
- columns: { [key: string]: string };
33
- rows: RowType[] | null;
34
- title?: string;
35
- model: {
36
- show: boolean;
37
- description?: string;
38
- };
39
- selectedIDs: string[];
40
- indeterminate: boolean;
41
- pageSelectionMode: PageSelectionMode;
42
- }
43
-
44
- enum PageSelectionMode
45
- {
46
- Hidden = "Hidden",
47
- Print = "Print",
48
- CSV = "CSV"
49
- }
50
-
51
- export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
52
- {
53
- NSPagination = React.createRef<NSPagination>();
54
- constructor(props: INSTableProps<RowType>)
55
- {
56
- super(props);
57
- this.state = {
58
- columns: props.columns,
59
- rows: null,
60
- model: { show: false },
61
- selectedIDs: [],
62
- indeterminate: false,
63
- pageSelectionMode: PageSelectionMode.Hidden
64
- };
65
- this.setColumns = this.setColumns.bind(this);
66
- this.setRows = this.setRows.bind(this);
67
- this.showModal = this.showModal.bind(this);
68
- this.hideModal = this.hideModal.bind(this);
69
- this.onPageChange = this.onPageChange.bind(this);
70
- this.isSomeChecked = this.isSomeChecked.bind(this);
71
- this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
72
- this.print = this.print.bind(this);
73
- this.exportCSV = this.exportCSV.bind(this);
74
- this.isAllChecked = this.isAllChecked.bind(this);
75
- this.reload = this.reload.bind(this);
76
- }
77
-
78
- setColumns(columns: { [key: string]: string })
79
- {
80
- this.setState({ columns });
81
- }
82
-
83
- setRows(rows: RowType[] | null)
84
- {
85
- this.setState({ rows });
86
- }
87
-
88
- private showModal(description: string, title?: string)
89
- {
90
- this.setState({ model: { show: true, description }, title });
91
- }
92
- private hideModal()
93
- {
94
- this.setState({ model: { show: false } });
95
- }
96
- private onPageChange(page: number, size: number)
97
- {
98
- this.reload(page, size);
99
- }
100
- override componentDidMount(): void
101
- {
102
- this.reload(null, null);
103
- }
104
- public reload(page: number | null, size: number | null)
105
- {
106
- this.setRows(null);
107
- if (page == null)
108
- page = this.NSPagination.current?.getCurrentPage() ?? 0;
109
- if (size == null)
110
- size = this.NSPagination.current?.getPageSize() ?? 0;
111
- this.props.getRows(page, size).then(rows =>
112
- {
113
- this.setRows(rows);
114
- });
115
- }
116
- private toggleAllCheckboxes()
117
- {
118
- let selectedIDs: string[] = [];
119
- if (this.getSelectedIDs().length == 0)
120
- this.state.rows?.map((row, rowIndex) =>
121
- {
122
- let id = this.props.getRowKey(row, rowIndex);
123
- selectedIDs.push(id);
124
- })
125
- this.setSelectedIDs(selectedIDs);
126
- this.setState({ indeterminate: false });
127
- }
128
-
129
- print(rows: RowType[])
130
- {
131
- const printWindow = window.open('', '', 'height=500,width=800');
132
- printWindow!.document.write('<html><head><title>Print Table</title>');
133
- printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
134
- printWindow!.document.write('</head><body>');
135
- printWindow!.document.write('<table>');
136
- printWindow!.document.write('<thead><tr>');
137
-
138
- Object.keys(this.state.columns).forEach(column =>
139
- {
140
- printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
141
- });
142
-
143
- printWindow!.document.write('</tr></thead><tbody>');
144
-
145
- // Add table rows
146
- rows.forEach(row =>
147
- {
148
- printWindow!.document.write('<tr>');
149
- Object.keys(this.state.columns).forEach(column =>
150
- {
151
- printWindow!.document.write('<td>' + (row as any)[column] + '</td>');
152
- });
153
- printWindow!.document.write('</tr>');
154
- });
155
-
156
- printWindow!.document.write('</tbody></table>');
157
- printWindow!.document.write('</body></html>');
158
- printWindow!.document.close();
159
- printWindow!.print();
160
- }
161
- exportCSV(rows: RowType[])
162
- {
163
- const worksheet = utils.json_to_sheet(this.state.rows || []);
164
- const workbook = utils.book_new();
165
- utils.book_append_sheet(workbook, worksheet, "Table Data");
166
- console.log(rows.length); // todo
167
- writeFile(workbook, "TableData.xlsx");
168
- }
169
- getSelectedIDs(): string[]
170
- {
171
- return this.state.selectedIDs;
172
- }
173
- setSelectedIDs(ids: string[])
174
- {
175
- this.setState({ selectedIDs: ids }, () =>
176
- {
177
- if (this.props.onSelectedIDsChanged)
178
- this.props.onSelectedIDsChanged();
179
- });
180
- }
181
- private isAllChecked(): boolean
182
- {
183
- return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
184
- }
185
-
186
- private isSomeChecked(): boolean
187
- {
188
- debugger
189
- return this.state.selectedIDs.length > 0 && !this.isAllChecked();
190
- }
191
- override render()
192
- {
193
- let column_keys = Object.keys(this.state.columns);
194
- let getColumnAttributes = (column: string, columnIndex: number) =>
195
- {
196
- if (this.props.getColumnAttributes)
197
- return this.props.getColumnAttributes(column, columnIndex);
198
- return {};
199
- }
200
- let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
201
- {
202
- if (this.props.getCell)
203
- return this.props.getCell(row, column, rowIndex, columnIndex);
204
- return (row as any)[column];
205
- }
206
- let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
207
- {
208
- if (this.props.onRowClick)
209
- this.props.onRowClick(e, row, rowIndex);
210
- };
211
- let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
212
- {
213
- let overided = false;
214
- if (this.props.onCellClick)
215
- {
216
- let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
217
- if (res === undefined)
218
- {
219
- overided = true;
220
- } else
221
- {
222
- overided = res;
223
- }
224
- }
225
- if (!overided)
226
- {
227
- this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
228
- }
229
- };
230
- let content;
231
- if (this.state.rows === null)
232
- {
233
- content = (
234
- <NSLoading />
235
- );
236
- }
237
- else if (this.state.rows.length === 0)
238
- {
239
- content = (
240
- <NSNoData lable='No Data' />
241
- );
242
- }
243
- else
244
- {
245
- content = this.state.rows.map((row, rowIndex) =>
246
- <tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
247
- {
248
- this.props.checkbox && <input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
249
- {
250
- let selectedIDs = this.state.selectedIDs;
251
- let id = this.props.getRowKey(row, rowIndex);
252
- if (e.currentTarget.checked)
253
- selectedIDs.push(id);
254
- else
255
- selectedIDs = selectedIDs.filter(x => x !== id);
256
- this.setSelectedIDs(selectedIDs)
257
- this.setState({ selectedIDs }, () =>
258
- {
259
- this.setState({ indeterminate: this.isSomeChecked() });
260
- });
261
- }} />
262
- }
263
- {
264
- column_keys.map((column, columnIndex) => (
265
- <td {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
266
- {getCell(row, column, rowIndex, columnIndex + 1)}
267
- </td>
268
- ))
269
- }
270
- </tr>);
271
- }
272
- return (
273
- <div id={this.props.id}
274
- className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
275
- style={this.props.style}>
276
- <NSSpace size={NSSpaceSizeType.SMALL} />
277
- <table className={Styles.ns_table} >
278
- <thead className={Styles.ns_thead}>
279
- <tr>
280
- {
281
- this.props.checkbox && <th className={Styles.ns_check_box}>
282
- <input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
283
- </th>
284
- }
285
- {
286
- column_keys.map(column_key => <th key={column_key} scope="col">
287
- {this.state.columns[column_key]}
288
- </th>)
289
- }
290
- </tr>
291
- </thead>
292
- <tbody className={Styles.ns_tbody}>
293
- {content}
294
- </tbody >
295
- </table>
296
- <NSSpace size={NSSpaceSizeType.MICRO} />
297
- <section className={Styles.ns_pagination_button}>
298
- <NSPagination ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
299
- <NSSpace size={NSSpaceSizeType.SMALL} />
300
- <div className={Styles.ns_button}>
301
- {
302
- this.state.pageSelectionMode != PageSelectionMode.Hidden &&
303
- <NSPageSelectionModal<RowType>
304
- current_page={1}
305
- max_page={1}
306
- getItems={async (page, selected) =>
307
- {
308
- if (selected)
309
- {
310
- let rows: RowType[] = [];
311
- if (this.state.rows)
312
- for (let i = 0; i < this.state.rows.length; i++)
313
- {
314
- const row = this.state.rows[i];
315
- let id = this.props.getRowKey(row, i);
316
- if (this.state.selectedIDs.includes(id))
317
- rows.push(row);
318
- }
319
- return rows;
320
- }
321
- return this.props.getRows(page, this.NSPagination.current?.getCurrentPage() ?? 0);
322
- }}
323
- onFinish={(items: RowType[]) =>
324
- {
325
- if (this.state.pageSelectionMode == PageSelectionMode.Print)
326
- this.print(items);
327
- else if (this.state.pageSelectionMode == PageSelectionMode.CSV)
328
- this.exportCSV(items);
329
- }}
330
- onClose={() => { this.setState({ pageSelectionMode: PageSelectionMode.Hidden }); }
331
- }
332
- />
333
- }
334
- <NSButton title='Chart' icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
335
- <NSButton title='Print' icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
336
- <NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
337
- <NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }} onClick={() =>
338
- {
339
- this.reload(null, null);
340
- }} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
341
-
342
- </div>
343
- </section>
344
- <NSSpace size={NSSpaceSizeType.SMALL} />
345
- <NSModal
346
- show={this.state.model.show}
347
- description={this.state.model.description}
348
- onClose={() => { this.hideModal(); }}
349
- title={this.state.title}
350
- />
351
- </div >
352
- );
353
- }
1
+ "use client";
2
+
3
+ import NSButton from './NSButton';
4
+ import { NSPagination } from './NSPagination';
5
+ import { NSSpace, NSSpaceSizeType } from './NSSpace';
6
+ import Styles from './NSTable.module.css';
7
+ import { Component } from 'react';
8
+ import { IBaseComponentProps } from "../props/IBaseComponentProps";
9
+ import React from "react";
10
+ import { NSModal } from './NSModal';
11
+ import { NSPageSelectionModal } from './NSPageSelectionModal';
12
+ import { NSLoading } from './NSLoading';
13
+ import { NSNoData } from './NSNoData';
14
+ import { writeFile, utils } from 'xlsx';
15
+
16
+ export interface INSTableProps<RowType> extends IBaseComponentProps
17
+ {
18
+ columns: { [key: string]: string };
19
+ totalItems: number;
20
+ checkbox: boolean;
21
+ getRows: (page: number, size: number) => Promise<RowType[]>;
22
+ getRowKey: (row: RowType, rowIndex: number) => string;
23
+ getColumnAttributes?: (column: string, columnIndex: number) => { [key: string]: string };
24
+ getCell?: (row: RowType, column: string, rowIndex: number, columnIndex: number) => any;
25
+ onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) => void;
26
+ onCellClick?: (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) => boolean | undefined;
27
+ onSelectedIDsChanged?: () => void;
28
+ }
29
+
30
+ interface NSTableState<RowType>
31
+ {
32
+ columns: { [key: string]: string };
33
+ rows: RowType[] | null;
34
+ title?: string;
35
+ model: {
36
+ show: boolean;
37
+ description?: string;
38
+ };
39
+ selectedIDs: string[];
40
+ indeterminate: boolean;
41
+ pageSelectionMode: PageSelectionMode;
42
+ }
43
+
44
+ enum PageSelectionMode
45
+ {
46
+ Hidden = "Hidden",
47
+ Print = "Print",
48
+ CSV = "CSV"
49
+ }
50
+
51
+ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableState<RowType>>
52
+ {
53
+ NSPagination = React.createRef<NSPagination>();
54
+ constructor(props: INSTableProps<RowType>)
55
+ {
56
+ super(props);
57
+ this.state = {
58
+ columns: props.columns,
59
+ rows: null,
60
+ model: { show: false },
61
+ selectedIDs: [],
62
+ indeterminate: false,
63
+ pageSelectionMode: PageSelectionMode.Hidden
64
+ };
65
+ this.setColumns = this.setColumns.bind(this);
66
+ this.setRows = this.setRows.bind(this);
67
+ this.showModal = this.showModal.bind(this);
68
+ this.hideModal = this.hideModal.bind(this);
69
+ this.onPageChange = this.onPageChange.bind(this);
70
+ this.isSomeChecked = this.isSomeChecked.bind(this);
71
+ this.toggleAllCheckboxes = this.toggleAllCheckboxes.bind(this);
72
+ this.print = this.print.bind(this);
73
+ this.exportCSV = this.exportCSV.bind(this);
74
+ this.isAllChecked = this.isAllChecked.bind(this);
75
+ this.reload = this.reload.bind(this);
76
+ }
77
+
78
+ setColumns(columns: { [key: string]: string })
79
+ {
80
+ this.setState({ columns });
81
+ }
82
+
83
+ setRows(rows: RowType[] | null)
84
+ {
85
+ this.setState({ rows });
86
+ }
87
+
88
+ private showModal(description: string, title?: string)
89
+ {
90
+ this.setState({ model: { show: true, description }, title });
91
+ }
92
+ private hideModal()
93
+ {
94
+ this.setState({ model: { show: false } });
95
+ }
96
+ private onPageChange(page: number, size: number)
97
+ {
98
+ this.reload(page, size);
99
+ }
100
+ override componentDidMount(): void
101
+ {
102
+ this.reload(null, null);
103
+ }
104
+ public reload(page: number | null, size: number | null)
105
+ {
106
+ this.setRows(null);
107
+ if (page == null)
108
+ page = this.NSPagination.current?.getCurrentPage() ?? 0;
109
+ if (size == null)
110
+ size = this.NSPagination.current?.getPageSize() ?? 0;
111
+ this.props.getRows(page, size).then(rows =>
112
+ {
113
+ this.setRows(rows);
114
+ });
115
+ }
116
+ private toggleAllCheckboxes()
117
+ {
118
+ let selectedIDs: string[] = [];
119
+ if (this.getSelectedIDs().length == 0)
120
+ this.state.rows?.map((row, rowIndex) =>
121
+ {
122
+ let id = this.props.getRowKey(row, rowIndex);
123
+ selectedIDs.push(id);
124
+ })
125
+ this.setSelectedIDs(selectedIDs);
126
+ this.setState({ indeterminate: false });
127
+ }
128
+
129
+ print(rows: RowType[])
130
+ {
131
+ const printWindow = window.open('', '', 'height=500,width=800');
132
+ printWindow!.document.write('<html><head><title>Print Table</title>');
133
+ printWindow!.document.write('<style>table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; }</style>');
134
+ printWindow!.document.write('</head><body>');
135
+ printWindow!.document.write('<table>');
136
+ printWindow!.document.write('<thead><tr>');
137
+
138
+ Object.keys(this.state.columns).forEach(column =>
139
+ {
140
+ printWindow!.document.write('<th>' + this.state.columns[column] + '</th>');
141
+ });
142
+
143
+ printWindow!.document.write('</tr></thead><tbody>');
144
+
145
+ // Add table rows
146
+ rows.forEach(row =>
147
+ {
148
+ printWindow!.document.write('<tr>');
149
+ Object.keys(this.state.columns).forEach(column =>
150
+ {
151
+ printWindow!.document.write('<td>' + (row as any)[column] + '</td>');
152
+ });
153
+ printWindow!.document.write('</tr>');
154
+ });
155
+
156
+ printWindow!.document.write('</tbody></table>');
157
+ printWindow!.document.write('</body></html>');
158
+ printWindow!.document.close();
159
+ printWindow!.print();
160
+ }
161
+ exportCSV(rows: RowType[])
162
+ {
163
+ const worksheet = utils.json_to_sheet(this.state.rows || []);
164
+ const workbook = utils.book_new();
165
+ utils.book_append_sheet(workbook, worksheet, "Table Data");
166
+ console.log(rows.length); // todo
167
+ writeFile(workbook, "TableData.xlsx");
168
+ }
169
+ getSelectedIDs(): string[]
170
+ {
171
+ return this.state.selectedIDs;
172
+ }
173
+ setSelectedIDs(ids: string[])
174
+ {
175
+ this.setState({ selectedIDs: ids }, () =>
176
+ {
177
+ if (this.props.onSelectedIDsChanged)
178
+ this.props.onSelectedIDsChanged();
179
+ });
180
+ }
181
+ private isAllChecked(): boolean
182
+ {
183
+ return this.state.rows !== null && this.state.rows.length > 0 && this.state.selectedIDs.length === this.state.rows.length;
184
+ }
185
+
186
+ private isSomeChecked(): boolean
187
+ {
188
+ debugger
189
+ return this.state.selectedIDs.length > 0 && !this.isAllChecked();
190
+ }
191
+ override render()
192
+ {
193
+ let column_keys = Object.keys(this.state.columns);
194
+ let getColumnAttributes = (column: string, columnIndex: number) =>
195
+ {
196
+ if (this.props.getColumnAttributes)
197
+ return this.props.getColumnAttributes(column, columnIndex);
198
+ return {};
199
+ }
200
+ let getCell = (row: RowType, column: string, rowIndex: number, columnIndex: number) =>
201
+ {
202
+ if (this.props.getCell)
203
+ return this.props.getCell(row, column, rowIndex, columnIndex);
204
+ return (row as any)[column];
205
+ }
206
+ let onRowClick = (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: RowType, rowIndex: number) =>
207
+ {
208
+ if (this.props.onRowClick)
209
+ this.props.onRowClick(e, row, rowIndex);
210
+ };
211
+ let onCellClick = (e: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>, row: RowType, column: string, rowIndex: number, columnIndex: number) =>
212
+ {
213
+ let overided = false;
214
+ if (this.props.onCellClick)
215
+ {
216
+ let res = this.props.onCellClick(e, row, column, rowIndex, columnIndex);
217
+ if (res === undefined)
218
+ {
219
+ overided = true;
220
+ } else
221
+ {
222
+ overided = res;
223
+ }
224
+ }
225
+ if (!overided)
226
+ {
227
+ this.showModal(getCell(row, column, rowIndex, columnIndex), this.state.columns[column]);
228
+ }
229
+ };
230
+ let content;
231
+ if (this.state.rows === null)
232
+ {
233
+ content = (
234
+ <NSLoading />
235
+ );
236
+ }
237
+ else if (this.state.rows.length === 0)
238
+ {
239
+ content = (
240
+ <NSNoData lable='No Data' />
241
+ );
242
+ }
243
+ else
244
+ {
245
+ content = this.state.rows.map((row, rowIndex) =>
246
+ <tr key={this.props.getRowKey(row, rowIndex)} onClick={(e) => { onRowClick(e, row, rowIndex); }}>
247
+ {
248
+ this.props.checkbox && <input className={Styles.ns_td_input} id={`checkbox_device_${this.props.getRowKey(row, rowIndex)}`} type="checkbox" checked={this.state.selectedIDs.includes(this.props.getRowKey(row, rowIndex))} onChange={(e) =>
249
+ {
250
+ let selectedIDs = this.state.selectedIDs;
251
+ let id = this.props.getRowKey(row, rowIndex);
252
+ if (e.currentTarget.checked)
253
+ selectedIDs.push(id);
254
+ else
255
+ selectedIDs = selectedIDs.filter(x => x !== id);
256
+ this.setSelectedIDs(selectedIDs)
257
+ this.setState({ selectedIDs }, () =>
258
+ {
259
+ this.setState({ indeterminate: this.isSomeChecked() });
260
+ });
261
+ }} />
262
+ }
263
+ {
264
+ column_keys.map((column, columnIndex) => (
265
+ <td {...getColumnAttributes(column, columnIndex + 1)} key={columnIndex + 1} data-label={`${this.state.columns[column]} : `} onClick={(e) => { onCellClick(e, row, column, rowIndex, columnIndex + 1); }}>
266
+ {getCell(row, column, rowIndex, columnIndex + 1)}
267
+ </td>
268
+ ))
269
+ }
270
+ </tr>);
271
+ }
272
+ return (
273
+ <div id={this.props.id}
274
+ className={`${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
275
+ style={this.props.style}>
276
+ <NSSpace size={NSSpaceSizeType.SMALL} />
277
+ <table className={Styles.ns_table} >
278
+ <thead className={Styles.ns_thead}>
279
+ <tr>
280
+ {
281
+ this.props.checkbox && <th className={Styles.ns_check_box}>
282
+ <input className={`${Styles.ns_check_box_input} ${this.state.indeterminate ? Styles.ns_indeterminate : ""}`} id='checkbox' type='checkbox' onChange={this.toggleAllCheckboxes} checked={this.getSelectedIDs().length > 0}></input>
283
+ </th>
284
+ }
285
+ {
286
+ column_keys.map(column_key => <th key={column_key} scope="col">
287
+ {this.state.columns[column_key]}
288
+ </th>)
289
+ }
290
+ </tr>
291
+ </thead>
292
+ <tbody className={Styles.ns_tbody}>
293
+ {content}
294
+ </tbody >
295
+ </table>
296
+ <NSSpace size={NSSpaceSizeType.MICRO} />
297
+ <section className={Styles.ns_pagination_button}>
298
+ <NSPagination ref={this.NSPagination} totalItems={this.props.totalItems} onPageChange={this.onPageChange} />
299
+ <NSSpace size={NSSpaceSizeType.SMALL} />
300
+ <div className={Styles.ns_button}>
301
+ {
302
+ this.state.pageSelectionMode != PageSelectionMode.Hidden &&
303
+ <NSPageSelectionModal<RowType>
304
+ current_page={1}
305
+ max_page={1}
306
+ getItems={async (page, selected) =>
307
+ {
308
+ if (selected)
309
+ {
310
+ let rows: RowType[] = [];
311
+ if (this.state.rows)
312
+ for (let i = 0; i < this.state.rows.length; i++)
313
+ {
314
+ const row = this.state.rows[i];
315
+ let id = this.props.getRowKey(row, i);
316
+ if (this.state.selectedIDs.includes(id))
317
+ rows.push(row);
318
+ }
319
+ return rows;
320
+ }
321
+ return this.props.getRows(page, this.NSPagination.current?.getCurrentPage() ?? 0);
322
+ }}
323
+ onFinish={(items: RowType[]) =>
324
+ {
325
+ if (this.state.pageSelectionMode == PageSelectionMode.Print)
326
+ this.print(items);
327
+ else if (this.state.pageSelectionMode == PageSelectionMode.CSV)
328
+ this.exportCSV(items);
329
+ }}
330
+ onClose={() => { this.setState({ pageSelectionMode: PageSelectionMode.Hidden }); }
331
+ }
332
+ />
333
+ }
334
+ <NSButton title='Chart' icon={{ src: "https://static.namirasoft.com/image/concept/chart/blue.svg" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
335
+ <NSButton title='Print' icon={{ src: "https://static.namirasoft.com/image/concept/print/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.Print }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
336
+ <NSButton title='Export' icon={{ src: "https://static.namirasoft.com/image/concept/export/blue.svg" }} onClick={() => { this.setState({ pageSelectionMode: PageSelectionMode.CSV }); }} style={{ border: '1px solid rgba(255, 148, 50, 1)', width: "128px" }} />
337
+ <NSButton title='Refresh' icon={{ src: "https://static.namirasoft.com/image/concept/refresh/blue.svg" }} onClick={() =>
338
+ {
339
+ this.reload(null, null);
340
+ }} style={{ border: '1px solid rgba(3, 119, 255, 1)', width: "128px" }} />
341
+
342
+ </div>
343
+ </section>
344
+ <NSSpace size={NSSpaceSizeType.SMALL} />
345
+ <NSModal
346
+ show={this.state.model.show}
347
+ description={this.state.model.description}
348
+ onClose={() => { this.hideModal(); }}
349
+ title={this.state.title}
350
+ />
351
+ </div >
352
+ );
353
+ }
354
354
  }