@pnkx-lib/ui 1.9.207 → 1.9.209

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 (188) hide show
  1. package/es/ui/index.js +247 -61
  2. package/package.json +1 -1
  3. package/types/components/fields/CascaderField.d.ts +14 -0
  4. package/types/components/fields/Checkbox.d.ts +12 -0
  5. package/types/components/fields/DatePicker.d.ts +21 -0
  6. package/types/{DateRangePicker.d.ts → components/fields/DateRangePicker.d.ts} +13 -19
  7. package/types/components/fields/Input.d.ts +33 -0
  8. package/types/components/fields/PnkxField.d.ts +11 -0
  9. package/types/components/fields/Radio.d.ts +19 -0
  10. package/types/components/fields/Select.d.ts +13 -0
  11. package/types/{SliderRanger.d.ts → components/fields/SliderRanger.d.ts} +12 -18
  12. package/types/components/fields/SliderSingle.d.ts +12 -0
  13. package/types/components/fields/Switch.d.ts +12 -0
  14. package/types/components/fields/Textarea.d.ts +12 -0
  15. package/types/components/fields/TimePicker.d.ts +12 -0
  16. package/types/components/fields/TimeRangePicker.d.ts +12 -0
  17. package/types/{TinyMCE.d.ts → components/fields/TinyMCE.d.ts} +16 -22
  18. package/types/components/fields/Upload.d.ts +15 -0
  19. package/types/components/fields/index.d.ts +15 -0
  20. package/types/components/hooks/index.d.ts +2 -0
  21. package/types/components/hooks/useBreadcrumb.d.ts +6 -0
  22. package/types/components/hooks/useDebounce.d.ts +1 -0
  23. package/types/{useMessage.d.ts → components/hooks/useMessage.d.ts} +5 -9
  24. package/types/{useToast.d.ts → components/hooks/useToast.d.ts} +12 -16
  25. package/types/components/icons/ActivateIcon.d.ts +6 -0
  26. package/types/components/icons/AllowClearIcon.d.ts +2 -0
  27. package/types/components/icons/ApprovalIcon.d.ts +6 -0
  28. package/types/components/icons/CancelApprovalIcon.d.ts +6 -0
  29. package/types/components/icons/CancelSendApprovalIcon.d.ts +6 -0
  30. package/types/components/icons/DeleteIcon.d.ts +6 -0
  31. package/types/components/icons/Dollar.d.ts +3 -0
  32. package/types/components/icons/DragIcon.d.ts +6 -0
  33. package/types/components/icons/EditIcon.d.ts +6 -0
  34. package/types/components/icons/ErrorConfirmIcon.d.ts +3 -0
  35. package/types/components/icons/InActivateIcon.d.ts +6 -0
  36. package/types/components/icons/InfoConfirmIcon.d.ts +3 -0
  37. package/types/components/icons/MoreIcon.d.ts +6 -0
  38. package/types/components/icons/PlusIcon.d.ts +6 -0
  39. package/types/components/icons/RefuseApprovalIcon.d.ts +6 -0
  40. package/types/components/icons/RestoreIcon.d.ts +6 -0
  41. package/types/components/icons/SearchAdvanceIcon.d.ts +6 -0
  42. package/types/components/icons/SearchIcon.d.ts +2 -0
  43. package/types/components/icons/SendApprovalIcon.d.ts +6 -0
  44. package/types/components/icons/SettingIcon.d.ts +1 -0
  45. package/types/components/icons/SuccessIcon.d.ts +3 -0
  46. package/types/components/icons/TrashCanIcon.d.ts +2 -0
  47. package/types/components/icons/WaitingApprovalIcon.d.ts +6 -0
  48. package/types/components/icons/WarningConfirmIcon.d.ts +3 -0
  49. package/types/components/icons/index.d.ts +18 -0
  50. package/types/components/index.d.ts +3 -0
  51. package/types/components/ui/Alert.d.ts +3 -0
  52. package/types/components/ui/Anchor.d.ts +9 -0
  53. package/types/components/ui/Appfix.d.ts +6 -0
  54. package/types/components/ui/AutoComplete.d.ts +3 -0
  55. package/types/{Badge.d.ts → components/ui/Badge.d.ts} +8 -14
  56. package/types/{BottomPagination.d.ts → components/ui/BottomPagination.d.ts} +8 -12
  57. package/types/components/ui/Breadcrumb.d.ts +16 -0
  58. package/types/components/ui/BreadcrumbHeading.d.ts +8 -0
  59. package/types/components/ui/BulkActions/BulkAction.d.ts +10 -0
  60. package/types/components/ui/BulkActions/DropListActions.d.ts +9 -0
  61. package/types/components/ui/BulkActions/index.d.ts +22 -0
  62. package/types/components/ui/Button.d.ts +4 -0
  63. package/types/components/ui/Card.d.ts +3 -0
  64. package/types/components/ui/Cascader.d.ts +14 -0
  65. package/types/{CategoryStatus.d.ts → components/ui/CategoryStatus.d.ts} +20 -27
  66. package/types/components/ui/Col.d.ts +11 -0
  67. package/types/components/ui/Collapse.d.ts +3 -0
  68. package/types/components/ui/ColorPicker.d.ts +3 -0
  69. package/types/components/ui/ConfigProvider.d.ts +4 -0
  70. package/types/components/ui/ConfirmModal.d.ts +12 -0
  71. package/types/components/ui/Container.d.ts +8 -0
  72. package/types/components/ui/Divider.d.ts +6 -0
  73. package/types/components/ui/Drawer.d.ts +7 -0
  74. package/types/components/ui/Dropdown.d.ts +12 -0
  75. package/types/components/ui/Empty.d.ts +3 -0
  76. package/types/{ErrorBoundary.d.ts → components/ui/ErrorBoundary.d.ts} +18 -26
  77. package/types/components/ui/ErrorMessage.d.ts +7 -0
  78. package/types/components/ui/Flex.d.ts +9 -0
  79. package/types/components/ui/Footer.d.ts +2 -0
  80. package/types/components/ui/Heading.d.ts +10 -0
  81. package/types/components/ui/Image.d.ts +2 -0
  82. package/types/components/ui/Label.d.ts +5 -0
  83. package/types/components/ui/Layout.d.ts +14 -0
  84. package/types/components/ui/Menu.d.ts +22 -0
  85. package/types/components/ui/Modal.d.ts +6 -0
  86. package/types/components/ui/PageNotFound.d.ts +4 -0
  87. package/types/components/ui/Pagination.d.ts +12 -0
  88. package/types/components/ui/Popconfirm.d.ts +6 -0
  89. package/types/components/ui/Popover.d.ts +9 -0
  90. package/types/components/ui/QRCode.d.ts +3 -0
  91. package/types/components/ui/Rate.d.ts +2 -0
  92. package/types/components/ui/Result.d.ts +6 -0
  93. package/types/components/ui/Row.d.ts +7 -0
  94. package/types/{SearchFilterForm.d.ts → components/ui/SearchFilterForm.d.ts} +18 -29
  95. package/types/components/ui/Segmented.d.ts +3 -0
  96. package/types/components/ui/Sidebar.d.ts +22 -0
  97. package/types/components/ui/Skeleton.d.ts +6 -0
  98. package/types/components/ui/Space.d.ts +8 -0
  99. package/types/components/ui/Spin.d.ts +6 -0
  100. package/types/components/ui/Splitter.d.ts +8 -0
  101. package/types/components/ui/Statistic.d.ts +3 -0
  102. package/types/components/ui/Steps.d.ts +12 -0
  103. package/types/components/ui/Table/ActionRowTable/index.d.ts +10 -0
  104. package/types/components/ui/Table/HeadingTable/components/GroupHeadingButton.d.ts +13 -0
  105. package/types/components/ui/Table/HeadingTable/index.d.ts +16 -0
  106. package/types/components/ui/Table/SettingTable/IconSettingTable.d.ts +6 -0
  107. package/types/components/ui/Table/SettingTable/SettingColumnItem.d.ts +7 -0
  108. package/types/components/ui/Table/SettingTable/SortableItem.d.ts +6 -0
  109. package/types/components/ui/Table/SettingTable/index.d.ts +11 -0
  110. package/types/components/ui/Table/index.d.ts +46 -0
  111. package/types/components/ui/Tabs.d.ts +14 -0
  112. package/types/{Tag.d.ts → components/ui/Tag.d.ts} +5 -9
  113. package/types/components/ui/Timeline.d.ts +3 -0
  114. package/types/components/ui/Tooltip.d.ts +4 -0
  115. package/types/components/ui/Tour.d.ts +3 -0
  116. package/types/components/ui/Tree.d.ts +3 -0
  117. package/types/components/ui/Typography.d.ts +8 -0
  118. package/types/components/ui/UploadImage.d.ts +6 -0
  119. package/types/{Watermark.d.ts → components/ui/Watermark.d.ts} +2 -6
  120. package/types/components/ui/index.d.ts +60 -0
  121. package/types/constants/common.d.ts +1 -0
  122. package/types/constants/table.d.ts +31 -0
  123. package/types/helpers/common.d.ts +1 -0
  124. package/types/index.d.ts +2 -42
  125. package/types/Alert.d.ts +0 -7
  126. package/types/Anchor.d.ts +0 -13
  127. package/types/Appfix.d.ts +0 -11
  128. package/types/AutoComplete.d.ts +0 -7
  129. package/types/Breadcrumb.d.ts +0 -27
  130. package/types/BreadcrumbHeading.d.ts +0 -26
  131. package/types/Button.d.ts +0 -8
  132. package/types/Card.d.ts +0 -7
  133. package/types/Cascader.d.ts +0 -22
  134. package/types/CascaderField.d.ts +0 -20
  135. package/types/Checkbox.d.ts +0 -18
  136. package/types/Col.d.ts +0 -19
  137. package/types/Collapse.d.ts +0 -7
  138. package/types/ColorPicker.d.ts +0 -7
  139. package/types/ConfigProvider.d.ts +0 -8
  140. package/types/ConfirmModal.d.ts +0 -23
  141. package/types/Container.d.ts +0 -13
  142. package/types/DatePicker.d.ts +0 -29
  143. package/types/Divider.d.ts +0 -11
  144. package/types/Drawer.d.ts +0 -12
  145. package/types/Dropdown.d.ts +0 -21
  146. package/types/Empty.d.ts +0 -7
  147. package/types/ErrorMessage.d.ts +0 -12
  148. package/types/Flex.d.ts +0 -15
  149. package/types/Footer.d.ts +0 -6
  150. package/types/Heading.d.ts +0 -27
  151. package/types/Image.d.ts +0 -6
  152. package/types/Input.d.ts +0 -42
  153. package/types/Label.d.ts +0 -10
  154. package/types/Layout.d.ts +0 -20
  155. package/types/Menu.d.ts +0 -40
  156. package/types/Modal.d.ts +0 -11
  157. package/types/PageNotFound.d.ts +0 -9
  158. package/types/Pagination.d.ts +0 -22
  159. package/types/PnkxField.d.ts +0 -17
  160. package/types/Popconfirm.d.ts +0 -11
  161. package/types/Popover.d.ts +0 -15
  162. package/types/QRCode.d.ts +0 -7
  163. package/types/Radio.d.ts +0 -26
  164. package/types/Rate.d.ts +0 -5
  165. package/types/Result.d.ts +0 -11
  166. package/types/Row.d.ts +0 -12
  167. package/types/Segmented.d.ts +0 -7
  168. package/types/Select.d.ts +0 -20
  169. package/types/Sidebar.d.ts +0 -29
  170. package/types/Skeleton.d.ts +0 -11
  171. package/types/SliderSingle.d.ts +0 -18
  172. package/types/Space.d.ts +0 -13
  173. package/types/Spin.d.ts +0 -11
  174. package/types/Splitter.d.ts +0 -13
  175. package/types/Statistic.d.ts +0 -7
  176. package/types/Steps.d.ts +0 -20
  177. package/types/Switch.d.ts +0 -18
  178. package/types/Tabs.d.ts +0 -18
  179. package/types/Textarea.d.ts +0 -17
  180. package/types/TimePicker.d.ts +0 -16
  181. package/types/TimeRangePicker.d.ts +0 -16
  182. package/types/Timeline.d.ts +0 -7
  183. package/types/Tooltip.d.ts +0 -8
  184. package/types/Tour.d.ts +0 -7
  185. package/types/Tree.d.ts +0 -7
  186. package/types/Typography.d.ts +0 -12
  187. package/types/Upload.d.ts +0 -23
  188. package/types/UploadImage.d.ts +0 -9
