dtable-ui-component 5.3.0 → 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/RoleStatusEditor/index.css

@@ -1,15 +1,15 @@
-.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down {
+.role-status-editor .dropdown-toggle-button .dtable-icon-down3 {
   font-size: 12px;
   color: #b5b5b5;
   transform: scale(0.8);
   cursor: pointer;
 }
 
-.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down.hide {
+.role-status-editor .dropdown-toggle-button .dtable-icon-down3.hide {
   display: none;
 }
 
-.role-status-editor .dropdown-toggle-button .dtable-icon-drop-down:hover {
+.role-status-editor .dropdown-toggle-button .dtable-icon-down3:hover {
   color: #555;
 }
 

package/lib/RoleStatusEditor/index.js

@@ -37,7 +37,7 @@ const RoleStatusEditor = _ref => {
   }, currentOption.label, /*#__PURE__*/_react.default.createElement("div", {
     className: "dropdown-icon-container ml-1"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)('dtable-font dtable-icon-drop-down', {
+    className: (0, _classnames.default)('dtable-font dtable-icon-down3', {
       'hide': !isShowDropdownIcon
     })
   }))), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {

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;
+}