assui 3.2.86 → 3.2.87

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

@@ -3,10 +3,23 @@ import type { NumberInputProps } from '../number-input';
 export interface LabelNumberInputProps extends NumberInputProps {
     /** label 标签的文本 */
     label?: React.ReactNode;
+    /** label 是否省略 */
+    labelEllipsis?: false;
     /** 输入框除去label之后的最小末尾宽度 */
     baseMinWidth?: number;
     /** 组件dom id */
     id?: string;
 }
-declare const LabelNumberInput: (props: LabelNumberInputProps) => JSX.Element;
+/** 当label需要省略时，label为string且必填 */
+export interface LabelNumberInputEllipsisProps extends NumberInputProps {
+    /** label 标签的文本 */
+    label: string;
+    /** label 是否省略 */
+    labelEllipsis: true;
+    /** 输入框除去label之后的最小末尾宽度 */
+    baseMinWidth?: number;
+    /** 组件dom id */
+    id?: string;
+}
+declare const LabelNumberInput: (props: LabelNumberInputProps | LabelNumberInputEllipsisProps) => JSX.Element;
 export default LabelNumberInput;

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

@@ -37,11 +37,13 @@ import isUndefined from 'lodash/isUndefined';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 import NumberInput from '../number-input';
+import MultiLineEllipsisText from '../multi-line-ellipsis-text';
 var LabelNumberInput = function LabelNumberInput(props) {
   var className = props.className,
     label = props.label,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
+    labelEllipsis = props.labelEllipsis,
     id = props.id,
     _a = props.baseMinWidth,
     baseMinWidth = _a === void 0 ? 50 : _a;
@@ -88,7 +90,13 @@ var LabelNumberInput = function LabelNumberInput(props) {
     onChange: function onChange(inputValue) {
       return setValue(inputValue);
     }
-  })), /*#__PURE__*/React.createElement("label", {
+  })), labelEllipsis ? /*#__PURE__*/React.createElement(MultiLineEllipsisText, {
+    text: label,
+    lines: 1,
+    tipType: "tooltip",
+    className: "label-number-input-ellipsis",
+    onClick: handleLabelClick
+  }) : /*#__PURE__*/React.createElement("label", {
     className: "label-number-input-text",
     onClick: handleLabelClick
   }, label)));

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

@@ -1251,7 +1251,9 @@ html {
   outline: 0;
 }
 .label-number-input-warper .label-number-input:focus + label,
-.label-number-input-warper .label-number-input:not([data-value='0']) + label {
+.label-number-input-warper .label-number-input:not([data-value='0']) + label,
+.label-number-input-warper .label-number-input:focus + div,
+.label-number-input-warper .label-number-input:not([data-value='0']) + div {
   transform: translateY(-8px) scale(0.8);
 }
 .label-number-input-warper .label-number-input-field {
@@ -1280,3 +1282,24 @@ html {
   cursor: text;
   transition: all 0.2s ease-out;
 }
+.label-number-input-warper .label-number-input-ellipsis {
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  z-index: 2;
+  width: 85%;
+  /* 必须设置固定宽度 */
+  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;
+}

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

@@ -1 +1,2 @@
 import './index.less';
+import '../../multi-line-ellipsis-text/style';

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

@@ -1 +1,2 @@
-import './index.less';
+import './index.less';
+import '../../multi-line-ellipsis-text/style';

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

@@ -19,7 +19,9 @@
     outline: 0;
 
     &:focus + label,
-    &:not([data-value='0']) + label {
+    &:not([data-value='0']) + label,
+    &:focus + div,
+    &:not([data-value='0']) + div {
       transform: translateY(@labelTextLabeltranslateY) scale(@labelTextLabelScale);
     }
 
@@ -52,5 +54,26 @@
       cursor: text;
       transition: all 0.2s ease-out;
     }
+
+    &-ellipsis {
+      position: absolute;
+      top: 12px;
+      left: 16px;
+      z-index: 2;
+      width: 85%;             /* 必须设置固定宽度 */
+      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;
+    }
   }
+
 }
+
+

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

