assui 3.2.90 → 3.2.91

package/es/label-number-input/index.d.ts

@@ -16,7 +16,7 @@ interface LabelNumberInputEllipsisProps extends NumberInputProps {
     label?: string;
     /** label 是否省略 */
     labelEllipsis: true;
-    /** 输入框除去label之后的最小末尾宽度 */
+    /** 输入框最小宽度 */
     baseMinWidth?: number;
     /** 组件dom id */
     id?: string;

package/es/label-number-input/index.js

@@ -32,7 +32,6 @@ var __read = this && this.__read || function (o, n) {
 };
 import React from 'react';
 import useControllableValue from "ahooks/es/useControllableValue";
-import useSize from "ahooks/es/useSize";
 import isUndefined from 'lodash/isUndefined';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
@@ -48,8 +47,6 @@ var LabelNumberInput = function LabelNumberInput(props) {
     _a = props.baseMinWidth,
     baseMinWidth = _a === void 0 ? 50 : _a;
   var numberInputRef = React.useRef(null);
-  var labelDomRef = React.useRef(null);
-  var labelSize = useSize(labelDomRef);
   var _b = __read(useControllableValue(props), 2),
     value = _b[0],
     setValue = _b[1];
@@ -68,12 +65,11 @@ var LabelNumberInput = function LabelNumberInput(props) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
   };
-  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('label-number-input-warper', className),
     id: id,
     style: {
-      minWidth: controlMinWidth
+      minWidth: baseMinWidth
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('label-number-input-field', {

package/es/label-number-input/style/index.css

@@ -1269,7 +1269,8 @@ html {
 .label-number-input-warper .label-number-input-focused {
   border-color: #000;
 }
-.label-number-input-warper .label-number-input-text {
+.label-number-input-warper .label-number-input-text,
+.label-number-input-warper .label-number-input-ellipsis {
   position: absolute;
   top: 12px;
   left: 16px;
@@ -1283,19 +1284,6 @@ html {
   transition: all 0.2s ease-out;
 }
 .label-number-input-warper .label-number-input-ellipsis {
-  position: absolute;
-  top: 12px;
-  left: 16px;
-  z-index: 2;
   max-width: calc(100% - 32px);
-  height: 20px;
-  overflow: hidden;
-  color: #9e9e9e;
-  font-size: 14px;
-  line-height: 20px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  transform-origin: top left;
-  cursor: text;
-  transition: all 0.2s ease-out;
+  cursor: unset;
 }

package/es/label-number-input/style/index.less

@@ -41,7 +41,8 @@
       border-color: @labelFocusBorderColor;
     }
 
-    &-text {
+    &-text,
+    &-ellipsis {
       position: absolute;
       top: 12px;
       left: 16px;
@@ -56,21 +57,8 @@
     }
 
     &-ellipsis {
-      position: absolute;
-      top: 12px;
-      left: 16px;
-      z-index: 2;
       max-width: calc( 100% - 32px);             
-      height: 20px;
-      overflow: hidden;         
-      color: @color_9aa5b5;
-      font-size: @font-size-base;
-      line-height: 20px;
-      white-space: nowrap;      
-      text-overflow: ellipsis;  
-      transform-origin: top left;
-      cursor: text;
-      transition: all 0.2s ease-out;
+      cursor: unset;
     }
   }
 

package/es/multi-line-ellipsis-text/index.js

@@ -34,6 +34,7 @@ import React from 'react';
 import Tooltip from "antd/es/tooltip";
 import classNames from 'classnames';
 import omit from 'lodash/omit';
+import useSize from "ahooks/es/useSize";
 import ButtonModal from '../button-modal';
 var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
   var _b = _a.text,
@@ -48,6 +49,8 @@ var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
     onEllipsisChange = _a.onEllipsisChange,
     onClick = _a.onClick;
   var ref = React.useRef(null);
+  // 监听容器宽度变化，重新计算是否需要省略
+  var containerSize = useSize(ref);
   var _e = __read(React.useState(false), 2),
     isEllipsis = _e[0],
     setIsEllipsis = _e[1];
@@ -65,7 +68,7 @@ var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
       setIsEllipsis(overflow);
       onEllipsisChange === null || onEllipsisChange === void 0 ? void 0 : onEllipsisChange(overflow);
     });
-  }, [text, lines, onEllipsisChange]);
+  }, [text, lines, onEllipsisChange, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
   var ellipsisNode = /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: classNames('ellipsis', className, {

package/lib/label-number-input/index.d.ts

@@ -16,7 +16,7 @@ interface LabelNumberInputEllipsisProps extends NumberInputProps {
     label?: string;
     /** label 是否省略 */
     labelEllipsis: true;
-    /** 输入框除去label之后的最小末尾宽度 */
+    /** 输入框最小宽度 */
     baseMinWidth?: number;
     /** 组件dom id */
     id?: string;

package/lib/label-number-input/index.js

@@ -42,7 +42,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 var react_1 = __importDefault(require("react"));
 var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
-var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
 var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
 var classnames_1 = __importDefault(require("classnames"));
 var omit_1 = __importDefault(require("lodash/omit"));
@@ -58,8 +57,6 @@ var LabelNumberInput = function LabelNumberInput(props) {
     _a = props.baseMinWidth,
     baseMinWidth = _a === void 0 ? 50 : _a;
   var numberInputRef = react_1["default"].useRef(null);
-  var labelDomRef = react_1["default"].useRef(null);
-  var labelSize = (0, useSize_1["default"])(labelDomRef);
   var _b = __read((0, useControllableValue_1["default"])(props), 2),
     value = _b[0],
     setValue = _b[1];
@@ -78,12 +75,11 @@ var LabelNumberInput = function LabelNumberInput(props) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
   };
-  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
   return react_1["default"].createElement("div", {
     className: (0, classnames_1["default"])('label-number-input-warper', className),
     id: id,
     style: {
-      minWidth: controlMinWidth
+      minWidth: baseMinWidth
     }
   }, react_1["default"].createElement("div", {
     className: (0, classnames_1["default"])('label-number-input-field', {

package/lib/label-number-input/style/index.css

@@ -1269,7 +1269,8 @@ html {
 .label-number-input-warper .label-number-input-focused {
   border-color: #000;
 }
-.label-number-input-warper .label-number-input-text {
+.label-number-input-warper .label-number-input-text,
+.label-number-input-warper .label-number-input-ellipsis {
   position: absolute;
   top: 12px;
   left: 16px;
@@ -1283,19 +1284,6 @@ html {
   transition: all 0.2s ease-out;
 }
 .label-number-input-warper .label-number-input-ellipsis {
-  position: absolute;
-  top: 12px;
-  left: 16px;
-  z-index: 2;
   max-width: calc(100% - 32px);
-  height: 20px;
-  overflow: hidden;
-  color: #9e9e9e;
-  font-size: 14px;
-  line-height: 20px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  transform-origin: top left;
-  cursor: text;
-  transition: all 0.2s ease-out;
+  cursor: unset;
 }

package/lib/label-number-input/style/index.less

@@ -41,7 +41,8 @@
       border-color: @labelFocusBorderColor;
     }
 
-    &-text {
+    &-text,
+    &-ellipsis {
       position: absolute;
       top: 12px;
       left: 16px;
@@ -56,21 +57,8 @@
     }
 
     &-ellipsis {
-      position: absolute;
-      top: 12px;
-      left: 16px;
-      z-index: 2;
       max-width: calc( 100% - 32px);             
-      height: 20px;
-      overflow: hidden;         
-      color: @color_9aa5b5;
-      font-size: @font-size-base;
-      line-height: 20px;
-      white-space: nowrap;      
-      text-overflow: ellipsis;  
-      transform-origin: top left;
-      cursor: text;
-      transition: all 0.2s ease-out;
+      cursor: unset;
     }
   }
 

package/lib/multi-line-ellipsis-text/index.js

@@ -44,6 +44,7 @@ var react_1 = __importDefault(require("react"));
 var tooltip_1 = __importDefault(require("antd/lib/tooltip"));
 var classnames_1 = __importDefault(require("classnames"));
 var omit_1 = __importDefault(require("lodash/omit"));
+var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
 var button_modal_1 = __importDefault(require("../button-modal"));
 var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
   var _b = _a.text,
@@ -58,6 +59,8 @@ var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
     onEllipsisChange = _a.onEllipsisChange,
     onClick = _a.onClick;
   var ref = react_1["default"].useRef(null);
+  // 监听容器宽度变化，重新计算是否需要省略
+  var containerSize = (0, useSize_1["default"])(ref);
   var _e = __read(react_1["default"].useState(false), 2),
     isEllipsis = _e[0],
     setIsEllipsis = _e[1];
@@ -75,7 +78,7 @@ var MultiLineEllipsisText = function MultiLineEllipsisText(_a) {
       setIsEllipsis(overflow);
       onEllipsisChange === null || onEllipsisChange === void 0 ? void 0 : onEllipsisChange(overflow);
     });
-  }, [text, lines, onEllipsisChange]);
+  }, [text, lines, onEllipsisChange, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
   var ellipsisNode = react_1["default"].createElement("div", {
     ref: ref,
     className: (0, classnames_1["default"])('ellipsis', className, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assui",
-  "version": "3.2.90",
+  "version": "3.2.91",
   "description": "react ui library",
   "author": "jason <usochen@gmail.com>",
   "main": "./lib/index.js",