@enableai-base/form 1.0.0

package/dist/form.esm-bundler.mjs

@@ -0,0 +1,710 @@
+/**
+* @enableai-base/form v1.0.0
+* (c) 2024-present Enableai
+* @license Proprietary
+**/
+import React, { useMemo, useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
+import { Divider, Flex, Select, DatePicker, Input, Spin, Form, Button, Switch, Popover } from 'antd';
+import { ProFormItem, ProForm } from '@ant-design/pro-components';
+import { OptionEditor, IconFont, BlinkButton } from '@enableai-base/ui';
+import { useMount, useDebounce } from '@enableai-sdk-common/react-hooks';
+import { isEqual } from 'lodash';
+import dayjs from 'dayjs';
+import ReactMonacoEditor, { loader } from '@monaco-editor/react';
+import { formatValue, TOOL_ICON, parseDateFormat, inferShowTimeFromFormat, TZ_LABEL } from '@enableai-base/core';
+import { RightOutlined } from '@ant-design/icons';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { BaseModal } from '@enableai-sdk-ui/base-modal';
+
+const FeatureCustomOptions = ({ features, onChange, freeze }) => {
+  useMount(() => {
+    if (!features.options) onChange({ options: [] });
+  });
+  const initialValues = useMemo(() => {
+    return Array.isArray(features?.options) ? features?.options : [];
+  }, [features?.options]);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const initHeight = initialValues.length >= 4 ? 160 : initialValues.length * 40;
+    if (height !== initHeight) {
+      setHeight(initHeight);
+    }
+  }, [height, initialValues, setHeight]);
+  const debounceChange = useDebounce(onChange, 500);
+  const onValuesChange = (values) => {
+    if (values.length === initialValues.length) {
+      debounceChange({ options: values });
+    } else {
+      onChange({ options: values });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: "custom-form-divider" }), /* @__PURE__ */ React.createElement(ProFormItem, { className: "custom-form-item", key: "options", name: "options", label: "\u9009\u9879\u5185\u5BB9" }), /* @__PURE__ */ React.createElement(Flex, { className: "custom-options-container" }, /* @__PURE__ */ React.createElement(
+    OptionEditor,
+    {
+      initialValues,
+      onValuesChange,
+      virtualConfig: { height },
+      disabled: freeze
+    }
+  )));
+};
+
+const FeatureDateFormat = ({ features, onChange }) => {
+  useMount(() => {
+    if (!features.dateFormat) onChange({ dateFormat: "YYYY/MM/DD" });
+  });
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "dateFormat", name: "dateFormat", label: "\u65E5\u671F\u683C\u5F0F" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      style: { width: "100%" },
+      options: [
+        { label: "2025/01/30", value: "YYYY/MM/DD" },
+        { label: "2025/01/30 14:00 (GMT+8)", value: "YYYY/MM/DD HH:mm (GMT+8)" },
+        { label: "2025/01/30 14:00", value: "YYYY/MM/DD HH:mm" },
+        { label: "2025-01-30", value: "YYYY-MM-DD" },
+        { label: "2025-01-30 14:00", value: "YYYY-MM-DD HH:mm" },
+        { label: "2025-01-30 14:00 (GMT+8)", value: "YYYY-MM-DD HH:mm (GMT+8)" },
+        { label: "01-30", value: "MM-DD" },
+        { label: "30/01/2025", value: "DD/MM/YYYY" },
+        { label: "01/30/2025", value: "MM/DD/YYYY" }
+      ]
+    }
+  ));
+};
+
+const CustomDatePickerV2 = ({ formatType, onChangeDate }) => {
+  const hasGMTLabel = formatType?.includes("GMT+");
+  const GMTLabel = "GMT+8";
+  const pureFormat = formatType?.replace(` (GMT+8)`, "") ?? "YYYY-MM-DD";
+  const customFormat = (value) => {
+    return `${value.format(pureFormat)}${hasGMTLabel ? ` (${GMTLabel})` : ""} `;
+  };
+  return /* @__PURE__ */ React.createElement(
+    DatePicker,
+    {
+      style: { width: "100%" },
+      className: "column-setting-date-picker",
+      showTime: pureFormat.includes("HH:mm") ? { format: pureFormat } : false,
+      format: customFormat,
+      key: "datePicker",
+      placement: "bottomLeft",
+      onChange: (date) => {
+        if (date) {
+          onChangeDate(date);
+        }
+      },
+      onOk: (date) => {
+        if (date) {
+          onChangeDate(date);
+        }
+      }
+    }
+  );
+};
+
+const CREATE_DATE$1 = "record_create_date";
+const FeatureDefaultDateV2 = ({ features, onChange }) => {
+  const formatType = features?.dateFormat || "YYYY/MM/DD";
+  const initialValue = features?.defaultValue;
+  const isCreateDate = initialValue === CREATE_DATE$1;
+  const [date, setDate] = useState(null);
+  const debouncedOnChange = useDebounce(onChange);
+  const onChangeDate = useCallback(
+    (selected) => {
+      const time = selected.format(formatType);
+      setDate(selected);
+      debouncedOnChange({ defaultValue: time });
+    },
+    [formatType, debouncedOnChange]
+  );
+  useEffect(() => {
+    if (isCreateDate) return;
+    let dateValue = "";
+    if (!date) {
+      const date2 = dayjs(initialValue + "");
+      dateValue = date2.format(formatType);
+    } else {
+      dateValue = date.format(formatType);
+    }
+    if (dateValue === "Invalid Date") {
+      onChange({ defaultValue: void 0 });
+    } else if (dateValue !== initialValue) {
+      onChange({ defaultValue: dateValue });
+    }
+  }, [formatType]);
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: "" });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }, /* @__PURE__ */ React.createElement(CustomDatePickerV2, { onChangeDate, formatType }));
+};
+
+const FeatureDefaultInput = ({ onChange }) => {
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: void 0 });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }, /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));
+};
+
+loader.config({
+  paths: {
+    // vs: '/monaco-assets/vs',
+  }
+  // 'vs/nls': { availableLanguages: { '*': 'zh-cn' } },
+});
+const FeatureDefaultJson = ({ features, onChange }) => {
+  const initialValue = features?.defaultValue;
+  const monacoEditorRef = useRef(null);
+  const monacoRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: void 0 });
+    };
+  }, []);
+  const format = () => {
+    monacoEditorRef.current?.getAction("editor.action.formatDocument")?.run();
+  };
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: "100%", height: "302px", border: "1px solid #6c6c6c" } }, /* @__PURE__ */ React.createElement(
+    ReactMonacoEditor,
+    {
+      height: "300px",
+      defaultLanguage: "json",
+      value: initialValue,
+      loading: /* @__PURE__ */ React.createElement(Spin, null),
+      theme: "light",
+      onChange: (value) => {
+        onChange({ defaultValue: value });
+      },
+      beforeMount: (monaco) => {
+        monacoRef.current = monaco;
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          schemas: [
+            {
+              uri: "test-schema",
+              fileMatch: ["*"],
+              schema: {
+                $schema: "http://json-schema.org/draft-07/schema#",
+                type: "object"
+              }
+            }
+          ]
+        });
+        format();
+      },
+      onMount: (monacoEditor) => {
+        monacoEditorRef.current = monacoEditor;
+        format();
+      },
+      options: {
+        lineNumbers: "off",
+        minimap: { enabled: false }
+      }
+    }
+  )));
+};
+
+const sanitizeInput = (value) => {
+  let sanitized = value.replace(/[^\d.-]/g, "");
+  const parts = sanitized.split(".");
+  if (parts.length > 2) sanitized = parts[0] + "." + parts.slice(1).join("");
+  if (sanitized.includes("-") && sanitized.indexOf("-") > 0) sanitized = sanitized.replace(/-/g, "");
+  return sanitized;
+};
+const FeatureDefaultNumber = ({ features, onChange }) => {
+  const formatType = features?.numberFormat || "integer";
+  const initialValue = features?.defaultValue;
+  const [rawValue, setRawValue] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const debounceOnChange = useDebounce(onChange, 300);
+  const onChangeInput = (e) => {
+    const input = sanitizeInput(e.target.value);
+    setRawValue(input);
+    debounceOnChange({ defaultValue: input });
+    if (isFocused) setDisplayValue(input);
+  };
+  const onFocus = () => {
+    setIsFocused(true);
+    setDisplayValue(rawValue);
+  };
+  const onBlur = () => {
+    setIsFocused(false);
+    setDisplayValue(formatValue(rawValue, formatType));
+  };
+  useEffect(() => {
+    if (typeof initialValue !== "string") return;
+    const input = sanitizeInput(initialValue);
+    setRawValue(input);
+    if (!isFocused) setDisplayValue(formatValue(input, formatType));
+  }, [formatType]);
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: void 0 });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }, /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u6570\u5B57", value: displayValue, onChange: onChangeInput, onFocus, onBlur }));
+};
+
+const FeatureDefaultSelect = ({ tableConfig, features, onChange }) => {
+  const mode = useMemo(() => {
+    const custom = tableConfig?.customOptions;
+    return typeof custom === "object" && custom.multiSelect ? "multiple" : "single";
+  }, [tableConfig]);
+  const options = useMemo(
+    () => Array.isArray(features?.options) ? features.options.map((opt) => ({ ...opt, label: opt.label || " " })) : [],
+    [features?.options]
+  );
+  useEffect(() => {
+    const defaultValue = features?.defaultValue;
+    if (!defaultValue) return;
+    const optionIdSet = new Set(options.map((opt) => opt.value));
+    const resetDefault = (value) => {
+      onChange({ defaultValue: value });
+    };
+    if (!Array.isArray(defaultValue) || !defaultValue.every((v) => typeof v === "string")) {
+      return resetDefault(void 0);
+    }
+    let filtered = defaultValue.filter((id) => optionIdSet.has(id));
+    if (mode === "single") filtered = filtered.slice(filtered.length - 1);
+    if (filtered.length !== defaultValue.length) {
+      resetDefault(filtered);
+    }
+  }, [mode, features?.defaultValue, options, onChange]);
+  const handleChange = (value) => {
+    if (mode === "single") {
+      onChange({ defaultValue: value.slice(value.length - 1) });
+    } else {
+      onChange({ defaultValue: value });
+    }
+  };
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: void 0 });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ProFormItem, { className: "custom-form-item", key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      className: "custom-form-container",
+      mode: "multiple",
+      value: features?.defaultValue,
+      fieldNames: { label: "label", value: "value" },
+      style: { width: "100%" },
+      placeholder: "\u8BF7\u9009\u62E9\u9009\u9879",
+      onChange: handleChange,
+      options
+    }
+  ));
+};
+
+const FeatureDefaultField = ({ tableConfig, features, onChange }) => {
+  const Component = useMemo(() => {
+    let DefaultComponent;
+    if (tableConfig.customOptions) {
+      DefaultComponent = FeatureDefaultSelect;
+    } else if (tableConfig.date) {
+      DefaultComponent = FeatureDefaultDateV2;
+    } else if (tableConfig.numberSelect) {
+      DefaultComponent = FeatureDefaultNumber;
+    } else if (tableConfig.json) {
+      DefaultComponent = FeatureDefaultJson;
+    } else {
+      DefaultComponent = FeatureDefaultInput;
+    }
+    return DefaultComponent;
+  }, [tableConfig]);
+  return /* @__PURE__ */ React.createElement(Component, { features, onChange, tableConfig });
+};
+
+const FeatureNumberFormat = ({ features, onChange }) => {
+  useMount(() => {
+    if (!features.numberFormat) onChange({ numberFormat: "integer" });
+  });
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "numberFormat", name: "numberFormat", label: "\u6570\u5B57\u683C\u5F0F" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      style: { width: "100%" },
+      options: [
+        {
+          label: "\u6574\u6570",
+          value: "integer"
+        },
+        {
+          label: "\u5343\u5206\u4F4D",
+          value: "thousands_separator"
+        },
+        {
+          label: "\u5343\u5206\u4F4D(\u5C0F\u6570\u70B9)",
+          value: "thousands_separator_decimal"
+        },
+        {
+          label: "\u4FDD\u75591\u4F4D\u5C0F\u6570",
+          value: "one_decimal_decimal"
+        },
+        {
+          label: "\u4FDD\u75592\u4F4D\u5C0F\u6570",
+          value: "two_decimal_decimal"
+        },
+        {
+          label: "\u4FDD\u75593\u4F4D\u5C0F\u6570",
+          value: "three_decimal_decimal"
+        },
+        {
+          label: "\u4FDD\u75594\u4F4D\u5C0F\u6570",
+          value: "four_decimal_decimal"
+        },
+        {
+          label: "\u4FDD\u75595\u4F4D\u5C0F\u6570",
+          value: "five_decimal_decimal"
+        },
+        {
+          label: "\u4FDD\u75596\u4F4D\u5C0F\u6570",
+          value: "six_decimal_decimal"
+        },
+        {
+          label: "\u767E\u5206\u6BD4",
+          value: "percentage"
+        },
+        {
+          label: "\u767E\u5206\u6BD4(\u5C0F\u6570\u70B9)",
+          value: "percentage_decimal"
+        }
+      ]
+    }
+  ));
+};
+
+const FeatureTypeSelect = ({ feature, tools, selectProps }) => {
+  const options = useMemo(() => {
+    if (!tools) return [];
+    return tools.map((item) => ({
+      ...item,
+      label: /* @__PURE__ */ React.createElement(Flex, { gap: 4, align: "center" }, /* @__PURE__ */ React.createElement(IconFont, { name: TOOL_ICON[item.value], size: 16, color: "#000" }), item.label)
+    }));
+  }, [tools]);
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: feature.name, name: feature.name, label: feature.label }, /* @__PURE__ */ React.createElement(Select, { style: { width: "100%" }, options, ...selectProps }));
+};
+
+const FeatureField = ({ features, tools, onChange, selectProps, freeze }) => {
+  const tableConfig = useMemo(() => {
+    if (!tools) return void 0;
+    return tools.find((item) => item.value === Number(features["type"]))?.table;
+  }, [features, tools]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    FeatureTypeSelect,
+    {
+      feature: { name: "type", label: "\u5B57\u6BB5\u7C7B\u578B", value: 29 },
+      tools,
+      selectProps
+    }
+  ), tableConfig?.customOptions && /* @__PURE__ */ React.createElement(FeatureCustomOptions, { features, onChange, freeze }), tableConfig?.date && /* @__PURE__ */ React.createElement(FeatureDateFormat, { features, onChange }), tableConfig?.numberSelect && /* @__PURE__ */ React.createElement(FeatureNumberFormat, { features, onChange }), tableConfig?.defaultValue && /* @__PURE__ */ React.createElement(FeatureDefaultField, { tableConfig, features, onChange }));
+};
+
+const FeatureInput = ({ feature, freeze }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ProFormItem, { key: feature.name, name: feature.name, label: feature.label }, /* @__PURE__ */ React.createElement(Input, { disabled: freeze })));
+};
+
+const ColumnFieldFrom = ({
+  formRef,
+  selectProps,
+  columnId,
+  tools,
+  initValues,
+  onFinish,
+  onCancel,
+  freeze,
+  bodyRef
+}) => {
+  const [form] = Form.useForm();
+  const [fields, setFields] = useState(initValues);
+  const blinkRef = useRef(null);
+  const isModifiedRef = useRef(false);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    form.setFieldsValue(initValues);
+    setFields(initValues);
+  }, [form, initValues]);
+  const onChange = (changed) => {
+    form.setFieldsValue(changed);
+    const oldValues = initValues;
+    const newValues = form.getFieldsValue();
+    setFields(newValues);
+    const isModified = !isEqual(newValues, oldValues);
+    isModifiedRef.current = isModified;
+  };
+  const onValuesChange = useDebounce(onChange, 200);
+  const checkChange = () => {
+    if (isModifiedRef.current) blinkRef.current?.blink();
+    return isModifiedRef.current;
+  };
+  useImperativeHandle(formRef, () => {
+    return {
+      checkChange
+    };
+  });
+  return /* @__PURE__ */ React.createElement(
+    ProForm,
+    {
+      id: columnId,
+      form,
+      className: "column-setting-form",
+      formKey: "column-setting-form",
+      style: { width: "100%" },
+      initialValues: initValues,
+      onValuesChange,
+      onFinish: async (values) => {
+        setLoading(true);
+        try {
+          return await onFinish(values);
+        } finally {
+          setLoading(false);
+        }
+      },
+      submitter: {
+        render: false
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: bodyRef }, /* @__PURE__ */ React.createElement(
+      FeatureInput,
+      {
+        feature: {
+          name: "title",
+          value: " ",
+          label: "\u6807\u9898"
+        },
+        freeze
+      }
+    ), /* @__PURE__ */ React.createElement(FeatureField, { features: fields, tools, onChange, selectProps, freeze })),
+    /* @__PURE__ */ React.createElement(ProForm.Item, { className: "form-button-container footer" }, /* @__PURE__ */ React.createElement(Flex, { gap: 8, align: "center", justify: "end" }, /* @__PURE__ */ React.createElement(Button, { type: "default", disabled: loading, onClick: onCancel }, /* @__PURE__ */ React.createElement("span", null, "\u53D6\u6D88")), /* @__PURE__ */ React.createElement(BlinkButton, { type: "primary", htmlType: "submit", ref: blinkRef, loading }, /* @__PURE__ */ React.createElement("span", null, "\u786E\u8BA4"))))
+  );
+};
+
+const FeatureFileFormat = ({ features, onChange, freeze, type }) => {
+  useMount(() => {
+    if (!features.fileFormat) onChange({ fileFormat: "image" });
+  });
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "fileFormat", name: "fileFormat", label: "\u9644\u4EF6\u683C\u5F0F" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      style: { width: "100%" },
+      disabled: freeze || type === "update",
+      options: [
+        {
+          label: "\u56FE\u7247",
+          value: "image"
+        },
+        {
+          label: "\u6587\u6863",
+          value: "document"
+        },
+        {
+          label: "\u89C6\u9891",
+          value: "video"
+        }
+      ]
+    }
+  ));
+};
+
+const FeaturePeople = ({ features, onChange }) => {
+  useMount(() => {
+    if (!features.allowMultiPeople) onChange({ allowMultiPeople: false });
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ProFormItem, { key: "allowMultiPeople", name: "allowMultiPeople", label: "\u5141\u8BB8\u6DFB\u52A0\u591A\u4E2A\u6210\u5458" }, /* @__PURE__ */ React.createElement(Switch, null)));
+};
+
+const CustomDatePicker = ({ formatType = "YYYY-MM-DD", onChangeDate }) => {
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const { baseFormat, showGmt8 } = parseDateFormat(formatType);
+  const showTimeConfig = inferShowTimeFromFormat(baseFormat);
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: "hover",
+      open: showDatePicker,
+      className: "date-panel-popover",
+      rootClassName: "date-panel-popover-root",
+      onOpenChange: setShowDatePicker,
+      placement: "right",
+      mouseEnterDelay: 0,
+      mouseLeaveDelay: 0.15,
+      content: /* @__PURE__ */ React.createElement(
+        DatePicker,
+        {
+          style: { width: formatType?.includes("HH:mm") ? "401px" : "288px" },
+          className: "column-setting-date-picker",
+          format: (date) => {
+            if (!date) return "";
+            const text = date.format(baseFormat);
+            return showGmt8 ? `${text} (${TZ_LABEL})` : text;
+          },
+          showTime: showTimeConfig,
+          key: "datePicker",
+          autoFocus: true,
+          open: true,
+          placement: "topRight",
+          getPopupContainer: (trigger) => trigger,
+          onChange: (date) => {
+            if (date) {
+              onChangeDate(date.format(baseFormat));
+            }
+            setShowDatePicker(false);
+          },
+          onOk: (date) => {
+            if (date) {
+              onChangeDate(date.format(baseFormat));
+            }
+            setShowDatePicker(false);
+          }
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        style: { width: "100%", height: 22 },
+        onClick: (e) => {
+          e.stopPropagation();
+        }
+      },
+      /* @__PURE__ */ React.createElement(Flex, { style: { width: "100%", height: "100%" }, justify: "space-between" }, /* @__PURE__ */ React.createElement("div", null, "\u8BF7\u9009\u62E9\u5177\u4F53\u65E5\u671F"), /* @__PURE__ */ React.createElement(RightOutlined, null))
+    )
+  );
+};
+
+const CREATE_DATE = "record_create_date";
+const FeatureDefaultDate = ({ features, onChange }) => {
+  const formatType = features?.dateFormat || "YYYY/MM/DD";
+  const initialValue = features?.defaultValue;
+  const isCreateDate = initialValue === CREATE_DATE;
+  const [date, setDate] = useState(null);
+  const [value, setValue] = useState(void 0);
+  const [open, setOpen] = useState(false);
+  const { showGmt8, baseFormat } = parseDateFormat(formatType);
+  const debouncedOnChange = useDebounce(onChange);
+  const onChangeDate = useCallback(
+    (selected) => {
+      setDate(dayjs(selected));
+      setValue(selected);
+      setOpen(false);
+      debouncedOnChange({ defaultValue: selected });
+    },
+    [debouncedOnChange]
+  );
+  useEffect(() => {
+    if (isCreateDate) return;
+    let dateValue = "";
+    if (!date) {
+      const date2 = dayjs(initialValue + "");
+      dateValue = date2.format(baseFormat);
+    } else {
+      dateValue = date.format(baseFormat);
+    }
+    if (dateValue === "Invalid Date") {
+      onChange({ defaultValue: void 0 });
+    } else if (dateValue !== initialValue) {
+      onChange({ defaultValue: dateValue });
+      setValue(dateValue);
+    }
+  }, [baseFormat]);
+  const handleSelectChange = (value2) => {
+    if (value2 === CREATE_DATE) {
+      setValue(value2);
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      onChange({ defaultValue: "" });
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(ProFormItem, { key: "defaultValue", name: "defaultValue", label: "\u9ED8\u8BA4\u503C" }, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      style: { width: "100%" },
+      placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+      open,
+      value: showGmt8 && value ? value + ` (${TZ_LABEL})` : value,
+      onOpenChange: setOpen,
+      onChange: handleSelectChange,
+      options: [
+        { label: "\u6DFB\u52A0\u65B0\u8BB0\u5F55\u7684\u521B\u5EFA\u65F6\u95F4", value: CREATE_DATE },
+        { label: /* @__PURE__ */ React.createElement(CustomDatePicker, { onChangeDate, formatType }), value: "date_specific" }
+      ]
+    }
+  ));
+};
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const getCurrentGMTLabel = () => {
+  const offsetMinutes = dayjs().utcOffset();
+  const offsetHours = offsetMinutes / 60;
+  return `GMT${offsetHours >= 0 ? "+" : ""}${offsetHours}`;
+};
+
+const ColumnSettingModal = forwardRef(
+  ({
+    selectProps,
+    columnId,
+    offsetParent,
+    width = 320,
+    isOpen = false,
+    position,
+    tools,
+    initValues,
+    className,
+    onClose,
+    onFinish,
+    onPositionChange,
+    contentRef,
+    bodyRef,
+    freeze
+  }, ref) => {
+    const formRef = useRef(null);
+    const onCancel = () => {
+      if (onClose) onClose();
+    };
+    useImperativeHandle(ref, () => {
+      return {
+        formRef: formRef.current
+      };
+    });
+    return /* @__PURE__ */ React.createElement(
+      BaseModal,
+      {
+        offsetParent,
+        width,
+        open: isOpen,
+        onClose,
+        value: position,
+        onChange: onPositionChange,
+        className: `column-setting-modal ${className}`
+      },
+      /* @__PURE__ */ React.createElement(Flex, { className: "field-form-container", onClick: (e) => e.stopPropagation(), ref: contentRef }, isOpen && /* @__PURE__ */ React.createElement(
+        ColumnFieldFrom,
+        {
+          bodyRef,
+          formRef,
+          columnId,
+          tools,
+          initValues,
+          onFinish: (values) => onFinish(values).then((success) => {
+            if (success && onClose) onClose();
+            return success;
+          }),
+          onCancel,
+          selectProps,
+          freeze
+        }
+      ))
+    );
+  }
+);
+
+export { ColumnFieldFrom, ColumnSettingModal, CustomDatePicker, CustomDatePickerV2, FeatureCustomOptions, FeatureDateFormat, FeatureDefaultDate, FeatureDefaultDateV2, FeatureDefaultField, FeatureDefaultInput, FeatureDefaultJson, FeatureDefaultNumber, FeatureDefaultSelect, FeatureField, FeatureFileFormat, FeatureInput, FeatureNumberFormat, FeaturePeople, FeatureTypeSelect, getCurrentGMTLabel };