@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/field-generator.js

@@ -0,0 +1,639 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "../ui/input.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import MultipleSelector from "./multiple-selector.js";
+import { cn } from "../../lib/utils.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu.js";
+import { Button } from "./button.js";
+import { Copy, EllipsisVertical, ExternalLink } from "lucide-react";
+import { toast } from "sonner";
+import { isHasPhoneNumberMask, maskData } from "@zenify-omni/chat-js/utils/data.js";
+import MaskDataInput from "./inputs/mask-data/mask-data-input.js";
+import MaskDataTextarea from "./inputs/mask-data/mask-data-textarea.js";
+import DateTimePicker from "./date-time-picker/index.js";
+import { cva } from "class-variance-authority";
+import { ImageUpload } from "./field-file-upload/image-upload.js";
+import { FilesUpload } from "./field-file-upload/files-upload.js";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { getFirstURL } from "@zenify-omni/chat-js/utils/string.js";
+import { ChipInput } from "./inputs/chip-input.js";
+import { CustomSelect } from "./custom-select.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const phoneNumberRegex = /[^0-9]/g;
+const CLEAR_SELECT_VALUE = "__field_generator_clear_select__";
+function FieldGenerator({
+  field = {},
+  isChange,
+  fieldKey,
+  formValuesCurrent,
+  type,
+  data,
+  value,
+  onChange,
+  disabled,
+  className,
+  classNameChecked,
+  classNameCheckedLabel,
+  classNameCheckedItem,
+  placeholder = void 0,
+  isMiniSize = false,
+  isClearable = false,
+  classNameItem,
+  isRequired = false,
+  isHiddenPhoneAction = false,
+  onBlur = () => {
+  },
+  size,
+  showOpenLinkBtn = false,
+  showOpenLinkBtnClassName,
+  maxFileSizeMB,
+  // Cho phép field type 'date' bật chọn giờ (mặc định tắt để giữ tương thích).
+  showTimeComponent,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const copyToClipBoard = async (data2) => {
+    await navigator.clipboard.writeText(data2);
+    toast.success(
+      i18n.t("common:toast.copySuccess", {
+        defaultValue: "\u0110\xE3 sao ch\xE9p th\xE0nh c\xF4ng"
+      })
+    );
+  };
+  const showWarningMessage = (message) => {
+    toast.warning(message);
+  };
+  const fieldVariants = cva("", {
+    variants: {
+      size: {
+        small: "text-xs",
+        default: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
+  switch (type) {
+    case "phone":
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          MaskDataInput,
+          {
+            disabled,
+            isChange,
+            inputType: "phone",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value.replace(phoneNumberRegex, "")),
+            onBlur,
+            ...props,
+            className: cn("pr-8", fieldVariants({ size }), className),
+            border: "none",
+            type: "text",
+            maskDelay: 3e3,
+            placeholder: placeholder ?? t("common:placeholder.enterPhone", {
+              defaultValue: "Nh\u1EADp s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+            })
+          }
+        ),
+        !isHiddenPhoneAction && formValuesCurrent?.[fieldKey] === value && value && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              variant: "ghost",
+              className: "absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground",
+              children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "h-4 w-4 min-w-[10%] cursor-pointer text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-[100px]", align: "end", children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => {
+                if (isHasPhoneNumberMask()) {
+                  showWarningMessage(
+                    "B\u1EA1n kh\xF4ng c\xF3 quy\u1EC1n th\u1EF1c hi\u1EC7n ch\u1EE9c n\u0103ng n\xE0y!"
+                  );
+                  return;
+                }
+                copyToClipBoard(value);
+              },
+              className: "flex flex-none items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx(Copy, { className: "size-[13px] cursor-pointer" }),
+                /* @__PURE__ */ jsx("span", { children: t("common:action.copy", { defaultValue: "Sao ch\xE9p" }) })
+              ]
+            }
+          ) }) })
+        ] })
+      ] });
+    case "text": {
+      const link = getFirstURL(value);
+      const isShowLink = showOpenLinkBtn && link;
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          MaskDataInput,
+          {
+            onBlur,
+            ...props,
+            isChange,
+            disabled,
+            className: cn(
+              fieldVariants({ size }),
+              className,
+              isShowLink && "pr-7"
+            ),
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: placeholder ?? t("common:placeholder.enterContent", {
+              defaultValue: "Nh\u1EADp n\u1ED9i dung"
+            })
+          }
+        ),
+        isShowLink && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => window.open(link, "_blank", "noopener,noreferrer"),
+            className: "absolute right-1 top-1 p-1 text-muted-foreground transition-colors hover:text-primary",
+            children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+          }
+        )
+      ] });
+    }
+    case "number":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...props,
+          disabled,
+          type: "number",
+          value: value ?? "",
+          className: cn(fieldVariants({ size }), className),
+          onChange: (e) => onChange(
+            isNaN(e.target.value) || e.target.value === "" ? null : Number(e.target.value)
+          ),
+          placeholder: placeholder ?? t("settings:common.numberPlaceholder", { defaultValue: "Nh\u1EADp s\u1ED1" }),
+          onBlur
+        }
+      );
+    case "select":
+    case "radio":
+      if (type === "radio" || field.displayType == "radio") {
+        return /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            disabled,
+            value,
+            onValueChange: (value2) => {
+              if (isRequired && !value2) {
+                return;
+              }
+              onChange(value2);
+            },
+            className: cn("flex flex-col", className),
+            children: data.map((e, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center space-x-2",
+                  classNameCheckedItem
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    RadioGroupItem,
+                    {
+                      value: e,
+                      id: `radio-${index}`,
+                      className: cn(
+                        "h-4 w-4",
+                        "data-[state=checked]:bg-primary",
+                        "data-[state=checked]:border-transparent",
+                        "data-[state=unchecked]:bg-card",
+                        "data-[state=checked]:text-white",
+                        classNameChecked,
+                        size == "small" && "h-3.5 w-3.5"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      htmlFor: `radio-${index}`,
+                      className: cn(
+                        "flex-1 truncate text-sm font-normal",
+                        classNameCheckedLabel,
+                        size == "small" && "text-xs"
+                      ),
+                      title: e,
+                      children: e
+                    }
+                  )
+                ]
+              },
+              index
+            ))
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        CustomSelect,
+        {
+          size,
+          isNullValue: true,
+          isSearch: props.isSelectSearch,
+          defaultValue: null,
+          SelectItemOptions: {
+            className: cn(fieldVariants({ size }))
+          },
+          placeholder: placeholder ?? t("common:placeholder.selectDefault", { defaultValue: "--Ch\u1ECDn--" }),
+          SelectTriggerOptions: {
+            className: cn(
+              !value && "text-muted-foreground",
+              fieldVariants({ size }),
+              className
+            ),
+            disabled
+          },
+          value,
+          onChange,
+          options: [
+            ...(data ?? []).map((option) => ({
+              label: maskData(option),
+              value: option
+            }))
+          ]
+        }
+      );
+    case "select-v2":
+      if (field.displayType == "radio") {
+        return /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value,
+            onValueChange: (value2) => {
+              if (isRequired && !value2) {
+                return;
+              }
+              onChange(value2);
+            },
+            disabled,
+            className: cn("flex flex-col", className),
+            children: data.map((e, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center space-x-2",
+                  classNameCheckedItem
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    RadioGroupItem,
+                    {
+                      value: e.id,
+                      id: `radio-${index}`,
+                      className: cn(
+                        "h-4 w-4",
+                        "data-[state=checked]:bg-primary",
+                        "data-[state=checked]:border-transparent",
+                        "data-[state=unchecked]:bg-card",
+                        "data-[state=checked]:text-white",
+                        classNameChecked,
+                        size == "small" && "h-3.5 w-3.5"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      htmlFor: `radio-${index}`,
+                      className: cn(
+                        "flex-1 truncate text-sm font-normal",
+                        classNameCheckedLabel,
+                        size == "small" && "text-xs"
+                      ),
+                      title: e.text,
+                      children: e.text
+                    }
+                  )
+                ]
+              },
+              index
+            ))
+          }
+        );
+      }
+      if (props.isSelectSearch) {
+        return /* @__PURE__ */ jsx(
+          CustomSelect,
+          {
+            size,
+            isSearch: true,
+            groupBy: props.groupBy,
+            SelectItemOptions: {
+              className: cn(fieldVariants({ size }))
+            },
+            placeholder: placeholder ?? t("common:placeholder.selectDefault", {
+              defaultValue: "--Ch\u1ECDn--"
+            }),
+            SelectTriggerOptions: {
+              className: cn(
+                !value && "text-muted-foreground",
+                fieldVariants({ size }),
+                className
+              ),
+              disabled
+            },
+            value,
+            onChange: (selectedValue) => onChange(
+              selectedValue === CLEAR_SELECT_VALUE ? null : selectedValue
+            ),
+            options: [
+              ...isClearable ? [
+                {
+                  label: i18n.t("common:action.deselect", {
+                    defaultValue: "B\u1ECF ch\u1ECDn"
+                  }),
+                  value: CLEAR_SELECT_VALUE
+                }
+              ] : [],
+              ...(data ?? []).map((option) => ({
+                label: option.text,
+                value: option.id,
+                disabled: option.disabled,
+                group: option.group
+              }))
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: value ?? "",
+          onValueChange: (v) => onChange(v === "" || v === CLEAR_SELECT_VALUE ? null : v),
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                disabled,
+                className: cn(
+                  !value && "text-muted-foreground",
+                  fieldVariants({ size }),
+                  className
+                ),
+                children: /* @__PURE__ */ jsx(
+                  SelectValue,
+                  {
+                    placeholder: placeholder ?? t("common:placeholder.selectDefault", {
+                      defaultValue: "--Ch\u1ECDn--"
+                    })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              isClearable && /* @__PURE__ */ jsx(
+                SelectItem,
+                {
+                  className: cn(fieldVariants({ size }), "text-muted-foreground"),
+                  value: CLEAR_SELECT_VALUE,
+                  children: t("common:action.deselect", { defaultValue: "B\u1ECF ch\u1ECDn" })
+                }
+              ),
+              data.map((e, index) => /* @__PURE__ */ jsx(
+                SelectItem,
+                {
+                  className: cn(fieldVariants({ size })),
+                  value: e.id,
+                  disabled: e.disabled,
+                  children: e.text
+                },
+                e.id ?? index
+              ))
+            ] })
+          ]
+        }
+      );
+    case "multi-select":
+    case "checkbox":
+      if (type === "checkbox" || field.displayType == "checkbox") {
+        return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: (data || []).map((option, index) => {
+          const safeValue = Array.isArray(value) ? value : [];
+          const listData = safeValue.map((e) => e.value || e);
+          const label = option.text || option;
+          const val = option.id || option;
+          const checked = listData.includes(val);
+          const toggle = () => {
+            const newValue = checked ? safeValue.filter((v) => v.value !== val && v !== val) : [...safeValue, { label: val, value: val }];
+            onChange(newValue);
+          };
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 items-center space-x-2",
+                classNameCheckedItem
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: `checkbox-${index}`,
+                    checked,
+                    onCheckedChange: toggle,
+                    disabled,
+                    className: cn(
+                      classNameChecked,
+                      size == "small" && "h-3.5 w-3.5"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: `checkbox-${index}`,
+                    className: cn(
+                      "min-w-0 flex-1 truncate text-sm font-normal",
+                      classNameCheckedLabel,
+                      size == "small" && "text-xs"
+                    ),
+                    title: label,
+                    children: label
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) });
+      }
+      return /* @__PURE__ */ jsx(
+        MultipleSelector,
+        {
+          ...props,
+          isChange,
+          disabled,
+          options: (data || []).map((option, index) => ({
+            key: `${index}`,
+            label: option.text || option,
+            value: option.id || option
+          })),
+          value: Array.isArray(value) ? value.map((e) => {
+            return e !== null && typeof e === "object" ? e : { label: e, value: e };
+          }) : [],
+          onChange,
+          placeholder: placeholder ?? t("common:placeholder.selectDefault", { defaultValue: "--Ch\u1ECDn--" }),
+          commandProps: {
+            className
+          },
+          size,
+          className: cn(fieldVariants({ size }), className)
+        }
+      );
+    case "textarea": {
+      const link = getFirstURL(value);
+      const isShowLink = showOpenLinkBtn && link;
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          MaskDataTextarea,
+          {
+            size,
+            className: cn(
+              fieldVariants({ size }),
+              className,
+              isShowLink && "pr-6"
+            ),
+            ...props,
+            isChange,
+            onBlur,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            disabled,
+            placeholder: placeholder ?? t("common:placeholder.enterContent", {
+              defaultValue: "Nh\u1EADp n\u1ED9i dung"
+            })
+          }
+        ),
+        isShowLink && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => window.open(link, "_blank", "noopener,noreferrer"),
+            className: cn(
+              "absolute right-1 top-1 p-1 text-muted-foreground transition-colors hover:text-primary",
+              showOpenLinkBtnClassName
+            ),
+            children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+          }
+        )
+      ] });
+    }
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          size,
+          date: value,
+          onChange,
+          disabled,
+          disabledInput: props.disabledDateInput,
+          classNames: props.classNames,
+          showTimeComponent: showTimeComponent ?? false,
+          disabledDate: props.disabledDate,
+          disabledAutoFill: props.disabledAutoFill,
+          popoverModal: props.popoverModal,
+          align: props.align
+        }
+      );
+    case "date-time":
+      return /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          size,
+          date: value ? new Date(value) : void 0,
+          onChange,
+          disabled,
+          disabledInput: props.disabledDateInput,
+          disabledAutoFill: props.disabledAutoFill,
+          applyMode: props.applyMode,
+          classNames: props.classNames ?? {}
+        }
+      );
+    case AttributeFieldType.Image:
+      return /* @__PURE__ */ jsx(
+        ImageUpload,
+        {
+          isChange,
+          disabled,
+          isMiniSize,
+          showImageName: !isMiniSize,
+          onImagesChange: onChange,
+          value,
+          maxSize: maxFileSizeMB
+        }
+      );
+    case AttributeFieldType.File:
+      return /* @__PURE__ */ jsx(
+        FilesUpload,
+        {
+          isChange,
+          disabled,
+          classNameItem,
+          isMiniSize,
+          showImageName: !isMiniSize,
+          onFilesChange: onChange,
+          value,
+          maxSize: maxFileSizeMB
+        }
+      );
+    case "formula":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          size,
+          ...props,
+          disabled: true,
+          type: "text",
+          value: value ?? "",
+          className,
+          onChange: (e) => onChange(e.target.value),
+          placeholder: placeholder ?? "--",
+          onBlur
+        }
+      );
+    case "chip-input":
+      return /* @__PURE__ */ jsx(
+        ChipInput,
+        {
+          ...props,
+          value,
+          onValueChange: (value2) => onChange(value2),
+          placeholder: placeholder ?? "",
+          disabled
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx("div", { children: type });
+  }
+}
+export {
+  FieldGenerator as default
+};