dtable-ui-component 0.1.94 → 0.1.95

package/lib/ButtonFormatter/index.css

@@ -7,6 +7,7 @@
   border-width: 1px;
   border-style: solid;
   border-radius: 3px;
+  cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/lib/ButtonFormatter/index.js

@@ -54,18 +54,18 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
       }) || optionColors[0] : {
         COLOR: '#FFFCB5',
         BORDER_COLOR: '#E8E79D',
-        TEXT_COLOR: '#202428'
+        TEXT_COLOR: '#666'
       };
       var btnStyle = {
         backgroundColor: colorOption.COLOR,
         borderColor: colorOption.BORDER_COLOR,
         color: colorOption.TEXT_COLOR
       };
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
         className: cn('dtable-ui cell-formatter-container button-formatter', containerClassName),
         style: btnStyle,
         onClick: this.handleClick
-      }, button_name);
+      }, button_name));
     }
   }]);
 

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

@@ -1 +1,3 @@
-@import url('../css/cell-formatter.css');
+.dtable-ui-mtime-formatter {
+  max-width: 320px;
+}

package/lib/MTimeFormatter/index.js

@@ -36,7 +36,7 @@ var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           date = _this$props.value,
           containerClassName = _this$props.containerClassName;
-      var classname = cn('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+      var classname = cn('form-control dtable-ui-mtime-formatter', containerClassName);
 
       if (date !== '') {
         date = this.formatDate(date);

package/lib/SingleSelectEditor/index.css

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

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",
+  "version": "0.1.95",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",