dtable-ui-component 5.3.0-alpha1 → 5.3.1-beta

package/lib/MultipleSelectEditor/index.js

@@ -1,188 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _lang = require("../lang");
-var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _selectEditor = require("../select-editor");
-require("./index.css");
-class MultipleSelectEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onMouseDown = e => {
-      if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
-        this.onClosePopover();
-      }
-    };
-    this.getFormattedOptions = () => {
-      let {
-        newValue
-      } = this.state;
-      if (Array.isArray(newValue) && newValue.length > 0) {
-        return newValue.map(option_id => {
-          return this.options.find(option => option.id === option_id);
-        }).filter(option => !!option);
-      }
-      return [];
-    };
-    this.onAddOptionToggle = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-      if (this.props.isReadOnly) {
-        return;
-      }
-      let isPopoverShow = !this.state.isPopoverShow;
-      if (isPopoverShow) {
-        let popoverPosition = this.caculatePopoverPosition();
-        this.setState({
-          isPopoverShow,
-          popoverPosition
-        });
-      } else {
-        this.setState({
-          isPopoverShow
-        });
-      }
-    };
-    this.onCommit = newValue => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      updated[column.key] = newValue;
-      this.props.onCommit(updated);
-    };
-    this.onOptionItemToggle = option => {
-      let newValue = this.state.newValue.slice();
-      let optionIndex = newValue.findIndex(option_id => option_id === option.id);
-      if (optionIndex !== -1) {
-        newValue.splice(optionIndex, 1);
-      } else {
-        newValue.push(option.id);
-      }
-      this.setState({
-        newValue
-      }, () => {
-        this.onCommit(newValue);
-      });
-    };
-    this.onDeleteOption = option => {
-      let newValue = this.state.newValue.slice();
-      let optionIndex = newValue.findIndex(option_id => option_id === option.id);
-      newValue.splice(optionIndex, 1);
-      this.setState({
-        newValue
-      }, () => {
-        this.onCommit(newValue);
-      });
-    };
-    this.onAddNewOption = optionName => {
-      this.props.onAddNewOption(optionName);
-      this.onClosePopover();
-    };
-    this.caculatePopoverPosition = () => {
-      const POPOVER_MAX_HEIGHT = 200;
-      let innerHeight = window.innerHeight;
-      let {
-        top,
-        height
-      } = this.editor.getClientRects()[0];
-      let isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
-      let position = {
-        top: height + 1,
-        left: 0
-      };
-      if (!isBelow) {
-        let bottom = height + 1;
-        position = {
-          bottom: bottom,
-          left: 0
-        };
-      }
-      return position;
-    };
-    this.onClosePopover = () => {
-      this.setState({
-        isPopoverShow: false
-      });
-    };
-    this.setEditorContainerRef = editorContainer => {
-      this.editorContainer = editorContainer;
-    };
-    this.setEditorRef = editor => {
-      this.editor = editor;
-    };
-    this.state = {
-      newValue: Array.isArray(props.value) ? props.value : [],
-      isPopoverShow: false,
-      popoverPosition: {}
-    };
-    let {
-      column: _column
-    } = this.props;
-    this.options = _column.data && (_column.data.options || []);
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMouseDown);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMouseDown);
-  }
-  render() {
-    let {
-      isPopoverShow,
-      popoverPosition
-    } = this.state;
-    let options = this.options;
-    let selectedOptions = this.getFormattedOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorContainerRef,
-      className: "cell-editor dtable-ui-multiple-select-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorRef,
-      className: "dtable-ui-select-editor-container",
-      onClick: this.onAddOptionToggle
-    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_an_option')
-    }), selectedOptions.length !== 0 && selectedOptions.map(option => {
-      return /*#__PURE__*/_react.default.createElement(_selectEditor.SelectEditorOption, {
-        key: option.id,
-        option: option,
-        isShowRemoveIcon: true,
-        onDeleteSelectOption: this.onDeleteOption
-      });
-    })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(min-width: 768px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditorPopover, {
-      popoverPosition: popoverPosition,
-      options: options,
-      selectedOptions: selectedOptions,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption
-    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(max-width: 767.8px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditorPopover, {
-      isReadOnly: this.props.isReadOnly,
-      value: this.state.newValue,
-      column: this.props.column,
-      options: options,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isShowRemoveIcon: true,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption,
-      onClosePopover: this.onClosePopover
-    }))));
-  }
-}
-MultipleSelectEditor.defaultProps = {
-  isReadOnly: false,
-  value: []
+const MultipleSelectEditor = _ref => {
+  let {
+    value: oldValue,
+    ...props
+  } = _ref;
+  const value = oldValue ? Array.isArray(oldValue) ? oldValue : [oldValue] : [];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditor, Object.assign({}, props, {
+    value: value
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditor, Object.assign({}, props, {
+    value: value
+  }))));
 };
 var _default = exports.default = MultipleSelectEditor;

