dtable-ui-component 0.1.94-test8 → 0.1.94

package/lib/TextEditor/index.js

@@ -18,24 +18,25 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _this.onCommit = function (newValue) {
+    _this.onCommit = function () {
       var updated = {};
-      var _this$props = _this.props,
-          column = _this$props.column,
-          value = _this$props.value;
-
-      if (newValue == value) {
-        return;
-      } //let { newValue } = this.state;
-
-
+      var column = _this.props.column;
+      var newValue = _this.state.newValue;
       updated[column.name] = newValue ? newValue.trim() : '';
 
       _this.props.onCommit(updated);
     };
 
-    _this.onBlur = function (e) {
-      _this.onCommit(e.target.value);
+    _this.onBlur = function () {
+      _this.onCommit();
+    };
+
+    _this.onChange = function (event) {
+      var value = event.target.value;
+
+      _this.setState({
+        newValue: value
+      });
     };
 
     _this.onKeyDown = function (event) {
@@ -64,7 +65,8 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
       _this.input = input;
     };
 
-    _this.state = {//newValue: props.value
+    _this.state = {
+      newValue: props.value
     };
     return _this;
   }
@@ -72,10 +74,7 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
   _createClass(TextEditor, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          isReadOnly = _this$props2.isReadOnly,
-          value = _this$props2.value; //onChange={this.onChange}
-
+      var isReadOnly = this.props.isReadOnly;
       return /*#__PURE__*/React.createElement("div", {
         className: "cell-editor text-editor"
       }, /*#__PURE__*/React.createElement("div", {
@@ -83,8 +82,9 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Input, {
         ref: this.setInputRef,
         type: "text",
-        defaultValue: value,
+        value: this.state.newValue,
         readOnly: isReadOnly,
+        onChange: this.onChange,
         onKeyDown: this.onKeyDown,
         onBlur: this.onBlur,
         onCut: this.onCut,

package/lib/TextEditor/index2.js

@@ -0,0 +1,103 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import isHotkey from 'is-hotkey';
+import { Input } from 'reactstrap';
+
+var TextEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextEditor, _React$Component);
+
+  var _super = _createSuper(TextEditor);
+
+  function TextEditor(props) {
+    var _this;
+
+    _classCallCheck(this, TextEditor);
+
+    _this = _super.call(this, props);
+
+    _this.onCommit = function (newValue) {
+      var updated = {};
+      var _this$props = _this.props,
+          column = _this$props.column,
+          value = _this$props.value;
+
+      if (newValue == value) {
+        return;
+      } //let { newValue } = this.state;
+
+
+      updated[column.name] = newValue ? newValue.trim() : '';
+
+      _this.props.onCommit(updated);
+    };
+
+    _this.onBlur = function (e) {
+      _this.onCommit(e.target.value);
+    };
+
+    _this.onKeyDown = function (event) {
+      var _event$currentTarget = event.currentTarget,
+          selectionStart = _event$currentTarget.selectionStart,
+          selectionEnd = _event$currentTarget.selectionEnd,
+          value = _event$currentTarget.value;
+
+      if (isHotkey('enter', event)) {
+        event.preventDefault();
+        event.target.blur();
+      } else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
+        event.stopPropagation();
+      }
+    };
+
+    _this.onPaste = function (e) {
+      e.stopPropagation();
+    };
+
+    _this.onCut = function (e) {
+      e.stopPropagation();
+    };
+
+    _this.setInputRef = function (input) {
+      _this.input = input;
+    };
+
+    _this.state = {//newValue: props.value
+    };
+    return _this;
+  }
+
+  _createClass(TextEditor, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          isReadOnly = _this$props2.isReadOnly,
+          value = _this$props2.value; //onChange={this.onChange}
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cell-editor text-editor"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-editor-container"
+      }, /*#__PURE__*/React.createElement(Input, {
+        ref: this.setInputRef,
+        type: "text",
+        defaultValue: value,
+        readOnly: isReadOnly,
+        onKeyDown: this.onKeyDown,
+        onBlur: this.onBlur,
+        onCut: this.onCut,
+        onPaste: this.onPaste
+      })));
+    }
+  }]);
+
+  return TextEditor;
+}(React.Component);
+
+TextEditor.defaultProps = {
+  isReadOnly: false,
+  value: ''
+};
+export default TextEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.94-test8",
+  "version": "0.1.94",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",