@seafile/seafile-database 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-database",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "private": false,
   "description": "This is a seafile database components",
   "main": "dist/index.js",
@@ -31,7 +31,8 @@
     "prepare": "husky install",
     "lint": "lint-staged",
     "fix-locale": "eslint --ext .jsx,.js ./src/locale --fix",
-    "translate": "node ./scripts/translate ./src"
+    "translate": "node ./scripts/translate ./src",
+    "mock": "nodemon ./mock/server.js"
   },
   "lint-staged": {
     "src/**/*.js": [
@@ -95,6 +96,7 @@
     "is-wsl": "^1.1.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "json-server": "0.17.4",
     "koa": "2.16.0",
     "koa-router": "7.3.0",
     "koa-send": "5.0.1",
@@ -102,6 +104,7 @@
     "lint-staged": "15.4.3",
     "mini-css-extract-plugin": "^2.4.5",
     "node-polyfill-webpack-plugin": "2.0.1",
+    "nodemon": "3.1.11",
     "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^6.2.1",

package/dist/components/view-toolbar/views/all-views/index.css

@@ -1,85 +0,0 @@
-@import url('../view-item/index.css');
-
-.sea-metadata-views .sea-metadata-all-views-container {
-  padding: 0 8px;
-}
-
-.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item {
-  height: 24px;
-  padding: 2px 4px;
-  border-radius: 3px;
-}
-
-.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item:hover {
-  background-color: #efefef;
-}
-
-.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item.active::before {
-  display: none;
-}
-
-.sea-metadata-views .sea-metadata-all-views-container .sea-qa-icon-svg-down {
-  width: 1rem !important;
-  height: 1rem !important;
-  color: #666;
-}
-
-.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item {
-  width: 24px;
-  height: 24px;
-  padding: 4px 6px;
-}
-
-.sea-metadata-view-dropdown-menu .all-views-search-wrapper {
-  padding: 8px 16px;
-}
-
-.sea-metadata-view-dropdown-menu .all-views-list-wrapper {
-  max-height: 240px;
-  min-height: 100px;
-  overflow-y: auto;
-  width: 300px;
-}
-
-.all-views-list-wrapper .dropdown-item.view-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-}
-
-.all-views-list-wrapper .dropdown-item.view-item.sea-metadata-view-item-next-position-before::before {
-  content: '';
-  border: 0.5px solid #555;
-  border-radius: 1px;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-}
-
-.all-views-list-wrapper .dropdown-item.view-item.sea-metadata-view-item-next-position-after::after {
-  content: '';
-  border: 0.5px solid #555;
-  border-radius: 1px;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-}
-
-.all-views-list-wrapper .dropdown-item.view-item .view-item-left .sea-qa-icon-svg:hover {
-  cursor: grab;
-}
-
-.all-views-list-wrapper .dropdown-item.view-item .view-item-right .sea-qa-icon-svg {
-  margin-right: 0;
-}
-
-.all-views-list-wrapper .all-views-empty-tip {
-  padding-left: 16px;
-}
-
-.all-views-list-wrapper .tip-default {
-  font-size: 14px;
-}

package/dist/components/view-toolbar/views/all-views/index.js

@@ -1,165 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _components = require("../../../../common/components");
-var _icons = _interopRequireDefault(require("../../../icons"));
-var _keyCodes = require("../../../../constants/keyCodes");
-var _translate = _interopRequireDefault(require("../../../../lang/translate"));
-require("./index.css");
-const AllViews = _ref => {
-  let {
-    viewID,
-    allViews = [],
-    isSelected,
-    onMove,
-    toggleView
-  } = _ref;
-  const [isShowDropdownMenu, setIsShowDropdownMenu] = (0, _react.useState)(false);
-  const [dropRelativePosition, setDropRelativePosition] = (0, _react.useState)('');
-  const [currentOverViewId, setCurrentOverViewId] = (0, _react.useState)('');
-  const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const viewRef = (0, _react.useRef)(null);
-  const menuStyle = (0, _react.useRef)({});
-  const enteredCounter = (0, _react.useRef)(0);
-  const onDragStart = (0, _react.useCallback)((event, viewId) => {
-    event.stopPropagation();
-    event.dataTransfer.setDragImage(event.target.parentNode, 10, 10);
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('text/plain', viewId);
-  }, []);
-  const onDragEnter = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    enteredCounter.current = enteredCounter.current + 1;
-  }, []);
-  const onDragOver = (0, _react.useCallback)((event, viewId) => {
-    if (event.dataTransfer.dropEffect === 'copy') return;
-    event.stopPropagation();
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-    const dropRelativePosition = event.nativeEvent.offsetY <= event.target.clientHeight / 2 ? 'before' : 'after';
-    setDropRelativePosition(dropRelativePosition);
-    setCurrentOverViewId(viewId);
-  }, []);
-  const onDragLeave = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    enteredCounter.current = enteredCounter.current - 1;
-    if (!enteredCounter.current === 0) return;
-    setDropRelativePosition('');
-    setCurrentOverViewId('');
-  }, []);
-  const onDrop = (0, _react.useCallback)((event, viewId) => {
-    event.stopPropagation();
-    event.preventDefault();
-    enteredCounter.current = 0;
-    const moveViewID = event.dataTransfer.getData('text/plain');
-    if (moveViewID !== viewId) {
-      onMove && onMove(moveViewID, viewId, dropRelativePosition);
-    }
-    setDropRelativePosition('');
-    setCurrentOverViewId('');
-  }, [dropRelativePosition, onMove]);
-  const openDropdownMenu = (0, _react.useCallback)(() => {
-    const {
-      left,
-      bottom
-    } = viewRef.current.getBoundingClientRect();
-    menuStyle.current = {
-      left,
-      top: bottom + 12
-    }; // 12 is (view item height) - (all views button height)
-    setIsShowDropdownMenu(true);
-  }, []);
-  const closeDropdown = (0, _react.useCallback)(() => {
-    setIsShowDropdownMenu(false);
-    setSearchValue('');
-  }, []);
-  const views = (0, _react.useMemo)(() => {
-    if (searchValue) {
-      return allViews.filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase()));
-    }
-    return allViews;
-  }, [allViews, searchValue]);
-  const onKeyDown = (0, _react.useCallback)(event => {
-    if (event.keyCode === _keyCodes.KeyCodes.ChineseInputMethod || event.keyCode === _keyCodes.KeyCodes.LeftArrow || event.keyCode === _keyCodes.KeyCodes.RightArrow) {
-      event.stopPropagation();
-    }
-  }, []);
-  const onSearchValueChange = (0, _react.useCallback)(newSearchValue => {
-    if (searchValue === newSearchValue) return;
-    setSearchValue(newSearchValue);
-  }, [searchValue]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "sea-metadata-view-container sea-metadata-all-views-container",
-    onClick: openDropdownMenu
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)('sea-metadata-view-item', {
-      'active': isSelected
-    }),
-    ref: viewRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sea-metadata-view-item-operation-down"
-  }, /*#__PURE__*/React.createElement(_icons.default, {
-    symbol: "down"
-  })))), isShowDropdownMenu && /*#__PURE__*/React.createElement(_components.ClickOutside, {
-    onClickOutside: closeDropdown
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sea-qa-dropdown-menu dropdown-menu position-fixed sea-metadata-view-dropdown-menu",
-    style: menuStyle.current
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "all-views-search-wrapper"
-  }, /*#__PURE__*/React.createElement(_components.SearchInput, {
-    autoFocus: true,
-    isShowSearchIcon: true,
-    value: searchValue,
-    size: 28,
-    placeholder: _translate.default.gettext('Search view'),
-    onKeyDown: onKeyDown,
-    onChange: onSearchValueChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "all-views-list-wrapper"
-  }, views.map(view => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: view._id,
-      onClick: () => {
-        toggleView(view._id);
-      },
-      className: (0, _classnames.default)('dropdown-item sea-qa-dropdown-item view-item', {
-        'sea-metadata-view-item-next-position-before': dropRelativePosition === 'before' && currentOverViewId === view._id,
-        'sea-metadata-view-item-next-position-after': dropRelativePosition === 'after' && currentOverViewId === view._id
-      }),
-      onDragStart: event => {
-        onDragStart(event, view._id);
-      },
-      onDragEnter: onDragEnter,
-      onDragOver: event => {
-        onDragOver(event, view._id);
-      },
-      onDragLeave: event => {
-        onDragLeave(event, view._id);
-      },
-      onDrop: event => {
-        onDrop(event, view._id);
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "view-item-left",
-      draggable: true
-    }, /*#__PURE__*/React.createElement(_icons.default, {
-      symbol: "drag"
-    }), view.name), /*#__PURE__*/React.createElement("span", {
-      className: "view-item-right"
-    }, view._id === viewID && /*#__PURE__*/React.createElement(_icons.default, {
-      symbol: "check"
-    })));
-  }), views.length === 0 && /*#__PURE__*/React.createElement("div", {
-    className: "all-views-empty-tip"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tip-default"
-  }, _translate.default.gettext('No results')))))));
-};
-var _default = exports.default = AllViews;

