@seafile/seafile-editor 0.3.115 → 0.3.116

package/dist/components/select/field-setting.js

@@ -20,18 +20,8 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _this.onFontStyleClick = function () {
+    _this.onMouseEnter = function () {
       if (!_this.props.option) return;
-      var isShowMenu = _this.state.isShowMenu;
-
-      if (isShowMenu) {
-        _this.setState({
-          isShowMenu: false
-        });
-
-        return;
-      }
-
       var container = _this.settingRef;
 
       var _container$getBoundin = container.getBoundingClientRect(),
@@ -49,6 +39,12 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.onMouseLeave = function () {
+      _this.setState({
+        isShowMenu: false
+      });
+    };
+
     _this.onBoldClick = function (event) {
       event.stopPropagation();
       var option = _this.props.option;
@@ -98,14 +94,15 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
           isItalic = _ref.italic;
 
       var isShowMenu = this.state.isShowMenu;
-      var className = "option-item ".concat(isDisable ? 'disable' : '', " ").concat(isShowMenu ? 'active' : '', " field-setting");
+      var className = "field-setting ".concat(isDisable ? 'disable' : '', " option-item");
       return /*#__PURE__*/React.createElement("span", {
         ref: this.setSettingRef,
         className: className,
-        onClick: this.onFontStyleClick
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
       }, /*#__PURE__*/React.createElement(TextIcon, {
         width: "14",
-        color: isShowMenu ? '#fff' : '#aaa'
+        color: '#aaa'
       }), /*#__PURE__*/React.createElement("span", {
         className: "label"
       }, t('Font_style')), /*#__PURE__*/React.createElement("span", {

package/dist/components/select/index.js

@@ -38,8 +38,15 @@ var Select = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.onSelectToggle = function (event) {
+      var isShowSelector = _this.state.isShowSelector;
+      var newValue = !isShowSelector;
+
+      if (newValue) {
+        _this.dropdownContainerHasInit = false;
+      }
+
       _this.setState({
-        isShowSelector: !_this.state.isShowSelector
+        isShowSelector: newValue
       });
     };
 
@@ -137,14 +144,16 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("i", {
         className: "iconfont icon-drop-down arrow"
       }))), isShowSelector && /*#__PURE__*/React.createElement("span", {
-        ref: this.setContainerRef,
-        className: "value-container"
+        className: "select-popover"
       }, /*#__PURE__*/React.createElement(FieldSetting, {
         option: currentOption,
         onUpdateOption: this.onUpdateOption
       }), /*#__PURE__*/React.createElement("span", {
         className: "option-item-divider"
-      }), options.map(function (option) {
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "option-item-wrapper",
+        ref: this.setContainerRef
+      }, options.map(function (option) {
         var isActive = option.value === (currentOption && currentOption.value);
         return /*#__PURE__*/React.createElement(Option, {
           key: option.value,
@@ -153,7 +162,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
           option: option,
           onOptionChanged: _this2.onChange
         });
-      })));
+      }))));
     }
   }]);
 

package/dist/components/select/style.css

@@ -55,14 +55,12 @@
   color: #666;
 }
 
-.select-container .value-container {
+.select-container .select-popover {
   position: absolute;
   left: 0;
   display: flex;
   min-width: 80px;
-  max-height: 150px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  max-height: 265px;
   margin-top: 4px;
   padding: 8px 0;
   flex-direction: column;
@@ -71,15 +69,41 @@
   border-radius: 4px;
   background: #fff;
   z-index: 10;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
-.select-container .value-container::-webkit-scrollbar {
-  display: none;
+.select-popover .option-item-divider {
+  margin-top: 8px;
+  border-top: 1px solid #EFEFEF;
+}
+
+.select-popover .field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.select-popover .field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.select-container .value-container .option-item {
+.select-popover .field-setting .op-icon {
+  font-size: 12px;
+  transform: rotate(90deg);
+  color: #aaa;
+}
+
+.select-popover .option-item-wrapper {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.select-popover .option-item {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -91,59 +115,30 @@
   white-space: nowrap;
 }
 
-.select-container .value-container .option-item:hover {
+.select-popover .option-item:hover {
   background-color: #F5F5F5;
 }
 
-.select-container .value-container .option-item.active {
+.select-popover .option-item.active {
   background-color: #39A0FF;
   color: #fff;
 }
 
-.select-container .value-container .option-item.disable {
+.select-popover .option-item.disable {
   color: #aaa;
   cursor: default;
 }
 
-.select-container .value-container .option-item .item-icon {
+.select-popover .option-item .item-icon {
   font-size: 14px;
   color: rgb(170, 170, 170);
   cursor: default;
 }
 
-.select-container .value-container .option-item.active .item-icon {
+.select-popover .option-item.active .item-icon {
   color: #fff;
 }
 
-.select-container .value-container .option-item .label {
+.select-popover .option-item .label {
   margin: 0 5px;
 }
-
-.option-item.field-setting {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.option-item.field-setting .icon-container {
-  position: absolute;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.option-item.field-setting .op-icon {
-  font-size: 12px;
-  transform: rotate(90deg);
-  color: #aaa;
-}
-
-.option-item.active.field-setting .op-icon {
-  color: #FFF;
-}
-
-.value-container .option-item-divider {
-  margin-top: 8px;
-  border-top: 1px solid #EFEFEF;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.115",
+  "version": "0.3.116",
   "private": false,
   "dependencies": {
     "@seafile/react-image-lightbox": "^0.0.9",