@dovetail-v2/refine 0.3.29-alpha.2 → 0.3.29-alpha.3

package/dist/components/Form/DataExpiredModal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface DataExpiredModalProps {
+    onAbandon: () => void;
+}
+export declare function DataExpiredModal({ onAbandon }: DataExpiredModalProps): JSX.Element;

package/dist/hooks/useResourceVersionCheck.d.ts

@@ -0,0 +1,9 @@
+import { BaseRecord } from '@refinedev/core';
+import { QueryObserverResult } from '@tanstack/react-query';
+interface UseResourceVersionCheckParams {
+    queryResult?: QueryObserverResult<{
+        data: BaseRecord;
+    }>;
+}
+export declare const useResourceVersionCheck: ({ queryResult, }: UseResourceVersionCheckParams) => boolean;
+export {};

package/dist/i18n.d.ts

@@ -184,6 +184,10 @@ export declare const resources: {
             connecting: string;
             reconnect: string;
             edit_form: string;
+            data_expired: string;
+            data_expired_body: string;
+            data_expired_note: string;
+            abandon_edit: string;
             exit_yaml_tip: string;
             value_optional: string;
             effect: string;
@@ -466,6 +470,10 @@ export declare const resources: {
             reconnect: string;
             search: string;
             edit_form: string;
+            data_expired: string;
+            data_expired_body: string;
+            data_expired_note: string;
+            abandon_edit: string;
             exit_yaml_tip: string;
             form: string;
             yaml: string;

package/dist/locales/en-US/index.d.ts

@@ -181,6 +181,10 @@ declare const _default: {
         connecting: string;
         reconnect: string;
         edit_form: string;
+        data_expired: string;
+        data_expired_body: string;
+        data_expired_note: string;
+        abandon_edit: string;
         exit_yaml_tip: string;
         value_optional: string;
         effect: string;

package/dist/locales/zh-CN/index.d.ts

@@ -183,6 +183,10 @@ declare const _default: {
         reconnect: string;
         search: string;
         edit_form: string;
+        data_expired: string;
+        data_expired_body: string;
+        data_expired_note: string;
+        abandon_edit: string;
         exit_yaml_tip: string;
         form: string;
         yaml: string;

package/dist/refine.cjs

@@ -638,6 +638,10 @@ const disconnected$1 = "Connection Error.";
 const connecting$1 = "Connecting...";
 const reconnect$1 = "Reconnect";
 const edit_form$1 = "Edit form";
+const data_expired$1 = "Data expired";
+const data_expired_body$1 = "The data in this form is no longer the latest version. To avoid saving errors, please discard this edit and reopen the form to edit again.";
+const data_expired_note$1 = "Your current entries will not be saved.";
+const abandon_edit$1 = "Discard edit";
 const exit_yaml_tip$1 = "If you go back to the form, any changes made to the YAML file will be lost.";
 const value_optional$1 = "Value (optional)";
 const effect$1 = "Effect";
@@ -915,6 +919,10 @@ const dovetail$1 = {
   connecting: connecting$1,
   reconnect: reconnect$1,
   edit_form: edit_form$1,
+  data_expired: data_expired$1,
+  data_expired_body: data_expired_body$1,
+  data_expired_note: data_expired_note$1,
+  abandon_edit: abandon_edit$1,
   exit_yaml_tip: exit_yaml_tip$1,
   value_optional: value_optional$1,
   effect: effect$1,
@@ -1194,6 +1202,10 @@ const connecting = "正在连接...";
 const reconnect = "重新连接";
 const search = "搜索";
 const edit_form = "编辑表单";
+const data_expired = "数据已过期";
+const data_expired_body = "当前表单中的数据已不是最新版。为避免保存失败，请放弃本次编辑，并重新打开表单进行编辑。";
+const data_expired_note = "当前已填写内容将不会保留。";
+const abandon_edit = "放弃编辑";
 const exit_yaml_tip = "返回编辑表单，不会保留对 YAML 文件做出的所有更改。";
 const form = "表单";
 const yaml = "YAML";
@@ -1470,6 +1482,10 @@ const dovetail = {
   reconnect,
   search,
   edit_form,
+  data_expired,
+  data_expired_body,
+  data_expired_note,
+  abandon_edit,
   exit_yaml_tip,
   form,
   yaml,
@@ -8048,7 +8064,7 @@ function MetadataForm() {
 }
 const ComponentContext = React.createContext({});
 const GlobalStoreContext = React.createContext({});
-const index_o09auy = "";
+const index_1s9fcl3 = "";
 const ErrorWrapper = /* @__PURE__ */ styled_default("div")({
   name: "ErrorWrapper",
   class: "egn3dbn",
@@ -10685,6 +10701,26 @@ function usePathMap(options) {
     transformApplyValues
   };
 }
+const useResourceVersionCheck = ({
+  queryResult
+}) => {
+  var _a, _b, _c;
+  const initialResourceVersionRef = React.useRef();
+  const [isExpired, setIsExpired] = React.useState(false);
+  const currentResourceVersion = (_c = (_b = (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data) == null ? void 0 : _b.metadata) == null ? void 0 : _c.resourceVersion;
+  React.useEffect(() => {
+    if (!currentResourceVersion)
+      return;
+    if (!initialResourceVersionRef.current) {
+      initialResourceVersionRef.current = currentResourceVersion;
+      return;
+    }
+    if (currentResourceVersion !== initialResourceVersionRef.current) {
+      setIsExpired(true);
+    }
+  }, [currentResourceVersion]);
+  return isExpired;
+};
 function getInitialValues(resourceConfig) {
   return resourceConfig.initValue || {
     apiVersion: resourceConfig.apiVersion,
@@ -10693,6 +10729,42 @@ function getInitialValues(resourceConfig) {
     spec: {}
   };
 }
+const button_1v659kh = "";
+const WarningButtonStyle = "wwyz7ti";
+const DataExpiredModal_eazxh6 = "";
+const NoteStyle = "n609wlp";
+function DataExpiredModal({
+  onAbandon
+}) {
+  const {
+    t: t2
+  } = common.useTranslation();
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.SmallDialog, {
+    title: t2("dovetail.data_expired"),
+    closable: false,
+    maskClosable: false,
+    cancelButtonProps: {
+      style: {
+        display: "none"
+      }
+    },
+    okText: t2("dovetail.abandon_edit"),
+    okButtonProps: {
+      className: WarningButtonStyle
+    },
+    onOk: (popModal) => {
+      popModal();
+      onAbandon();
+    },
+    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+      className: eagle.Typo.Label.l2_regular,
+      children: t2("dovetail.data_expired_body")
+    }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+      className: `${eagle.Typo.Label.l2_regular} ${NoteStyle}`,
+      children: t2("dovetail.data_expired_note")
+    })]
+  });
+}
 const index_az4wrx = "";
 const WrapperStyle$5 = "w1akirqw";
 const TitleStyle$2 = "t30srnq";
@@ -11575,6 +11647,29 @@ function YamlFormContainer({
   onSaveButtonPropsChange
 }) {
   const action = id ? "edit" : "create";
+  const pushModal = eagle.usePushModal();
+  const popModal = eagle.usePopModal();
+  const hasShownExpiredRef = React.useRef(false);
+  const queryResult = core.useOne({
+    resource: resourceConfig.name,
+    id,
+    liveMode: id ? "auto" : "off",
+    queryOptions: { enabled: !!id }
+  });
+  const isExpired = useResourceVersionCheck({ queryResult });
+  React.useEffect(() => {
+    if (isExpired && !hasShownExpiredRef.current) {
+      hasShownExpiredRef.current = true;
+      pushModal({
+        component: DataExpiredModal,
+        props: {
+          onAbandon: () => {
+            popModal();
+          }
+        }
+      });
+    }
+  }, [isExpired, pushModal, popModal]);
   const { transformInitValues, transformApplyValues } = usePathMap({
     pathMap: formConfig == null ? void 0 : formConfig.pathMap,
     transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
@@ -15938,8 +16033,6 @@ function ResourceShow(props) {
     }
   );
 }
-const button_1v659kh = "";
-const WarningButtonStyle = "wwyz7ti";
 const modal_1eijuvm = "";
 const SmallModalStyle = "s1nc293e";
 function FormModeSegmentControl({
@@ -16972,7 +17065,7 @@ const useRefineForm = (props) => {
       resource: resourceConfig.name,
       action: id ? "edit" : "create",
       id,
-      liveMode: "off",
+      liveMode: id ? "auto" : "off",
       ...refineProps
     },
     defaultValues: (options == null ? void 0 : options.initialValues) || (resourceConfig == null ? void 0 : resourceConfig.initValue),
@@ -17016,6 +17109,9 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
 }, ref) {
   var _a, _b;
   const action = id ? "edit" : "create";
+  const pushModal = eagle.usePushModal();
+  const popModal = eagle.usePopModal();
+  const hasShownExpiredRef = React.useRef(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17042,6 +17138,22 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
       }
     }
   });
+  const isExpired = useResourceVersionCheck({
+    queryResult: refineFormResult.formResult.refineCore.queryResult
+  });
+  React.useEffect(() => {
+    if (isExpired && !hasShownExpiredRef.current) {
+      hasShownExpiredRef.current = true;
+      pushModal({
+        component: DataExpiredModal,
+        props: {
+          onAbandon: () => {
+            popModal();
+          }
+        }
+      });
+    }
+  }, [isExpired, pushModal, popModal]);
   const fieldsConfig = useFieldsConfig(
     resourceConfig,
     { fields: formConfig == null ? void 0 : formConfig.fields },

package/dist/refine.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key2, value2) => {
 import dayjs from "dayjs";
 import i18n from "i18next";
 import { w as warnOnce, g as getDefaults, a as warn, b as getI18n, s as setDefaults, d as setI18n, I as I18nContext, j as jsxRuntimeExports, u as useTranslation, c as cx_default, S as SocketStatus } from "./common-241b21f8.js";
-import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNavigation, useBreadcrumb, useList, CanAccess, useUpdate, useForm as useForm$2, pickNotDeprecated, useWarnAboutChange, useParsed, useGo, useCan, useTable, useDeleteMany, useShow, useRefineContext, useTranslate, flattenObjectKeys, useMenu, Refine } from "@refinedev/core";
+import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNavigation, useBreadcrumb, useList, CanAccess, useUpdate, useForm as useForm$2, pickNotDeprecated, useWarnAboutChange, useOne, useParsed, useGo, useCan, useTable, useDeleteMany, useShow, useRefineContext, useTranslate, flattenObjectKeys, useMenu, Refine } from "@refinedev/core";
 import { parse, stringify } from "qs";
 import React, { createElement, isValidElement, cloneElement, Children, useContext, useCallback, createContext, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef, Suspense, lazy, memo } from "react";
 import { useLocation, useHistory, useParams, matchPath, Link, Route, NavLink, Router } from "react-router-dom";
@@ -619,6 +619,10 @@ const disconnected$1 = "Connection Error.";
 const connecting$1 = "Connecting...";
 const reconnect$1 = "Reconnect";
 const edit_form$1 = "Edit form";
+const data_expired$1 = "Data expired";
+const data_expired_body$1 = "The data in this form is no longer the latest version. To avoid saving errors, please discard this edit and reopen the form to edit again.";
+const data_expired_note$1 = "Your current entries will not be saved.";
+const abandon_edit$1 = "Discard edit";
 const exit_yaml_tip$1 = "If you go back to the form, any changes made to the YAML file will be lost.";
 const value_optional$1 = "Value (optional)";
 const effect$1 = "Effect";
@@ -896,6 +900,10 @@ const dovetail$1 = {
   connecting: connecting$1,
   reconnect: reconnect$1,
   edit_form: edit_form$1,
+  data_expired: data_expired$1,
+  data_expired_body: data_expired_body$1,
+  data_expired_note: data_expired_note$1,
+  abandon_edit: abandon_edit$1,
   exit_yaml_tip: exit_yaml_tip$1,
   value_optional: value_optional$1,
   effect: effect$1,
@@ -1175,6 +1183,10 @@ const connecting = "正在连接...";
 const reconnect = "重新连接";
 const search = "搜索";
 const edit_form = "编辑表单";
+const data_expired = "数据已过期";
+const data_expired_body = "当前表单中的数据已不是最新版。为避免保存失败，请放弃本次编辑，并重新打开表单进行编辑。";
+const data_expired_note = "当前已填写内容将不会保留。";
+const abandon_edit = "放弃编辑";
 const exit_yaml_tip = "返回编辑表单，不会保留对 YAML 文件做出的所有更改。";
 const form = "表单";
 const yaml = "YAML";
@@ -1451,6 +1463,10 @@ const dovetail = {
   reconnect,
   search,
   edit_form,
+  data_expired,
+  data_expired_body,
+  data_expired_note,
+  abandon_edit,
   exit_yaml_tip,
   form,
   yaml,
@@ -8029,7 +8045,7 @@ function MetadataForm() {
 }
 const ComponentContext = createContext({});
 const GlobalStoreContext = createContext({});
-const index_o09auy = "";
+const index_1s9fcl3 = "";
 const ErrorWrapper = /* @__PURE__ */ styled_default("div")({
   name: "ErrorWrapper",
   class: "egn3dbn",
@@ -10666,6 +10682,26 @@ function usePathMap(options) {
     transformApplyValues
   };
 }
+const useResourceVersionCheck = ({
+  queryResult
+}) => {
+  var _a, _b, _c;
+  const initialResourceVersionRef = useRef();
+  const [isExpired, setIsExpired] = useState(false);
+  const currentResourceVersion = (_c = (_b = (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data) == null ? void 0 : _b.metadata) == null ? void 0 : _c.resourceVersion;
+  useEffect(() => {
+    if (!currentResourceVersion)
+      return;
+    if (!initialResourceVersionRef.current) {
+      initialResourceVersionRef.current = currentResourceVersion;
+      return;
+    }
+    if (currentResourceVersion !== initialResourceVersionRef.current) {
+      setIsExpired(true);
+    }
+  }, [currentResourceVersion]);
+  return isExpired;
+};
 function getInitialValues(resourceConfig) {
   return resourceConfig.initValue || {
     apiVersion: resourceConfig.apiVersion,
@@ -10674,6 +10710,42 @@ function getInitialValues(resourceConfig) {
     spec: {}
   };
 }
+const button_1v659kh = "";
+const WarningButtonStyle = "wwyz7ti";
+const DataExpiredModal_eazxh6 = "";
+const NoteStyle = "n609wlp";
+function DataExpiredModal({
+  onAbandon
+}) {
+  const {
+    t: t2
+  } = useTranslation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SmallDialog, {
+    title: t2("dovetail.data_expired"),
+    closable: false,
+    maskClosable: false,
+    cancelButtonProps: {
+      style: {
+        display: "none"
+      }
+    },
+    okText: t2("dovetail.abandon_edit"),
+    okButtonProps: {
+      className: WarningButtonStyle
+    },
+    onOk: (popModal) => {
+      popModal();
+      onAbandon();
+    },
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: Typo.Label.l2_regular,
+      children: t2("dovetail.data_expired_body")
+    }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: `${Typo.Label.l2_regular} ${NoteStyle}`,
+      children: t2("dovetail.data_expired_note")
+    })]
+  });
+}
 const index_az4wrx = "";
 const WrapperStyle$5 = "w1akirqw";
 const TitleStyle$2 = "t30srnq";
@@ -11556,6 +11628,29 @@ function YamlFormContainer({
   onSaveButtonPropsChange
 }) {
   const action = id ? "edit" : "create";
+  const pushModal = usePushModal();
+  const popModal = usePopModal();
+  const hasShownExpiredRef = useRef(false);
+  const queryResult = useOne({
+    resource: resourceConfig.name,
+    id,
+    liveMode: id ? "auto" : "off",
+    queryOptions: { enabled: !!id }
+  });
+  const isExpired = useResourceVersionCheck({ queryResult });
+  useEffect(() => {
+    if (isExpired && !hasShownExpiredRef.current) {
+      hasShownExpiredRef.current = true;
+      pushModal({
+        component: DataExpiredModal,
+        props: {
+          onAbandon: () => {
+            popModal();
+          }
+        }
+      });
+    }
+  }, [isExpired, pushModal, popModal]);
   const { transformInitValues, transformApplyValues } = usePathMap({
     pathMap: formConfig == null ? void 0 : formConfig.pathMap,
     transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
@@ -15919,8 +16014,6 @@ function ResourceShow(props) {
     }
   );
 }
-const button_1v659kh = "";
-const WarningButtonStyle = "wwyz7ti";
 const modal_1eijuvm = "";
 const SmallModalStyle = "s1nc293e";
 function FormModeSegmentControl({
@@ -16953,7 +17046,7 @@ const useRefineForm = (props) => {
       resource: resourceConfig.name,
       action: id ? "edit" : "create",
       id,
-      liveMode: "off",
+      liveMode: id ? "auto" : "off",
       ...refineProps
     },
     defaultValues: (options == null ? void 0 : options.initialValues) || (resourceConfig == null ? void 0 : resourceConfig.initValue),
@@ -16997,6 +17090,9 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
 }, ref) {
   var _a, _b;
   const action = id ? "edit" : "create";
+  const pushModal = usePushModal();
+  const popModal = usePopModal();
+  const hasShownExpiredRef = useRef(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17023,6 +17119,22 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
       }
     }
   });
+  const isExpired = useResourceVersionCheck({
+    queryResult: refineFormResult.formResult.refineCore.queryResult
+  });
+  useEffect(() => {
+    if (isExpired && !hasShownExpiredRef.current) {
+      hasShownExpiredRef.current = true;
+      pushModal({
+        component: DataExpiredModal,
+        props: {
+          onAbandon: () => {
+            popModal();
+          }
+        }
+      });
+    }
+  }, [isExpired, pushModal, popModal]);
   const fieldsConfig = useFieldsConfig(
     resourceConfig,
     { fields: formConfig == null ? void 0 : formConfig.fields },

package/dist/style.css

@@ -716,7 +716,7 @@
   color: rgba(44, 56, 82, 0.6);
 }
 .egn3dbn.card {
-  padding: 15px 0;
+  padding: 8px 0;
 }
 .egn3dbn.card .title {
   color: rgba(0, 21, 64, 0.3);
@@ -1148,6 +1148,113 @@
 /*  box shadow   */
 /*  fisheye   */
 /* z-index */
+.wwyz7ti.ant-btn.ant-btn.ant-btn-primary {
+  background-color: #fea008;
+}
+.wwyz7ti.ant-btn.ant-btn.ant-btn-primary:hover {
+  background-color: #feba33;
+}
+
+.c1xsou5f.ant-btn {
+  border-radius: 6px;
+  border: 1px solid rgba(172, 186, 211, 0.6) !important;
+}/* // basic */
+/* FishEye Color Variables and Functions */
+/*
+ --------------------------- Primary Color ---------------------------
+*/
+/*
+ ---------------------------When necessary to add at any time---------------------------
+*/
+/* computed */
+/* blue */
+/* green */
+/* yellow */
+/* red */
+/* purple */
+/*  palette    global token*/
+/* color opaque */
+/* color transparent */
+/* blue transparent  */
+/* green transparent  */
+/* yellow transparent  */
+/* red transparent  */
+/* gray transparent */
+/* white transparent */
+/* gradient opaque */
+/* blue radial gradient */
+/* blue linear gradient */
+/* green radial gradient */
+/* yellow radial gradient */
+/* red radial gradient */
+/* gray radial gradient */
+/* white to gray radial gradient */
+/*  white to gray  linear gradient */
+/* gradient transparent */
+/* secondary palette */
+/* purple radial gradient */
+/*  refine alias color   */
+/*  text   */
+/*  link   */
+/*  fill   */
+/*  fill  element  */
+/*  fill  interaction  */
+/*  stroke   */
+/*  background   */
+/*  dim   */
+/*  box shadow   */
+/*  fisheye   */
+/* z-index */
+.n609wlp {
+  margin-top: 8px;
+  color: #2d3a56;
+}/* // basic */
+/* FishEye Color Variables and Functions */
+/*
+ --------------------------- Primary Color ---------------------------
+*/
+/*
+ ---------------------------When necessary to add at any time---------------------------
+*/
+/* computed */
+/* blue */
+/* green */
+/* yellow */
+/* red */
+/* purple */
+/*  palette    global token*/
+/* color opaque */
+/* color transparent */
+/* blue transparent  */
+/* green transparent  */
+/* yellow transparent  */
+/* red transparent  */
+/* gray transparent */
+/* white transparent */
+/* gradient opaque */
+/* blue radial gradient */
+/* blue linear gradient */
+/* green radial gradient */
+/* yellow radial gradient */
+/* red radial gradient */
+/* gray radial gradient */
+/* white to gray radial gradient */
+/*  white to gray  linear gradient */
+/* gradient transparent */
+/* secondary palette */
+/* purple radial gradient */
+/*  refine alias color   */
+/*  text   */
+/*  link   */
+/*  fill   */
+/*  fill  element  */
+/*  fill  interaction  */
+/*  stroke   */
+/*  background   */
+/*  dim   */
+/*  box shadow   */
+/*  fisheye   */
+/* z-index */
 .w1akirqw {
   height: 100%;
   display: flex;
@@ -4269,63 +4376,6 @@
 /*  box shadow   */
 /*  fisheye   */
 /* z-index */
-.wwyz7ti.ant-btn.ant-btn.ant-btn-primary {
-  background-color: #fea008;
-}
-.wwyz7ti.ant-btn.ant-btn.ant-btn-primary:hover {
-  background-color: #feba33;
-}
-
-.c1xsou5f.ant-btn {
-  border-radius: 6px;
-  border: 1px solid rgba(172, 186, 211, 0.6) !important;
-}/* // basic */
-/* FishEye Color Variables and Functions */
-/*
- --------------------------- Primary Color ---------------------------
-*/
-/*
- ---------------------------When necessary to add at any time---------------------------
-*/
-/* computed */
-/* blue */
-/* green */
-/* yellow */
-/* red */
-/* purple */
-/*  palette    global token*/
-/* color opaque */
-/* color transparent */
-/* blue transparent  */
-/* green transparent  */
-/* yellow transparent  */
-/* red transparent  */
-/* gray transparent */
-/* white transparent */
-/* gradient opaque */
-/* blue radial gradient */
-/* blue linear gradient */
-/* green radial gradient */
-/* yellow radial gradient */
-/* red radial gradient */
-/* gray radial gradient */
-/* white to gray radial gradient */
-/*  white to gray  linear gradient */
-/* gradient transparent */
-/* secondary palette */
-/* purple radial gradient */
-/*  refine alias color   */
-/*  text   */
-/*  link   */
-/*  fill   */
-/*  fill  element  */
-/*  fill  interaction  */
-/*  stroke   */
-/*  background   */
-/*  dim   */
-/*  box shadow   */
-/*  fisheye   */
-/* z-index */
 .fq4465w.ant-modal.fullscreen .ant-modal-header {
   padding: 60px 0 32px 0;
   max-width: var(--max-modal-width, 1024px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.3.29-alpha.2",
+  "version": "0.3.29-alpha.3",
   "type": "module",
   "files": [
     "dist",