package/dist/components/view-toolbar/views/index.css

@@ -1,22 +0,0 @@
-.sea-metadata-views { 
-  height: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 0 8px 0 16px;
-  overflow: hidden;
-}
-
-.sea-metadata-views .sea-metadata-views-nav-container {
-  height: 100%;
-  margin-right: 8px;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  position: relative;
-  scrollbar-width: none;
-  display: inline-flex;
-}
-
-.sea-metadata-views .sea-metadata-views-nav-scroll-btns .scroll-active {
-  background-color: #efefef;
-}

package/dist/components/view-toolbar/views/index.js

@@ -1,215 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _components = require("../../../common/components");
-var _typeDetection = require("../../../common/utils/type-detection");
-var _iconButton = _interopRequireDefault(require("../../icon-button"));
-var _hooks = require("../../../hooks");
-var _appContext = require("../../../hooks/app-context");
-var _translate = _interopRequireDefault(require("../../../lang/translate"));
-var _allViews = _interopRequireDefault(require("./all-views"));
-var _viewItem = _interopRequireDefault(require("./view-item"));
-require("./index.css");
-const Views = _ref => {
-  var _getViewById;
-  let {
-    view,
-    toggleView
-  } = _ref;
-  const {
-    context
-  } = (0, _appContext.useAppContext)();
-  const [canScrollPrev, setCanScrollPrev] = (0, _react.useState)(false);
-  const [canScrollNext, setCanScrollNext] = (0, _react.useState)(false);
-  const [canViewsScroll, setViewsScroll] = (0, _react.useState)(true);
-  const [isShowViewNameDialog, setIsShowViewNameDialog] = (0, _react.useState)(false);
-  const isRenameRef = (0, _react.useRef)(false);
-  const viewsNavContainerRef = (0, _react.useRef)(null);
-  const {
-    isLoading,
-    viewsData,
-    viewID,
-    insertView,
-    modifyView,
-    moveView,
-    duplicateView,
-    deleteView,
-    getViewById
-  } = (0, _hooks.useViewsData)();
-  const allViews = (0, _react.useMemo)(() => {
-    if (isLoading) return [];
-    const {
-      navigation,
-      views
-    } = viewsData;
-    if (!navigation || !views) return [];
-    return navigation.map(n => views.find(v => v._id === n._id));
-  }, [isLoading, viewsData]);
-  const isSelected = (0, _react.useMemo)(() => {
-    if (viewID && !allViews.find(v => v._id === viewID)) return true;
-    return false;
-  }, [allViews, viewID]);
-  const openViewNameDialog = (0, _react.useCallback)(isRename => {
-    isRenameRef.current = Boolean(isRename);
-    setIsShowViewNameDialog(true);
-  }, []);
-  const closeViewNameDialog = (0, _react.useCallback)(() => {
-    isRenameRef.current = false;
-    setIsShowViewNameDialog(false);
-  }, []);
-  const checkAvailableScrollType = (0, _react.useCallback)(() => {
-    let {
-      offsetWidth,
-      scrollWidth,
-      scrollLeft
-    } = viewsNavContainerRef.current;
-    let _canScrollPrev = false;
-    let _canScrollNext = false;
-    if (scrollLeft > 0) {
-      _canScrollPrev = true;
-    }
-    if (scrollLeft + offsetWidth + 1 < scrollWidth) {
-      _canScrollNext = true;
-    }
-    if (_canScrollPrev !== canScrollPrev || _canScrollNext !== canScrollNext) {
-      setCanScrollPrev(_canScrollPrev);
-      setCanScrollNext(_canScrollNext);
-    }
-  }, [canScrollPrev, canScrollNext]);
-  const isContainerOverflowing = (0, _react.useCallback)(() => {
-    if (!viewsNavContainerRef.current) {
-      return false;
-    }
-    const container = viewsNavContainerRef.current;
-    const containerWidth = container.offsetWidth;
-    const childrenTotalWidth = container.scrollWidth;
-    return childrenTotalWidth > containerWidth;
-  }, []);
-  (0, _react.useEffect)(() => {
-    setViewsScroll(isContainerOverflowing());
-    const handleResize = () => {
-      setViewsScroll(isContainerOverflowing());
-    };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [isContainerOverflowing]);
-  const onScroll = (0, _react.useCallback)(() => {
-    checkAvailableScrollType();
-  }, [checkAvailableScrollType]);
-  const onWheel = (0, _react.useCallback)(event => {
-    const {
-      wheelDeltaX,
-      wheelDeltaY
-    } = event.nativeEvent;
-    // Mouse wheel scrolls, wheelDeltaY is not 0, wheelDeltaX is 0 (scroll up and down)
-    if (wheelDeltaY !== 0 && wheelDeltaX === 0) {
-      let tablesScrollLeft = viewsNavContainerRef.current.scrollLeft - wheelDeltaY;
-      if (tablesScrollLeft <= 0 && viewsNavContainerRef.current.scrollLeft > 0) {
-        viewsNavContainerRef.current.scrollLeft = 0;
-        return;
-      }
-      if (tablesScrollLeft > 0 && tablesScrollLeft < viewsNavContainerRef.current.clientWidth) {
-        viewsNavContainerRef.current.scrollLeft = tablesScrollLeft;
-      }
-    }
-  }, []);
-  const onScrollControlClick = (0, _react.useCallback)(type => {
-    const {
-      offsetWidth,
-      scrollWidth,
-      scrollLeft
-    } = viewsNavContainerRef.current;
-    let targetScrollLeft;
-    if (type === 'left') {
-      if (scrollLeft === 0) return;
-      targetScrollLeft = Math.max(scrollLeft - offsetWidth, 0);
-    } else if (type === 'right') {
-      if (scrollLeft + offsetWidth === scrollWidth) return;
-      targetScrollLeft = Math.min(scrollLeft + offsetWidth, scrollWidth - offsetWidth);
-    }
-    let timer = null;
-    const startScrollLeft = scrollLeft;
-    const distance = targetScrollLeft - startScrollLeft;
-    const stepCount = 20;
-    let currentStep = 0;
-    timer = setInterval(() => {
-      currentStep++;
-      const progress = currentStep / stepCount;
-      const easeProgress = 1 - Math.pow(1 - progress, 3);
-      const newScrollLeft = startScrollLeft + distance * easeProgress;
-      viewsNavContainerRef.current.scrollLeft = newScrollLeft;
-      if (currentStep >= stepCount) {
-        viewsNavContainerRef.current.scrollLeft = targetScrollLeft;
-        clearInterval(timer);
-      }
-    }, 16);
-  }, []);
-  (0, _react.useEffect)(() => {
-    checkAvailableScrollType();
-  }, [allViews, checkAvailableScrollType]);
-  const deleteAble = allViews.length > 1 && context.canDeleteView();
-  const moveAble = context.canMoveView();
-  const duplicateAble = context.canDuplicateView();
-  const modifyAble = context.canModifyView();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "sea-metadata-views"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sea-metadata-views-nav-container",
-    ref: viewsNavContainerRef,
-    onScroll: onScroll,
-    onWheel: onWheel
-  }, allViews.map(v => {
-    const isSelect = (0, _typeDetection.isFunction)(toggleView) && v._id === viewID;
-    return /*#__PURE__*/React.createElement(_viewItem.default, {
-      key: v._id,
-      isSelect: isSelect,
-      view: v,
-      modifyAble: modifyAble,
-      deleteAble: deleteAble,
-      moveAble: moveAble,
-      duplicateAble: duplicateAble,
-      onSelect: toggleView,
-      onModify: () => openViewNameDialog(true),
-      onMove: moveView,
-      onDelete: deleteView,
-      onDuplicate: duplicateView
-    });
-  })), canViewsScroll && /*#__PURE__*/React.createElement("div", {
-    className: "sea-metadata-views-nav-scroll-btns d-flex align-items-center mr-2"
-  }, /*#__PURE__*/React.createElement(_allViews.default, {
-    viewID: viewID,
-    allViews: allViews,
-    isSelected: isSelected,
-    onMove: moveView,
-    toggleView: toggleView
-  }), /*#__PURE__*/React.createElement(_iconButton.default, {
-    icon: "left",
-    className: (0, _classnames.default)('scroll-control-btn scroll-prev', {
-      'scroll-active': canScrollPrev
-    }),
-    onClick: () => onScrollControlClick('left')
-  }), /*#__PURE__*/React.createElement(_iconButton.default, {
-    icon: "right",
-    className: (0, _classnames.default)('scroll-control-btn scroll-next ml-2', {
-      'scroll-active': canScrollNext
-    }),
-    onClick: () => onScrollControlClick('right')
-  })), context.canInsertView() && /*#__PURE__*/React.createElement(_iconButton.default, {
-    icon: "add",
-    onClick: () => openViewNameDialog()
-  })), isShowViewNameDialog && /*#__PURE__*/React.createElement(_components.CustomizeNameDialog, {
-    title: isRenameRef.current ? _translate.default.gettext('Rename view') : _translate.default.gettext('New view'),
-    value: isRenameRef.current ? ((_getViewById = getViewById(view._id)) === null || _getViewById === void 0 ? void 0 : _getViewById.name) || '' : '',
-    onToggle: closeViewNameDialog,
-    onSubmit: isRenameRef.current ? name => modifyView(view._id, {
-      name
-    }) : insertView
-  }));
-};
-var _default = exports.default = Views;