package/lib/NumberEditor/index.js

@@ -6,129 +6,116 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _dtableUtils = require("dtable-utils");
 var _constants = require("../constants");
 var _utils = require("../utils/utils");
 class NumberEditor extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.onEditorHandle = () => {
-      if (this.props.isReadOnly) {
-        return;
-      }
-      this.setState({
-        isEditorShow: true,
-        inputValue: this.state.textValue
-      }, () => {
-        this.input.focus();
-      });
-    };
-    this.onCommit = () => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      let inputValue = this.state.inputValue ? this.state.inputValue.toString() : '';
-      let value = inputValue ? (0, _dtableUtils.formatStringToNumber)(inputValue) : ''; // format the number to submit
-      updated[column.key] = value;
-      this.props.onCommit(updated);
-      let newValue = (0, _dtableUtils.getNumberDisplayString)(value, column.data); // format the number to display
-      this.setState({
-        isEditorShow: false,
-        textValue: newValue
-      });
-    };
     this.onChange = event => {
       const {
         data
       } = this.props.column; // data maybe 'null'
-      let value = event.target.value.trim();
+      const format = data && data.format ? data.format : _dtableUtils.DEFAULT_NUMBER_FORMAT;
       let currency_symbol = null;
       if (data && data.format === 'custom_currency') {
         currency_symbol = data['currency_symbol'];
       }
+      const initValue = event.target.value.trim();
 
       // Prevent the repetition of periods bug in the Chinese input method of the Windows system
-      if (!(0, _utils.isMac)() && value.indexOf('.。') > -1) return;
-      value = (0, _dtableUtils.replaceNumberNotAllowInput)(value, this.dataFormat, currency_symbol);
-      if (value === this.state.inputValue) return;
+      if (!(0, _utils.isMac)() && initValue.indexOf('.。') > -1) return;
+      let value = (0, _dtableUtils.replaceNumberNotAllowInput)(initValue, format, currency_symbol);
+      if (value === this.state.value) {
+        return;
+      }
       this.setState({
-        inputValue: value
+        value
       });
     };
-    this.onBlur = () => {
-      this.onCommit();
-    };
     this.onKeyDown = event => {
       let {
         selectionStart,
         selectionEnd,
         value
       } = event.currentTarget;
-      if ((0, _isHotkey.default)('enter', event)) {
+      if (event.keyCode === _constants.KeyCodes.Enter || event.keyCode === _constants.KeyCodes.Esc) {
         event.preventDefault();
         this.onBlur();
-      } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      } else if (event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
         event.stopPropagation();
       }
     };
-    this.onPaste = e => {
-      e.stopPropagation();
+    this.getValue = () => {
+      const value = this.getInputNode().value;
+      const {
+        column
+      } = this.props;
+      return (0, _dtableUtils.formatStringToNumber)(value, column.data);
     };
-    this.onCut = e => {
-      e.stopPropagation();
+    this.getInputNode = () => {
+      const domNode = _reactDom.default.findDOMNode(this.input);
+      if (domNode.tagName === 'INPUT') {
+        return domNode;
+      }
+      return domNode.querySelector('input:not([type=hidden])');
     };
-    this.getStyle = () => {
-      return {
-        width: '320px',
-        textAlign: 'left'
-      };
+    this.onBlur = () => {
+      this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onBlur();
     };
     this.setInputRef = input => {
       this.input = input;
       return this.input;
     };
-    let {
-      value: _value,
-      column: _column
-    } = this.props;
-    let dataFormat = _column.data && _column.data.format;
-    this.dataFormat = dataFormat || _constants.NUMBER_TYPES.NUMBER;
-    let initValue = (0, _dtableUtils.getNumberDisplayString)(_value, _column.data); // format the number to display
-
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
     this.state = {
-      inputValue: initValue,
-      textValue: initValue,
-      isEditorShow: false
+      value: props.value || props.value === 0 ? props.value : ''
     };
   }
+  componentDidMount() {
+    if (this.props.isInModal) {
+      this.input.focus();
+    }
+    const {
+      data = {}
+    } = this.props.column;
+    let {
+      value
+    } = this.state;
+    value = (0, _dtableUtils.getNumberDisplayString)(value, data) || '';
+    this.setState({
+      value
+    });
+  }
   render() {
-    let style = this.getStyle();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cell-editor number-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "number-editor-container"
-    }, !this.state.isEditorShow && /*#__PURE__*/_react.default.createElement("div", {
-      className: "form-control",
-      style: style,
-      onClick: this.onEditorHandle
-    }, this.state.textValue), this.state.isEditorShow && /*#__PURE__*/_react.default.createElement("input", {
+    const {
+      isInModal
+    } = this.props;
+    let style = isInModal ? {
+      textAlign: 'left',
+      width: '320px'
+    } : {
+      textAlign: 'right'
+    };
+    return /*#__PURE__*/_react.default.createElement("input", {
       ref: this.setInputRef,
       type: "text",
       className: "form-control",
-      style: style,
-      value: this.state.inputValue,
-      onChange: this.onChange,
+      value: this.state.value,
       onBlur: this.onBlur,
-      onCut: this.onCut,
       onPaste: this.onPaste,
-      onKeyDown: this.onKeyDown
-    })));
+      onCut: this.onCut,
+      onKeyDown: this.onKeyDown,
+      onChange: this.onChange,
+      style: style
+    });
   }
 }
