@seafile/seafile-database 0.0.29 → 0.0.31

package/dist/common/components/empty-tip/index.css

@@ -1,21 +1,34 @@
 .empty-tip {
+  margin: 5.5em 1em;
+  padding: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  height: 100%;
+}
+
+.empty-tip .no-items-img-tip {
+  display: inline-block;
+  margin-bottom: 10px;
+  -webkit-user-drag: none;
 }
 
 .empty-tip .empty-tip-title {
   font-size: 18px;
   font-weight: 500;
-  color: #212529;
-  margin-top: 10px;
+  color: var(--bs-body-color);
+  margin-bottom: 10px;
 }
 
 .empty-tip .empty-tip-text {
   font-size: 14px;
   font-weight: normal;
   color: #666;
-  margin-top: 10px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .empty-tip {
+    padding: 30px 80px;
+  }
 }

package/dist/components/cell-formatter/rate/index.js

@@ -32,7 +32,8 @@ const RateFormatter = _ref => {
       },
       key: i
     }, /*#__PURE__*/_react.default.createElement(_icons.default, {
-      symbol: type
+      symbol: type,
+      color: color
     })));
   }
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/data-process-setter/groupby-setter.js

@@ -65,7 +65,7 @@ const GroupbySetter = _ref => {
     readOnly: readOnly,
     groupbys: groupbys,
     target: target,
-    placement: "bottom-end",
+    placement: "bottom-start",
     columns: columns,
     hidePopover: onSetterToggle,
     onChange: onChange

package/dist/components/data-process-setter/view-type-setter.js

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _hotkey = require("../../common/utils/hotkey");
 var _translate = _interopRequireDefault(require("../../lang/translate"));
-var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _popover = require("../popover");
 const SettingsSetter = _ref => {
@@ -24,10 +23,6 @@ const SettingsSetter = _ref => {
   const onSetterToggle = (0, _react.useCallback)(() => {
     setShowSetter(!isShowSetter);
   }, [isShowSetter]);
-  const onKeyDown = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    if ((0, _hotkey.isEnter)(event) || (0, _hotkey.isSpace)(event)) onSetterToggle();
-  }, [onSetterToggle]);
   const onChangeType = (0, _react.useCallback)(type => {
     modifyViewType(type);
   }, [modifyViewType]);

package/dist/components/popover/hidden-column-popover/index.css

@@ -167,3 +167,12 @@
 .sea-metadata-hide-columns-popover .hide-column-item.hide-column-can-drop-top::before {
   top: 0;
 }
+
+.sea-database.sea-metadata-hide-columns-popover .popover {
+  height: 300px;
+}
+
+.sea-database.sea-metadata-hide-columns-popover .popover .hide-columns-list {
+  height: 228px;
+  overflow: hidden;
+}

package/dist/components/popover/hidden-column-popover/index.js

@@ -96,7 +96,7 @@ const HideColumnPopover = _ref => {
     target: target,
     fade: false,
     hideArrow: true,
-    className: "sea-metadata-hide-columns-popover",
+    className: "sea-database sea-metadata-hide-columns-popover",
     boundariesElement: document.body
   }, /*#__PURE__*/_react.default.createElement("div", {
     onClick: onPopoverInsideClick,

package/dist/components/popover/settings-popover/field-display-settings/index.css

@@ -1,5 +1,6 @@
 .sea-metadata-field-display-popover .popover {
   width: 300px;
+  height: 246px;
 }
 
 .sf-metadata-field-display-setting {
@@ -126,6 +127,7 @@
   border-radius: 3px;
   color: var(--bs-body-color);
   height: 28px;
+  margin-top: 8px;
 }
 
 .sea-metadata-field-display-popover .sf-metadata-field-display-operations .sea-metadata-field-display-operation:hover {
@@ -133,3 +135,8 @@
   color: var(--bs-body-color);
   cursor: pointer;
 }
+
+.sea-metadata-field-display-popover .sf-metadata-field-display-setting-body {
+  height: 150px;
+  overflow: auto;
+}

package/dist/components/popover/settings-popover/field-display-settings/index.js

@@ -19,8 +19,7 @@ const FieldDisplaySettings = _ref => {
     fields,
     onToggleField,
     onMoveField,
-    onToggleFieldsVisibility,
-    hidePopover = () => {}
+    onToggleFieldsVisibility
   } = _ref;
   const nodeRef = (0, _react.useRef)(null);
   const [dragOverColumnKey, setDragOverCellKey] = (0, _react.useState)(null);
@@ -34,10 +33,9 @@ const FieldDisplaySettings = _ref => {
     if (cellKey === draggingColumnKey) return;
     setDraggingCellKey(cellKey);
   }, [draggingColumnKey]);
-  const onSearchColumn = (0, _react.useCallback)(event => {
-    const value = event.target.value;
-    if (value === searchValue) return;
-    setSearchValue(value);
+  const onSearchColumn = (0, _react.useCallback)(newSearchValue => {
+    if (newSearchValue === searchValue) return;
+    setSearchValue(newSearchValue);
   }, [searchValue]);
   const onKeyDown = (0, _react.useCallback)(event => {
     if (event.keyCode === _keyCodes.KeyCodes.ChineseInputMethod || event.keyCode === _keyCodes.KeyCodes.Enter || event.keyCode === _keyCodes.KeyCodes.LeftArrow || event.keyCode === _keyCodes.KeyCodes.RightArrow) {
@@ -56,24 +54,7 @@ const FieldDisplaySettings = _ref => {
     });
   }, [fields, searchValue]);
   const draggingColumnIndex = draggingColumnKey ? shownFields.findIndex(f => f.key === draggingColumnKey) : -1;
-  return /*#__PURE__*/_react.default.createElement(_components.CustomizePopover, {
-    target: 'sea-metadata-field-display-popover',
-    popoverClassName: "sea-metadata-field-display-popover",
-    hidePopover: hidePopover,
-    hidePopoverWithEsc: hidePopover,
-    placement: "right",
-    modifiers: [{
-      name: 'preventOverflow',
-      options: {
-        boundary: document.body
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 0]
-      }
-    }]
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-metadata-field-display-setting"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-metadata-field-display-setting-wrapper",
@@ -114,6 +95,6 @@ const FieldDisplaySettings = _ref => {
     className: "sea-metadata-field-display-operation px-2",
     onClick: () => onToggleFieldsVisibility(true),
     "aria-label": _translate.default.gettext('Show all')
-  }, _translate.default.gettext('Show all'))))));
+  }, _translate.default.gettext('Show all')))));
 };
 var _default = exports.default = FieldDisplaySettings;

