dtable-ui-component 0.1.94-test8 → 0.1.94-uitest3

package/lib/CheckboxEditor/index.css

@@ -0,0 +1,31 @@
+.dtable-ui-checkbox-editor {
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.dtable-ui-checkbox-editor .raw-checkbox {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.dtable-ui-checkbox-editor .shown-checkbox {
+  height: 100%;
+  border: 2px solid #e0e0e0;
+  border-radius: 3px;
+}
+
+.dtable-ui-checkbox-editor .raw-checkbox:focus + .shown-checkbox {
+  border-color: #3b88fd;
+}
+
+.dtable-ui-checkbox-editor .shown-checkbox .dtable-icon-check-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #20c933;
+  font-weight: 500;
+}

package/lib/CheckboxEditor/index.js

@@ -3,6 +3,7 @@ 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 './index.css';
 
 var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(CheckboxEditor, _React$Component);
@@ -16,15 +17,10 @@ var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _this.getValue = function () {
+    _this.onCommit = function () {
       var updated = {};
       var column = _this.props.column;
       updated[column.name] = _this.state.value;
-      return updated;
-    };
-
-    _this.onCommit = function () {
-      var updated = _this.getValue();
 
       _this.props.onCommit(updated);
     };
@@ -34,37 +30,13 @@ var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var value = event.target.checked;
-
-      if (value === _this.state.value) {
-        return;
-      }
-
       _this.setState({
-        value: value
+        value: !_this.state.value
       }, function () {
         _this.onCommit();
       });
     };
 
-    _this.onKeyDown = function (event) {
-      event.stopPropagation();
-    };
-
-    _this.onBlur = function () {// this.onCommit();
-    };
-
-    _this.setInputRef = function (input) {
-      _this.input = input;
-    };
-
-    _this.getStyle = function () {
-      return {
-        marginLeft: 0,
-        transform: 'scale(1.1)'
-      };
-    };
-
     _this.state = {
       value: props.value ? props.value : false
     };
@@ -74,22 +46,23 @@ var CheckboxEditor = /*#__PURE__*/function (_React$Component) {
   _createClass(CheckboxEditor, [{
     key: "render",
     value: function render() {
-      var style = this.getStyle();
+      var value = this.state.value;
+      var isReadOnly = this.props.isReadOnly;
+      var style = {
+        cursor: isReadOnly ? 'default' : 'pointer'
+      };
       return /*#__PURE__*/React.createElement("div", {
-        className: "cell-editor checkbox-editor"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "checkbox-editor-container"
+        className: "dtable-ui-checkbox-editor",
+        style: style
       }, /*#__PURE__*/React.createElement("input", {
-        ref: this.setInputRef,
         type: "checkbox",
-        className: "checkbox",
-        checked: this.state.value,
-        onBlur: this.onBlur,
-        onPaste: this.onPaste,
-        onKeyDown: this.onKeyDown,
-        onChange: this.onChange,
-        style: style,
-        readOnly: this.props.isReadOnly
+        className: "raw-checkbox",
+        checked: value,
+        onChange: this.onChange
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "shown-checkbox"
+      }, value && /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font dtable-icon-check-mark"
       })));
     }
   }]);

package/lib/CollaboratorEditor/index.css

@@ -29,7 +29,6 @@
   height: 30px;
   padding-left: 12px;
   font-size: 14px;
-  margin-left: 10px;
   cursor: pointer;
 }
 
@@ -37,6 +36,10 @@
   background-color: #f5f5f5;
 }
 
+.dtable-ui-collaborator-editor-popover .dtable-ui.collaborator-item {
+  background: none;
+}
+
 .dtable-ui-collaborator-editor-popover .collaborator-checked {
   width: 20px;
   text-align: center;

package/lib/LinkEditor/pc-link-editor-popover/index.css

@@ -23,7 +23,6 @@
   padding-left: 12px;
   font-size: 14px;
   line-height: 30px;
-  margin-left: 10px;
   cursor: pointer;
 }
 

package/lib/SingleSelectEditor/index.css

@@ -3,7 +3,16 @@
 }
 
 .dtable-ui-select-editor-container {
-  display: inline-block;
-  height: 30px;
-  padding: 0 10px;
+  height: 40px;
+  padding: 5px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.dtable-ui-select-editor-container:hover {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-select-editor-container:focus {
+  border: 2px solid #3b88fd;
 }

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/lib/css/cell-editor.css

@@ -1,5 +1,6 @@
 .dtable-ui-editor-popover {
-  width: 320px;
+  width: 300px;
+  max-width: 100%;
   box-shadow: 0 0 5px #ccc;
   background-color: #fff;
   z-index: 10;

package/lib/select-editor/pc-select-editor-popover/index.css

@@ -23,7 +23,6 @@
   padding-left: 12px;
   font-size: 14px;
   line-height: 30px;
-  margin-left: 10px;
   cursor: pointer;
 }
 

package/package.json

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