dtable-ui-component 4.3.0 → 4.3.1-alpha3

package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.css

@@ -56,7 +56,6 @@
     padding: 10px 10px 10px 16px;
     font-size: 13px;
     background-color: #fff;
-    color: #202428;
   }
 
   .dtable-ui-mb-collaborator-editor-body .mb-collaborator-option-item {

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -92,7 +92,7 @@
 }
 
 .dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
-  color: #202428;
+  color: #212529;
 }
 
 .collaborator-select .option-group-content .collaborator,

package/lib/DTableSelect/MenuSelectStyle.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export var MenuSelectStyle = {
+  option: function option(provided, state) {
+    var isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '13px',
+      color: '#212529',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      '.header-icon .dtable-font': {
+        color: '#aaa'
+      }
+    });
+  },
+  control: function control(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '14px',
+      cursor: 'pointer',
+      lineHeight: '1.5'
+    });
+  },
+  menuPortal: function menuPortal(base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      zIndex: 9999
+    });
+  },
+  indicatorSeparator: function indicatorSeparator() {}
+};

package/lib/DTableSelect/index.js

@@ -2,76 +2,17 @@ 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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
-import Select, { components } from 'react-select';
-var MenuSelectStyle = {
-  option: function option(provided, state) {
-    var isDisabled = state.isDisabled,
-      isSelected = state.isSelected,
-      isFocused = state.isFocused;
-    return _objectSpread(_objectSpread({}, provided), {}, {
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isSelected ? '#20a0ff' : isFocused ? '#f5f5f5' : '#fff',
-      '.header-icon .dtable-font': {
-        color: isSelected ? '#fff' : '#aaa'
-      }
-    });
-  },
-  control: function control(provided) {
-    return _objectSpread(_objectSpread({}, provided), {}, {
-      fontSize: '14px',
-      cursor: 'pointer',
-      lineHeight: '1.5'
-    });
-  },
-  menuPortal: function menuPortal(base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      zIndex: 9999
-    });
-  },
-  indicatorSeparator: function indicatorSeparator() {}
-};
-var DropdownIndicator = function DropdownIndicator(props) {
-  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
-    className: "dtable-font dtable-icon-drop-down",
-    style: {
-      fontSize: '12px'
-    }
-  }));
-};
-var MenuList = function MenuList(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return e.nativeEvent.stopImmediatePropagation();
-    },
-    onMouseDown: function onMouseDown(e) {
-      return e.nativeEvent.stopImmediatePropagation();
-    }
-  }, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
-};
-var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: props.data.style
-  }, /*#__PURE__*/React.createElement(components.Option, props));
-};
-var DtableSelect = /*#__PURE__*/function (_React$Component) {
-  _inherits(DtableSelect, _React$Component);
-  var _super = _createSuper(DtableSelect);
-  function DtableSelect() {
-    var _this;
-    _classCallCheck(this, DtableSelect);
-    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.getMenuPortalTarget = function () {
-      var menuPortalTarget = _this.props.menuPortalTarget;
-      return document.querySelector(menuPortalTarget);
-    };
-    return _this;
+import Select from 'react-select';
+import { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option } from './utils';
+var DTableSelect = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTableSelect, _React$Component);
+  var _super = _createSuper(DTableSelect);
+  function DTableSelect() {
+    _classCallCheck(this, DTableSelect);
+    return _super.apply(this, arguments);
   }
-  _createClass(DtableSelect, [{
+  _createClass(DTableSelect, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -85,7 +26,11 @@ var DtableSelect = /*#__PURE__*/function (_React$Component) {
         isClearable = _this$props.isClearable,
         noOptionsMessage = _this$props.noOptionsMessage,
         classNamePrefix = _this$props.classNamePrefix,
-        style = _this$props.style;
+        style = _this$props.style,
+        innerRef = _this$props.innerRef,
+        isDisabled = _this$props.isDisabled,
+        form = _this$props.form,
+        customFilterOption = _this$props.customFilterOption;
       return /*#__PURE__*/React.createElement(Select, {
         value: value,
         onChange: onChange,
@@ -96,7 +41,8 @@ var DtableSelect = /*#__PURE__*/function (_React$Component) {
         components: {
           Option: Option,
           DropdownIndicator: DropdownIndicator,
-          MenuList: MenuList
+          MenuList: MenuList,
+          ClearIndicator: ClearIndicator
         },
         placeholder: placeholder,
         isSearchable: isSearchable,
@@ -104,17 +50,23 @@ var DtableSelect = /*#__PURE__*/function (_React$Component) {
         menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
         ,
         menuShouldScrollIntoView: true,
-        menuPortalTarget: this.getMenuPortalTarget(),
+        menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
         captureMenuScroll: false,
-        noOptionsMessage: noOptionsMessage
+        hideSelectedOptions: false,
+        noOptionsMessage: noOptionsMessage,
+        isDisabled: isDisabled,
+        ref: innerRef,
+        filterOption: customFilterOption,
+        form: form
       });
     }
   }]);
-  return DtableSelect;
+  return DTableSelect;
 }(React.Component);
-DtableSelect.defaultProps = {
+DTableSelect.defaultProps = {
   options: [],
   value: {},
+  isDisabled: false,
   isSearchable: false,
   isClearable: false,
   placeholder: '',
@@ -124,4 +76,4 @@ DtableSelect.defaultProps = {
     return null;
   }
 };
-export default DtableSelect;
+export { DTableSelect as default };

package/lib/DTableSelect/utils.js

@@ -0,0 +1,69 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["innerProps"];
+import React from 'react';
+import { components } from 'react-select';
+var MenuSelectStyle = {
+  option: function option(provided, state) {
+    var isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '13px',
+      color: '#212529',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      '.header-icon .dtable-font': {
+        color: '#aaa'
+      }
+    });
+  },
+  control: function control(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '14px',
+      cursor: 'pointer',
+      lineHeight: '1.5'
+    });
+  },
+  menuPortal: function menuPortal(base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      zIndex: 9999
+    });
+  },
+  indicatorSeparator: function indicatorSeparator() {}
+};
+var DropdownIndicator = function DropdownIndicator(props) {
+  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down",
+    style: {
+      fontSize: '12px'
+    }
+  }));
+};
+var ClearIndicator = function ClearIndicator(_ref) {
+  var innerProps = _ref.innerProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var onMouseDown = function onMouseDown(e) {
+    e.nativeEvent.stopImmediatePropagation();
+    innerProps.onMouseDown(e);
+  };
+  props.innerProps = _objectSpread(_objectSpread({}, innerProps), {}, {
+    onMouseDown: onMouseDown
+  });
+  return /*#__PURE__*/React.createElement(components.ClearIndicator, props);
+};
+var MenuList = function MenuList(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    }
+  }, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
+};
+var Option = function Option(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.data.style
+  }, /*#__PURE__*/React.createElement(components.Option, props));
+};
+export { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option };

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

