@seafile/sdoc-editor 3.0.0 → 3.0.2

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/index.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _modalPortal = _interopRequireDefault(require("../modal-portal.js"));
+var _lib = _interopRequireDefault(require("./lib.png"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group.js"));
+require("./index.css");
+var DropdownSelect = /*#__PURE__*/function (_Component) {
+  function DropdownSelect(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DropdownSelect);
+    _this = (0, _callSuper2["default"])(this, DropdownSelect, [props]);
+    (0, _defineProperty2["default"])(_this, "onSelectToggle", function (event) {
+      event.preventDefault();
+      if (_this.state.isShowSelectOptions) event.stopPropagation();
+      var eventClassName = event.target.className;
+      if (eventClassName.indexOf('sf2-icon-close') > -1 || eventClassName === 'option-group-search') return;
+      if (event.target.value === '') return;
+      _this.setState({
+        isShowSelectOptions: !_this.state.isShowSelectOptions
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onClickOutside", function (event) {
+      if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "closeSelect", function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "getSelectedOptionTop", function () {
+      if (!_this.selector) return 38;
+      var _this$selector$getBou = _this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
+      return height;
+    });
+    (0, _defineProperty2["default"])(_this, "getFilterOptions", function (searchValue) {
+      var options = _this.props.options;
+      var validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(function (option) {
+        return option.name.toLowerCase().includes(validSearchVal);
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onSelectOption", function (option) {
+      _this.props.onSelectOption(option);
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    });
+    _this.state = {
+      isShowSelectOptions: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(DropdownSelect, _Component);
+  return (0, _createClass2["default"])(DropdownSelect, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _nextProps$selectedOp,
+        _this$props$selectedO,
+        _this2 = this;
+      if (((_nextProps$selectedOp = nextProps.selectedOption) === null || _nextProps$selectedOp === void 0 ? void 0 : _nextProps$selectedOp.id) !== ((_this$props$selectedO = this.props.selectedOption) === null || _this$props$selectedO === void 0 ? void 0 : _this$props$selectedO.id)) {
+        // when selectedOption change and dom rendered, calculate top
+        setTimeout(function () {
+          _this2.forceUpdate();
+        }, 1);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props = this.props,
+        className = _this$props.className,
+        selectedOption = _this$props.selectedOption,
+        options = _this$props.options,
+        placeholder = _this$props.placeholder,
+        searchPlaceholder = _this$props.searchPlaceholder,
+        noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
+        isInModal = _this$props.isInModal,
+        _this$props$hasIcon = _this$props.hasIcon,
+        hasIcon = _this$props$hasIcon === void 0 ? false : _this$props$hasIcon;
+      var isShowSelectOptions = this.state.isShowSelectOptions;
+      var clazzName = (0, _classnames["default"])('sdoc-select group-select custom-select', {
+        'focus': isShowSelectOptions
+      }, className);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(node) {
+          return _this3.selector = node;
+        },
+        className: clazzName,
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "selected-option"
+      }, selectedOption && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-show"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-item mr-1 px-1"
+      }, hasIcon && /*#__PURE__*/_react["default"].createElement("img", {
+        src: _lib["default"],
+        width: '24px',
+        alt: "",
+        className: "mr-2"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-item-name"
+      }, selectedOption.name))), !selectedOption && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "sdocfont sdoc-font-down"
+      })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react["default"].createElement(_selectOptionGroup["default"], {
+        selectedOption: selectedOption,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react["default"].createElement(_modalPortal["default"], null, /*#__PURE__*/_react["default"].createElement(_selectOptionGroup["default"], {
+        hasIcon: hasIcon,
+        className: className,
+        selectedOption: selectedOption,
+        position: this.selector.getBoundingClientRect(),
+        isInModal: isInModal,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      })));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = DropdownSelect;

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/option.css

@@ -0,0 +1,49 @@
+.sdoc-options .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: 6px 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sdoc-options .option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.sdoc-options .option.option-active .sf2-icon-tick,
+.sdoc-options .option.option-active .select-option-name {
+  color: #fff !important;
+}
+
+.sdoc-options .option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
+.sdoc-options .option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.sdoc-options .option-group-selector-single-select .select-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sdoc-options .option-group-selector-single-select .option:hover,
+.sdoc-options .option-group-selector-single-select .option.option-active,
+.sdoc-options .option-group-selector-multiple-select .option:hover,
+.sdoc-options .option-group-selector-multiple-select .option.option-active {
+  background-color: #f5f5f5;
+}

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/option.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+require("./option.css");
+var Option = /*#__PURE__*/function (_Component) {
+  function Option() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Option);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2["default"])(this, Option, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "onSelectOption", function (e) {
+      e.stopPropagation();
+      _this.props.onSelectOption(_this.props.option);
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseEnter", function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(_this.props.index);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseLeave", function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(-1);
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(Option, _Component);
+  return (0, _createClass2["default"])(Option, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.isActive ? 'option option-active' : 'option',
+        onClick: this.onSelectOption,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }, this.props.children);
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = Option;

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/select-option-group.css

@@ -0,0 +1,37 @@
+.sdoc-options.option-group {
+  position: absolute;
+  padding-top: 0;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: 0.5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, .12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+[data-bs-theme=dark] .sdoc-options.option-group {
+  box-shadow: none;
+}
+
+.sdoc-options.option-group .option-group-search {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+}
+
+.sdoc-options.option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: #f5f5f5;
+}
+
+.sdoc-options.option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/select-option-group.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = _interopRequireDefault(require("./constants"));
+var _lib = _interopRequireDefault(require("./lib.png"));
+var _option = _interopRequireDefault(require("./option"));
+require("./select-option-group.css");
+var OPTION_HEIGHT = 32;
+var SelectOptionGroup = /*#__PURE__*/function (_Component) {
+  function SelectOptionGroup(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, SelectOptionGroup);
+    _this = (0, _callSuper2["default"])(this, SelectOptionGroup, [props]);
+    (0, _defineProperty2["default"])(_this, "handleDocumentClick", function (e) {
+      _this.props.onClickOutside(e);
+    });
+    (0, _defineProperty2["default"])(_this, "resetMenuStyle", function () {
+      var _this$props = _this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
+      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
+        top = _this$optionGroupRef$.top,
+        height = _this$optionGroupRef$.height;
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          _this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        _this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          var borderWidth = 2;
+          _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onHotKey", function (event) {
+      var keyCode = event.keyCode;
+      if (keyCode === _constants["default"].UpArrow) {
+        _this.onPressUp();
+      } else if (keyCode === _constants["default"].DownArrow) {
+        _this.onPressDown();
+      } else if (keyCode === _constants["default"].Enter) {
+        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+        if (option) {
+          _this.props.onSelectOption(option);
+        }
+      } else if (keyCode === _constants["default"].Tab || keyCode === _constants["default"].Escape) {
+        _this.props.closeSelect();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onPressUp", function () {
+      if (_this.state.activeIndex > 0) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex - 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onPressDown", function () {
+      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex + 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseDown", function (e) {
+      var isInModal = _this.props.isInModal;
+      // prevent event propagation when click option or search input
+      if (isInModal) {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "scrollContent", function () {
+      var _this$optionGroupCont = _this.optionGroupContentRef,
+        offsetHeight = _this$optionGroupCont.offsetHeight,
+        scrollTop = _this$optionGroupCont.scrollTop;
+      _this.setState({
+        disableHover: true
+      });
+      _this.timer = setTimeout(function () {
+        _this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (_this.state.activeIndex * OPTION_HEIGHT === 0) {
+        _this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (_this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (_this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "changeIndex", function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onChangeSearch", function (searchVal) {
+      _this.setState({
+        searchVal: searchVal || '',
+        activeIndex: -1
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "clearValue", function () {
+      _this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "renderOptGroup", function (searchVal) {
+      var _this$props2 = _this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption,
+        selectedOption = _this$props2.selectedOption,
+        hasIcon = _this$props2.hasIcon;
+      _this.filterOptions = _this.props.getFilterOptions(searchVal);
+      if (_this.filterOptions.length === 0) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+      return _this.filterOptions.map(function (option, index) {
+        var isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id;
+        return /*#__PURE__*/_react["default"].createElement(_option["default"], {
+          key: "".concat(option.id, "-").concat(index),
+          index: index,
+          isActive: _this.state.activeIndex === index,
+          option: option,
+          onSelectOption: onSelectOption,
+          changeIndex: _this.changeIndex,
+          disableHover: _this.state.disableHover
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "d-flex"
+        }, hasIcon && /*#__PURE__*/_react["default"].createElement("img", {
+          src: _lib["default"],
+          width: '24px',
+          alt: "",
+          className: "mr-2"
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "option-label"
+        }, option.label)), isSelected && /*#__PURE__*/_react["default"].createElement("i", {
+          className: "sdocfont sdoc-check-mark text-gray font-weight-bold"
+        }));
+      });
+    });
+    _this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    _this.filterOptions = null;
+    _this.timer = null;
+    _this.searchInputRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _inherits2["default"])(SelectOptionGroup, _Component);
+  return (0, _createClass2["default"])(SelectOptionGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      window.addEventListener('keydown', this.onHotKey);
+      document.addEventListener('mousedown', this.handleDocumentClick);
+      setTimeout(function () {
+        _this2.resetMenuStyle();
+      }, 1);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.filterOptions = null;
+      this.timer && clearTimeout(this.timer);
+      window.removeEventListener('keydown', this.onHotKey);
+      document.removeEventListener('mousedown', this.handleDocumentClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        top = _this$props3.top,
+        left = _this$props3.left,
+        minWidth = _this$props3.minWidth,
+        isInModal = _this$props3.isInModal,
+        position = _this$props3.position,
+        className = _this$props3.className;
+      var searchVal = this.state.searchVal;
+      var style = {
+        top: top || 0,
+        left: left || 0
+      };
+      if (minWidth) {
+        style = {
+          top: top || 0,
+          left: left || 0,
+          minWidth: minWidth
+        };
+      }
+      if (isInModal) {
+        style = {
+          position: 'fixed',
+          left: position.x,
+          top: position.y + position.height,
+          minWidth: position.width,
+          opacity: 0
+        };
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('sdoc-options option-group', className ? 'option-group-' + className : ''),
+        ref: function ref(_ref2) {
+          return _this3.optionGroupRef = _ref2;
+        },
+        style: style,
+        onMouseDown: this.onMouseDown
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "option-group-content",
+        ref: function ref(_ref) {
+          return _this3.optionGroupContentRef = _ref;
+        }
+      }, this.renderOptGroup(searchVal)));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = SelectOptionGroup;