@hw-component/table 1.10.32 → 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.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); }
@@ -44,13 +45,15 @@ var getTooltipProps = function getTooltipProps(item, tooltip) {
 var Text = function Text(_ref) {
   var children = _ref.children,
     closable = _ref.closable;
-  var maxWidth = closable ? "calc(100% - 18px)" : "100%";
   return jsx(Typography.Text, {
     ellipsis: {
-      tooltip: children
+      tooltip: {
+        title: children,
+        placement: "topLeft"
+      }
     },
     style: {
-      maxWidth: maxWidth
+      paddingRight: closable ? 17 : 0
     },
     children: children
   });
@@ -69,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,
@@ -112,6 +116,7 @@ var TagsComponent = function TagsComponent(props) {
         });
         return jsx(Tooltip, _objectSpread(_objectSpread({}, _tooltipProps), {}, {
           children: jsx(Tag, _objectSpread(_objectSpread({
+            className: tagClassName,
             style: _objectSpread({
               maxWidth: "100%"
             }, tagStyle)

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.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); }
@@ -47,13 +48,15 @@ var getTooltipProps = function getTooltipProps(item, tooltip) {
 var Text = function Text(_ref) {
   var children = _ref.children,
     closable = _ref.closable;
-  var maxWidth = closable ? "calc(100% - 18px)" : "100%";
   return jsxRuntime.jsx(antd.Typography.Text, {
     ellipsis: {
-      tooltip: children
+      tooltip: {
+        title: children,
+        placement: "topLeft"
+      }
     },
     style: {
-      maxWidth: maxWidth
+      paddingRight: closable ? 17 : 0
     },
     children: children
   });
@@ -72,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,
@@ -115,6 +119,7 @@ var TagsComponent = function TagsComponent(props) {
         });
         return jsxRuntime.jsx(antd.Tooltip, _objectSpread(_objectSpread({}, _tooltipProps), {}, {
           children: jsxRuntime.jsx(antd.Tag, _objectSpread(_objectSpread({
+            className: tagClassName,
             style: _objectSpread({
               maxWidth: "100%"
             }, tagStyle)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.10.32",
+  "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;
@@ -48,8 +49,7 @@ interface TextProps {
   closable?: boolean;
 }
 export const Text:React.FC<TextProps>=({children,closable})=>{
-  const maxWidth=closable?`calc(100% - 18px)`:"100%";
-  return <Typography.Text ellipsis={{tooltip:children}} style={{maxWidth}}>{children}</Typography.Text>
+  return <Typography.Text ellipsis={{tooltip:{title:children,placement:"topLeft"}}} style={{paddingRight:closable?17:0}}>{children}</Typography.Text>
 }
 const TagsComponent = (props: IProps) => {
   const {
@@ -66,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) {
@@ -91,7 +92,6 @@ 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);
@@ -100,6 +100,7 @@ const TagsComponent = (props: IProps) => {
             <Tooltip {...tooltipProps}>
               <Tag
                 key={indexKey}
+                className={tagClassName}
                 style={{
                   maxWidth:"100%",
                   ...tagStyle

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 (