@@ -55,7 +55,7 @@
     height: 50px;
     padding: 10px 10px 10px 16px;
     font-size: 13px;
-    color: #202428;
+    color: #212529;
     background-color: #fff;
   }
 

package/lib/assets/css/DTableCustomSelect.css

@@ -37,7 +37,7 @@
 }
 
 .dtable-select .select-option-name {
-  color: #202428;
+  color: #212529;
 }
 
 .dtable-select .dtable-icon-drop-down {

package/lib/css/mb-cell-editor.css

@@ -33,7 +33,6 @@
     font-size: 18px;
     text-align: center;
     text-overflow: ellipsis;
-    color: #333;
     overflow: hidden;
     white-space: nowrap;
   }

package/lib/data/dtable-value.js

@@ -534,15 +534,15 @@ var DTABLE_VALUE = {
         }, {
           'name': 'Start',
           'color': '#D7E8FF',
-          'text_color': '#202428',
+          'text_color': '#212529',
           'id': '968592',
-          'textColor': '#202428'
+          'textColor': '#212529'
         }, {
           'name': 'Finished',
           'color': '#DDFFE6',
-          'text_color': '#202428',
+          'text_color': '#212529',
           'id': '523201',
-          'textColor': '#202428'
+          'textColor': '#212529'
         }, {
           'name': 'Node 1',
           'color': '#FBD44A',

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

@@ -77,7 +77,7 @@
     padding: 10px 10px 10px 16px;
     font-size: 13px;
     background-color: #fff;
-    color: #202428;
+    color: #212529;
   }
 
   .dtable-ui-mb-select-editor-body .mb-select-options-container .mb-select-option-item + .mb-select-option-item {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.3.0",
+  "version": "4.3.1-alpha3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",