@pnkx-lib/ui 1.9.236 → 1.9.238

package/es/ui/ConfirmModal.js

@@ -101,7 +101,7 @@ const ConfirmModal = ({
   };
   //! Function
   //! Render
-  return /* @__PURE__ */ jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-fit", children: /* @__PURE__ */ jsx(IconType, {}) }),
       /* @__PURE__ */ jsxs("div", { children: [

package/es/ui/UploadComponent.js

@@ -33,9 +33,11 @@ const UploadComponent = ({
   customStyleContainer,
   required,
   styleImageDefault,
+  imageValue,
+  errorMessage,
   ...restProps
 }) => {
-  const [imageUrl, setImageUrl] = useState("");
+  const [imageUrl, setImageUrl] = useState(imageValue);
   const [loading, setLoading] = useState(false);
   const handleUpload = async (options) => {
     const { file } = options;
@@ -121,7 +123,11 @@ const UploadComponent = ({
       ) }),
       /* @__PURE__ */ jsx("p", { className: "ant-upload-text text-[#116DFF] text-[14px] font-[400]", children: "Tải hình ảnh lên" }),
       /* @__PURE__ */ jsx("p", { className: "ant-upload-hint text-[14px] font-[400]", children: "Ảnh có kích thước 400x400 px và dung lượng dưới 1MB" })
-    ] }) }) })
+    ] }) }) }),
+    errorMessage && /* @__PURE__ */ jsxs("p", { className: "text-red-600 text-sm mt-1", children: [
+      " ",
+      errorMessage
+    ] })
   ] });
 };
 

package/es/ui/UploadImage.js

