dtable-ui-component 5.3.6 → 5.3.8

package/lib/NumberEditor/index.js

@@ -6,129 +6,115 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 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 = () => {
+      if (!this.input) return null;
+      if (this.input.tagName === 'INPUT') {
+        return this.input;
+      }
+      return this.input.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.modal-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,262 @@
+"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 _columnContent = _interopRequireDefault(require("../column-content"));
+var _RowExpandEditor = _interopRequireDefault(require("../../RowExpandEditor"));
+var _RowExpandFormatter = _interopRequireDefault(require("../../RowExpandFormatter"));
+var _constants = require("../../constants");
+var _utils = require("../../utils/utils");
+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

@@ -0,0 +1,48 @@
+.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;
+}
+
+.dtable-ui-row-expand-column-content-value {
+  min-height: 38px;
+}

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/header/index.css

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

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

@@ -0,0 +1,28 @@
+.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;
+}
+
+.dtable-ui-row-expand-dialog .form-control {
+  color: #212529;
+}