dtable-ui-component 5.3.1-beta6 → 5.3.2

package/lib/NumberEditor/index.js

@@ -6,116 +6,129 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+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'
-      const format = data && data.format ? data.format : _dtableUtils.DEFAULT_NUMBER_FORMAT;
+      let value = event.target.value.trim();
       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)() && initValue.indexOf('.。') > -1) return;
-      let value = (0, _dtableUtils.replaceNumberNotAllowInput)(initValue, format, currency_symbol);
-      if (value === this.state.value) {
-        return;
-      }
+      if (!(0, _utils.isMac)() && value.indexOf('.。') > -1) return;
+      value = (0, _dtableUtils.replaceNumberNotAllowInput)(value, this.dataFormat, currency_symbol);
+      if (value === this.state.inputValue) return;
       this.setState({
-        value
+        inputValue: value
       });
     };
+    this.onBlur = () => {
+      this.onCommit();
+    };
     this.onKeyDown = event => {
       let {
         selectionStart,
         selectionEnd,
         value
       } = event.currentTarget;
-      if (event.keyCode === _constants.KeyCodes.Enter || event.keyCode === _constants.KeyCodes.Esc) {
+      if ((0, _isHotkey.default)('enter', event)) {
         event.preventDefault();
         this.onBlur();
-        if (this.props.selectDownCell) this.props.selectDownCell();
-      } else if (event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
+      } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
         event.stopPropagation();
       }
     };
-    this.getValue = () => {
-      const value = this.getInputNode().value;
-      const {
-        column
-      } = this.props;
-      return (0, _dtableUtils.formatStringToNumber)(value, column.data);
+    this.onPaste = 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.onCut = e => {
+      e.stopPropagation();
     };
-    this.onBlur = () => {
-      this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onBlur();
+    this.getStyle = () => {
+      return {
+        width: '320px',
+        textAlign: 'left'
+      };
     };
     this.setInputRef = input => {
       this.input = input;
       return this.input;
     };
-    this.onPaste = e => {
-      e.stopPropagation();
-    };
-    this.onCut = e => {
-      e.stopPropagation();
-    };
+    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.state = {
-      value: props.value || props.value === 0 ? props.value : ''
+      inputValue: initValue,
+      textValue: initValue,
+      isEditorShow: false
     };
   }
-  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() {
-    const {
-      isInModal
-    } = this.props;
-    let style = isInModal ? {
-      textAlign: 'left',
-      width: '320px'
-    } : {
-      textAlign: 'right'
-    };
-    return /*#__PURE__*/_react.default.createElement("input", {
+    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", {
       ref: this.setInputRef,
       type: "text",
       className: "form-control",
-      value: this.state.value,
+      style: style,
+      value: this.state.inputValue,
+      onChange: this.onChange,
       onBlur: this.onBlur,
-      onPaste: this.onPaste,
       onCut: this.onCut,
-      onKeyDown: this.onKeyDown,
-      onChange: this.onChange,
-      style: style
-    });
+      onPaste: this.onPaste,
+      onKeyDown: this.onKeyDown
+    })));
   }
 }
+NumberEditor.defaultProps = {
+  isReadOnly: false,
+  value: ''
+};
 var _default = exports.default = NumberEditor;

