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:
SemmyWong 2022-05-05 09:45:46 +08:00 committed by GitHub
parent 0b7f96dab3
commit bf987e9f59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 17 deletions

View File

@ -286,6 +286,6 @@ export default {
'Execution History': 'History',
'Parallel branch': 'Branch',
'Confirm': 'Confirm',
'Form value changed tip': 'Are you sure to exit that Data unsaved',
'Unsaved changes': 'Unsaved changes',
'Are you sure you don\'t want to save?': 'Are you sure you don\'t want to save?',
}

View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
import { Drawer, Modal as AntdModal } from 'antd';
import { Drawer } from 'antd';
import classNames from 'classnames';
import React from 'react';
import { createPortal } from 'react-dom';
@ -11,7 +11,7 @@ import { ComposedActionDrawer } from './types';
export const ActionDrawer: ComposedActionDrawer = observer((props) => {
const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
const { t } = useTranslation();
const { visible, setVisible, formValueChanged, setFormValueChanged } = useActionContext();
const { visible, setVisible } = useActionContext();
const schema = useFieldSchema();
const field = useField();
const footerSchema = schema.reduceProperties((buf, s) => {
@ -22,18 +22,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
});
const closeHandler = () => {
if (!formValueChanged) {
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);
},
});
setVisible(false);
};
return (
<>

View File

@ -1,5 +1,7 @@
import { useForm } from '@formily/react';
import { Modal as AntdModal } from 'antd';
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { ActionContext } from './context';
export const useA = () => {
@ -10,12 +12,28 @@ export const useA = () => {
export const useActionContext = () => {
const ctx = useContext(ActionContext);
const { t } = useTranslation();
return {
...ctx,
setVisible(visible: boolean) {
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);
}
}
},
};