@qn-pandora/pandora-component 2.1.2 → 3.0.0

package/es/components/DateTimePicker/DisplayInput/style.css

@@ -13,7 +13,7 @@
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -64,7 +64,7 @@
   opacity: 1;
 }
 .ant-input-affix-wrapper-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-affix-wrapper[disabled] {
@@ -74,7 +74,7 @@
   opacity: 1;
 }
 .ant-input-affix-wrapper[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-affix-wrapper-borderless,
@@ -98,7 +98,7 @@ textarea.ant-input-affix-wrapper {
   transition: all 0.3s, height 0s;
 }
 .ant-input-affix-wrapper-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-affix-wrapper-sm {
@@ -209,7 +209,7 @@ textarea.ant-input-affix-wrapper {
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -257,7 +257,7 @@ textarea.ant-input-affix-wrapper {
   opacity: 1;
 }
 .ant-input-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input[disabled] {
@@ -267,7 +267,7 @@ textarea.ant-input-affix-wrapper {
   opacity: 1;
 }
 .ant-input[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-borderless,
@@ -291,7 +291,7 @@ textarea.ant-input {
   transition: all 0.3s, height 0s;
 }
 .ant-input-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-sm {
@@ -373,7 +373,7 @@ textarea.ant-input {
   font-size: 14px;
   text-align: center;
   background-color: #fafafa;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -427,7 +427,7 @@ textarea.ant-input {
 }
 .ant-input-group-lg .ant-input,
 .ant-input-group-lg > .ant-input-group-addon {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-group-sm .ant-input,
@@ -435,7 +435,7 @@ textarea.ant-input {
   padding: 1px 7px;
 }
 .ant-input-group-lg .ant-select-single .ant-select-selector {
-  height: 32px;
+  height: 40px;
 }
 .ant-input-group-sm .ant-select-single .ant-select-selector {
   height: 26px;
@@ -562,12 +562,12 @@ textarea.ant-input {
   border-radius: 0 2px 2px 0;
 }
 .ant-input-group-rtl .ant-input-group-addon:first-child {
-  border-right: 1px solid #d9d9d9;
+  border-right: 1px solid #bfbfbf;
   border-left: 0;
 }
 .ant-input-group-rtl .ant-input-group-addon:last-child {
   border-right: 0;
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid #bfbfbf;
 }
 .ant-input-group-rtl.ant-input-group > .ant-input:last-child,
 .ant-input-group-rtl.ant-input-group-addon:last-child {
@@ -624,7 +624,7 @@ textarea.ant-input {
   height: 32px;
 }
 .ant-input[type='color'].ant-input-lg {
-  height: 32px;
+  height: 40px;
 }
 .ant-input[type='color'].ant-input-sm {
   height: 26px;
@@ -679,7 +679,7 @@ textarea.ant-input {
   z-index: 1;
 }
 .ant-input-search-large .ant-input-search-button {
-  height: 32px;
+  height: 40px;
 }
 .ant-input-search-small .ant-input-search-button {
   height: 26px;
@@ -738,7 +738,7 @@ textarea.ant-input {
     height: 32px;
   }
   .ant-input-lg {
-    height: 32px;
+    height: 40px;
   }
   .ant-input-sm {
     height: 26px;

package/es/components/DateTimePicker/index.d.ts

@@ -14,11 +14,15 @@ export interface IDateTimePickerProps extends IBaseProps {
      * 时间组件class name
      */
     timeClassName?: string;
+    /**
+     * 展示组件class name
+     */
+    contentClassName?: string;
 }
 /**
  * 弹出层时间选择组件封装
  */
-export default class DateTimePicker extends React.Component<IDateTimePickerProps, any> {
+declare class DateTimePicker extends React.Component<IDateTimePickerProps, any> {
     static Base: typeof Base;
     static BaseMobile: typeof BaseMobile;
     visible: boolean;
@@ -27,3 +31,4 @@ export default class DateTimePicker extends React.Component<IDateTimePickerProps
     handleChange(value: Time): void;
     render(): JSX.Element;
 }
+export default DateTimePicker;

package/es/components/DateTimePicker/index.js

@@ -80,11 +80,11 @@ var DateTimePicker = /** @class */ (function (_super) {
         this.hide();
     };
     DateTimePicker.prototype.render = function () {
-        var _a = this.props, overlayClassName = _a.overlayClassName, getPopupContainer = _a.getPopupContainer, children = _a.children, value = _a.value, showTimeType = _a.showTimeType, timeClassName = _a.timeClassName, restProps = __rest(_a, ["overlayClassName", "getPopupContainer", "children", "value", "showTimeType", "timeClassName"]);
+        var _a = this.props, overlayClassName = _a.overlayClassName, getPopupContainer = _a.getPopupContainer, children = _a.children, value = _a.value, showTimeType = _a.showTimeType, timeClassName = _a.timeClassName, contentClassName = _a.contentClassName, restProps = __rest(_a, ["overlayClassName", "getPopupContainer", "children", "value", "showTimeType", "timeClassName", "contentClassName"]);
         var ismobile = isMobileDevice() && showTimeType && showTimeType.length;
         return (React.createElement("div", null,
             ismobile && (React.createElement(BaseMobile, __assign({}, restProps, { showTimeType: showTimeType, buttonType: EButtonType.Normal, value: value || this.props.defaultValue, onChange: this.handleChange }))),
-            !ismobile && (React.createElement(Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, openClassName: overlayClassName, getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames(SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets }))))));
+            !ismobile && (React.createElement(Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, openClassName: overlayClassName, getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames(SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets, className: contentClassName }))))));
     };
     DateTimePicker.Base = Base;
     DateTimePicker.BaseMobile = BaseMobile;

package/es/components/Input/NumberInput/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface INumberInputProps {
+    /** 当前值 */
+    value?: number;
+    /** placeholder */
+    placeholder?: string;
+    /** 最大值 */
+    min?: number;
+    /** 最小值 */
+    max?: number;
+    /** 小数保留的位数 */
+    precision?: number;
+    /** 前缀 */
+    addonAfter?: React.ReactNode;
+    /** 后缀 */
+    addonBefore?: React.ReactNode;
+    /** 组件类名 */
+    className?: string;
+    /** 设置当前值 */
+    onChange?: (value?: number) => void;
+}
+export default class NumberInput extends React.Component<INumberInputProps, any> {
+    value: string;
+    setValue(value: string): void;
+    handleChange(value: string): void;
+    handleBlur(): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}

package/es/components/Input/NumberInput/index.js

@@ -0,0 +1,116 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import React from 'react';
+import { observer } from 'mobx-react';
+import { action, observable } from 'mobx';
+import { isNumber, toString, floor } from 'lodash';
+import Input from '../index';
+import bind from '../../../utils/bind';
+var NumberInput = /** @class */ (function (_super) {
+    __extends(NumberInput, _super);
+    function NumberInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.value = '';
+        return _this;
+    }
+    NumberInput.prototype.setValue = function (value) {
+        this.value = value;
+    };
+    NumberInput.prototype.handleChange = function (value) {
+        var onChange = this.props.onChange;
+        var result = Number(value);
+        if (!onChange) {
+            return;
+        }
+        if (!isNaN(result)) {
+            onChange(value === '' ? undefined : result);
+        }
+        this.setValue(value);
+    };
+    NumberInput.prototype.handleBlur = function () {
+        var _a = this.props, min = _a.min, max = _a.max, precision = _a.precision, onChange = _a.onChange;
+        var result = Number(this.value);
+        if (!onChange) {
+            return;
+        }
+        if (this.value === '') {
+            onChange(undefined);
+            this.setValue('');
+            return;
+        }
+        if (isNaN(result)) {
+            onChange(min);
+            this.setValue(toString(min));
+            return;
+        }
+        if (isNumber(min) && min > result) {
+            onChange(min);
+            this.setValue(toString(min));
+            return;
+        }
+        if (isNumber(max) && max < result) {
+            onChange(max);
+            this.setValue(toString(max));
+            return;
+        }
+        if (isNumber(precision)) {
+            this.setValue(toString(floor(result, precision)));
+            onChange(floor(result, precision));
+        }
+    };
+    NumberInput.prototype.componentDidMount = function () {
+        this.setValue(toString(this.props.value));
+    };
+    NumberInput.prototype.render = function () {
+        var _a = this.props, placeholder = _a.placeholder, addonAfter = _a.addonAfter, addonBefore = _a.addonBefore, className = _a.className;
+        return (React.createElement(Input, { className: className, value: this.value, onChange: this.handleChange, onBlur: this.handleBlur, placeholder: placeholder, addonAfter: addonAfter, addonBefore: addonBefore }));
+    };
+    __decorate([
+        observable,
+        __metadata("design:type", String)
+    ], NumberInput.prototype, "value", void 0);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], NumberInput.prototype, "setValue", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], NumberInput.prototype, "handleChange", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], NumberInput.prototype, "handleBlur", null);
+    NumberInput = __decorate([
+        observer
+    ], NumberInput);
+    return NumberInput;
+}(React.Component));
+export default NumberInput;

package/es/components/Input/index.d.ts

@@ -14,5 +14,6 @@ declare namespace Input {
     }) => JSX.Element;
     var Password: typeof import("./Password").Password;
     var TextArea: typeof import("./TextArea").TextArea;
+    var NumberInput: typeof import("./NumberInput").default;
 }
 export default Input;

package/es/components/Input/index.js

@@ -25,8 +25,9 @@ import { Input as AntdInput } from 'antd';
 import debounceWrapper from '../../hoc/debounce';
 import { Password } from './Password';
 import { TextArea } from './TextArea';
+import NumberInput from './NumberInput';
 var useCallback = React.useCallback;
-export default function Input(props) {
+function Input(props) {
     var onChange = props.onChange, restProps = __rest(props, ["onChange"]);
     var handleChange = useCallback(function (e) {
         if (onChange) {
@@ -38,3 +39,5 @@ export default function Input(props) {
 Input.DebounceInput = debounceWrapper(Input);
 Input.Password = Password;
 Input.TextArea = TextArea;
+Input.NumberInput = NumberInput;
+export default Input;

package/es/components/Input/style.css

@@ -13,7 +13,7 @@
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -64,7 +64,7 @@
   opacity: 1;
 }
 .ant-input-affix-wrapper-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-affix-wrapper[disabled] {
@@ -74,7 +74,7 @@
   opacity: 1;
 }
 .ant-input-affix-wrapper[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-affix-wrapper-borderless,
@@ -98,7 +98,7 @@ textarea.ant-input-affix-wrapper {
   transition: all 0.3s, height 0s;
 }
 .ant-input-affix-wrapper-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-affix-wrapper-sm {
@@ -209,7 +209,7 @@ textarea.ant-input-affix-wrapper {
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -257,7 +257,7 @@ textarea.ant-input-affix-wrapper {
   opacity: 1;
 }
 .ant-input-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input[disabled] {
@@ -267,7 +267,7 @@ textarea.ant-input-affix-wrapper {
   opacity: 1;
 }
 .ant-input[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-borderless,
@@ -291,7 +291,7 @@ textarea.ant-input {
   transition: all 0.3s, height 0s;
 }
 .ant-input-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-sm {
@@ -373,7 +373,7 @@ textarea.ant-input {
   font-size: 14px;
   text-align: center;
   background-color: #fafafa;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -427,7 +427,7 @@ textarea.ant-input {
 }
 .ant-input-group-lg .ant-input,
 .ant-input-group-lg > .ant-input-group-addon {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-group-sm .ant-input,
@@ -435,7 +435,7 @@ textarea.ant-input {
   padding: 1px 7px;
 }
 .ant-input-group-lg .ant-select-single .ant-select-selector {
-  height: 32px;
+  height: 40px;
 }
 .ant-input-group-sm .ant-select-single .ant-select-selector {
   height: 26px;
@@ -562,12 +562,12 @@ textarea.ant-input {
   border-radius: 0 2px 2px 0;
 }
 .ant-input-group-rtl .ant-input-group-addon:first-child {
-  border-right: 1px solid #d9d9d9;
+  border-right: 1px solid #bfbfbf;
   border-left: 0;
 }
 .ant-input-group-rtl .ant-input-group-addon:last-child {
   border-right: 0;
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid #bfbfbf;
 }
 .ant-input-group-rtl.ant-input-group > .ant-input:last-child,
 .ant-input-group-rtl.ant-input-group-addon:last-child {
@@ -624,7 +624,7 @@ textarea.ant-input {
   height: 32px;
 }
 .ant-input[type='color'].ant-input-lg {
-  height: 32px;
+  height: 40px;
 }
 .ant-input[type='color'].ant-input-sm {
   height: 26px;
@@ -679,7 +679,7 @@ textarea.ant-input {
   z-index: 1;
 }
 .ant-input-search-large .ant-input-search-button {
-  height: 32px;
+  height: 40px;
 }
 .ant-input-search-small .ant-input-search-button {
   height: 26px;
@@ -738,7 +738,7 @@ textarea.ant-input {
     height: 32px;
   }
   .ant-input-lg {
-    height: 32px;
+    height: 40px;
   }
   .ant-input-sm {
     height: 26px;
@@ -756,3 +756,6 @@ textarea.ant-input {
 .ant-input[disabled] {
   border-color: #d9d9d9;
 }
+.ant-input-group-addon {
+  color: #666;
+}

package/es/components/Input/style.less

@@ -6,3 +6,7 @@
     border-color: @input-disabled-border-color;
   }
 }
+
+.@{ant-prefix}-input-group-addon {
+  color: @font-color-6;
+}

package/es/components/InputNumber/style.css

@@ -19,7 +19,7 @@
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   display: inline-block;
@@ -63,7 +63,7 @@
   opacity: 1;
 }
 .ant-input-number-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-number[disabled] {
@@ -73,7 +73,7 @@
   opacity: 1;
 }
 .ant-input-number[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-number-borderless,
@@ -97,7 +97,7 @@ textarea.ant-input-number {
   transition: all 0.3s, height 0s;
 }
 .ant-input-number-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-input-number-sm {
@@ -189,7 +189,7 @@ textarea.ant-input-number {
   opacity: 1;
 }
 .ant-input-number-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-input-number-disabled .ant-input-number-input {
@@ -239,7 +239,7 @@ textarea.ant-input-number {
   font-size: 16px;
 }
 .ant-input-number-lg input {
-  height: 30px;
+  height: 38px;
 }
 .ant-input-number-sm {
   padding: 0;

package/es/components/Menu/index.d.ts

@@ -13,9 +13,9 @@ export interface IMenuProps extends Omit<MenuProps, 'options' | 'mode'> {
 }
 export declare function Menue(props: React.PropsWithChildren<IMenuProps>): JSX.Element;
 export declare namespace Menue {
-    var Divider: typeof import("rc-menu").Divider;
+    var Divider;
     var Item: typeof import("antd/lib/menu/MenuItem").default;
     var SubMenu: typeof import("antd/lib/menu/SubMenu").default;
-    var ItemGroup: typeof import("rc-menu").MenuItemGroup;
+    var ItemGroup;
 }
 export default Menue;

package/es/components/NameLimiter/index.d.ts

@@ -1,21 +1,11 @@
-import * as React from 'react';
-export declare enum SplitType {
-    End = "end",
-    Between = "between"
-}
+/// <reference types="react" />
 /**
- * 对于过长的名称进行format，并增加Tooltip。
+ * 对于超出容器宽度的名称进行省略，使用Tooltip展示。
  */
 export interface INameLimiterProps {
     /** 资源名称 */
     name: string;
-    /** 展示的最大长度，资源名称超过该长度会展示前后个一半的资源名称，中间使用省略号 */
-    length: number;
     /** 用于显示Tooltip的title */
     title?: string;
-    /** 省略号位置 */
-    type?: SplitType;
-}
-export default class NameLimiter extends React.PureComponent<INameLimiterProps, any> {
-    render(): JSX.Element;
 }
+export default function NameLimiter({ name, title }: INameLimiterProps): JSX.Element;

package/es/components/NameLimiter/index.js

@@ -1,42 +1,33 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import * as React from 'react';
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
 import { SDK_PREFIX } from '../../constants/style';
-import { getBytes, getTransformerString } from './transformer';
-export var SplitType;
-(function (SplitType) {
-    SplitType["End"] = "end";
-    SplitType["Between"] = "between";
-})(SplitType || (SplitType = {}));
-var NameLimiter = /** @class */ (function (_super) {
-    __extends(NameLimiter, _super);
-    function NameLimiter() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    NameLimiter.prototype.render = function () {
-        var _a = this.props, name = _a.name, length = _a.length, title = _a.title, type = _a.type;
-        var displayName = name;
-        var needFormat = getBytes(displayName) > length;
-        var nameSpan = (React.createElement("span", null, needFormat
-            ? getTransformerString(displayName, length, type)
-            : displayName));
-        if (title || needFormat) {
-            return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-tooltip", placement: "top", title: title || displayName }, nameSpan));
+export default function NameLimiter(_a) {
+    var name = _a.name, title = _a.title;
+    var _b = __read(useState(false), 2), ellipsis = _b[0], setEllipsis = _b[1];
+    var _c = __read(useState(false), 2), visible = _c[0], setVisible = _c[1];
+    var ref = useRef(null);
+    useLayoutEffect(function () {
+        if (!ref.current) {
+            return;
         }
-        return nameSpan;
-    };
-    return NameLimiter;
-}(React.PureComponent));
-export default NameLimiter;
+        setEllipsis(ref.current.clientWidth < ref.current.scrollWidth);
+    });
+    return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-limit-tooltip", placement: "top", title: title || name, visible: (!!title || ellipsis) && visible, onVisibleChange: setVisible },
+        React.createElement("span", { className: SDK_PREFIX + "-name-limit", ref: ref }, name)));
+}

package/es/components/NameLimiter/style.css

@@ -268,7 +268,15 @@
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-name-tooltip .ant-tooltip-inner {
+.pandora-sdk-name-limit {
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.pandora-sdk-name-limit-tooltip .ant-tooltip-inner {
   max-width: 400px !important;
   max-height: 200px !important;
   overflow: auto;