@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
118 lines (117 loc) • 3.61 kB
JavaScript
"use client";
import { useMotionComponent } from "../../../MotionProvider/index.mjs";
import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
import Icon from "../../../Icon/Icon.mjs";
import { useTranslation } from "../../../i18n/useTranslation.mjs";
import form_default from "../../../i18n/resources/en/form.mjs";
import Button from "../../Button/Button.mjs";
import { submitFooterStyles } from "../style.mjs";
import { useFormContext } from "../context.mjs";
import { memo, useEffect } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { cssVar, cx } from "antd-style";
import { InfoIcon } from "lucide-react";
//#region src/base-ui/Form/components/FormSubmitFooter.tsx
const FormSubmitFooter = memo(({ enableReset = true, buttonProps, float, onReset, saveButtonProps, resetButtonProps, enableUnsavedWarning, children, texts, className, ...rest }) => {
const Motion = useMotionComponent();
const { hasUnsavedChanges, requestReset, submitLoading } = useFormContext();
const { t } = useTranslation(form_default);
const unsavedWarningText = texts?.unSavedWarning ?? t("form.unsavedWarning");
const unsavedText = texts?.unSaved ?? t("form.unsavedChanges");
const resetText = texts?.reset ?? t("form.reset");
const submitText = texts?.submit ?? t("form.submit");
useEffect(() => {
if (!enableUnsavedWarning || typeof window === "undefined" || !hasUnsavedChanges) return;
const fn = (e) => {
e.preventDefault();
e.returnValue = unsavedWarningText;
};
window.addEventListener("beforeunload", fn);
return () => window.removeEventListener("beforeunload", fn);
}, [
enableUnsavedWarning,
hasUnsavedChanges,
unsavedWarningText
]);
const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
(float || hasUnsavedChanges) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
color: cssVar.colorTextDescription,
icon: InfoIcon,
size: 12,
style: { marginLeft: 8 }
}), /* @__PURE__ */ jsx("span", {
style: {
color: cssVar.colorTextDescription,
flex: "none",
fontSize: 12,
marginRight: float ? 16 : 4
},
children: unsavedText
})] }),
children,
enableReset && (float || hasUnsavedChanges) && /* @__PURE__ */ jsx(Button, {
htmlType: "button",
shape: float ? "round" : void 0,
type: "fill",
onClick: () => {
requestReset();
onReset?.();
},
...buttonProps,
...resetButtonProps,
children: resetText
}),
/* @__PURE__ */ jsx(Button, {
htmlType: "submit",
loading: submitLoading,
shape: float ? "round" : void 0,
type: "primary",
...buttonProps,
...saveButtonProps,
children: submitText
})
] });
if (!float) return /* @__PURE__ */ jsx(FlexBasic_default, {
horizontal: true,
align: "center",
className: cx(submitFooterStyles.footer, className),
gap: 8,
justify: "flex-end",
...rest,
children: content
});
return /* @__PURE__ */ jsx(Motion.div, {
animate: hasUnsavedChanges ? "visible" : "hidden",
className: submitFooterStyles.floatFooter,
initial: "hidden",
transition: {
duration: .1,
ease: "easeOut"
},
variants: {
hidden: {
opacity: 0,
x: "-50%",
y: 20
},
visible: {
opacity: 1,
x: "-50%",
y: 0
}
},
children: /* @__PURE__ */ jsx(FlexBasic_default, {
horizontal: true,
align: "center",
className,
gap: 8,
justify: "center",
...rest,
children: content
})
});
});
FormSubmitFooter.displayName = "FormSubmitFooter";
//#endregion
export { FormSubmitFooter as default };
//# sourceMappingURL=FormSubmitFooter.mjs.map