@pnkx-lib/ui 1.9.456 → 1.9.457

package/es/index.js

@@ -48,7 +48,7 @@ export { Empty } from './ui/Empty.js';
 export { Image } from './ui/Image.js';
 export { ConfirmModal } from './ui/ConfirmModal.js';
 export { ErrorBoundary } from './ui/ErrorBoundary.js';
-export { CATEGORY_LIST_ENUM, CategoryStatus, badgeStatusCategoryAccount, badgeStatusCategoryConfig } from './ui/CategoryStatus.js';
+export { CATEGORY_LIST_ENUM, CategoryStatus, badgeStatusCategoryConfig } from './ui/CategoryStatus.js';
 export { I as ID_TABLE_WRAPPER, a as MAX_TAG_COUNT, M as MAX_TAG_TEXT_LENGTH, T as TINY_API } from './chunks/common-BcURBmQ-.js';
 export { PAGE_NUMBER, PAGE_SIZE, SORT, START_PAGE, START_PAGE_SIZE, TypeActionRowTable, TypeBulkActions, TypeStatusTable } from './constants/index.js';
 export { BreadcrumbHeading } from './ui/BreadcrumbHeading.js';

package/es/ui/CategoryStatus.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { CategoryAccountStatus } from '@pnkx-lib/core';
 import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
 
 var CATEGORY_LIST_ENUM = /* @__PURE__ */ ((CATEGORY_LIST_ENUM2) => {
@@ -31,20 +30,9 @@ const badgeStatusCategoryConfig = {
     text: "Đã xóa"
   }
 };
-const badgeStatusCategoryAccount = {
-  [CategoryAccountStatus.ACTIVE]: { color: "bg-[#27CD7F]", text: "Hoạt động" },
-  [CategoryAccountStatus.INACTIVE]: {
-    color: "bg-[#DD4338]",
-    text: "Ngừng hoạt động"
-  },
-  [CategoryAccountStatus.DELETED]: {
-    color: "bg-[#B2B7C2]",
-    text: "Đã xóa"
-  }
-};
-const CategoryStatus = ({ status, mode }) => {
+const CategoryStatus = ({ status }) => {
   //! State
-  const bagde = mode === "categoryAccount" ? badgeStatusCategoryAccount[Number(status)] : badgeStatusCategoryConfig[Number(status)];
+  const bagde = badgeStatusCategoryConfig[Number(status)];
   //! Function
   const ItemStatus = ({
     color,
@@ -59,4 +47,4 @@ const CategoryStatus = ({ status, mode }) => {
   return /* @__PURE__ */ jsx(ItemStatus, { color: bagde?.color, statusName: bagde?.text });
 };
 
-export { CATEGORY_LIST_ENUM, CategoryStatus, badgeStatusCategoryAccount, badgeStatusCategoryConfig };
+export { CATEGORY_LIST_ENUM, CategoryStatus, badgeStatusCategoryConfig };

package/es/ui/SelectTable.js

@@ -1,7 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Select, Table } from 'antd';
 import { useState, useCallback } from 'react';
 import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
+import { get } from 'lodash';
+import { ErrorMessage } from './ErrorMessage.js';
+import { Label } from './Label.js';
 
 const SelectTable = ({
   columns,
@@ -21,6 +24,15 @@ const SelectTable = ({
   selectedRows = [],
   customeContentTable = "",
   customeContainerTable = "",
+  field,
+  formState,
+  label,
+  required,
+  isDisabledCheckbox,
+  classNameContainer,
+  classNameLabel,
+  isShowLabel = false,
+  isShowCheckboxAll = false,
   ...selectProps
 }) => {
   const [open, setOpen] = useState(false);
@@ -28,6 +40,22 @@ const SelectTable = ({
   const [internalLoading, setInternalLoading] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [isClearing, setIsClearing] = useState(false);
+  const { name, value, onChange } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  const currentSelectedKeys = (() => {
+    if (value && Array.isArray(value)) {
+      if (value.length > 0 && typeof value[0] === "object") {
+        return value.map((row) => {
+          const key = typeof rowKey === "function" ? rowKey(row) : row[rowKey];
+          return key;
+        });
+      }
+      return value;
+    }
+    return selectedKeys;
+  })();
   const currentDataSource = dataSource.length > 0 ? dataSource : internalDataSource;
   const loadMoreData = useCallback(async () => {
     if (internalLoading || loading || !hasMore || !onLoadMore) return;
@@ -40,6 +68,17 @@ const SelectTable = ({
       setInternalLoading(false);
     }
   }, [onLoadMore, internalLoading, loading, hasMore]);
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
   const handleScroll = useCallback(
     (e) => {
       if (!infiniteScroll) return;
@@ -51,32 +90,49 @@ const SelectTable = ({
     [infiniteScroll, loadMoreThreshold, loadMoreData]
   );
   const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+    onChange?.({
+      target: {
+        name,
+        value: newSelectedRows
+      }
+    });
     if (onSelectionChange) {
       onSelectionChange(newSelectedRowKeys, newSelectedRows);
     }
   };
   const rowSelection = {
-    selectedRowKeys: selectedKeys,
+    selectedRowKeys: currentSelectedKeys,
     onChange: onSelectChange,
+    hideSelectAll: isShowCheckboxAll,
     getCheckboxProps: (record) => {
       return {
-        disabled: selectedKeys.includes(record[rowKey])
+        disabled: isDisabledCheckbox ? currentSelectedKeys.includes(record[rowKey]) : false
         // Disable checkbox nếu đã được chọn
       };
     }
   };
   const getDisplayValue = useCallback(() => {
-    if (!displayField) {
+    if (!isShowLabel) {
       return [];
+    } else {
+      if (value && Array.isArray(value)) {
+        if (value.length > 0 && typeof value[0] === "object") {
+          return value.map(
+            (row) => row[displayField]
+          );
+        }
+        if (selectedRows.length > 0) {
+          return selectedRows.map(
+            (row) => row[displayField]
+          );
+        }
+      }
     }
-    return selectedRows.map(
-      (row) => row[displayField]
-    );
-  }, [selectedRows, displayField]);
-  const handleSearch = (value) => {
-    setSearchValue(value);
+  }, [selectedRows, displayField, value, isShowLabel]);
+  const handleSearch = (value2) => {
+    setSearchValue(value2);
     if (onSearch) {
-      onSearch(value);
+      onSearch(value2);
     }
   };
   const handleClear = () => {
@@ -85,6 +141,18 @@ const SelectTable = ({
     if (onSearch) {
       onSearch("");
     }
+    if (onSelectionChange) {
+      onSelectionChange([], []);
+    }
+    if (field && onChange) {
+      onChange({
+        target: {
+          name,
+          value: []
+          // Clear với empty array of objects
+        }
+      });
+    }
     setTimeout(() => {
       setOpen(true);
       setIsClearing(false);
@@ -100,6 +168,7 @@ const SelectTable = ({
     "div",
     {
       className: twMerge("overflow-x-hidden w-full", customeContainerTable),
+      onScroll: handleScroll,
       children: /* @__PURE__ */ jsx(
         Table,
         {
@@ -112,30 +181,47 @@ const SelectTable = ({
           pagination: false,
           scroll: tableProps.scrollTable,
           style: { overflowX: "hidden" },
-          loading,
-          onScroll: handleScroll,
+          loading: false,
           ...tableProps
         }
       )
     }
   ) });
-  return /* @__PURE__ */ jsx(
-    Select,
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      ...selectProps,
-      open,
-      onDropdownVisibleChange: handleDropdownVisibleChange,
-      dropdownRender,
-      value: getDisplayValue(),
-      mode: "multiple",
-      showSearch: true,
-      onSearch: handleSearch,
-      onClear: handleClear,
-      placeholder: searchPlaceholder,
-      maxTagCount: 3,
-      showArrow: true,
-      filterOption: false,
-      searchValue
+      className: twMerge("pnkx-default-select-container", classNameContainer),
+      children: [
+        label && /* @__PURE__ */ jsx(
+          Label,
+          {
+            label,
+            required,
+            classNameLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...selectProps,
+            open,
+            onDropdownVisibleChange: handleDropdownVisibleChange,
+            dropdownRender,
+            value: getDisplayValue(),
+            mode: "multiple",
+            showSearch: true,
+            onSearch: handleSearch,
+            onClear: handleClear,
+            placeholder: searchPlaceholder,
+            maxTagCount: 3,
+            showArrow: true,
+            filterOption: false,
+            searchValue,
+            allowClear: true
+          }
+        ),
+        renderErrorMessage()
+      ]
     }
   );
 };

package/es/ui/index.js

@@ -55,7 +55,7 @@ export { Image } from './Image.js';
 import { ConfirmModal } from './ConfirmModal.js';
 export { ErrorBoundary } from './ErrorBoundary.js';
 import { CATEGORY_LIST_ENUM } from './CategoryStatus.js';
-export { CategoryStatus, badgeStatusCategoryAccount, badgeStatusCategoryConfig } from './CategoryStatus.js';
+export { CategoryStatus, badgeStatusCategoryConfig } from './CategoryStatus.js';
 import { useToggle } from '@pnkx-lib/core';
 import { isEmpty, isBoolean } from 'lodash';
 import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';

package/package.json

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

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

@@ -1,4 +1,3 @@
-import { CategoryAccountStatus } from '@pnkx-lib/core';
 import { TypeStatusTable } from '../../constants';
 export declare enum CATEGORY_LIST_ENUM {
     DRAFT = 0,// tạo mới
@@ -15,10 +14,8 @@ type BadgeConfig = {
     };
 };
 export declare const badgeStatusCategoryConfig: BadgeConfig;
-export declare const badgeStatusCategoryAccount: BadgeConfig;
 export interface CategoryStatusProps {
-    status: TypeStatusTable | CategoryAccountStatus;
-    mode?: string;
+    status: TypeStatusTable;
 }
-export declare const CategoryStatus: ({ status, mode }: CategoryStatusProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CategoryStatus: ({ status }: CategoryStatusProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { SelectProps } from 'antd/lib/select';
 import { ColumnsType } from 'antd/es/table';
+import { ControllerRenderProps, UseFormStateReturn } from 'react-hook-form';
 export interface SelectTableProps<T = Record<string, unknown>> extends Omit<SelectProps, "children" | "dropdownRender" | "mode" | "value"> {
     columns: ColumnsType<T>;
     dataSource?: T[];
@@ -25,5 +26,14 @@ export interface SelectTableProps<T = Record<string, unknown>> extends Omit<Sele
     selectedRows?: T[];
     customeContentTable?: string;
     customeContainerTable?: string;
+    field?: ControllerRenderProps<any, any>;
+    formState?: UseFormStateReturn<any>;
+    label?: string;
+    required?: boolean;
+    isDisabledCheckbox?: boolean;
+    classNameContainer?: string;
+    classNameLabel?: string;
+    isShowLabel?: boolean;
+    isShowCheckboxAll?: boolean;
 }
-export declare const SelectTable: <T>({ columns, dataSource, selectedKeys, onSelectionChange, onLoadMore, onSearch, hasMore, loading, rowKey, tableProps, infiniteScroll, loadMoreThreshold, searchPlaceholder, displayField, selectedRows, customeContentTable, customeContainerTable, ...selectProps }: SelectTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectTable: <T>({ columns, dataSource, selectedKeys, onSelectionChange, onLoadMore, onSearch, hasMore, loading, rowKey, tableProps, infiniteScroll, loadMoreThreshold, searchPlaceholder, displayField, selectedRows, customeContentTable, customeContainerTable, field, formState, label, required, isDisabledCheckbox, classNameContainer, classNameLabel, isShowLabel, isShowCheckboxAll, ...selectProps }: SelectTableProps<T>) => import("react/jsx-runtime").JSX.Element;