From 7a4e04791079b814ee721b0119d3619240765dd3 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 6 Jan 2021 13:08:00 +0800
Subject: [PATCH] feat: add prompt to save when closing the form

---
 .../components/form.fields/sub-table/Form.tsx | 19 ++++++++++++++++---
 .../components/pages/AvatarDropdown/index.tsx |  5 ++++-
 .../pages/AvatarDropdown/style.less           |  1 +
 .../src/components/views/Form/DrawerForm.tsx  | 16 ++++++++++++++--
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/form.fields/sub-table/Form.tsx b/packages/app/src/components/form.fields/sub-table/Form.tsx
index 4e7610a36..6ebf13b15 100644
--- a/packages/app/src/components/form.fields/sub-table/Form.tsx
+++ b/packages/app/src/components/form.fields/sub-table/Form.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
 import { Button, Drawer } from 'antd';
-import { Tooltip, Input, Space } from 'antd';
+import { Tooltip, Input, Space, Modal } from 'antd';
+import isEqual from 'lodash/isEqual';
 import {
   SchemaForm,
   SchemaMarkupField as Field,
@@ -18,6 +19,8 @@ import { useRequest } from 'umi';
 import api from '@/api-client';
 import { Spin } from '@nocobase/client';
 
+const actions = createFormActions();
+
 export default forwardRef((props: any, ref) => {
   console.log(props);
   const {
@@ -37,7 +40,6 @@ export default forwardRef((props: any, ref) => {
     setTitle,
     setIndex,
   }));
-  const actions = createFormActions();
   console.log({onFinish});
   const { fields = {} } = schema;
   if (loading) {
@@ -51,7 +53,18 @@ export default forwardRef((props: any, ref) => {
       className={'noco-drawer'}
       width={'40%'}
       onClose={() => {
-        setVisible(false);
+        actions.getFormState(state => {
+          if (isEqual(state.initialValues, state.values)) {
+            setVisible(false);
+            return;
+          }
+          Modal.confirm({
+            title: '表单内容发生变化，确定不保存吗？',
+            onOk() {
+              setVisible(false);
+            }
+          });
+        });
       }}
       title={title}
       footer={(
diff --git a/packages/app/src/components/pages/AvatarDropdown/index.tsx b/packages/app/src/components/pages/AvatarDropdown/index.tsx
index a1b366fe7..d1f14488b 100644
--- a/packages/app/src/components/pages/AvatarDropdown/index.tsx
+++ b/packages/app/src/components/pages/AvatarDropdown/index.tsx
@@ -4,6 +4,7 @@ import './style.less';
 import { history, Link, request, useModel } from 'umi';
 import { ProfileOutlined, LogoutOutlined, UserOutlined, CodeOutlined } from '@ant-design/icons';
 import Icon from '@/components/icons';
+import { useResponsive } from 'ahooks';
 
 const overlay = (
   <Menu>
@@ -21,9 +22,11 @@ const overlay = (
 
 export default (props: any) => {
   const { initialState = {}, loading, error, refresh, setInitialState } = useModel('@@initialState');
+  const responsive = useResponsive();
+  const isMobile = responsive.small && !responsive.middle && !responsive.large;
   return (
     <div className={'avatar-dropdown-wrapper'}>
-      <Dropdown overlay={overlay} placement="bottomRight">
+      <Dropdown trigger={isMobile ? ['click'] : ['hover']} overlay={overlay} placement="bottomRight">
         <span style={{display: 'block'}} className="dropdown-link" onClick={e => e.preventDefault()}>
           <Avatar size={'small'} icon={<UserOutlined/>} style={{marginRight: 5}}/> {initialState.currentUser.nickname}
         </span>
diff --git a/packages/app/src/components/pages/AvatarDropdown/style.less b/packages/app/src/components/pages/AvatarDropdown/style.less
index e7ea1d342..229bd0ca7 100644
--- a/packages/app/src/components/pages/AvatarDropdown/style.less
+++ b/packages/app/src/components/pages/AvatarDropdown/style.less
@@ -9,6 +9,7 @@
   .dropdown-link {
     padding-left: 20px;
     padding-right: 20px;
+    cursor: pointer;
   }
 }
 
diff --git a/packages/app/src/components/views/Form/DrawerForm.tsx b/packages/app/src/components/views/Form/DrawerForm.tsx
index 2ef7e38bc..bf4085459 100644
--- a/packages/app/src/components/views/Form/DrawerForm.tsx
+++ b/packages/app/src/components/views/Form/DrawerForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
-import { Button, Drawer } from 'antd';
+import { Button, Drawer, Modal } from 'antd';
 import { Tooltip, Input } from 'antd';
 import {
   SchemaForm,
@@ -19,6 +19,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useRequest } from 'umi';
 import api from '@/api-client';
 import { Spin } from '@nocobase/client';
+import isEqual from 'lodash/isEqual';
 
 const actions = createFormActions();
 
@@ -62,7 +63,18 @@ export const DrawerForm = forwardRef((props: any, ref) => {
       width={'40%'}
       className={'noco-drawer'}
       onClose={() => {
-        setVisible(false);
+        actions.getFormState(state => {
+          if (isEqual(state.initialValues, state.values)) {
+            setVisible(false);
+            return;
+          }
+          Modal.confirm({
+            title: '表单内容发生变化，确定不保存吗？',
+            onOk() {
+              setVisible(false);
+            }
+          });
+        });
       }}
       title={title}
       footer={(