@pnkx-lib/ui 1.9.369 → 1.9.371

package/es/fields/Input.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useCallback } from 'react';
 import { Input as Input$1 } from 'antd';
 import { g as get } from '../chunks/get-DPccfEM4.js';
@@ -1228,6 +1228,51 @@ function NumericFormat(props) {
     return React__default.createElement(NumberFormatBase, Object.assign({}, numericFormatProps));
 }
 
+const AllowClearIcon = ({
+  size = 6,
+  color = "currentColor",
+  className,
+  style,
+  onClick,
+  "aria-label": ariaLabel,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    style: {
+      width: size,
+      height: size,
+      cursor: onClick ? "pointer" : "default",
+      ...style
+    },
+    onClick,
+    role: onClick ? "button" : void 0,
+    "aria-label": ariaLabel,
+    title,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "100%",
+        height: "100%",
+        fill: "none",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: color || "#116DFF",
+            fillRule: "evenodd",
+            d: "M5.2 0 3 2.2.8 0 0 .8 2.2 3 0 5.3l.8.7L3 3.8 5.2 6l.8-.7L3.8 3 6 .8 5.2 0Z",
+            clipRule: "evenodd"
+          }
+        )
+      }
+    )
+  }
+);
+
 const Input = (props) => {
   //! State
   const {
@@ -1246,6 +1291,7 @@ const Input = (props) => {
     classNameLabel,
     inputPassword,
     toUpperCaseValue,
+    allowClear,
     ...restProps
   } = props;
   const { name, value, onChange, onBlur } = field || {};
@@ -1404,6 +1450,9 @@ const Input = (props) => {
           suffix: iconEndInput,
           className: twMerge("pnkx-default-input", classNameInput),
           status: (isTouched || isSubmitted) && errorMessage ? "error" : "",
+          allowClear: allowClear ? {
+            clearIcon: /* @__PURE__ */ jsx("div", { className: "allowClearIcon", children: /* @__PURE__ */ jsx(AllowClearIcon, { color: "#116DFF" }) })
+          } : false,
           ...restProps
         }
       ),

package/es/fields/InputRangePicker.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { InputNumber } from 'antd';
+import { g as get } from '../chunks/get-DPccfEM4.js';
+import { ErrorMessage } from '../ui/ErrorMessage.js';
+import { Label } from '../ui/Label.js';
+import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
+
+const InputRangePicker = (props) => {
+  //! State
+  const {
+    label,
+    required,
+    field,
+    formState,
+    afterOnChange,
+    classNameContainer,
+    classNameInput,
+    classNameInputWrapper,
+    classNameLabel,
+    thousandSeparator = true,
+    placeholderFrom = "Từ",
+    placeholderTo = "Đến",
+    ...restProps
+  } = props;
+  const { name, value, onChange, onBlur } = field || {};
+  const { touchedFields, errors, isSubmitted } = formState || {};
+  const isTouched = get(touchedFields, name);
+  const errorMessage = get(errors, name)?.message;
+  const rangeValue = value;
+  const fromValue = rangeValue?.[0] ?? null;
+  const toValue = rangeValue?.[1] ?? null;
+  //! Function
+  const handleFromChange = useCallback(
+    (val) => {
+      const newValue = [
+        val,
+        toValue
+      ];
+      onChange?.(newValue);
+      afterOnChange?.(newValue);
+    },
+    [onChange, afterOnChange, toValue]
+  );
+  const handleToChange = useCallback(
+    (val) => {
+      const newValue = [
+        fromValue,
+        val
+      ];
+      onChange?.(newValue);
+      afterOnChange?.(newValue);
+    },
+    [onChange, afterOnChange, fromValue]
+  );
+  const handleBlur = useCallback(() => {
+    onBlur?.();
+  }, [onBlur]);
+  //! Render
+  const renderLabel = () => {
+    if (!label) return null;
+    return /* @__PURE__ */ jsx(
+      Label,
+      {
+        label,
+        required,
+        classNameLabel
+      }
+    );
+  };
+  const renderInput = () => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: twMerge(
+          "relative flex items-center border border-gray-300 rounded-lg bg-white hover:border-blue-400 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-colors",
+          (isTouched || isSubmitted) && errorMessage && "border-red-500 focus-within:border-red-500 focus-within:ring-red-500",
+          classNameInputWrapper
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              name: `${name}_from`,
+              value: fromValue,
+              onChange: handleFromChange,
+              onBlur: handleBlur,
+              placeholder: placeholderFrom,
+              className: twMerge("flex-1", classNameInput),
+              style: {
+                border: "none",
+                boxShadow: "none",
+                background: "transparent"
+              },
+              formatter: thousandSeparator ? (value2) => `${value2}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : void 0,
+              parser: thousandSeparator ? (value2) => value2.replace(/\$\s?|(,*)/g, "") : void 0,
+              controls: false,
+              ...restProps
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-2 text-gray-400", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M5 12H18M13 6L18.2929 11.2929C18.6834 11.6834 18.6834 12.3166 18.2929 12.7071L13 18",
+                  stroke: "black",
+                  "stroke-width": "1.5",
+                  "stroke-linecap": "round"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              name: `${name}_to`,
+              value: toValue,
+              onChange: handleToChange,
+              onBlur: handleBlur,
+              placeholder: placeholderTo,
+              className: twMerge("flex-1 ", classNameInput),
+              style: {
+                border: "none",
+                boxShadow: "none",
+                background: "transparent"
+              },
+              formatter: thousandSeparator ? (value2) => `${value2}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : void 0,
+              parser: thousandSeparator ? (value2) => value2.replace(/\$\s?|(,*)/g, "") : void 0,
+              controls: false,
+              max: 9999999999,
+              ...restProps
+            }
+          )
+        ]
+      }
+    );
+  };
+  const renderErrorMessage = () => {
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        errorMessage,
+        isTouched,
+        isSubmitted
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("w-full", classNameContainer), children: [
+    renderLabel(),
+    renderInput(),
+    renderErrorMessage()
+  ] });
+};
+
+export { InputRangePicker };

