Feat: Unsaved changes tip (#359)
* fix: thumbnail image in kanban card (#338) * fix: thumbnail image in kanban card * Update attachment.ts * Update Kanban.Card.Designer.tsx Co-authored-by: chenos <chenlinxh@gmail.com> * feat: data unsaved will be prompt when close drawer * feat: data unsaved will be prompt when close drawer * fix: fix modal dialog save tip and change locale * feat: data unsaved will be prompt when close drawer * fix: fix modal dialog save tip and change locale * fix: fix modal dialog save tip and change locale * Update hooks.ts Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
parent
0b7f96dab3
commit
bf987e9f59
@ -286,6 +286,6 @@ export default {
|
|||||||
'Execution History': 'History',
|
'Execution History': 'History',
|
||||||
'Parallel branch': 'Branch',
|
'Parallel branch': 'Branch',
|
||||||
|
|
||||||
'Confirm': 'Confirm',
|
'Unsaved changes': 'Unsaved changes',
|
||||||
'Form value changed tip': 'Are you sure to exit that Data unsaved',
|
'Are you sure you don\'t want to save?': 'Are you sure you don\'t want to save?',
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
|
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
|
||||||
import { Drawer, Modal as AntdModal } from 'antd';
|
import { Drawer } from 'antd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
@ -11,7 +11,7 @@ import { ComposedActionDrawer } from './types';
|
|||||||
export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
||||||
const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
|
const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { visible, setVisible, formValueChanged, setFormValueChanged } = useActionContext();
|
const { visible, setVisible } = useActionContext();
|
||||||
const schema = useFieldSchema();
|
const schema = useFieldSchema();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const footerSchema = schema.reduceProperties((buf, s) => {
|
const footerSchema = schema.reduceProperties((buf, s) => {
|
||||||
@ -22,18 +22,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const closeHandler = () => {
|
const closeHandler = () => {
|
||||||
if (!formValueChanged) {
|
setVisible(false);
|
||||||
setVisible(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
AntdModal.confirm({
|
|
||||||
title: t('Unsaved changes'),
|
|
||||||
content: t("Are you sure you don't want to save?"),
|
|
||||||
async onOk() {
|
|
||||||
setFormValueChanged(false);
|
|
||||||
setVisible(false);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { useForm } from '@formily/react';
|
import { useForm } from '@formily/react';
|
||||||
|
import { Modal as AntdModal } from 'antd';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { ActionContext } from './context';
|
import { ActionContext } from './context';
|
||||||
|
|
||||||
export const useA = () => {
|
export const useA = () => {
|
||||||
@ -10,12 +12,28 @@ export const useA = () => {
|
|||||||
|
|
||||||
export const useActionContext = () => {
|
export const useActionContext = () => {
|
||||||
const ctx = useContext(ActionContext);
|
const ctx = useContext(ActionContext);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...ctx,
|
...ctx,
|
||||||
setVisible(visible: boolean) {
|
setVisible(visible: boolean) {
|
||||||
if (ctx?.openMode !== 'page') {
|
if (ctx?.openMode !== 'page') {
|
||||||
ctx?.setVisible?.(visible);
|
if (!visible) {
|
||||||
|
if (ctx.formValueChanged) {
|
||||||
|
AntdModal.confirm({
|
||||||
|
title: t('Unsaved changes'),
|
||||||
|
content: t("Are you sure you don't want to save?"),
|
||||||
|
async onOk() {
|
||||||
|
ctx.setFormValueChanged(false);
|
||||||
|
ctx.setVisible(false);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
ctx.setVisible(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ctx?.setVisible?.(visible);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user