package/lib/{RowExpandFormatter/RowExpandEmailFormatter → RowExpandEmailFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../../css/cell-formatter.css');
+@import url('../css/cell-formatter.css');
 
 .dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
 .dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {

package/lib/{RowExpandFormatter/RowExpandEmailFormatter → RowExpandEmailFormatter}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _editorUtils = require("../../utils/editor-utils");
+var _editorUtils = require("../utils/editor-utils");
 require("./index.css");
 class RowExpandEmailFormatter extends _react.default.Component {
   constructor() {

package/lib/{RowExpandFormatter/RowExpandFileFormatter → RowExpandFileFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../../css/cell-formatter.css');
+@import url('../css/cell-formatter.css');
 
 .dtable-ui.row-expand-file-formatter {
   display: flex;
@@ -28,7 +28,7 @@
   border-color: #c9c9c9;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice {
   height: 20px;
   width: 100%;
   top: 0;
@@ -40,11 +40,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-ui-file-icons-choice {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-file-icons-choice {
   display: flex;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon {
   height: 16px;
   width: 16px;
   border-radius: 50%;
@@ -56,11 +56,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon:nth-child(2) {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon:nth-child(2) {
   margin-left: 5px;
 }
 
-.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-ui-file-icons-choice .file-icon .dtable-font {
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon .dtable-font {
   font-size: 12px;
   transform: scale(.7);
 }

package/lib/{RowExpandFormatter/RowExpandFileFormatter → RowExpandFileFormatter}/index.js

@@ -17,8 +17,7 @@ class RowExpandFileFormatter extends _react.default.PureComponent {
       column,
       downloadFile,
       deleteFile,
-      readOnly,
-      config
+      readOnly
     } = this.props;
     if (!Array.isArray(value) || value.length === 0) {
       return null;
@@ -31,7 +30,6 @@ class RowExpandFileFormatter extends _react.default.PureComponent {
         key: index,
         index: index,
         column: column,
-        config: config,
         downloadFile: downloadFile,
         deleteFile: deleteFile,
         readOnly: readOnly

package/lib/{RowExpandFormatter/RowExpandFileFormatter → RowExpandFileFormatter}/row-expand-file-item-formatter.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../../lang");
-var _url = require("../../utils/url");
-var _deleteTip = _interopRequireDefault(require("../../common/delete-tip"));
+var _lang = require("../lang");
+var _utils = require("../FileItemFormatter/utils");
+var _deleteTip = _interopRequireDefault(require("../common/delete-tip"));
 class RowExpandFileItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
@@ -39,6 +39,10 @@ class RowExpandFileItemFormatter extends _react.Component {
       this.closeDeleteTip();
       this.props.deleteFile(this.props.index);
     };
+    this.getFileIconData = item => {
+      let fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
+      return require('../FileItemFormatter/' + fileIconUrl);
+    };
     this.state = {
       isTooltipOpen: false,
       isDeleteTipOpen: false
@@ -51,23 +55,20 @@ class RowExpandFileItemFormatter extends _react.Component {
       index,
       readOnly,
       downloadFile,
-      deleteFile,
-      config
+      deleteFile
     } = this.props;
     const id = 'file-list-preview-item' + column.key + index;
-    const {
-      fileIconUrl
-    } = (0, _url.getFileThumbnailInfo)(file, config);
+    const url = this.getFileIconData(file);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       key: "file-".concat(index),
       className: "row-expand-item-file",
       id: id
     }, /*#__PURE__*/_react.default.createElement("img", {
-      src: fileIconUrl,
+      src: url,
       id: "item-file-".concat(index),
       alt: file.name
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-icons-choice"
+      className: "dtable-file-icons-choice"
     }, downloadFile && /*#__PURE__*/_react.default.createElement("span", {
       className: "file-icon",
       onClick: e => this.props.downloadFile(file, e)

package/lib/RowExpandFormatter/index.css

@@ -100,7 +100,7 @@
   background-color: #fff;
 }
 
-.dtable-ui.dtable-row-expand-formatter .dtable-ui-geolocation-formatter-container {
+.dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
   margin-top: 0.5rem;
   display: flex;
   align-items: center;
@@ -109,29 +109,3 @@
 .dtable-ui.dtable-row-expand-formatter .dtable-link-formatter {
   padding-top: 8px;
 }
-
-.dtable-ui-row-expand-select-formatter.custom-select {
-  display: flex;
-  padding: 0 10px;
-  border-radius: 3px;
-  align-items: center;
-  justify-content: space-between;
-  -webkit-user-select: none;
-  user-select: none;
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-  height: fit-content;
-  min-height: 2.375rem;
-  background-color: #f8f9fa !important;
-  cursor: default;
-}
-
-.dtable-ui-row-expand-select-formatter .dtable-ui-row-expand-select-formatter-inner {
-  display: flex;
-  flex: 1 1;
-  overflow: hidden;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-}