@aloudata/aloudata-design 2.14.7 → 2.14.9

package/dist/RenameInput/index.js

@@ -13,6 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 var defaultWidth = 20;
+var PADDING_WIDTH = 2;
 var RenameInput = function RenameInput(_ref) {
   var propsValue = _ref.value,
     onConfirm = _ref.onConfirm,
@@ -23,11 +24,17 @@ var RenameInput = function RenameInput(_ref) {
     focus = _ref$focus === void 0 ? false : _ref$focus,
     maxLength = _ref.maxLength,
     validateValue = _ref.validateValue,
-    onError = _ref.onError;
-  var _useState = useState(propsValue),
+    onError = _ref.onError,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
+    isEdit = _useState2[0],
+    setIsEdit = _useState2[1];
+  var _useState3 = useState(propsValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
   var divRef = useRef(null);
   var inputRef = useRef(null);
   var handleBlur = useCallback(function () {
@@ -39,60 +46,72 @@ var RenameInput = function RenameInput(_ref) {
     if (!width && divRef.current && inputRef.current) {
       var _divRef$current;
       var tempWidth = ((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.offsetWidth) || defaultWidth;
-      inputRef.current.style.width = tempWidth + 'px';
+      inputRef.current.style.width = tempWidth + PADDING_WIDTH + 'px';
     }
-  }, [width, value]);
-  useEffect(function () {
-    setValue(propsValue);
-  }, [propsValue]);
+  }, [width, value, isEdit]);
   useEffect(function () {
     if (focus && inputRef.current) {
       inputRef.current.select();
     }
   }, [focus]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ald-rename-input"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: classNames(className, 'ald-rename-input-wrapper'),
-    style: _objectSpread(_objectSpread({}, fontStyle), {}, {
-      width: width
-    }),
-    value: value,
-    ref: inputRef,
-    onChange: function onChange(e) {
-      return setValue(e.target.value.trim());
-    },
-    onBlur: function onBlur(e) {
-      if (!validateValue || validateValue(e.target.value.trim())) {
-        handleBlur();
-      } else {
-        onError === null || onError === void 0 ? void 0 : onError(value);
-        setValue(propsValue);
-      }
-    },
-    autoFocus: focus,
-    onFocus: function onFocus() {
-      var _inputRef$current2;
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.select();
-    },
-    maxLength: maxLength,
-    onKeyUp: function onKeyUp(e) {
-      if (e.key === 'Enter') {
-        var _inputRef$current3;
-        if (!validateValue || validateValue(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.trim()) || '')) {
-          var _inputRef$current4;
-          (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.blur();
+  if (isEdit && !readonly) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ald-rename-input"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: classNames(className, 'ald-rename-input-wrapper'),
+      style: _objectSpread(_objectSpread({}, fontStyle), {}, {
+        width: width
+      }),
+      value: value,
+      ref: inputRef,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      onBlur: function onBlur(e) {
+        if (!validateValue || validateValue(e.target.value.trim())) {
+          handleBlur();
         } else {
-          var _inputRef$current5;
-          onError === null || onError === void 0 ? void 0 : onError(((_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.value.trim()) || '');
+          onError === null || onError === void 0 ? void 0 : onError(value);
           setValue(propsValue);
         }
+        setIsEdit(false);
+      },
+      autoFocus: focus,
+      onFocus: function onFocus() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.select();
+      },
+      maxLength: maxLength,
+      onKeyUp: function onKeyUp(e) {
+        if (e.key === 'Enter') {
+          var _inputRef$current3;
+          if (!validateValue || validateValue(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.trim()) || '')) {
+            var _inputRef$current4;
+            (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.blur();
+          } else {
+            var _inputRef$current5;
+            onError === null || onError === void 0 ? void 0 : onError(((_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.value.trim()) || '');
+            setValue(propsValue);
+          }
+        }
       }
+    }), /*#__PURE__*/React.createElement("div", {
+      ref: divRef,
+      className: "ald-rename-input-div",
+      style: fontStyle
+    }, value));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(className, 'ald-rename-input-text'),
+    style: fontStyle,
+    onMouseEnter: function onMouseEnter() {
+      setIsEdit(true);
+    },
+    onClick: function onClick() {
+      var _inputRef$current6;
+      setValue(propsValue);
+      (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.select();
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: divRef,
-    className: "ald-rename-input-div",
-    style: _objectSpread({}, fontStyle)
-  }, value));
+  }, propsValue);
 };
 export default RenameInput;

package/dist/RenameInput/style/index.less

@@ -9,6 +9,15 @@
   border: 1px solid transparent;
 }
 
+.ald-rename-input-text {
+  height: 22px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  border: 1px solid transparent;
+}
+
 .ald-rename-input-wrapper {
   box-sizing: border-box;
   height: 24px;

package/dist/Table/helper.d.ts

@@ -23,7 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "left" | "right" | "center" | undefined;
+        align?: "center" | "left" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };

package/dist/Tag/index.d.ts

@@ -39,6 +39,10 @@ export interface TagProps {
      * 最大宽度
      */
     maxWidth?: number;
+    /**
+     * hover 上去后显示的 title
+     */
+    title?: string;
     className?: string;
 }
 export default function Tag(props: TagProps): React.JSX.Element;

package/dist/Tag/index.js

@@ -20,7 +20,8 @@ export default function Tag(props) {
     mode = props.mode,
     disabled = props.disabled,
     maxWidth = props.maxWidth,
-    className = props.className;
+    className = props.className,
+    title = props.title;
   var tagColor = getColor(color, status);
   var bgColor = mode === 'border' ? '#fff' : convertHexToRGBA(tagColor, mode === 'fill' ? 0.16 : 0.06);
   var onTagClick = useCallback(function (e) {
@@ -36,8 +37,9 @@ export default function Tag(props) {
     onClose === null || onClose === void 0 ? void 0 : onClose(e);
   }, [disabled, onClose]);
   var DEFAULT_MAX_WIDTH = 160;
+  var domTitle = title !== undefined ? title : typeof children === 'string' ? children : '';
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('clickable'), typeof onClick === 'function'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),
+    className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),
     style: {
       backgroundColor: bgColor,
       color: convertHexToRGBA(tagColor, 1),
@@ -49,7 +51,7 @@ export default function Tag(props) {
     className: prefixCls('icon')
   }, icon), /*#__PURE__*/React.createElement("span", {
     className: prefixCls('content'),
-    title: typeof children === 'string' ? children : ''
+    title: domTitle
   }, children), suffixIcon && /*#__PURE__*/React.createElement("span", {
     className: prefixCls('suffix-icon')
   }, suffixIcon), closable ? /*#__PURE__*/React.createElement("span", {

package/dist/Tag/style/index.less

@@ -12,10 +12,6 @@
   line-height: 20px;
   overflow: hidden;
 
-  &.ald-tag-clickable {
-    cursor: pointer;
-  }
-
   /** 尺寸 **/
   &.ald-tag-small {
     font-size: 12px;