@pnkx-lib/ui 1.9.407 → 1.9.408

package/es/ui/SelectSingleTable.js

@@ -1,7 +1,9 @@
-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-BBFHkixS.js';
+import { get, isEmpty } from 'lodash';
+import { ErrorMessage } from './ErrorMessage.js';
 
 const SelectSingleTable = ({
   columns,
@@ -21,6 +23,9 @@ const SelectSingleTable = ({
   displayField,
   customeContentTable = "",
   customeContainerTable = "",
+  field,
+  formState,
+  classNameContainer,
   ...selectProps
 }) => {
   const [open, setOpen] = useState(false);
@@ -28,6 +33,10 @@ const SelectSingleTable = ({
   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 currentDataSource = dataSource.length > 0 ? dataSource : internalDataSource;
   const loadMoreData = useCallback(async () => {
     if (internalLoading || loading || !hasMore || !onLoadMore) return;
@@ -40,6 +49,17 @@ const SelectSingleTable = ({
       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,6 +71,12 @@ const SelectSingleTable = ({
     [infiniteScroll, loadMoreThreshold, loadMoreData]
   );
   const handleRowClick = (record) => {
+    onChange?.({
+      target: {
+        name,
+        value: record
+      }
+    });
     const key = typeof rowKey === "function" ? rowKey(record) : record[rowKey];
     if (selectedKey === key) {
       if (onSelectionChange) {
@@ -64,15 +90,17 @@ const SelectSingleTable = ({
     setOpen(false);
   };
   const getDisplayValue = useCallback(() => {
-    if (!selectedRow) {
-      return void 0;
+    if (isEmpty(value) && !selectedRow) {
+      return null;
     }
-    return selectedRow[displayField];
-  }, [selectedRow, displayField]);
-  const handleSearch = (value) => {
-    setSearchValue(value);
+    if (!value)
+      return selectedRow[displayField];
+    return value[displayField];
+  }, [selectedRow, displayField, value]);
+  const handleSearch = (value2) => {
+    setSearchValue(value2);
     if (onSearch) {
-      onSearch(value);
+      onSearch(value2);
     }
   };
   const handleClear = () => {
@@ -119,21 +147,30 @@ const SelectSingleTable = ({
       )
     }
   ) });
-  return /* @__PURE__ */ jsx(
-    Select,
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      ...selectProps,
-      open,
-      onDropdownVisibleChange: handleDropdownVisibleChange,
-      dropdownRender,
-      value: getDisplayValue(),
-      showSearch: true,
-      onSearch: handleSearch,
-      onClear: handleClear,
-      placeholder: searchPlaceholder,
-      filterOption: false,
-      searchValue,
-      allowClear: true
+      className: twMerge("pnkx-default-select-container", classNameContainer),
+      children: [
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            ...selectProps,
+            open,
+            onDropdownVisibleChange: handleDropdownVisibleChange,
+            dropdownRender,
+            value: getDisplayValue(),
+            showSearch: true,
+            onSearch: handleSearch,
+            onClear: handleClear,
+            placeholder: searchPlaceholder,
+            filterOption: false,
+            searchValue,
+            allowClear: true
+          }
+        ),
+        renderErrorMessage()
+      ]
     }
   );
 };

package/package.json

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

package/types/components/ui/SelectSingleTable.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 SelectSingleTableProps<T = Record<string, unknown>> extends Omit<SelectProps, "children" | "dropdownRender" | "mode" | "value"> {
     columns: ColumnsType<T>;
     dataSource?: T[];
@@ -21,5 +22,10 @@ export interface SelectSingleTableProps<T = Record<string, unknown>> extends Omi
     displayField: string;
     customeContentTable?: string;
     customeContainerTable?: string;
+    field?: ControllerRenderProps<any, any>;
+    formState?: UseFormStateReturn<any>;
+    label?: string;
+    required?: boolean;
+    classNameContainer?: string;
 }
-export declare const SelectSingleTable: <T>({ columns, dataSource, selectedKey, selectedRow, onSelectionChange, onLoadMore, onSearch, hasMore, loading, rowKey, tableProps, infiniteScroll, loadMoreThreshold, searchPlaceholder, displayField, customeContentTable, customeContainerTable, ...selectProps }: SelectSingleTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectSingleTable: <T>({ columns, dataSource, selectedKey, selectedRow, onSelectionChange, onLoadMore, onSearch, hasMore, loading, rowKey, tableProps, infiniteScroll, loadMoreThreshold, searchPlaceholder, displayField, customeContentTable, customeContainerTable, field, formState, classNameContainer, ...selectProps }: SelectSingleTableProps<T>) => import("react/jsx-runtime").JSX.Element;