@lobehub/ui/es/base-ui/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","Flexbox","styles"],"sources":["../../../../src/base-ui/Form/components/FormSubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { InfoIcon } from 'lucide-react';\nimport { memo, useEffect } from 'react';\n\nimport Button from '@/base-ui/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 { useFormContext } from '../context';\nimport { submitFooterStyles as styles } from '../style';\nimport type { FormSubmitFooterProps } from '../type';\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 { hasUnsavedChanges, requestReset, submitLoading } = useFormContext();\n    const { t } = useTranslation(formMessages);\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    useEffect(() => {\n      if (!enableUnsavedWarning || typeof window === 'undefined' || !hasUnsavedChanges) return;\n      const fn = (e: BeforeUnloadEvent) => {\n        e.preventDefault();\n        e.returnValue = unsavedWarningText;\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            type={'fill'}\n            onClick={() => {\n              requestReset();\n              onReset?.();\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":";;;;;;;;;;;;;;AAiBA,MAAM,mBAAmB,MACtB,EACC,cAAc,MACd,aACA,OACA,SACA,iBACA,kBACA,sBACA,UACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,oBAAoB;CACnC,MAAM,EAAE,mBAAmB,cAAc,kBAAkB,gBAAgB;CAC3E,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,MAAM,qBAAqB,OAAO,kBAAkB,EAAE,sBAAsB;CAC5E,MAAM,cAAc,OAAO,WAAW,EAAE,sBAAsB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,aAAa;CACjD,MAAM,aAAa,OAAO,UAAU,EAAE,cAAc;AAEpD,iBAAgB;AACd,MAAI,CAAC,wBAAwB,OAAO,WAAW,eAAe,CAAC,kBAAmB;EAClF,MAAM,MAAM,MAAyB;AACnC,KAAE,gBAAgB;AAClB,KAAE,cAAc;;AAElB,SAAO,iBAAiB,gBAAgB,GAAG;AAC3C,eAAa,OAAO,oBAAoB,gBAAgB,GAAG;IAC1D;EAAC;EAAsB;EAAmB;EAAmB,CAAC;CAEjE,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;GACI,SAAS,sBACT,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,OAAO,OAAO;GACd,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY,GAAG;GACxB,CAAA,EACF,oBAAC,QAAD;GACE,OAAO;IACL,OAAO,OAAO;IACd,MAAM;IACN,UAAU;IACV,aAAa,QAAQ,KAAK;IAC3B;aAEA;GACI,CAAA,CACN,EAAA,CAAA;EAEJ;EACA,gBAAgB,SAAS,sBACxB,oBAAC,QAAD;GACE,UAAU;GACV,OAAO,QAAQ,UAAU,KAAA;GACzB,MAAM;GACN,eAAe;AACb,kBAAc;AACd,eAAW;;GAEb,GAAI;GACJ,GAAI;aAEH;GACM,CAAA;EAEX,oBAAC,QAAD;GACE,UAAU;GACV,SAAS;GACT,OAAO,QAAQ,UAAU,KAAA;GACzB,MAAM;GACN,GAAI;GACJ,GAAI;aAEH;GACM,CAAA;EACR,EAAA,CAAA;AAGL,KAAI,CAAC,MACH,QACE,oBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAGC,mBAAO,QAAQ,UAAU;EACvC,KAAK;EACL,SAAS;EACT,GAAI;YAEH;EACO,CAAA;AAGd,QACE,oBAAC,OAAO,KAAR;EACE,SAAS,oBAAoB,YAAY;EACzC,WAAWA,mBAAO;EAClB,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;EAC9C,UAAU;GACR,QAAQ;IACN,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACD,SAAS;IACP,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACF;YAED,oBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACI;GACX,KAAK;GACL,SAAS;GACT,GAAI;aAEH;GACO,CAAA;EACC,CAAA;EAGlB;AAED,iBAAiB,cAAc"}