@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/commons/select/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _option = _interopRequireDefault(require("./_option"));
+var _fieldSetting = _interopRequireDefault(require("./field-setting"));
+require("./style.css");
+class Select extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleSelector", event => {
+      if (this.selector && !this.selector.contains(event.target)) {
+        this.setState({
+          isShowSelector: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "getCurrentOption", () => {
+      const {
+        value,
+        options
+      } = this.props;
+      const currentOption = value && options.find(option => option.value === value.value);
+      return currentOption;
+    });
+    (0, _defineProperty2.default)(this, "onSelectToggle", event => {
+      const {
+        isShowSelector
+      } = this.state;
+      const newValue = !isShowSelector;
+      if (newValue) {
+        this.dropdownContainerHasInit = false;
+      }
+      this.setState({
+        isShowSelector: newValue
+      });
+    });
+    (0, _defineProperty2.default)(this, "onChange", option => {
+      this.setState({
+        isShowSelector: false,
+        currentOption: option
+      });
+      this.props.onChange(option);
+    });
+    (0, _defineProperty2.default)(this, "onUpdateOption", option => {
+      this.setState({
+        currentOption: option
+      });
+      this.props.onChange(option);
+    });
+    (0, _defineProperty2.default)(this, "setContainerRef", ref => {
+      this.dropdownContainer = ref;
+    });
+    (0, _defineProperty2.default)(this, "setSelectorRef", ref => {
+      this.selector = ref;
+    });
+    this.state = {
+      isShowSelector: false,
+      currentOption: this.getCurrentOption()
+    };
+    this.dropdownContainerHasInit = false;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleSelector);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleSelector);
+  }
+  componentDidUpdate() {
+    const {
+      options
+    } = this.props;
+    const {
+      currentOption
+    } = this.state;
+    const activeIndex = currentOption && options.findIndex(option => option.value === currentOption.value);
+    if (activeIndex > -1) {
+      const scrollTop = 48 + (activeIndex + 1) * 32 - 150;
+      if (scrollTop < 0) return;
+      if (this.dropdownContainer && !this.dropdownContainerHasInit) {
+        this.dropdownContainerHasInit = true;
+        this.dropdownContainer.scrollTop = scrollTop;
+      }
+    }
+  }
+  render() {
+    const {
+      selectClass,
+      optionClass,
+      isSelected,
+      options,
+      placeholder
+    } = this.props;
+    const {
+      currentOption,
+      isShowSelector
+    } = this.state;
+    const isActive = isShowSelector || isSelected;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      ref: this.setSelectorRef,
+      className: `select-container ${selectClass || ''}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: `control-container ${isActive ? 'active' : ''}`,
+      onClick: this.onSelectToggle
+    }, !currentOption && /*#__PURE__*/_react.default.createElement("span", {
+      className: "label placeholder"
+    }, placeholder), currentOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: `control-icon ${currentOption.iconClass}`
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "control-label"
+    }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {
+      className: "operation"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-drop-down arrow"
+    }))), isShowSelector && /*#__PURE__*/_react.default.createElement("span", {
+      className: "select-popover"
+    }, /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
+      option: currentOption,
+      onUpdateOption: this.onUpdateOption
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "option-item-divider"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "option-item-wrapper",
+      ref: this.setContainerRef
+    }, options.map(option => {
+      const isActive = option.value === (currentOption && currentOption.value);
+      return /*#__PURE__*/_react.default.createElement(_option.default, {
+        key: option.value,
+        optionClass: optionClass,
+        isActive: isActive,
+        option: option,
+        onOptionChanged: this.onChange
+      });
+    }))));
+  }
+}
+var _default = exports.default = Select;

package/dist/basic-sdk/extension/commons/select/menu/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _item = _interopRequireDefault(require("./item"));
+var _menu = _interopRequireDefault(require("./menu"));
+_menu.default.Item = _item.default;
+var _default = exports.default = _menu.default;

package/dist/basic-sdk/extension/commons/select/menu/item.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+require("./style.css");
+class MenuItem extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "onClick", e => {
+      this.props.onClick(e);
+    });
+  }
+  render() {
+    const {
+      children,
+      itemClass,
+      iconClass,
+      isChecked
+    } = this.props;
+    const containerClass = `sdoc-menu-item ${itemClass || ''}`;
+    const itemIconClass = `menu-item-icon ${iconClass || ''}`;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: containerClass,
+      onClick: this.onClick
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: itemIconClass
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "menu-item-name"
+    }, children), isChecked && /*#__PURE__*/_react.default.createElement("span", {
+      className: "sdocfont sdoc-check-mark"
+    }));
+  }
+}
+var _default = exports.default = MenuItem;

package/dist/basic-sdk/extension/commons/select/menu/menu.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+class Menu extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "getStyle", () => {
+      const {
+        position
+      } = this.props;
+      const {
+        width
+      } = position;
+      return {
+        marginLeft: width - 10,
+        marginTop: '30px'
+      };
+    });
+  }
+  render() {
+    const style = this.getStyle();
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "sdoc-menu-container",
+      style: style
+    }, this.props.children);
+  }
+}
+var _default = exports.default = Menu;

package/dist/basic-sdk/extension/commons/select/menu/style.css

@@ -0,0 +1,43 @@
+.sdoc-menu-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 150px;
+  padding: 8px 0;
+  min-width: 80px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  color: #212529;
+  z-index: 1080;
+}
+
+.sdoc-menu-container .sdoc-menu-item {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  padding: 0 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.sdoc-menu-container .sdoc-menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-menu-container .sdoc-menu-item .menu-item-icon {
+  margin-right: 5px;
+  color: #aaa;
+}
+
+.sdoc-menu-container .sdoc-menu-item .sdoc-check-mark {
+  position: absolute;
+  right: 10px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  color: #aaa;
+}

package/dist/basic-sdk/extension/commons/select/style.css

@@ -0,0 +1,149 @@
+.select-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px;
+  font-weight: normal;
+}
+
+.select-container .control-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+}
+
+.select-container .control-container.active,
+.select-container .control-container:hover {
+  border: 1px solid #3C88FD;
+  box-shadow: 0 0 0 2px rgb(70 127 207 / 25%);
+}
+
+.select-container .control-container .placeholder {
+  color: #BFBFBF;
+}
+
+.select-container .control-container .control-icon {
+  font-size: 13px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+  margin-right: 5px;
+}
+
+.select-container .control-container .operation {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-container .control-container .arrow {
+  color: #949494;
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(.8);
+  transition: all .1s;
+}
+
+.select-container .control-container .arrow:hover {
+  color: #666;
+}
+
+.select-container .select-popover {
+  position: absolute;
+  left: 0;
+  display: flex;
+  min-width: 80px;
+  max-height: 265px;
+  margin-top: 4px;
+  padding: 8px 0;
+  flex-direction: column;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  z-index: 10;
+}
+
+.select-popover .option-item-divider {
+  margin-top: 8px;
+  border-top: 1px solid #EFEFEF;
+}
+
+.select-popover .sdoc-field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.select-popover .sdoc-field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-popover .sdoc-field-setting .sdoc-text-style {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.select-popover .sdoc-field-setting .op-icon {
+  font-size: 12px;
+  transform: rotate(90deg);
+  color: #aaa;
+}
+
+.select-popover .option-item-wrapper {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.select-popover .option-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.select-popover .option-item:hover {
+  background-color: #F5F5F5;
+}
+
+.select-popover .option-item.active {
+  background-color: #39A0FF;
+  color: #fff;
+}
+
+.select-popover .option-item.disable {
+  color: #aaa;
+  cursor: default;
+}
+
+.select-popover .option-item .item-icon {
+  font-size: 14px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+}
+
+.select-popover .option-item.active .item-icon {
+  color: #fff;
+}
+
+.select-popover .option-item .label {
+  margin: 0 5px;
+}

package/dist/basic-sdk/extension/commons/select-file-dialog/helpers.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parcelFileTypeIcon = exports.getSdocFileIcon = exports.getFileTypeIcon = exports.addDataToTree = void 0;
+var _context = _interopRequireDefault(require("../../../context"));
+var _constants = require("../../constants");
+const addDataToTree = (treeData, indexId, childrenData, path) => {
+  for (let i = 0; i < treeData.length; i++) {
+    var _treeData$i;
+    if (treeData[i].indexId === indexId) {
+      treeData[i].children = childrenData;
+      treeData[i].children.forEach(child => {
+        child.path = path + `/${child.name}`;
+      });
+      break;
+    }
+    if ((_treeData$i = treeData[i]) !== null && _treeData$i !== void 0 && _treeData$i.children) {
+      var _treeData$i2;
+      addDataToTree((_treeData$i2 = treeData[i]) === null || _treeData$i2 === void 0 ? void 0 : _treeData$i2.children, indexId, childrenData, path);
+    }
+  }
+  return treeData;
+};
+exports.addDataToTree = addDataToTree;
+const getSdocFileIcon = () => {
+  const server = _context.default.getSetting('serviceUrl');
+  return `${server}/media/img/file/256/sdoc.png`;
+};
+exports.getSdocFileIcon = getSdocFileIcon;
+const getFileTypeIcon = fileType => {
+  const imgResource = ['css', 'draw', 'excel', 'md', 'music', 'pdf', 'pic', 'ppt', 'psd', 'sdoc', 'txt', 'video', 'zip', 'word'];
+  if (imgResource.includes(fileType)) {
+    const server = _context.default.getSetting('serviceUrl');
+    return `${server}/media/img/file/256/${fileType}.png`;
+  } else {
+    return false;
+  }
+};
+exports.getFileTypeIcon = getFileTypeIcon;
+const parcelFileTypeIcon = fileName => {
+  var _Object$entries$find;
+  const newFileType = fileName.split('.').pop();
+  const fileExtType = (_Object$entries$find = Object.entries(_constants.FILEEXT_TYPE).find(_ref => {
+    let [, extensions] = _ref;
+    return extensions.includes(newFileType);
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
+  const fileTypeResult = fileExtType ? _constants.FILEEXT_TYPE_MAP[fileExtType] : newFileType;
+  const fileTypeIcon = getFileTypeIcon(fileTypeResult);
+  return fileTypeIcon;
+};
+exports.parcelFileTypeIcon = parcelFileTypeIcon;

package/dist/basic-sdk/extension/commons/select-file-dialog/index.css

@@ -0,0 +1,135 @@
+.sdoc-file-select-dialog {
+  max-width: 520px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-modal {
+  width: 520px;
+}
+
+.sdoc-file-select-dialog .sdoc-file-select-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+.sdoc-file-select-dialog .highlight-bg-color {
+  background-color: #FF8000;
+  border-color: #FF8000;
+}
+
+.sdoc-file-select-dialog .modal-header-container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 57px;
+  padding: 16px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.modal-title-container {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.search-container {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 8px;
+}
+
+.sdoc-close-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+}
+
+.search-container .search-icon-container .sdoc-find-replace,
+.modal-header-container .sdoc-close1 {
+  font-size: 16px;
+  color: #666666;
+}
+
+.search-container .search-icon-container  .sdoc-find-replace:hover,
+.modal-header-container .sdoc-close1:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  height: 28px;
+  width: 28px;
+}
+
+.sdoc-files-search-popover{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+}
+
+.sdoc-files-search-popover-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+}
+
+.sdoc-search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.sdoc-search-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 25px;
+  line-height: 28px;
+
+}
+
+.sdoc-search-input::placeholder {
+  color: #868E96;
+  font-size: 14px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close,
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close1,
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-find-replace {
+  color: #666666;
+  font-size: 14px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close1:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  height: 20px;
+  width: 20px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-search {
+  position: absolute;
+  left: 4px;
+}
+
+.sdoc-files-search-popover-container .sdoc-search-wrapper .sdoc-close {
+  position: absolute;
+  right: 4px;
+}