-NumberEditor.defaultProps = {
-  isReadOnly: false,
-  value: ''
-};
 var _default = exports.default = NumberEditor;

package/lib/RowExpandDialog/body/index.css

@@ -0,0 +1,21 @@
+.dtable-ui-row-expand-body {
+  flex: 1;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.dtable-ui-row-expand-body .dtable-ui-row-expand-body-content {
+  flex: 1 1;
+  overflow-y: scroll;
+  padding: 30px;
+}
+
+.dtable-ui-row-expand-body .dtable-ui-row-expand-item {
+  min-height: 56px;
+}
+
+.dtable-ui-row-expand-body .dtable-ui-row-expand-item:first-child {
+  margin-top: 2px;
+}

package/lib/RowExpandDialog/body/index.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _columnContent = _interopRequireDefault(require("../column-content"));
+var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
+require("./index.css");
+class Body extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.setEditorRef = columnIndex => editor => {
+      this.editors[columnIndex] = editor;
+    };
+    this.onPressUpKey = () => {
+      const currentTop = this.getScrollTop();
+      if (currentTop === 0) return;
+      this.setScrollTop(currentTop - 20);
+    };
+    this.onPressDownKey = () => {
+      this.setScrollTop(this.getScrollTop() + 20);
+    };
+    this.scrollToFocus = () => {
+      if (!this.focusDom || !this.focusDom.current) {
+        return;
+      }
+      const content_scroll_top = this.getScrollTop();
+      const focus_offset_top = this.focusDom.current.offsetTop;
+      const focus_offset_height = this.focusDom.current.clientHeight;
+      if (focus_offset_top < content_scroll_top) {
+        this.setScrollTop(focus_offset_top - focus_offset_height);
+        return;
+      }
+      if (focus_offset_top > content_scroll_top + this.contentRef.clientHeight) {
+        this.setScrollTop(focus_offset_top - this.contentRef.clientHeight / 2);
+        return;
+      }
+    };
+    this.setScrollTop = scrollTop => {
+      if (this.contentRef) {
+        this.contentRef.scrollTop = scrollTop;
+      }
+    };
+    this.getScrollTop = () => {
+      return this.contentRef ? this.contentRef.scrollTop : 0;
+    };
+    this.onEditorOpen = () => {
+      this.fieldEditorOpen = true;
+    };
+    this.onEditorClose = () => {
+      this.fieldEditorOpen = false;
+    };
+    this.onHotKey = event => {
+      const {
+        columns
+      } = this.props;
+      const readonly = Array.isArray(columns) && columns.length > 0 ? !columns.some(c => c.editable) : true;
+      const keyCode = event.keyCode;
+      // When opening field editor, all shortcuts in row expand dialog do not work
+      if (this.fieldEditorOpen === true) {
+        return;
+      }
+      if (keyCode === _constants.keyCodes.Esc) {
+        this.props.onRowExpandCancel();
+        return;
+      }
+      if (keyCode === _constants.keyCodes.UpArrow) {
+        this.onPressUpKey();
+        return;
+      }
+      if (keyCode === _constants.keyCodes.DownArrow) {
+        this.onPressDownKey();
+        return;
+      }
+      if (keyCode === _constants.keyCodes.Tab && !readonly) {
+        this.onPressTab(event);
+      }
+    };
+    this.onPressTab = event => {
+      event.stopPropagation();
+      event.preventDefault();
+      const {
+        columns
+      } = this.props;
+      let tabIndex = this.state.tabIndex;
+      // Press tab, highlight next column;
+      if (event.shiftKey) {
+        tabIndex = tabIndex - 1;
+        while (columns[tabIndex] && !columns[tabIndex].editable) {
+          tabIndex--;
+        }
+      } else {
+        // Press shift + tab, highlight preview column
+        tabIndex = tabIndex + 1;
+        while (columns[tabIndex] && !columns[tabIndex].editable) {
+          tabIndex++;
+        }
+      }
+      this.updateTabIndex(tabIndex);
+    };
+    this.updateTabIndex = tabIndex => {
+      if (tabIndex >= this.props.columns.length) {
+        tabIndex = 0;
+      }
+      if (tabIndex !== this.state.tabIndex) {
+        this.setState({
+          tabIndex
+        });
+      }
+    };
+    this.downloadImage = imageItemUrl => {
+      let rotateIndex = imageItemUrl.indexOf('?a=');
+      if (rotateIndex > -1) {
+        imageItemUrl = imageItemUrl.slice(0, rotateIndex);
+      }
+      let imageUrlSuffix = imageItemUrl.indexOf('?dl=1');
+      let downloadUrl = imageUrlSuffix !== -1 ? imageItemUrl : imageItemUrl + '?dl=1';
+      (0, _utils.downloadFile)(downloadUrl);
+    };
+    this.getCellValue = _ref => {
+      let {
+        row,
+        column
+      } = _ref;
+      if (!row || !column) return null;
+      const {
+        valueKey
+      } = this.props;
+      return row[column[valueKey]];
+    };
+    this.renderColumnValue = (row, column, columnIndex, isEditorFocus) => {
+      const {
+        eventBus,
+        departments,
+        userDepartmentIdsMap,
+        columns,
+        component,
+        valueKey,
+        collaborators,
+        getCollaborators,
+        queryCollaborators,
+        onChange,
+        uploadFile,
+        longTextEditorAPI,
+        config,
+        lang,
+        seafileEditorI18n
+      } = this.props;
+      const {
+        editable
+      } = column;
+      const {
+        editor,
+        formatter
+      } = component || {};
+      if (editable) {
+        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, {
+          column: column,
+          row: row,
+          columns: columns,
+          eventBus: eventBus,
+          departments: departments,
+          userDepartmentIdsMap: userDepartmentIdsMap,
+          component: editor,
+          isEditorFocus: isEditorFocus,
+          columnIndex: columnIndex,
+          valueKey: valueKey,
+          isInModal: true,
+          longTextEditorI18n: seafileEditorI18n,
+          lang: lang,
+          collaborators: collaborators,
+          config: config,
+          getCollaborators: getCollaborators,
+          queryCollaborators: queryCollaborators,
+          updateTabIndex: this.updateTabIndex,
+          onCommit: value => onChange(column, value),
+          onEditorOpen: this.onEditorOpen,
+          onEditorClose: this.onEditorClose,
+          uploadFile: uploadFile,
+          longTextEditorAPI: longTextEditorAPI
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, {
+        column: column,
+        row: row,
+        collaborators: collaborators,
+        config: config,
+        eventBus: eventBus,
+        departments: departments,
+        component: formatter,
+        valueKey: valueKey,
+        downloadImage: this.downloadImage,
+        getCollaborators: getCollaborators,
+        queryCollaborators: queryCollaborators
+      });
+    };
+    this.renderColumnContent = (row, column, columnIndex) => {
+      const isEditorFocus = columnIndex === this.state.tabIndex && column.editable;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: isEditorFocus ? this.focusDom : null
+      }, /*#__PURE__*/_react.default.createElement(_columnContent.default, {
+        column: column
+      }, this.renderColumnValue(row, column, columnIndex, isEditorFocus)));
+    };
+    this.state = {
+      tabIndex: 0
+    };
+    this.fieldEditorOpen = false;
+    this.focusDom = /*#__PURE__*/_react.default.createRef();
+    this.editors = [];
+    this.commentInputFocus = false;
+    this.contentRef = null;
+  }
+  componentDidMount() {
+    window.addEventListener('keydown', this.onHotKey);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.tabIndex !== this.state.tabIndex) {
+      this.scrollToFocus();
+    }
+    if (prevState.isShowComment !== this.state.isShowComment) {
+      this.commentInputFocus = false;
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+  render() {
+    const {
+      isInsertingRow,
+      columns,
+      row,
+      placeholder
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "dtable-ui-row-expand-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-row-expand-body-content",
+      ref: ref => this.contentRef = ref
+    }, columns.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder), columns.map((column, index) => {
+      // Do not display creator, last_modifier, ctime, mtime when inserting row
+      if (isInsertingRow && !column.editable) return null;
+      const {
+        type,
+        data
+      } = column;
+      let isHasMore = false;
+      if (type === _dtableUtils.CellType.LINK_FORMULA) {
+        let {
+          array_type
+        } = data || {};
+        const value = this.getCellValue({
+          row,
+          column
+        });
+        const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormalColumn)(array_type));
+        if (cellValue.length >= 10) {
+          isHasMore = true;
+        }
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('dtable-ui-row-expand-item', {
+          'is-has-more': isHasMore
+        }),
+        key: column.key
+      }, this.renderColumnContent(row, column, index));
+    })));
+  }
+}
+var _default = exports.default = Body;