@pnkx-lib/ui 1.9.257 → 1.9.259

package/es/fields/Input.js

@@ -1251,16 +1251,39 @@ const Input = (props) => {
   const inputRef = useRef(null);
   const [isComposing, setIsComposing] = useState(false);
   //! Function
-  const handleCompositionStart = () => setIsComposing(true);
-  const handleCompositionEnd = () => {
-    setIsComposing(false);
-    const input = inputRef.current?.input;
-    if (input) {
+  const handleChange = useCallback(
+    (e) => {
+      onChange?.(e);
+      afterOnChange?.(e.target.value);
+    },
+    [onChange, afterOnChange, isComposing]
+  );
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+  const handleCompositionEnd = useCallback(
+    (e) => {
+      setIsComposing(false);
+      console.log("vvvvv", e.currentTarget.value);
+      const syntheticEvent = {
+        target: {
+          value: e.currentTarget.value,
+          name
+        }
+      };
+      console.log(" syntheticEvent:", syntheticEvent);
       setTimeout(() => {
-        input.scrollLeft = input.scrollWidth;
+        handleChange(syntheticEvent);
       }, 0);
-    }
-  };
+      const input = inputRef.current?.input;
+      if (input) {
+        setTimeout(() => {
+          input.scrollLeft = input.scrollWidth;
+        }, 0);
+      }
+    },
+    [handleChange, name]
+  );
   const renderErrorMessage = () => {
     if (!errorMessage) return null;
     return /* @__PURE__ */ jsx(
@@ -1287,14 +1310,6 @@ const Input = (props) => {
     }
     return node;
   };
-  const handleChange = useCallback(
-    (e) => {
-      if (isComposing) return;
-      onChange?.(e);
-      afterOnChange?.(e.target.value);
-    },
-    [onChange, afterOnChange, isComposing]
-  );
   const renderInput = () => {
     const isNumberInput = type === "number" || type === "money";
     if (isNumberInput) {

package/es/ui/index.js

@@ -5164,6 +5164,8 @@ const useTableHeightWrapper = (options = {}) => {
         }
       });
       const wrapperStyles = window.getComputedStyle(layoutWrapper);
+      const wrapperPaddingTop = parseInt(wrapperStyles.paddingTop, 10) || 0;
+      const wrapperPaddingBottom = parseInt(wrapperStyles.paddingBottom, 10) || 0;
       const tableStyles = window.getComputedStyle(tableContainer);
       const tablePaddingTop = parseInt(tableStyles.paddingTop, 10) || 0;
       const tablePaddingBottom = parseInt(tableStyles.paddingBottom, 10) || 0;
@@ -5275,11 +5277,11 @@ const Table = ({
   defaultEllipsis = true,
   onDoubleClickRow,
   setRowsSelected,
+  handleSubmit,
   ...rest
 }) => {
   const status = filters?.status;
   //! State
-  const [data, setData] = useState([]);
   const [openSetting, setOpenStting] = useState(false);
   const paginationConfig = {
     current: filters?.page,
@@ -5318,9 +5320,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);
@@ -5354,8 +5353,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",
@@ -5371,9 +5369,9 @@ const Table = ({
             menu,
             groupHeadingButtonItems,
             setFilters,
-            setRowsSelected,
             filters,
-            noBreadcum
+            noBreadcum,
+            setRowsSelected
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5385,9 +5383,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,
@@ -5398,7 +5396,6 @@ const Table = ({
                 locale: {
                   emptyText: /* @__PURE__ */ jsx(EmptyTable, {})
                 },
-                rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
                 scroll: { y: tableHeight },
                 size,
                 ...rest
@@ -5436,6 +5433,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.257",
+  "version": "1.9.259",
   "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';
@@ -42,7 +42,8 @@ export interface TableCommonProps<T> extends Omit<TableProps<T>, "columns"> {
     bulkActionHandlers?: BulkActionHandlers;
     size?: SizeType;
     defaultEllipsis?: boolean;
+    handleSubmit?: FormEventHandler<any>;
     setRowsSelected?: (newSelectedRowKeys: React.Key[]) => void;
 }
-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, setRowsSelected, ...rest }: TableCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
+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, setRowsSelected, handleSubmit, ...rest }: TableCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};