dtable-ui-component 0.1.94 → 0.1.96-test2

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

@@ -2,10 +2,6 @@
   position: relative;
 }
 
-.dtable-ui-collaborator-editor-container .collaborators-container {
-  margin-top: 8px;
-}
-
 .dtable-ui-collaborator-editor-popover .collaborator-search-container {
   padding: 10px 10px 0 10px;
 }
@@ -29,7 +25,6 @@
   height: 30px;
   padding-left: 12px;
   font-size: 14px;
-  margin-left: 10px;
   cursor: pointer;
 }
 
@@ -37,6 +32,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/CollaboratorEditor/index.js

@@ -197,9 +197,9 @@ var CollaboratorEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(EditEditorButton, {
         text: getLocale('Add_a_collaborator'),
         onClick: this.onAddOptionToggle
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "collaborators-container"
-      }, selectedCollaborators.length > 0 && selectedCollaborators.map(function (collaborator) {
+      }), selectedCollaborators.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "collaborators-container mt-2"
+      }, selectedCollaborators.map(function (collaborator) {
         return /*#__PURE__*/React.createElement(CollaboratorItem, {
           key: collaborator.email,
           collaborator: collaborator,

package/lib/EditEditorButton/index.css

@@ -0,0 +1,17 @@
+.dtable-ui-editor-button {
+  display: inline-block;
+  padding: 0 12px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 14px;
+  background-color: #f0f0f0;
+  color: #8f8f8f;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.dtable-ui-editor-button:hover {
+  background-color: #dbdbdb;
+  color: #666;
+}

package/lib/EditEditorButton/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 EditEditorButton = /*#__PURE__*/function (_React$Component) {
   _inherits(EditEditorButton, _React$Component);
@@ -10,41 +11,17 @@ var EditEditorButton = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(EditEditorButton);
 
   function EditEditorButton() {
-    var _this;
-
     _classCallCheck(this, EditEditorButton);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.getStyle = function () {
-      return {
-        display: 'inline-block',
-        padding: '0 12px',
-        height: '28px',
-        lineHeight: '28px',
-        fontSize: '14px',
-        backgroundColor: '#f0f0f0',
-        color: '#8f8f8f',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        userSelect: 'none'
-      };
-    };
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(EditEditorButton, [{
     key: "render",
     value: function render() {
       var text = this.props.text;
-      var style = this.getStyle();
       return /*#__PURE__*/React.createElement("span", {
-        style: style,
+        className: "dtable-ui-editor-button",
         onClick: this.props.onClick
       }, text);
     }

package/lib/LinkEditor/index.css

@@ -1,9 +1,3 @@
 .dtable-ui-link-editor {
   position: relative;
 }
-
-.dtable-ui-link-editor-container {
-  display: inline-block;
-  height: 30px;
-  padding: 0 10px;
-}

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