@@ -3,10 +3,23 @@ import type { NumberInputProps } from '../number-input';
 export interface LabelNumberInputProps extends NumberInputProps {
     /** label 标签的文本 */
     label?: React.ReactNode;
+    /** label 是否省略 */
+    labelEllipsis?: false;
     /** 输入框除去label之后的最小末尾宽度 */
     baseMinWidth?: number;
     /** 组件dom id */
     id?: string;
 }
-declare const LabelNumberInput: (props: LabelNumberInputProps) => JSX.Element;
+/** 当label需要省略时，label为string且必填 */
+export interface LabelNumberInputEllipsisProps extends NumberInputProps {
+    /** label 标签的文本 */
+    label: string;
+    /** label 是否省略 */
+    labelEllipsis: true;
+    /** 输入框除去label之后的最小末尾宽度 */
+    baseMinWidth?: number;
+    /** 组件dom id */
+    id?: string;
+}
+declare const LabelNumberInput: (props: LabelNumberInputProps | LabelNumberInputEllipsisProps) => JSX.Element;
 export default LabelNumberInput;

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

@@ -47,11 +47,13 @@ var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
 var classnames_1 = __importDefault(require("classnames"));
 var omit_1 = __importDefault(require("lodash/omit"));
 var number_input_1 = __importDefault(require("../number-input"));
+var multi_line_ellipsis_text_1 = __importDefault(require("../multi-line-ellipsis-text"));
 var LabelNumberInput = function LabelNumberInput(props) {
   var className = props.className,
     label = props.label,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
+    labelEllipsis = props.labelEllipsis,
     id = props.id,
     _a = props.baseMinWidth,
     baseMinWidth = _a === void 0 ? 50 : _a;
@@ -98,7 +100,13 @@ var LabelNumberInput = function LabelNumberInput(props) {
     onChange: function onChange(inputValue) {
       return setValue(inputValue);
     }
-  })), react_1["default"].createElement("label", {
+  })), labelEllipsis ? react_1["default"].createElement(multi_line_ellipsis_text_1["default"], {
+    text: label,
+    lines: 1,
+    tipType: "tooltip",
+    className: "label-number-input-ellipsis",
+    onClick: handleLabelClick
+  }) : react_1["default"].createElement("label", {
     className: "label-number-input-text",
     onClick: handleLabelClick
   }, label)));

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

@@ -1251,7 +1251,9 @@ html {
   outline: 0;
 }
 .label-number-input-warper .label-number-input:focus + label,
-.label-number-input-warper .label-number-input:not([data-value='0']) + label {
+.label-number-input-warper .label-number-input:not([data-value='0']) + label,
+.label-number-input-warper .label-number-input:focus + div,
+.label-number-input-warper .label-number-input:not([data-value='0']) + div {
   transform: translateY(-8px) scale(0.8);
 }
 .label-number-input-warper .label-number-input-field {
@@ -1280,3 +1282,24 @@ html {
   cursor: text;
   transition: all 0.2s ease-out;
 }
+.label-number-input-warper .label-number-input-ellipsis {
+  position: absolute;
+  top: 12px;
+  left: 16px;
+  z-index: 2;
+  width: 85%;
+  /* 必须设置固定宽度 */
+  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;
+}

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

@@ -1 +1,2 @@
 import './index.less';
+import '../../multi-line-ellipsis-text/style';

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

@@ -3,4 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-require("./index.less");
+require("./index.less");
+require("../../multi-line-ellipsis-text/style");

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

@@ -19,7 +19,9 @@
     outline: 0;
 
     &:focus + label,
-    &:not([data-value='0']) + label {
+    &:not([data-value='0']) + label,
+    &:focus + div,
+    &:not([data-value='0']) + div {
       transform: translateY(@labelTextLabeltranslateY) scale(@labelTextLabelScale);
     }
 
@@ -52,5 +54,26 @@
       cursor: text;
       transition: all 0.2s ease-out;
     }
+
+    &-ellipsis {
+      position: absolute;
+      top: 12px;
+      left: 16px;
+      z-index: 2;
+      width: 85%;             /* 必须设置固定宽度 */
+      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;
+    }
   }
+
 }
+
+

package/package.json

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