dtable-ui-component 5.3.1-beta6 → 5.3.2

package/lib/RowExpandDialog/body/index.js

@@ -1,262 +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/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,
-        onKeyDown
-      } = 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;
-      }
-      onKeyDown && onKeyDown(event);
-      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);
-        return;
-      }
-    };
-    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 => {
-      this.props.getDownLoadFiles([{
-        url: imageItemUrl
-      }]).then(res => {
-        const [downloadUrl] = res.data.urls;
-        (0, _utils.downloadFile)(downloadUrl);
-      }).catch(error => {
-        // todo
-      });
-    };
-    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 {
-        component,
-        onChange,
-        ...props
-      } = this.props;
-      const {
-        getDownLoadFiles
-      } = props;
-      const {
-        editable
-      } = column;
-      const {
-        editor,
-        formatter
-      } = component || {};
-      if (editable) {
-        return /*#__PURE__*/_react.default.createElement(_RowExpandEditor.default, Object.assign({}, props, {
-          column: column,
-          row: row,
-          component: editor,
-          isEditorFocus: isEditorFocus,
-          columnIndex: columnIndex,
-          isInModal: true,
-          updateTabIndex: this.updateTabIndex,
-          onCommit: value => onChange(column, value),
-          onEditorOpen: this.onEditorOpen,
-          onEditorClose: this.onEditorClose
-        }));
-      }
-      return /*#__PURE__*/_react.default.createElement(_RowExpandFormatter.default, Object.assign({}, props, {
-        column: column,
-        row: row,
-        component: formatter,
-        downloadImage: getDownLoadFiles ? this.downloadImage : null
-      }));
-    };
-    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.renderChildren = () => {
-      const {
-        columns,
-        row,
-        children
-      } = this.props;
-      const props = {
-        columns,
-        row
-      };
-      const CustomChildren = children;
-      if ( /*#__PURE__*/_react.default.isValidElement(CustomChildren)) return /*#__PURE__*/_react.default.cloneElement(CustomChildren, props);
-      if ((0, _utils.isFunction)(CustomChildren)) return /*#__PURE__*/_react.default.createElement(CustomChildren, props);
-      return children;
-    };
-    this.state = {
-      tabIndex: 0
-    };
-    this.fieldEditorOpen = false;
-    this.focusDom = /*#__PURE__*/_react.default.createRef();
-    this.editors = [];
-    this.contentRef = null;
-  }
-  componentDidMount() {
-    window.addEventListener('keydown', this.onHotKey);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.tabIndex !== this.state.tabIndex) {
-      this.scrollToFocus();
-    }
-  }
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.onHotKey);
-  }
-  render() {
-    const {
-      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) => {
-      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.isArrayFormatColumn)(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));
-    })), this.renderChildren());
-  }
-}
-var _default = exports.default = Body;

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

@@ -1,44 +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;
-  width: 24px;
-}
-
-.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/header/index.css

@@ -1,31 +0,0 @@
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-right-btns {
-  display: flex;
-}
-
-.dtable-ui-row-expand-header .dtable-ui-row-expand-header-right-btns .header-close-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-right-btns .header-close-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,55 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-var _lang = require("../../lang");
-var _utils = require("../../utils/utils");
-var _IconButton = _interopRequireDefault(require("../../IconButton"));
-require("./index.css");
-const Header = _ref => {
-  let {
-    title,
-    columns,
-    row,
-    onToggle,
-    copyURL,
-    children
-  } = _ref;
-  const renderTitle = (0, _react.useCallback)(() => {
-    const props = {
-      columns,
-      row
-    };
-    const CustomTitle = title;
-    if ( /*#__PURE__*/_react.default.isValidElement(CustomTitle)) return /*#__PURE__*/_react.default.cloneElement(CustomTitle, props);
-    if ((0, _utils.isFunction)(CustomTitle)) return /*#__PURE__*/_react.default.createElement(CustomTitle, props);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-header-title text-truncate"
-    }, title);
-  }, [columns, row, title]);
-  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-right-btns"
-    }, copyURL && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      icon: "url",
-      onClick: () => copyURL(),
-      "aria-label": (0, _lang.getLocale)('Get_URL'),
-      title: (0, _lang.getLocale)('Get_URL')
-    }), children, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      icon: "x",
-      onClick: onToggle,
-      title: (0, _lang.getLocale)('Close_expanded_record'),
-      "aria-label": (0, _lang.getLocale)('Close_expanded_record')
-    }))
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-header-left-btns"
-  }, renderTitle()));
-};
-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;
-}