package/dist/components/popover/settings-popover/index.css

@@ -8,7 +8,6 @@
 
 .sea-metadata-settings-item {
   cursor: pointer;
-  height: 32px;
   padding-left: 14px;
   padding-right: 12px;
   font-size: 14px;

package/dist/components/popover/settings-popover/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
 var _components = require("../../../common/components");
 var _switch = _interopRequireDefault(require("../../../common/components/switch"));
 var _icons = _interopRequireDefault(require("../../icons"));
@@ -82,18 +83,36 @@ const SettingsPopover = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-metadata-settings-item-divider"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    id: "sea-metadata-field-display-popover",
     className: "sea-metadata-settings-item",
-    onClick: onFieldPopoverToggle
+    id: "sea-metadata-settings-item-field-display"
   }, /*#__PURE__*/_react.default.createElement("span", null, _translate.default.gettext('Properties to display on the card')), /*#__PURE__*/_react.default.createElement(_icons.default, {
-    symbol: 'arrow-right'
-  })), isShowPopover && /*#__PURE__*/_react.default.createElement(_fieldDisplaySettings.default, {
+    symbol: 'arrow-right',
+    width: "18px",
+    height: "18px"
+  }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: 'sea-metadata-settings-item-field-display',
+    trigger: "hover",
+    className: "sea-metadata-field-display-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    modifiers: [{
+      name: 'preventOverflow',
+      options: {
+        boundary: document.body
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [-8, 0]
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_fieldDisplaySettings.default, {
     fieldIconConfig: _constants.COLUMNS_ICON_CONFIG,
     fields: fields,
     onMoveField: onMoveField,
     onToggleField: onToggleField,
-    onToggleFieldsVisibility: onToggleFieldsVisibility,
-    onHidePopover: onFieldPopoverToggle
-  })));
+    onToggleFieldsVisibility: onToggleFieldsVisibility
+  })))));
 };
 var _default = exports.default = SettingsPopover;

package/dist/file-view-base.js

@@ -21,13 +21,10 @@ const FileViewBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _hooks.useMetadata)();
   const style = (0, _react.useMemo)(() => {
     const {
-      width,
       height
     } = settings.view_data;
-    if (width && height) {
+    if (height) {
       return {
-        width: width - 4,
-        // border
         height: height - 4 // border
       };
     }

package/dist/file-view.js

@@ -114,7 +114,9 @@ const FileView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       if (fileViewRef.current && fileViewRef.current.contains(event.target)) {
         return;
       }
-      setIsShowMenu(false);
+      setTimeout(() => {
+        setIsShowMenu(false);
+      }, 300);
     };
     document.addEventListener('click', onHideMenu, true);
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-database",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "private": false,
   "description": "This is a seafile database components",
   "main": "dist/index.js",