@hw-component/table 1.10.31 → 1.10.33

package/es/index.css

@@ -1,3 +1,14 @@
+.ant-hw-table-render-tag {
+  position: relative;
+}
+.ant-hw-table-render-tag .ant-tag-close-icon {
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
 .ant-hw-table-content .ant-hw-table-body {
   padding-top: 0;
   border-top-left-radius: 0;

package/es/render/TagsComponent.d.ts

@@ -21,6 +21,9 @@ interface IProps {
     extra?: React.ReactNode;
     tagStyle?: React.CSSProperties;
 }
-export declare const Text: React.FC;
+interface TextProps {
+    closable?: boolean;
+}
+export declare const Text: React.FC<TextProps>;
 declare const TagsComponent: (props: IProps) => JSX.Element;
 export default TagsComponent;

package/es/render/TagsComponent.js

@@ -16,6 +16,7 @@ import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Row, Tooltip, Tag, Popover, Typography } from 'antd';
 import { useMemo } from 'react';
+import { useClassName } from '../hooks/index.js';
 
 var _excluded = ["contentItemRender"];
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -42,10 +43,17 @@ var getTooltipProps = function getTooltipProps(item, tooltip) {
   });
 };
 var Text = function Text(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    closable = _ref.closable;
   return jsx(Typography.Text, {
     ellipsis: {
-      tooltip: children
+      tooltip: {
+        title: children,
+        placement: "topLeft"
+      }
+    },
+    style: {
+      paddingRight: closable ? 17 : 0
     },
     children: children
   });
@@ -64,6 +72,7 @@ var TagsComponent = function TagsComponent(props) {
     popoverContentRender = props.popoverContentRender,
     extra = props.extra,
     tagStyle = props.tagStyle;
+  var tagClassName = useClassName("hw-table-render-tag");
   var _fieldNames$label = fieldNames.label,
     label = _fieldNames$label === void 0 ? "label" : _fieldNames$label,
     _fieldNames$value = fieldNames.value,
@@ -96,19 +105,20 @@ var TagsComponent = function TagsComponent(props) {
         color: color,
         icon: icon
       };
-      var tagWidth = closable ? "calc(100% - 18px)" : "100%";
       var indexKey = index.toString();
       if (typeof tagItem === "string") {
         var _tooltipProps = getTooltipProps({
           title: tagItem
         }, tooltip);
         var _tagNode = jsx(Text, {
+          closable: closable,
           children: tagItem
         });
         return jsx(Tooltip, _objectSpread(_objectSpread({}, _tooltipProps), {}, {
           children: jsx(Tag, _objectSpread(_objectSpread({
+            className: tagClassName,
             style: _objectSpread({
-              maxWidth: tagWidth
+              maxWidth: "100%"
             }, tagStyle)
           }, tagProps), {}, {
             onClose: function onClose(e) {
@@ -129,12 +139,13 @@ var TagsComponent = function TagsComponent(props) {
       var cuTagProps = _objectSpread(_objectSpread({}, tagProps), itemProps);
       var cuKey = tagValue || indexKey;
       var tagNode = jsx(Text, {
+        closable: closable,
         children: tagLabel
       });
       return jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         children: jsx(Tag, _objectSpread(_objectSpread({
           style: _objectSpread({
-            maxWidth: tagWidth
+            maxWidth: "100%"
           }, tagStyle)
         }, cuTagProps), {}, {
           onClose: function onClose(e) {

package/lib/index.css

@@ -1,3 +1,14 @@
+.ant-hw-table-render-tag {
+  position: relative;
+}
+.ant-hw-table-render-tag .ant-tag-close-icon {
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
 .ant-hw-table-content .ant-hw-table-body {
   padding-top: 0;
   border-top-left-radius: 0;

package/lib/render/TagsComponent.d.ts

@@ -21,6 +21,9 @@ interface IProps {
     extra?: React.ReactNode;
     tagStyle?: React.CSSProperties;
 }
-export declare const Text: React.FC;
+interface TextProps {
+    closable?: boolean;
+}
+export declare const Text: React.FC<TextProps>;
 declare const TagsComponent: (props: IProps) => JSX.Element;
 export default TagsComponent;

package/lib/render/TagsComponent.js

@@ -19,6 +19,7 @@ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instan
 var jsxRuntime = require('react/jsx-runtime');
 var antd = require('antd');
 var React = require('react');
+var index = require('../hooks/index.js');
 
 var _excluded = ["contentItemRender"];
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -45,10 +46,17 @@ var getTooltipProps = function getTooltipProps(item, tooltip) {
   });
 };
 var Text = function Text(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    closable = _ref.closable;
   return jsxRuntime.jsx(antd.Typography.Text, {
     ellipsis: {
-      tooltip: children
+      tooltip: {
+        title: children,
+        placement: "topLeft"
+      }
+    },
+    style: {
+      paddingRight: closable ? 17 : 0
     },
     children: children
   });
@@ -67,6 +75,7 @@ var TagsComponent = function TagsComponent(props) {
     popoverContentRender = props.popoverContentRender,
     extra = props.extra,
     tagStyle = props.tagStyle;
+  var tagClassName = index.useClassName("hw-table-render-tag");
   var _fieldNames$label = fieldNames.label,
     label = _fieldNames$label === void 0 ? "label" : _fieldNames$label,
     _fieldNames$value = fieldNames.value,
@@ -99,19 +108,20 @@ var TagsComponent = function TagsComponent(props) {
         color: color,
         icon: icon
       };
-      var tagWidth = closable ? "calc(100% - 18px)" : "100%";
       var indexKey = index.toString();
       if (typeof tagItem === "string") {
         var _tooltipProps = getTooltipProps({
           title: tagItem
         }, tooltip);
         var _tagNode = jsxRuntime.jsx(Text, {
+          closable: closable,
           children: tagItem
         });
         return jsxRuntime.jsx(antd.Tooltip, _objectSpread(_objectSpread({}, _tooltipProps), {}, {
           children: jsxRuntime.jsx(antd.Tag, _objectSpread(_objectSpread({
+            className: tagClassName,
             style: _objectSpread({
-              maxWidth: tagWidth
+              maxWidth: "100%"
             }, tagStyle)
           }, tagProps), {}, {
             onClose: function onClose(e) {
@@ -132,12 +142,13 @@ var TagsComponent = function TagsComponent(props) {
       var cuTagProps = _objectSpread(_objectSpread({}, tagProps), itemProps);
       var cuKey = tagValue || indexKey;
       var tagNode = jsxRuntime.jsx(Text, {
+        closable: closable,
         children: tagLabel
       });
       return jsxRuntime.jsx(antd.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         children: jsxRuntime.jsx(antd.Tag, _objectSpread(_objectSpread({
           style: _objectSpread({
-            maxWidth: tagWidth
+            maxWidth: "100%"
           }, tagStyle)
         }, cuTagProps), {}, {
           onClose: function onClose(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.10.31",
+  "version": "1.10.33",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/index.less

@@ -1,4 +1,14 @@
 @import "./styles/local.less";
+
+.@{ant-prefix}-hw-table-render-tag {
+  position: relative;
+   .@{ant-prefix}-tag-close-icon{
+      position: absolute;
+      right: 7px;
+      top: 50%;
+      transform: translateY(-50%);
+   }
+}
 .@{ant-prefix}-hw-table-content {
   .@{ant-prefix}-hw-table-body {
     padding-top: 0;

package/src/components/render/TagsComponent.tsx

@@ -2,6 +2,7 @@ import {Row, Tag, Tooltip, Popover, Typography} from "antd";
 import React, { useMemo } from "react";
 import type { TooltipProps } from "antd/lib/tooltip";
 import type { HTableInstance } from "../modal";
+import {useClassName} from "../hooks";
 
 type CloseFn = (key: string, tableInstance?: HTableInstance) => void;
 type TooltipRender = (item: any) => TooltipProps;
@@ -44,8 +45,11 @@ const getTooltipProps = (
     title,
   };
 };
-export const Text:React.FC=({children})=>{
-  return <Typography.Text ellipsis={{tooltip:children}}>{children}</Typography.Text>
+interface TextProps {
+  closable?: boolean;
+}
+export const Text:React.FC<TextProps>=({children,closable})=>{
+  return <Typography.Text ellipsis={{tooltip:{title:children,placement:"topLeft"}}} style={{paddingRight:closable?17:0}}>{children}</Typography.Text>
 }
 const TagsComponent = (props: IProps) => {
   const {
@@ -62,6 +66,7 @@ const TagsComponent = (props: IProps) => {
     extra,
     tagStyle
   } = props;
+  const tagClassName=useClassName("hw-table-render-tag");
   const { label = "label", value = "value" } = fieldNames;
   const { tagData, moreTag } = useMemo(() => {
     if (!maxLen || !data) {
@@ -87,17 +92,17 @@ const TagsComponent = (props: IProps) => {
           color,
           icon,
         };
-        const tagWidth=closable?`calc(100% - 18px)`:"100%";
         const indexKey = index.toString();
         if (typeof tagItem === "string") {
           const tooltipProps = getTooltipProps({ title: tagItem }, tooltip);
-          const tagNode=<Text>{tagItem}</Text>
+          const tagNode=<Text closable={closable}>{tagItem}</Text>
           return (
             <Tooltip {...tooltipProps}>
               <Tag
                 key={indexKey}
+                className={tagClassName}
                 style={{
-                  maxWidth:tagWidth,
+                  maxWidth:"100%",
                   ...tagStyle
                 }}
                 {...tagProps}
@@ -121,13 +126,13 @@ const TagsComponent = (props: IProps) => {
           ...itemProps,
         };
         const cuKey = tagValue || indexKey;
-        const tagNode=<Text>{tagLabel}</Text>
+        const tagNode=<Text closable={closable}>{tagLabel}</Text>
         return (
           <Tooltip {...tooltipProps}>
             <Tag
               key={cuKey}
               style={{
-                maxWidth:tagWidth,
+                maxWidth:"100%",
                 ...tagStyle
               }}
               {...cuTagProps}

package/src/pages/Table/index.tsx

@@ -97,6 +97,7 @@ const listReq = (params) => {
         records.push({
           id: `${current}-${i}`,
           lastPullGroupTime: 1760420231,
+          op3:["1231231232132131231321321312331231331321","2222"]
         });
       }
       resolve({
@@ -163,6 +164,10 @@ export default () => {
       dataIndex: "op3",
       width: 120,
       fixed: "right",
+      valueType:"tags",
+      valueTypeProps: {
+        closable: true,
+      }
     },
   ]);
   return (