feat: update code

haiwen · Sep 18, 2024 · 8555710 · 8555710
1 parent f6e788c
commit 8555710
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.81",
     "@seafile/seafile-calendar": "0.0.27",
     "@seafile/seafile-editor": "^1.0.116",
-    "@seafile/sf-metadata-ui-component": "^0.0.36",
+    "@seafile/sf-metadata-ui-component": "^0.0.37",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "axios": "^1.7.4",

diff --git a/frontend/src/metadata/components/detail-editor/date-editor/index.js b/frontend/src/metadata/components/detail-editor/date-editor/index.js
@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { SfCalendar } from '@seafile/sf-metadata-ui-component';
+import { ClickOutside, SfCalendar } from '@seafile/sf-metadata-ui-component';
 import PropTypes from 'prop-types';
-import { getDateDisplayString } from '../../../utils/cell';
-import { DEFAULT_DATE_FORMAT } from '../../../constants';
+import { getDateDisplayString, isCellValueChanged } from '../../../utils/cell';
+import { CellType, DEFAULT_DATE_FORMAT } from '../../../constants';
 import { gettext } from '../../../../utils/constants';
+import { getEventClassName } from '../../../utils/common';
 
 import './index.css';
 
@@ -27,8 +28,15 @@ const DateEditor = ({ value, field, onChange: onChangeAPI, lang }) => {
 
   const closeEditor = useCallback(() => {
     setShowEditor(false);
+    if (!isCellValueChanged(value, newValue.current, CellType.DATE)) return;
     onChangeAPI(newValue.current);
-  }, [onChangeAPI, newValue]);
+  }, [value, newValue, onChangeAPI]);
+
+  const onClickOutside = useCallback((event) => {
+    let className = getEventClassName(event);
+    if (className.indexOf('rc-calendar') > -1 || !className && event.target.tagName === 'LI') return;
+    closeEditor();
+  }, [closeEditor]);
 
   return (
     <>
@@ -40,7 +48,9 @@ const DateEditor = ({ value, field, onChange: onChangeAPI, lang }) => {
         {getDateDisplayString(value, format)}
       </div>
       {showEditor && (
-        <SfCalendar lang={lang} format={format} value={value} onChange={onChange} onClose={closeEditor} onClear={onClear} />
+        <ClickOutside onClickOutside={onClickOutside}>
+          <SfCalendar lang={lang} format={format} value={value} onChange={onChange} onClose={closeEditor} onClear={onClear} />
+        </ClickOutside>
       )}
     </>
   );