package/es/ui/index.js CHANGED
@@ -5028,6 +5028,171 @@ const BulkActions = ({
5028
5028
  ] });
5029
5029
  };
5030
5030
 
5031
+ const useTableHeightWrapper = (options = {}) => {
5032
+ const {
5033
+ tableContainerId = "table_content",
5034
+ extraOffset = 24,
5035
+ // Layout padding bottom mặc định
5036
+ minHeight = 200
5037
+ } = options;
5038
+ const [tableHeight, setTableHeight] = useState(minHeight);
5039
+ const calculateTableHeight = useCallback(() => {
5040
+ try {
5041
+ const viewportHeight = window.innerHeight;
5042
+ const layoutWrapper = document.getElementById("layout-wrapper-table");
5043
+ if (!layoutWrapper) {
5044
+ console.error("Layout wrapper table container not found");
5045
+ setTableHeight(minHeight);
5046
+ return;
5047
+ }
5048
+ const wrapperRect = layoutWrapper.getBoundingClientRect();
5049
+ const availableHeight = viewportHeight - wrapperRect.top;
5050
+ const tableContainer = document.getElementById(tableContainerId);
5051
+ if (!tableContainer) {
5052
+ console.error(`Table container "${tableContainerId}" not found`);
5053
+ setTableHeight(minHeight);
5054
+ return;
5055
+ }
5056
+ const directChildren = Array.from(layoutWrapper.children);
5057
+ let otherElementsHeight = 0;
5058
+ directChildren.forEach((child, index) => {
5059
+ const rect = child.getBoundingClientRect();
5060
+ const styles = window.getComputedStyle(child);
5061
+ const marginTop = parseInt(styles.marginTop, 10) || 0;
5062
+ const marginBottom = parseInt(styles.marginBottom, 10) || 0;
5063
+ const totalHeight = rect.height + marginTop + marginBottom;
5064
+ const isTableContent = child.id === tableContainerId;
5065
+ const isBulkActionTable = child.id === "bulkaction_table";
5066
+ if (!isTableContent && !isBulkActionTable) {
5067
+ otherElementsHeight += totalHeight;
5068
+ } else if (isBulkActionTable) {
5069
+ console.log(` -> Ignoring bulkaction_table (id: ${child.id})`);
5070
+ }
5071
+ });
5072
+ const wrapperStyles = window.getComputedStyle(layoutWrapper);
5073
+ const wrapperPaddingTop = parseInt(wrapperStyles.paddingTop, 10) || 0;
5074
+ const wrapperPaddingBottom = parseInt(wrapperStyles.paddingBottom, 10) || 0;
5075
+ console.log("5. Wrapper padding:", {
5076
+ top: wrapperPaddingTop,
5077
+ bottom: wrapperPaddingBottom
5078
+ });
5079
+ const tableStyles = window.getComputedStyle(tableContainer);
5080
+ const tablePaddingTop = parseInt(tableStyles.paddingTop, 10) || 0;
5081
+ const tablePaddingBottom = parseInt(tableStyles.paddingBottom, 10) || 0;
5082
+ console.log("6. Table container padding:", {
5083
+ top: tablePaddingTop,
5084
+ bottom: tablePaddingBottom
5085
+ });
5086
+ const tableHeader = tableContainer.querySelector(".ant-table-header");
5087
+ const headerHeight = tableHeader ? tableHeader.getBoundingClientRect().height : 0;
5088
+ console.log("7. Table header height:", headerHeight);
5089
+ let paginationHeight = 0;
5090
+ const paginationSelectors = [
5091
+ ".ant-pagination",
5092
+ ".ant-table-pagination",
5093
+ ".ant-pagination-mini"
5094
+ ];
5095
+ for (const selector of paginationSelectors) {
5096
+ const pagination = tableContainer.querySelector(selector);
5097
+ if (pagination) {
5098
+ const paginationRect = pagination.getBoundingClientRect();
5099
+ const paginationStyles = window.getComputedStyle(pagination);
5100
+ const paginationMarginTop = parseInt(paginationStyles.marginTop, 10) || 0;
5101
+ const paginationMarginBottom = parseInt(paginationStyles.marginBottom, 10) || 0;
5102
+ paginationHeight = paginationRect.height + paginationMarginTop + paginationMarginBottom;
5103
+ console.log(`8. Found pagination with ${selector}:`, {
5104
+ height: paginationRect.height,
5105
+ marginTop: paginationMarginTop,
5106
+ marginBottom: paginationMarginBottom,
5107
+ totalHeight: paginationHeight
5108
+ });
5109
+ break;
5110
+ }
5111
+ }
5112
+ if (paginationHeight === 0) {
5113
+ console.log("8. No pagination found, assuming 44px");
5114
+ paginationHeight = 44;
5115
+ }
5116
+ const bulkActionHeight = 0;
5117
+ console.log("9. Bulk action detection temporarily disabled for testing");
5118
+ if (bulkActionHeight > 0) ; else {
5119
+ console.log(
5120
+ "9. No bulk action found, not visible, or is fixed positioned"
5121
+ );
5122
+ }
5123
+ const tableBodyHeight = availableHeight - otherElementsHeight - tablePaddingTop - tablePaddingBottom - headerHeight - paginationHeight - bulkActionHeight - extraOffset;
5124
+ console.log("10. Calculation breakdown:", {
5125
+ availableHeight,
5126
+ otherElementsHeight,
5127
+ wrapperPaddingTop: `${wrapperPaddingTop} (not used in calculation)`,
5128
+ wrapperPaddingBottom: `${wrapperPaddingBottom} (not used in calculation)`,
5129
+ tablePaddingTop,
5130
+ tablePaddingBottom,
5131
+ headerHeight,
5132
+ paginationHeight,
5133
+ bulkActionHeight,
5134
+ extraOffset,
5135
+ calculatedTableBodyHeight: tableBodyHeight
5136
+ });
5137
+ const finalHeight = Math.max(tableBodyHeight, minHeight);
5138
+ console.log("11. Final height:", finalHeight);
5139
+ console.log("=== END WRAPPER ===");
5140
+ setTableHeight(finalHeight);
5141
+ } catch (error) {
5142
+ console.error("Error calculating table height:", error);
5143
+ setTableHeight(minHeight);
5144
+ }
5145
+ }, [tableContainerId, extraOffset, minHeight]);
5146
+ useEffect(() => {
5147
+ const timer = setTimeout(() => {
5148
+ calculateTableHeight();
5149
+ }, 300);
5150
+ const handleResize = () => {
5151
+ console.log("Window resized, recalculating...");
5152
+ calculateTableHeight();
5153
+ };
5154
+ window.addEventListener("resize", handleResize);
5155
+ const observer = new MutationObserver((mutations) => {
5156
+ let shouldRecalculate = false;
5157
+ mutations.forEach((mutation) => {
5158
+ if (mutation.type === "childList") {
5159
+ shouldRecalculate = true;
5160
+ }
5161
+ });
5162
+ if (shouldRecalculate) {
5163
+ setTimeout(calculateTableHeight, 100);
5164
+ }
5165
+ });
5166
+ const layoutWrapper = document.getElementById("layout-wrapper-table");
5167
+ const tableContainer = document.getElementById(tableContainerId);
5168
+ if (layoutWrapper) {
5169
+ observer.observe(layoutWrapper, {
5170
+ childList: true,
5171
+ subtree: true,
5172
+ attributes: true,
5173
+ attributeFilter: ["style", "class"]
5174
+ });
5175
+ }
5176
+ if (tableContainer && tableContainer !== layoutWrapper) {
5177
+ observer.observe(tableContainer, {
5178
+ childList: true,
5179
+ subtree: true,
5180
+ attributes: true,
5181
+ attributeFilter: ["style", "class"]
5182
+ });
5183
+ }
5184
+ return () => {
5185
+ clearTimeout(timer);
5186
+ window.removeEventListener("resize", handleResize);
5187
+ observer.disconnect();
5188
+ };
5189
+ }, [calculateTableHeight, tableContainerId]);
5190
+ return {
5191
+ tableHeight,
5192
+ recalculate: calculateTableHeight
5193
+ };
5194
+ };
5195
+
5031
5196
  const Table = ({
5032
5197
  dataSource = [],
5033
5198
  columns,
@@ -5116,71 +5281,92 @@ const Table = ({
5116
5281
  }
5117
5282
  onRowClick2?.(record);
5118
5283
  };
5284
+ const { tableHeight } = useTableHeightWrapper({
5285
+ tableContainerId: "table_content",
5286
+ // ID của table container
5287
+ minHeight: 200
5288
+ // chiều cao tối thiểu
5289
+ });
5119
5290
  //! Render
5120
- return /* @__PURE__ */ jsxs("div", { className: twMerge(showSetting ? "relative" : ""), children: [
5121
- /* @__PURE__ */ jsx(
5122
- HeadingTable,
5123
- {
5124
- rightHeadingContent,
5125
- renderHeadingSearch,
5126
- setOpenStting,
5127
- showSetting,
5128
- menu,
5129
- groupHeadingButtonItems,
5130
- setFilters,
5131
- filters,
5132
- noBreadcum
5133
- }
5134
- ),
5135
- /* @__PURE__ */ jsx(
5136
- "div",
5137
- {
5138
- id: "table_content",
5139
- className: "bg-[#FFFFFF] p-6 rounded-bl-lg rounded-br-lg",
5140
- children: /* @__PURE__ */ jsx(
5141
- Table$1,
5291
+ return /* @__PURE__ */ jsxs(
5292
+ "div",
5293
+ {
5294
+ id: "layout-wrapper-table",
5295
+ className: twMerge(showSetting ? "relative" : ""),
5296
+ children: [
5297
+ /* @__PURE__ */ jsx(
5298
+ HeadingTable,
5299
+ {
5300
+ rightHeadingContent,
5301
+ renderHeadingSearch,
5302
+ setOpenStting,
5303
+ showSetting,
5304
+ menu,
5305
+ groupHeadingButtonItems,
5306
+ setFilters,
5307
+ filters,
5308
+ noBreadcum
5309
+ }
5310
+ ),
5311
+ /* @__PURE__ */ jsx(
5312
+ "div",
5313
+ {
5314
+ id: "table_content",
5315
+ className: "bg-[#FFFFFF] p-6 rounded-bl-lg rounded-br-lg",
5316
+ children: /* @__PURE__ */ jsx(
5317
+ Table$1,
5318
+ {
5319
+ rowKey,
5320
+ dataSource: data,
5321
+ columns: columnsWithIndex,
5322
+ pagination: !isEmpty(data) ? paginationConfig : false,
5323
+ loading,
5324
+ rowSelection: rowsSelected ? rowSelection : void 0,
5325
+ onChange: handleTableChange,
5326
+ onRow: (record) => ({
5327
+ onClick: handleOnClickRow(record, onRowClick)
5328
+ }),
5329
+ locale: {
5330
+ emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
5331
+ },
5332
+ rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
5333
+ scroll: { y: tableHeight },
5334
+ size,
5335
+ ...rest
5336
+ }
5337
+ )
5338
+ }
5339
+ ),
5340
+ /* @__PURE__ */ jsx(
5341
+ SettingTable,
5142
5342
  {
5143
- rowKey,
5144
- dataSource: data,
5145
- columns: columnsWithIndex,
5146
- pagination: !isEmpty(data) ? paginationConfig : false,
5147
- loading,
5148
- rowSelection: rowsSelected ? rowSelection : void 0,
5149
- onChange: handleTableChange,
5150
- onRow: (record) => ({
5151
- onClick: handleOnClickRow(record, onRowClick)
5152
- }),
5153
- locale: {
5154
- emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
5155
- },
5156
- rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
5157
- size,
5158
- ...rest
5343
+ open: openSetting,
5344
+ setOpen: setOpenStting,
5345
+ title: titleSettingTableModal,
5346
+ showSetting,
5347
+ defaultSettingColumnItems: columns,
5348
+ setDefaultSettingColumnItems: setColumns
5349
+ }
5350
+ ),
5351
+ rowsSelected && !isEmpty(rowsSelected) && /* @__PURE__ */ jsx(
5352
+ "div",
5353
+ {
5354
+ id: "bulkaction_table",
5355
+ className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2",
5356
+ children: /* @__PURE__ */ jsx(
5357
+ BulkActions,
5358
+ {
5359
+ type: TypeBulkActions.BULKACTION,
5360
+ quantity: rowsSelected?.length,
5361
+ status,
5362
+ ...bulkActionHandlers
5363
+ }
5364
+ )
5159
5365
  }
5160
5366
  )
5161
- }
5162
- ),
5163
- /* @__PURE__ */ jsx(
5164
- SettingTable,
5165
- {
5166
- open: openSetting,
5167
- setOpen: setOpenStting,
5168
- title: titleSettingTableModal,
5169
- showSetting,
5170
- defaultSettingColumnItems: columns,
5171
- setDefaultSettingColumnItems: setColumns
5172
- }
5173
- ),
5174
- rowsSelected && !isEmpty(rowsSelected) && /* @__PURE__ */ jsx("div", { className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
5175
- BulkActions,
5176
- {
5177
- type: TypeBulkActions.BULKACTION,
5178
- quantity: rowsSelected?.length,
5179
- status,
5180
- ...bulkActionHandlers
5181
- }
5182
- ) })
5183
- ] });
5367
+ ]
5368
+ }
5369
+ );
5184
5370
  };
5185
5371
  const EmptyTable = () => {
5186
5372
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pnkx-lib/ui",
3
3
  "private": false,
4
- "version": "1.9.207",
4
+ "version": "1.9.209",
5
5
  "type": "module",
6
6
  "main": "./es/index.js",
7
7
  "module": "./es/index.js",
@@ -0,0 +1,14 @@
1
+ import { CascaderProps as CascaderPropsAntd } from 'antd';
2
+ import { ControllerRenderProps, UseFormSetValue, UseFormStateReturn } from 'react-hook-form';
3
+ interface CascaderFieldProps extends CascaderPropsAntd {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ setValue?: UseFormSetValue<any>;
7
+ label?: string;
8
+ required?: boolean;
9
+ afterOnChange?: (value: any) => void;
10
+ classNameContainer?: string;
11
+ classNameCascader?: string;
12
+ }
13
+ export declare const Cascader: (props: CascaderFieldProps) => import("react/jsx-runtime").JSX.Element;
14
+ export {};
@@ -0,0 +1,12 @@
1
+ import { CheckboxProps as CheckboxAntdProps } from 'antd';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ export interface CheckboxProps extends Omit<CheckboxAntdProps, "onChange" | "checked"> {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ label?: string;
7
+ required?: boolean;
8
+ afterOnChange?: (checked: boolean) => void;
9
+ customStyleContainer?: string;
10
+ customStyleCheckbox?: string;
11
+ }
12
+ export declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ import { default as React } from 'react';
2
+ import { ReactDatePickerProps } from 'react-datepicker';
3
+ import { ControllerRenderProps, UseFormSetValue, UseFormStateReturn } from 'react-hook-form';
4
+ export type TSize = "small" | "medium" | "large";
5
+ export interface DatePickerProps extends Omit<ReactDatePickerProps, "onChange"> {
6
+ field?: ControllerRenderProps<any, any>;
7
+ formState?: UseFormStateReturn<any>;
8
+ setValue?: UseFormSetValue<any>;
9
+ classNameDatepicker?: string;
10
+ disabledInputChange?: boolean;
11
+ required?: boolean;
12
+ dateFormat?: string | string[];
13
+ placeholder?: string;
14
+ label?: string;
15
+ maxDate?: Date;
16
+ showTimeSelect?: boolean;
17
+ customOnChange?: (date: any, event: React.SyntheticEvent<any>) => void;
18
+ customValue?: Date | null;
19
+ size?: TSize;
20
+ }
21
+ export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,19 +1,13 @@
1
- import { ControllerRenderProps } from 'react-hook-form';
2
- import { Dayjs } from 'dayjs';
3
- import { JSX } from 'react/jsx-runtime';
4
- import { RangePickerProps } from 'antd/es/date-picker';
5
- import { UseFormStateReturn } from 'react-hook-form';
6
-
7
- export declare const RangePicker: (props: RangePickerFieldProps) => JSX.Element;
8
-
9
- export declare interface RangePickerFieldProps extends Omit<RangePickerProps, "value" | "onChange"> {
10
- field?: ControllerRenderProps<any, any>;
11
- formState?: UseFormStateReturn<any>;
12
- label?: string;
13
- required?: boolean;
14
- afterOnChange?: (dates: [Dayjs | null, Dayjs | null] | null, dateStrings: [string, string]) => void;
15
- customStyleContainer?: string;
16
- customStyleDatePicker?: string;
17
- }
18
-
19
- export { }
1
+ import { RangePickerProps } from 'antd/es/date-picker';
2
+ import { Dayjs } from 'dayjs';
3
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
4
+ export interface RangePickerFieldProps extends Omit<RangePickerProps, "value" | "onChange"> {
5
+ field?: ControllerRenderProps<any, any>;
6
+ formState?: UseFormStateReturn<any>;
7
+ label?: string;
8
+ required?: boolean;
9
+ afterOnChange?: (dates: [Dayjs | null, Dayjs | null] | null, dateStrings: [string, string]) => void;
10
+ customStyleContainer?: string;
11
+ customStyleDatePicker?: string;
12
+ }
13
+ export declare const RangePicker: (props: RangePickerFieldProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,33 @@
1
+ import { default as React, JSX } from 'react';
2
+ import { InputProps as InputPropsAntd } from 'antd';
3
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
4
+ type CustomInputTypeAttribute = React.HTMLInputTypeAttribute | "money";
5
+ type TInputNumberType = "number" | "money";
6
+ export interface InputProps extends InputPropsAntd {
7
+ field?: ControllerRenderProps<any, any>;
8
+ formState?: UseFormStateReturn<any>;
9
+ label?: string;
10
+ classNameInput?: string;
11
+ type?: CustomInputTypeAttribute;
12
+ afterOnChange?: (value: number | string | null) => void;
13
+ iconStartInput?: React.ReactNode;
14
+ iconEndInput?: React.ReactNode;
15
+ allowNegative?: boolean;
16
+ decimalScale?: number;
17
+ prefix?: string;
18
+ suffix?: string;
19
+ contentTooltip?: string;
20
+ }
21
+ export declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
22
+ export interface PropsNumberFormat extends Omit<InputProps, "onChange" | "afterOnChange" | "value" | "defaultValue" | "iconStartInput" | "iconEndInput"> {
23
+ onChange?: (event: any) => void;
24
+ afterOnChange?: (value: string | number) => void;
25
+ value?: string;
26
+ name?: string;
27
+ ref: any;
28
+ type?: TInputNumberType;
29
+ prefix?: string;
30
+ suffix?: string;
31
+ helperText?: () => JSX.Element | null;
32
+ }
33
+ export {};
@@ -0,0 +1,11 @@
1
+ import { Control } from 'react-hook-form';
2
+ import * as React from "react";
3
+ export type ComponentPropsType<TComponent> = TComponent extends React.ComponentType<infer P> ? P : never;
4
+ export type PnkxFieldProps<TComponent extends React.ComponentType<any>> = {
5
+ control: Control<any, any>;
6
+ name: string;
7
+ component: TComponent;
8
+ } & Omit<ComponentPropsType<TComponent>, "control" | "name" | "formState" | "field" | "fieldState">;
9
+ export declare class PnkxField<TComponent extends React.ComponentType<any>> extends React.PureComponent<PnkxFieldProps<TComponent>> {
10
+ render(): import("react/jsx-runtime").JSX.Element;
11
+ }
@@ -0,0 +1,19 @@
1
+ import { RadioGroupProps } from 'antd';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ type TOptionGRadio = {
4
+ label: string;
5
+ value: string | number;
6
+ };
7
+ type TPositionRadio = "before" | "after";
8
+ export interface RadioProps extends Omit<RadioGroupProps, "options" | "onChange"> {
9
+ field?: ControllerRenderProps<any, any>;
10
+ formState?: UseFormStateReturn<any>;
11
+ customStyleRadioGroup?: string;
12
+ customStyleRadio?: string;
13
+ customStyleWrap?: string;
14
+ afterOnChange?: (value: any) => void;
15
+ options: TOptionGRadio[];
16
+ position?: TPositionRadio;
17
+ }
18
+ export declare const RadioGroup: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,13 @@
1
+ import { SelectProps } from 'antd';
2
+ import { ControllerRenderProps, UseFormSetValue, UseFormStateReturn } from 'react-hook-form';
3
+ export interface SelectFieldProps extends SelectProps {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ setValue?: UseFormSetValue<any>;
7
+ label?: string;
8
+ required?: boolean;
9
+ afterOnChange?: (value: any) => void;
10
+ classNameContainer?: string;
11
+ classNameSelect?: string;
12
+ }
13
+ export declare const Select: (props: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,18 +1,12 @@
1
- import { ControllerRenderProps } from 'react-hook-form';
2
- import { JSX } from 'react/jsx-runtime';
3
- import { SliderRangeProps } from 'antd/es/slider';
4
- import { UseFormStateReturn } from 'react-hook-form';
5
-
6
- export declare const SliderRange: (props: SliderRangesProps) => JSX.Element;
7
-
8
- export declare interface SliderRangesProps extends Omit<SliderRangeProps, "onChange"> {
9
- field?: ControllerRenderProps<any, any>;
10
- formState?: UseFormStateReturn<any>;
11
- label?: string;
12
- required?: boolean;
13
- afterOnChange?: (data: number[]) => void;
14
- customStyleContainer?: string;
15
- customStyleSlider?: string;
16
- }
17
-
18
- export { }
1
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
2
+ import { SliderRangeProps } from 'antd/es/slider';
3
+ export interface SliderRangesProps extends Omit<SliderRangeProps, "onChange"> {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ label?: string;
7
+ required?: boolean;
8
+ afterOnChange?: (data: number[]) => void;
9
+ customStyleContainer?: string;
10
+ customStyleSlider?: string;
11
+ }
12
+ export declare const SliderRange: (props: SliderRangesProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { SliderSingleProps as SliderSingleAntdProps } from 'antd';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ export interface SliderProps extends Omit<SliderSingleAntdProps, "onChange"> {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ label?: string;
7
+ required?: boolean;
8
+ afterOnChange?: (data: number) => void;
9
+ customStyleContainer?: string;
10
+ customStyleSlider?: string;
11
+ }
12
+ export declare const SliderSingle: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { SwitchProps as SwitchAntdProps } from 'antd';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ export interface SwitchProps extends Omit<SwitchAntdProps, "onChange"> {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ label?: string;
7
+ required?: boolean;
8
+ afterOnChange?: (checked: boolean) => void;
9
+ customStyleContainer?: string;
10
+ customStyleSwitch?: string;
11
+ }
12
+ export declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { default as React } from 'react';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ import { TextAreaProps as TextAreaPropsAntd } from 'antd/es/input';
4
+ export interface TextAreaProps extends TextAreaPropsAntd {
5
+ field?: ControllerRenderProps<any, any>;
6
+ formState?: UseFormStateReturn<any>;
7
+ label?: string;
8
+ customStyleTextarea?: string;
9
+ afterOnChange?: (value: string) => void;
10
+ required?: boolean;
11
+ }
12
+ export declare const Textarea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
@@ -0,0 +1,12 @@
1
+ import { default as React } from 'react';
2
+ import { TimePickerProps } from 'antd/es/time-picker';
3
+ import { Dayjs } from 'dayjs';
4
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
5
+ interface TimeRangePickerProps extends Omit<TimePickerProps, "value" | "onChange"> {
6
+ afterOnChange?: (dates: [Dayjs | null, Dayjs | null] | null) => void;
7
+ field?: ControllerRenderProps<any, any>;
8
+ formState?: UseFormStateReturn<any>;
9
+ label?: string;
10
+ }
11
+ export declare const TimePicker: React.FC<TimeRangePickerProps>;
12
+ export {};
@@ -0,0 +1,12 @@
1
+ import { default as React } from 'react';
2
+ import { TimeRangePickerProps as AntdTimeRangePickerProps } from 'antd/es/time-picker';
3
+ import { Dayjs } from 'dayjs';
4
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
5
+ interface TimeRangePickerProps extends AntdTimeRangePickerProps {
6
+ afterOnChange?: (dates: [Dayjs | null, Dayjs | null] | null, dateStrings: [string, string]) => void;
7
+ field?: ControllerRenderProps<any, any>;
8
+ formState?: UseFormStateReturn<any>;
9
+ label?: string;
10
+ }
11
+ export declare const TimeRangePicker: React.FC<TimeRangePickerProps>;
12
+ export {};
@@ -1,22 +1,16 @@
1
- import { ControllerRenderProps } from 'react-hook-form';
2
- import { IAllProps } from '@tinymce/tinymce-react';
3
- import { JSX } from 'react/jsx-runtime';
4
- import { UseFormStateReturn } from 'react-hook-form';
5
-
6
- export declare const TinyMCE: {
7
- (props: TinyProps): JSX.Element;
8
- displayName: string;
9
- };
10
-
11
- export declare interface TinyProps extends IAllProps {
12
- height?: number | string;
13
- openHidenMenubar?: boolean;
14
- required?: boolean;
15
- field?: ControllerRenderProps<any, any>;
16
- formState?: UseFormStateReturn<any>;
17
- label?: string;
18
- customStyleLabel?: string;
19
- text_patterns?: any;
20
- }
21
-
22
- export { }
1
+ import { IAllProps } from '@tinymce/tinymce-react';
2
+ import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
3
+ export interface TinyProps extends IAllProps {
4
+ height?: number | string;
5
+ openHidenMenubar?: boolean;
6
+ required?: boolean;
7
+ field?: ControllerRenderProps<any, any>;
8
+ formState?: UseFormStateReturn<any>;
9
+ label?: string;
10
+ customStyleLabel?: string;
11
+ text_patterns?: any;
12
+ }
13
+ export declare const TinyMCE: {
14
+ (props: TinyProps): import("react/jsx-runtime").JSX.Element;
15
+ displayName: string;
16
+ };
@@ -0,0 +1,15 @@
1
+ import { UploadProps, UploadFile } from 'antd';
2
+ import { ControllerRenderProps, UseFormStateReturn, ControllerFieldState } from 'react-hook-form';
3
+ export interface UploadFieldProps extends Omit<UploadProps, "value" | "onChange" | "fileList"> {
4
+ field?: ControllerRenderProps<any, any>;
5
+ formState?: UseFormStateReturn<any>;
6
+ fieldState?: ControllerFieldState;
7
+ label?: string;
8
+ required?: boolean;
9
+ maxFiles?: number;
10
+ uploadButtonText?: string;
11
+ customStyleContainer?: string;
12
+ customStyleUpload?: string;
13
+ afterOnChange?: (fileList: UploadFile[]) => void;
14
+ }
15
+ export declare const UploadField: (props: UploadFieldProps) => import("react/jsx-runtime").JSX.Element;