@lobehub/ui/es/Form/components/FormSubmitFooter.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"FormSubmitFooter.mjs","names":["formMessages","Button","Flexbox"],"sources":["../../../src/Form/components/FormSubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { Form } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { InfoIcon } from 'lucide-react';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { submitFooterStyles } from '../style';\nimport { type FormSubmitFooterProps } from '../type';\nimport { useFormContext } from './FormProvider';\nimport { merge, removeUndefined } from './merge';\n\nconst FormSubmitFooter = memo<FormSubmitFooterProps>(\n  ({\n    enableReset = true,\n    buttonProps,\n    float,\n    onReset,\n    saveButtonProps,\n    resetButtonProps,\n    enableUnsavedWarning,\n    children,\n    texts,\n    className,\n    ...rest\n  }) => {\n    const Motion = useMotionComponent();\n    const { form, initialValues, submitLoading } = useFormContext();\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const values = Form.useWatch([], form) || {};\n    const { t } = useTranslation(formMessages);\n\n    const styles = submitFooterStyles;\n\n    const v = useMemo(() => removeUndefined(values), [values]);\n\n    const initialV = useMemo(() => removeUndefined(initialValues), [initialValues]);\n\n    const mergedV = useMemo(() => merge(initialV, v), [v, initialV]);\n\n    useEffect(() => {\n      setHasUnsavedChanges(!isEqual(mergedV, initialV));\n    }, [mergedV, initialV, submitLoading]);\n\n    const unsavedWarningText = texts?.unSavedWarning ?? t('form.unsavedWarning');\n    const unsavedText = texts?.unSaved ?? t('form.unsavedChanges');\n    const resetText = texts?.reset ?? t('form.reset');\n    const submitText = texts?.submit ?? t('form.submit');\n\n    const fn = (e: BeforeUnloadEvent) => {\n      if (hasUnsavedChanges) {\n        e.returnValue = unsavedWarningText;\n      } else {\n        delete e.returnValue;\n      }\n    };\n\n    useEffect(() => {\n      if (!enableUnsavedWarning) return;\n      if (typeof window === 'undefined' || !hasUnsavedChanges) return;\n      // 添加离开页面的提示\n      window.addEventListener('beforeunload', fn);\n      return () => window.removeEventListener('beforeunload', fn);\n    }, [enableUnsavedWarning, hasUnsavedChanges, unsavedWarningText]);\n\n    const content = (\n      <>\n        {(float || hasUnsavedChanges) && (\n          <>\n            <Icon\n              color={cssVar.colorTextDescription}\n              icon={InfoIcon}\n              size={12}\n              style={{ marginLeft: 8 }}\n            />\n            <span\n              style={{\n                color: cssVar.colorTextDescription,\n                flex: 'none',\n                fontSize: 12,\n                marginRight: float ? 16 : 4,\n              }}\n            >\n              {unsavedText}\n            </span>\n          </>\n        )}\n        {children}\n        {enableReset && (float || hasUnsavedChanges) && (\n          <Button\n            htmlType=\"button\"\n            shape={float ? 'round' : undefined}\n            variant={'filled'}\n            onClick={() => {\n              onReset?.(v, initialV);\n              form?.resetFields();\n            }}\n            {...buttonProps}\n            {...resetButtonProps}\n          >\n            {resetText}\n          </Button>\n        )}\n        <Button\n          htmlType=\"submit\"\n          loading={submitLoading}\n          shape={float ? 'round' : undefined}\n          type=\"primary\"\n          {...buttonProps}\n          {...saveButtonProps}\n        >\n          {submitText}\n        </Button>\n      </>\n    );\n\n    if (!float)\n      return (\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.footer, className)}\n          gap={8}\n          justify={'flex-end'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      );\n\n    return (\n      <Motion.div\n        animate={hasUnsavedChanges ? 'visible' : 'hidden'}\n        className={styles.floatFooter}\n        initial={'hidden'}\n        transition={{ duration: 0.1, ease: 'easeOut' }}\n        variants={{\n          hidden: {\n            opacity: 0,\n            x: '-50%',\n            y: 20,\n          },\n          visible: {\n            opacity: 1,\n            x: '-50%',\n            y: 0,\n          },\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={className}\n          gap={8}\n          justify={'center'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      </Motion.div>\n    );\n  },\n);\n\nFormSubmitFooter.displayName = 'FormSubmitFooter';\n\nexport default FormSubmitFooter;\n"],"mappings":"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"}