dtable-ui-component 5.3.1-beta1 → 6.0.0

package/lib/RowExpandDialog/body/index.js

@@ -1,279 +0,0 @@
-"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,
-          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,
-          longTextEditorI18n: seafileEditorI18n,
-          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;

package/lib/RowExpandDialog/column-content/index.css

@@ -1,43 +0,0 @@
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info {
-  padding-top: 9px;
-  height: fit-content;
-}
-
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon {
-  display: inline-block;
-  padding: 0 0.3125rem;
-  margin-left: -0.3125rem;
-}
-
-.dtable-ui-header-icon .dtable-font {
-  font-size: 14px;
-  color: #aaa;
-  cursor: default;
-}
-
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-header-icon .dtable-font {
-  color: #212529a6;
-}
-
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-row-expand-column-name {
-  color: #212529b3;
-}
-
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .cell-is-required {
-  color: #ff1920;
-  padding-left: 0.3125rem;
-  display: inline-block;
-  height: 21px;
-}
-
-.dtable-ui-row-expand-column-content .dtable-ui-row-expand-column-content-info .dtable-ui-column-tip-icon {
-  color: #bdbdbd;
-  position: relative;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.dtable-ui-column-description-tip {
-  max-height: 300px;
-  overflow: auto;
-}

package/lib/RowExpandDialog/column-content/index.js

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-require("./index.css");
-const RowContent = _ref => {
-  let {
-    column,
-    children
-  } = _ref;
-  const descriptionRef = (0, _react.useRef)(null);
-  const {
-    name,
-    type,
-    key,
-    description
-  } = column;
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-    className: "dtable-ui-row-expand-column-content pb-4"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
-    md: 3,
-    className: "dtable-ui-row-expand-column-content-info d-flex"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-header-icon",
-    id: "header-icon-".concat(key)
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-row-expand-column-name"
-  }, name || ''), description && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-font dtable-icon-description dtable-ui-column-tip-icon ml-2",
-    ref: descriptionRef
-  }), descriptionRef.current && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
-    innerClassName: "dtable-ui-column-description-tip",
-    popperClassName: "dtable-ui-row-expand-column-tip",
-    target: descriptionRef.current,
-    placement: "bottom",
-    fade: false
-  }, description))), /*#__PURE__*/_react.default.createElement(_reactstrap.Col, {
-    md: 9,
-    className: "d-flex align-items-center dtable-ui-row-expand-column-content-value"
-  }, children));
-};
-var _default = exports.default = RowContent;

package/lib/RowExpandDialog/constants.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.keyCodes = exports.ROW_EXPAND_FOCUS_STYLE = exports.ROW_EXPAND_BTN_FOCUS_STYLE = void 0;
-const keyCodes = exports.keyCodes = {
-  Backspace: 8,
-  Tab: 9,
-  Enter: 13,
-  Shift: 16,
-  Ctrl: 17,
-  Alt: 18,
-  PauseBreak: 19,
-  CapsLock: 20,
-  Escape: 27,
-  Esc: 27,
-  Space: 32,
-  PageUp: 33,
-  PageDown: 34,
-  End: 35,
-  Home: 36,
-  LeftArrow: 37,
-  UpArrow: 38,
-  RightArrow: 39,
-  DownArrow: 40,
-  Insert: 45,
-  Delete: 46,
-  0: 48,
-  1: 49,
-  2: 50,
-  3: 51,
-  4: 52,
-  5: 53,
-  6: 54,
-  7: 55,
-  8: 56,
-  9: 57,
-  a: 65,
-  b: 66,
-  c: 67,
-  d: 68,
-  e: 69,
-  f: 70,
-  g: 71,
-  h: 72,
-  i: 73,
-  j: 74,
-  k: 75,
-  l: 76,
-  m: 77,
-  n: 78,
-  o: 79,
-  p: 80,
-  q: 81,
-  r: 82,
-  s: 83,
-  t: 84,
-  u: 85,
-  v: 86,
-  w: 87,
-  x: 88,
-  y: 89,
-  z: 90,
-  LeftWindowKey: 91,
-  RightWindowKey: 92,
-  SelectKey: 93,
-  NumPad0: 96,
-  NumPad1: 97,
-  NumPad2: 98,
-  NumPad3: 99,
-  NumPad4: 100,
-  NumPad5: 101,
-  NumPad6: 102,
-  NumPad7: 103,
-  NumPad8: 104,
-  NumPad9: 105,
-  Multiply: 106,
-  Add: 107,
-  Subtract: 109,
-  DecimalPoint: 110,
-  Divide: 111,
-  F1: 112,
-  F2: 113,
-  F3: 114,
-  F4: 115,
-  F5: 116,
-  F6: 117,
-  F7: 118,
-  F8: 119,
-  F9: 120,
-  F10: 121,
-  F12: 123,
-  NumLock: 144,
-  ScrollLock: 145,
-  SemiColon: 186,
-  EqualSign: 187,
-  Comma: 188,
-  Dash: 189,
-  Period: 190,
-  ForwardSlash: 191,
-  GraveAccent: 192,
-  OpenBracket: 219,
-  BackSlash: 220,
-  CloseBracket: 221,
-  SingleQuote: 222,
-  ChineseInputMethod: 229
-};
-const ROW_EXPAND_FOCUS_STYLE = exports.ROW_EXPAND_FOCUS_STYLE = {
-  border: '2px solid #3B88FD'
-};
-const ROW_EXPAND_BTN_FOCUS_STYLE = exports.ROW_EXPAND_BTN_FOCUS_STYLE = {
-  border: '2px solid #3B88FD'
-};

package/lib/RowExpandDialog/header/index.css

@@ -1,31 +0,0 @@
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list {
-  display: flex;
-}
-
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list .header-close-list-btn {
-  height: 24px;
-  width: 24px;
-  padding: 0 5px;
-  margin: 0 2px;
-  color: #000;
-  opacity: 0.5;
-  font-weight: 700;
-}
-
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-close-list .header-close-list-btn:hover {
-  opacity: 0.75;
-  cursor: pointer;
-}
-
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-left-btns {
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-left-btns .dtable-ui-row-expand-header-title {
-  max-width: 400px;
-  font-weight: normal;
-}
-

package/lib/RowExpandDialog/header/index.js

@@ -1,33 +0,0 @@
-"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 _lang = require("../../lang");
-require("./index.css");
-const Header = _ref => {
-  let {
-    onToggle,
-    title
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
-    className: "d-print-none dtable-ui-row-expand-header",
-    close: /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-header-close-list"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      "aria-label": (0, _lang.getLocale)('Close_expanded_record'),
-      className: "dtable-font dtable-icon-x header-close-list-btn",
-      onClick: onToggle
-    }))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-header-left-btns"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-header-title text-truncate"
-  }, title)));
-};
-var _default = exports.default = Header;

package/lib/RowExpandDialog/index.css

@@ -1,24 +0,0 @@
-.dtable-ui-row-expand-dialog {
-  margin: 28px 0 0 0;
-  transform: translate(0, 0) !important;
-}
-
-.dtable-ui-row-expand-dialog .modal-header {
-  padding: 6px 14px 6px 20px;
-}
-
-.dtable-ui-row-expand-dialog .modal-content {
-  height: 100%;
-}
-
-.dtable-ui-row-expand-dialog .dtable-ui-row-expand-content {
-  display: flex;
-  flex-direction: row;
-}
-
-.dtable-ui-row-expand-dialog .dtable-ui-row-expand-details {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}