feat(generator): prompt for unsaved JSON when exporting JSON (#184)

packages/generator/src/components/Header/index.tsx

@@ -1,29 +1,31 @@
 import React, { Fragment, memo } from 'react'
 import styles from './index.module.css'
 import cx from 'classnames'
-import { Upload, message } from 'antd'
+import { Upload, message, Modal } from 'antd'
 import {
   UploadOutlined,
   DownloadOutlined,
   EditOutlined,
   CompressOutlined,
+  ExclamationCircleOutlined,
 } from '@ant-design/icons'
 import {
   componentsFoldAtom,
   previewVisibleAtom,
-  exportVisibleAtom,
   schemaAtom,
   versionAtom,
   optionsAtom,
+  IsSavedAtom,
+  editJsonAtom,
 } from '@generator/store'
-import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil'
+import { useSetRecoilState, useRecoilValue, useRecoilCallback } from 'recoil'
+import { useSaveJson } from '@generator/hooks'
 import FileSaver from 'file-saver'
 import type { RcFile } from 'rc-upload/lib/interface'
-
+const { confirm } = Modal
 const Header = () => {
   const setFold = useSetRecoilState(componentsFoldAtom)
   const setPreviewVisible = useSetRecoilState(previewVisibleAtom)
-  const setExportVisible = useSetRecoilState(exportVisibleAtom)
   const {
     headerConfig: {
       customExport,
@@ -36,9 +38,9 @@ const Header = () => {
       showExportJSON,
     },
   } = useRecoilValue(optionsAtom)
-  const [unitedSchema, setUnitedSchema] = useRecoilState(schemaAtom)
+  const setUnitedSchema = useSetRecoilState(schemaAtom)
   const setVersion = useSetRecoilState(versionAtom)
-
+  const saveJson = useSaveJson()
   const importJson = (file: RcFile) => {
     return new Promise<void>(() => {
       const reader = new FileReader()
@@ -68,27 +70,47 @@ const Header = () => {
     setPreviewVisible(true)
   }
 
-  const rawExport = () => {
-    setExportVisible(true)
-    FileSaver.saveAs(
-      new Blob([JSON.stringify(unitedSchema)], {
-        type: 'application/json;charset=utf-8',
-      }),
-      'unitedSchema.json'
-    )
-  }
-
   /**
    * 导出json
    */
-  const exportJson = () => {
-    // todo: 如果有自定义导出，则执行自定义，但后续应移除该方法
-    if (customExport) {
-      customExport(rawExport)
-    } else {
-      rawExport()
-    }
-  }
+  const exportJson = useRecoilCallback(
+    ({ snapshot }) =>
+      async () => {
+        const editJson = await snapshot.getPromise(editJsonAtom)
+        const isSaved = await snapshot.getPromise(IsSavedAtom)
+        const exportJson = () => {
+          const rawExport = (): void => {
+            FileSaver.saveAs(
+              new Blob([JSON.stringify(editJson)], {
+                type: 'application/json;charset=utf-8',
+              }),
+              'unitedSchema.json'
+            )
+          }
+          saveJson(editJson)
+          if (customExport) {
+            customExport(rawExport)
+          } else {
+            rawExport()
+          }
+        }
+        if (!isSaved) {
+          confirm({
+            title: '当前JSON正在编辑',
+            icon: <ExclamationCircleOutlined />,
+            content: `是否保存JSON后${exportText}`,
+            onOk() {
+              exportJson()
+            },
+            okText: exportText === '保存' ? exportText : `保存并${exportText}`,
+            cancelText: '取消',
+          })
+        } else {
+          exportJson()
+        }
+      },
+    [customExport, exportText, saveJson]
+  )
 
   return (
     <div className={styles.header}>

packages/generator/src/components/RightSideBar/EditJSON.tsx

@@ -1,14 +1,15 @@
-import React, { memo, useState, useEffect } from 'react'
+import React, { memo, useState, useEffect, useCallback } from 'react'
 import styles from './index.module.css'
 import { SaveOutlined, LogoutOutlined } from '@ant-design/icons'
 import { message } from 'antd'
 import {
   componentsFoldAtom,
   schemaAtom,
   IsSavedAtom,
-  versionAtom,
+  editJsonAtom,
 } from '@generator/store'
-import { useSetRecoilState, useRecoilState } from 'recoil'
+import { useSaveJson } from '@generator/hooks'
+import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil'
 import MonacoEdit from './MonacoEdit'
 import { OnChange } from '@monaco-editor/react'
 const defaultValue = JSON.stringify({
@@ -19,23 +20,20 @@ const defaultValue = JSON.stringify({
 
 const EditJSON = () => {
   const setFold = useSetRecoilState(componentsFoldAtom)
-  const [unitedSchema, setUnitedSchema] = useRecoilState(schemaAtom)
+  const unitedSchema = useRecoilValue(schemaAtom)
   const [isSaved, setIsSaved] = useRecoilState(IsSavedAtom)
-  const setVersion = useSetRecoilState(versionAtom)
   const [json, setJson] = useState(unitedSchema)
-
+  const setEditJson = useSetRecoilState(editJsonAtom)
+  const saveJson = useSaveJson()
   useEffect(() => {
     setJson(unitedSchema)
   }, [unitedSchema])
   /**
    * 保存json
    */
-  const saveJson = () => {
-    setUnitedSchema(json)
-    setVersion((number) => number + 1)
-    setIsSaved(true)
-    message.success('保存成功，真棒👍🏻', 2)
-  }
+  const saveJsonFn = useCallback(() => {
+    saveJson(json)
+  }, [json, saveJson])
 
   const quitEdit = () => {
     // 保存成功
@@ -48,7 +46,10 @@ const EditJSON = () => {
 
   const handleEditorChange: OnChange = (value) => {
     try {
-      value && setJson(JSON.parse(value))
+      if (value) {
+        setJson(JSON.parse(value))
+        setEditJson(JSON.parse(value))
+      }
     } catch (error) {
       console.error(error)
     }
@@ -60,7 +61,7 @@ const EditJSON = () => {
       <div className={styles.title}>
         代码编辑区
         <div className={styles.btncontainer}>
-          <div className={styles.jsonbtn} onClick={saveJson}>
+          <div className={styles.jsonbtn} onClick={saveJsonFn}>
             <SaveOutlined />
             <span className="ml-2">保存</span>
           </div>

packages/generator/src/hooks/index.ts

@@ -4,3 +4,4 @@ export { default as useDeleteField } from './useDeleteField'
 export { default as useCanDrop } from './useCanDrop'
 export { default as useGetParentType } from './useGetParentType'
 export { default as useCanEditJson } from './useCanEditJson'
+export { default as useSaveJson } from './useSaveJson'

packages/generator/src/hooks/useSaveJson.tsx

@@ -0,0 +1,32 @@
+/*
+ * 保存json通用hook
+ * @Author: jiangxiaowei
+ * @Date: 2022-04-02 15:34:29
+ * @Last Modified by:   jiangxiaowei
+ * @Last Modified time: 2022-04-02 15:34:29
+ */
+import { IsSavedAtom, schemaAtom, versionAtom } from '@generator/store'
+import { useSetRecoilState } from 'recoil'
+import { useCallback } from 'react'
+import { message } from 'antd'
+import type { UnitedSchema } from '@jdfed/utils'
+
+type SaveJson = (json: UnitedSchema) => void
+
+const useSaveJson = (): SaveJson => {
+  const setUnitedSchema = useSetRecoilState(schemaAtom)
+  const setIsSaved = useSetRecoilState(IsSavedAtom)
+  const setVersion = useSetRecoilState(versionAtom)
+  const saveJson = useCallback<SaveJson>(
+    (json) => {
+      setUnitedSchema(json)
+      setVersion((number) => number + 1)
+      setIsSaved(true)
+      message.success('保存成功，真棒👍🏻', 2)
+    },
+    [setIsSaved, setUnitedSchema, setVersion]
+  )
+  return saveJson
+}
+
+export default useSaveJson

packages/generator/src/store/unclassified/index.ts

@@ -23,6 +23,11 @@ export const schemaAtom = atom<UnitedSchema>({
   },
 })
 
+export const editJsonAtom = atom({
+  key: 'editJson',
+  default: schemaAtom,
+})
+
 /**
  * 当前鼠标hover所在的元素的FieldKey
  */
@@ -55,14 +60,6 @@ export const previewVisibleAtom = atom<boolean>({
   default: false,
 })
 
-/**
- * 导出模块的可视化状态
- */
-export const exportVisibleAtom = atom<boolean>({
-  key: 'exportVisible',
-  default: false,
-})
-
 /**
  * dripform主题
  */