package/es/fields/index.js

@@ -14,3 +14,4 @@ export { SliderRange } from './SliderRanger.js';
 export { TimeRangePicker } from './TimeRangePicker.js';
 export { TimePicker } from './TimePicker.js';
 export { Cascader } from './CascaderField.js';
+export { InputRangePicker } from './InputRangePicker.js';

package/es/index.js

@@ -79,5 +79,6 @@ export { SliderRange } from './fields/SliderRanger.js';
 export { TimeRangePicker } from './fields/TimeRangePicker.js';
 export { TimePicker } from './fields/TimePicker.js';
 export { Cascader } from './fields/CascaderField.js';
+export { InputRangePicker } from './fields/InputRangePicker.js';
 export { useToast } from './hooks/useToast.js';
 export { useMessage } from './hooks/useMessage.js';

package/es/ui/SelectTable.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Select, Table, Spin } from 'antd';
+import { useState, useCallback } from 'react';
+
+function SelectTable({
+  columns,
+  dataSource = [],
+  selectedKeys = [],
+  onSelectionChange,
+  onLoadMore,
+  onSearch,
+  hasMore = false,
+  loading = false,
+  rowKey = "key",
+  tableProps = {},
+  infiniteScroll = false,
+  loadMoreThreshold = 50,
+  searchPlaceholder = "Tìm kiếm...",
+  ...selectProps
+}) {
+  const [open, setOpen] = useState(false);
+  const [internalDataSource] = useState(dataSource);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [isClearing, setIsClearing] = useState(false);
+  const currentDataSource = dataSource.length > 0 ? dataSource : internalDataSource;
+  const loadMoreData = useCallback(async () => {
+    if (internalLoading || loading || !hasMore || !onLoadMore) return;
+    setInternalLoading(true);
+    try {
+      await onLoadMore();
+    } catch (error) {
+      console.error("Error loading more data:", error);
+    } finally {
+      setInternalLoading(false);
+    }
+  }, [onLoadMore, internalLoading, loading, hasMore]);
+  const handleScroll = useCallback(
+    (e) => {
+      if (!infiniteScroll) return;
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      if (scrollHeight - scrollTop <= clientHeight + loadMoreThreshold) {
+        loadMoreData();
+      }
+    },
+    [infiniteScroll, loadMoreThreshold, loadMoreData]
+  );
+  const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+    if (onSelectionChange) {
+      onSelectionChange(newSelectedRowKeys, newSelectedRows);
+    }
+  };
+  const rowSelection = {
+    selectedRowKeys: selectedKeys,
+    onChange: onSelectChange
+  };
+  const getDisplayValue = useCallback(() => {
+    return [];
+  }, []);
+  const handleSearch = (value) => {
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+  const handleClear = () => {
+    setIsClearing(true);
+    setSearchValue("");
+    if (onSearch) {
+      onSearch("");
+    }
+    setTimeout(() => {
+      setOpen(true);
+      setIsClearing(false);
+    }, 10);
+  };
+  const handleDropdownVisibleChange = (visible) => {
+    if (isClearing && !visible) {
+      return;
+    }
+    setOpen(visible);
+  };
+  const dropdownRender = () => /* @__PURE__ */ jsx("div", { className: "select-table-dropdown", children: /* @__PURE__ */ jsxs("div", { className: "overflow-x-hidden w-full", children: [
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        className: "select-table-custom",
+        rowSelection,
+        columns,
+        dataSource: currentDataSource,
+        rowKey,
+        size: tableProps.size || "small",
+        pagination: false,
+        scroll: { y: 500 },
+        style: { overflowX: "hidden" },
+        loading: false,
+        onScroll: handleScroll,
+        ...tableProps
+      }
+    ),
+    (internalLoading || loading) && /* @__PURE__ */ jsxs("div", { className: "text-center py-2 border-t border-gray-200", children: [
+      /* @__PURE__ */ jsx(Spin, { size: "small" }),
+      " Đang tải thêm..."
+    ] })
+  ] }) });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...selectProps,
+      open,
+      onDropdownVisibleChange: handleDropdownVisibleChange,
+      dropdownRender,
+      value: getDisplayValue(),
+      mode: "multiple",
+      showSearch: true,
+      onSearch: handleSearch,
+      onClear: handleClear,
+      placeholder: searchPlaceholder,
+      maxTagCount: 0,
+      showArrow: true,
+      filterOption: false,
+      searchValue
+    }
+  );
+}
+
+export { SelectTable as default };