dtable-ui-component 5.3.0 → 5.3.1-beta

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;

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

@@ -0,0 +1,43 @@
+.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

@@ -0,0 +1,50 @@
+"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

@@ -0,0 +1,114 @@
+"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

@@ -0,0 +1,31 @@
+.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

@@ -0,0 +1,33 @@
+"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

@@ -0,0 +1,24 @@
+.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;
+}