package/dist/components/view-toolbar/views/view-item/index.css

@@ -1,83 +0,0 @@
-.sea-metadata-views .sea-metadata-view-container {
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.sea-metadata-views .sea-metadata-view-container:first-child {
-  padding-left: 0;
-}
-
-.sea-metadata-views .sea-metadata-view-next-position-before::before,
-.sea-metadata-views .sea-metadata-view-next-position-after::after {
-  content: '';
-  border: 1px solid #555;
-  border-radius: 1px;
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-}
-
-.sea-metadata-views .sea-metadata-view-next-position-before::before {
-  left: 0;
-}
-
-.sea-metadata-views .sea-metadata-view-next-position-after::after {
-  right: -2px;
-}
-
-.sea-metadata-views .sea-metadata-view-item { 
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.sea-metadata-views .sea-metadata-view-item.disabled {
-  cursor: default;
-}
-
-.sea-metadata-views .sea-metadata-view-item.active { 
-  color: #ED7109;
-  position: relative;
-  transition: color .3;
-}
-
-.sea-metadata-views .sea-metadata-view-item.active::before { 
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: #ED7109;
-}
-
-.sea-metadata-views .sea-metadata-view-item-operation-down {
-  height: 12px;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sea-metadata-view-dropdown-menu {
-  display: block;
-}
-
-.sea-metadata-view-dropdown-menu .dropdown-item .sea-qa-icon-svg {
-  margin-right: 10px;
-  height: 14px;
-  width: 14px;
-  color: #666;
-  margin-top: -2px;
-}
-
-.sea-metadata-view-dropdown-menu .dropdown-item:hover .sea-qa-icon-svg {
-  color: #FFF;
-}