@@ -9,19 +9,22 @@ const UploadImage = ({
   customStyleContainer,
   customStyleUpload,
   styleImageDefault,
-  control
+  control,
+  errorMessage
 }) => {
   return /* @__PURE__ */ jsx(
     Controller,
     {
       name,
       control,
-      render: ({ field: { onChange } }) => /* @__PURE__ */ jsx(
+      render: ({ field: { onChange, value } }) => /* @__PURE__ */ jsx(
         UploadComponent,
         {
           onUploadSuccess: onChange,
           label,
+          imageValue: value,
           required,
+          errorMessage,
           customStyleContainer,
           customStyleUpload,
           styleImageDefault

package/es/ui/index.js

@@ -5181,11 +5181,11 @@ const Table = ({
   size = "small",
   defaultEllipsis = true,
   onDoubleClickRow,
+  handleSubmit,
   ...rest
 }) => {
-  const status = filters?.status;
   //! State
-  const [data, setData] = useState([]);
+  const status = filters?.status;
   const [openSetting, setOpenStting] = useState(false);
   const paginationConfig = {
     current: filters?.page,
@@ -5224,9 +5224,6 @@ const Table = ({
     ...ellipsisColumns
   ] : ellipsisColumns;
   //! Function
-  useEffect(() => {
-    setData(Array.isArray(dataSource) ? dataSource : []);
-  }, [JSON.stringify(dataSource)]);
   const handleTableChange = (pagination, filters2, sorter) => {
     if (sorter && onSort) {
       onSort(sorter);
@@ -5260,8 +5257,7 @@ const Table = ({
     minHeight: 200
     // chiều cao tối thiểu
   });
-  //! Render
-  return /* @__PURE__ */ jsxs(
+  const tableContent = /* @__PURE__ */ jsxs(
     "div",
     {
       id: "layout-wrapper-table",
@@ -5290,9 +5286,9 @@ const Table = ({
               Table$1,
               {
                 rowKey,
-                dataSource: data,
+                dataSource,
                 columns: columnsWithIndex,
-                pagination: !isEmpty(data) ? paginationConfig : false,
+                pagination: !isEmpty(dataSource) ? paginationConfig : false,
                 loading,
                 rowSelection: rowsSelected ? rowSelection : void 0,
                 onChange: handleTableChange,
@@ -5303,7 +5299,6 @@ const Table = ({
                 locale: {
                   emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
                 },
-                rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
                 scroll: { y: tableHeight },
                 size,
                 ...rest
@@ -5341,6 +5336,14 @@ const Table = ({
       ]
     }
   );
+  const renderTable = () => {
+    if (handleSubmit) {
+      return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: tableContent });
+    }
+    return tableContent;
+  };
+  //! Render
+  return renderTable();
 };
 const EmptyTable = () => {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.236",
+  "version": "1.9.238",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",

package/types/components/ui/Table/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { default as React, FormEventHandler, ReactNode } from 'react';
 import { TableColumnsType as TableColumnsTypeAntd } from 'antd';
 import { TableProps } from 'antd/lib/table';
 import { SorterResult } from 'antd/es/table/interface';
@@ -6,10 +6,10 @@ import { BulkActionHandlers, InitialFiltersSearch } from '@pnkx-lib/core';
 import { MenuType } from '../Sidebar';
 import { GroupHeadingButtonItem } from './HeadingTable/components/GroupHeadingButton';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
-interface RowCommon {
+export interface RowCommon {
     [x: string]: any;
 }
-type ColumnTypes<T> = Exclude<TableProps<T>["columns"], undefined>;
+export type ColumnTypes<T> = Exclude<TableProps<T>["columns"], undefined>;
 export type TableColumnsTypeEditable<T> = (ColumnTypes<T>[number] & {})[];
 export type TableColumnsType<T> = TableColumnsTypeAntd<T> & TableColumnsTypeEditable<T>;
 export type TFilters = {
@@ -32,16 +32,16 @@ export interface TableCommonProps<T> extends Omit<TableProps<T>, "columns"> {
     titleSettingTableModal?: string;
     showSetting?: boolean;
     setColumns?: (newColumns: TableColumnsType<T>) => void;
-    renderHeadingSearch?: () => ReactNode;
-    rightHeadingContent?: ReactNode;
+    defaultEllipsis?: boolean;
+    size?: SizeType;
+    setFilters: (nextFilter: InitialFiltersSearch<TFilters>) => void;
+    showIndexColumn?: boolean;
     menu: Array<MenuType>;
     groupHeadingButtonItems?: GroupHeadingButtonItem[];
-    showIndexColumn?: boolean;
-    setFilters: (nextFilter: InitialFiltersSearch<TFilters>) => void;
     noBreadcum?: boolean;
     bulkActionHandlers?: BulkActionHandlers;
-    size?: SizeType;
-    defaultEllipsis?: boolean;
+    renderHeadingSearch?: () => ReactNode;
+    rightHeadingContent?: ReactNode;
+    handleSubmit?: FormEventHandler<any>;
 }
-export declare const Table: <T extends RowCommon>({ dataSource, columns, loading, totalItems, filters, onChangePage, onChangePageSize, onSort, rowsSelected, onSelect, onRowClick, rowKey, titleSettingTableModal, showSetting, setColumns, renderHeadingSearch, rightHeadingContent, menu, groupHeadingButtonItems, showIndexColumn, setFilters, noBreadcum, bulkActionHandlers, size, defaultEllipsis, onDoubleClickRow, ...rest }: TableCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Table: <T extends RowCommon>({ dataSource, columns, loading, totalItems, filters, onChangePage, onChangePageSize, onSort, rowsSelected, onSelect, onRowClick, rowKey, titleSettingTableModal, showSetting, setColumns, renderHeadingSearch, rightHeadingContent, menu, groupHeadingButtonItems, showIndexColumn, setFilters, noBreadcum, bulkActionHandlers, size, defaultEllipsis, onDoubleClickRow, handleSubmit, ...rest }: TableCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/types/components/ui/UploadComponent.d.ts

@@ -6,6 +6,8 @@ interface UploadImageProps {
     label?: string;
     required?: boolean;
     styleImageDefault?: string;
+    imageValue?: string;
+    errorMessage?: string;
 }
 export declare const UploadComponent: React.FC<UploadImageProps>;
 export {};

package/types/components/ui/UploadImage.d.ts

@@ -8,6 +8,7 @@ interface UploadImageControllerProps {
     customStyleUpload?: string;
     styleImageDefault?: string;
     control: Control | any;
+    errorMessage?: string;
 }
 export declare const UploadImage: React.FC<UploadImageControllerProps>;
 export {};