@hw-component/table 1.2.7 → 1.2.9

package/src/components/Table.tsx

@@ -8,7 +8,7 @@ import type { HTableProps } from "./modal";
 import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
-import {useClassName} from "./hooks";
+import { useClassName } from "./hooks";
 export default ({
   request,
   configData,
@@ -57,8 +57,8 @@ export default ({
     selectedRowData,
     dataSource: data,
   });
-    const contentClassName = useClassName("hw-table-content");
-    return (
+  const contentClassName = useClassName("hw-table-content");
+  return (
     <HTableContext.Provider
       value={{
         tableInstance,
@@ -83,7 +83,12 @@ export default ({
         labelWidth,
       }}
     >
-      <Space direction={"vertical"} size={0} style={{ width: "100%" }} className={contentClassName}>
+      <Space
+        direction={"vertical"}
+        size={0}
+        style={{ width: "100%" }}
+        className={contentClassName}
+      >
         {!hideHeader && (
           <Header
             searchSpan={searchSpan}

package/src/components/TableConfig.tsx

@@ -1,35 +1,40 @@
 import React, { useContext } from "react";
-import type { HTableInstance ,ValueTypeConfigModal} from "./modal";
+import type { HTableInstance, ValueTypeConfigModal } from "./modal";
 
 interface HTableConfigContextModal {
   emptyRender?: (table: HTableInstance) => React.ReactNode;
   errorRender?: (table: HTableInstance, error: Error) => React.ReactNode;
-  headerStyle?:React.CSSProperties;
-  tableStyle?:React.CSSProperties;
-  paginationStyle?:React.CSSProperties;
-  valueTypeConfig?:ValueTypeConfigModal;
+  headerStyle?: React.CSSProperties;
+  tableStyle?: React.CSSProperties;
+  paginationStyle?: React.CSSProperties;
+  valueTypeConfig?: ValueTypeConfigModal;
 }
 export const HTableConfigContext =
   React.createContext<HTableConfigContextModal | null>(null);
 
-
 export const useHTableConfigContext = ({
   emptyRender,
   errorRender,
   headerStyle,
   tableStyle,
-  paginationStyle
+  paginationStyle,
 }: HTableConfigContextModal) => {
-  const { errorRender: configErrorRender, emptyRender: configEmptyRender,headerStyle:configHeaderStyle,tableStyle:configTableStyle,paginationStyle:configPaginationStyle,valueTypeConfig={} } =
-    useContext(HTableConfigContext) || {};
+  const {
+    errorRender: configErrorRender,
+    emptyRender: configEmptyRender,
+    headerStyle: configHeaderStyle,
+    tableStyle: configTableStyle,
+    paginationStyle: configPaginationStyle,
+    valueTypeConfig = {},
+  } = useContext(HTableConfigContext) || {};
 
   return {
     errorRender: errorRender || configErrorRender,
     emptyRender: emptyRender || configEmptyRender,
-    headerStyle:headerStyle||configHeaderStyle,
-    tableStyle:tableStyle||configTableStyle,
-    paginationStyle:paginationStyle||configPaginationStyle,
-    valueTypeConfig
+    headerStyle: headerStyle || configHeaderStyle,
+    tableStyle: tableStyle || configTableStyle,
+    paginationStyle: paginationStyle || configPaginationStyle,
+    valueTypeConfig,
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/modal.ts

@@ -10,7 +10,7 @@ import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody";
-import {GetRowKey} from "rc-table/lib/interface";
+import { GetRowKey } from "rc-table/lib/interface";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -44,7 +44,7 @@ interface HColumns extends Omit<ProColumns, "render" | "title"> {
   ) => React.ReactNode;
   rowSelectionTitle?: boolean;
   title?: string | React.ReactNode;
-  valueTypeProps?:Record<string, any>
+  valueTypeProps?: Record<string, any>;
 }
 interface BcItemModal {
   childrenDataIndex?: ConfigItemModal[] | string[];
@@ -75,7 +75,7 @@ export type HRowSelection = RowSelectionOuter &
 export interface HTableProps
   extends Omit<
     ProTableProps<any, any>,
-    "request" | "dataSource"| "rowSelection"
+    "request" | "dataSource" | "rowSelection"
   > {
   request?: (params: ParamsModal) => Promise<ResultModal>;
   configData: ConfigDataModal;
@@ -154,5 +154,10 @@ export interface ModalTableProps extends ModalProps {
   request?: HTableProps["request"];
 }
 
-export type ValueTypeConfigRenderFn=(config:ConfigItemModal,itemData:any,index:number,tableInstance:HTableInstance)=>React.ReactNode;
-export type ValueTypeConfigModal=Record<string, ValueTypeConfigRenderFn>;
+export type ValueTypeConfigRenderFn = (
+  config: ConfigItemModal,
+  itemData: any,
+  index: number,
+  tableInstance: HTableInstance
+) => React.ReactNode;
+export type ValueTypeConfigModal = Record<string, ValueTypeConfigRenderFn>;

package/src/components/render/TagsComponent.tsx

@@ -1,91 +1,122 @@
-import {Row, Tag,Tooltip,Popover} from "antd";
-import React, {useMemo} from "react";
-import {TooltipProps} from "antd/lib/tooltip";
-import {HTableInstance} from "@/components/modal";
-type CloseFn=(key:string,tableInstance?:HTableInstance)=>void;
+import { Row, Tag, Tooltip, Popover } from "antd";
+import React, { useMemo } from "react";
+import type { TooltipProps } from "antd/lib/tooltip";
+import type { HTableInstance } from "@/components/modal";
+type CloseFn = (key: string, tableInstance?: HTableInstance) => void;
 interface IProps {
-    data:any[];
-    closable?:boolean;
-    onClose?:CloseFn;
-    color?:string;
-    icon?:React.ReactNode;
-    tooltip?:boolean|TooltipProps;
-    fieldNames?:{label?:string,value?:string};
-    tableInstance?:HTableInstance;
-    maxLen?:number|null;
+  data: any[];
+  closable?: boolean;
+  onClose?: CloseFn;
+  color?: string;
+  icon?: React.ReactNode;
+  tooltip?: boolean | TooltipProps;
+  fieldNames?: { label?: string; value?: string };
+  tableInstance?: HTableInstance;
+  maxLen?: number | null;
 }
-const getTooltipProps=(title:string,tooltip?:boolean|TooltipProps):TooltipProps=>{
-    if (!tooltip){
-        return {
-            title:null
-        };
-    }
-    if (tooltip===true){
-        return {
-            title
-        }
+const getTooltipProps = (
+  title: string,
+  tooltip?: boolean | TooltipProps
+): TooltipProps => {
+  if (!tooltip) {
+    return {
+      title: null,
+    };
+  }
+  if (tooltip === true) {
+    return {
+      title,
+    };
+  }
+  return {
+    ...tooltip,
+    title,
+  };
+};
+const TagsComponent = (props: IProps) => {
+  const {
+    data,
+    closable,
+    onClose,
+    color,
+    icon,
+    fieldNames = {},
+    tooltip,
+    tableInstance,
+    maxLen,
+  } = props;
+  const { label = "label", value = "value" } = fieldNames;
+  const { tagData, moreTag } = useMemo(() => {
+    if (!maxLen || !data) {
+      return {
+        tagData: data,
+      };
     }
-    return  {
-        ...tooltip,
-        title,
-    }
-}
-const TagsComponent=(props:IProps)=>{
-    const {data,closable,onClose,color,icon,fieldNames={},tooltip,tableInstance,maxLen}=props;
-    const {label="label",value="value"}=fieldNames;
-    const {tagData,moreTag}=useMemo(()=>{
-         if (!maxLen||!data){
-             return {
-                 tagData:data
-             };
-         }
-         const tagData=data.slice(0,maxLen);
-         const moreTag=data.slice(maxLen);
-         return  {
-             tagData,
-             moreTag
-         }
-    },[data,maxLen]);
-    const moreLen=moreTag?.length;
+    const resultTagData = data.slice(0, maxLen);
+    const resultMoreTag = data.slice(maxLen);
+    return {
+      tagData: resultTagData,
+      moreTag: resultMoreTag,
+    };
+  }, [data, maxLen]);
+  const moreLen = moreTag?.length;
 
-    return <Row gutter={[8,8]}>
-            {tagData?.map((tagItem, index)=>{
-                const tagProps={
-                    closable,
-                    onClose,
-                    color,
-                    icon
-                }
-                const indexKey=index.toString();
-                if (typeof tagItem==="string"){
-                    const tooltipProps=getTooltipProps(tagItem,tooltip);
-                    return <Tooltip {...tooltipProps}>
-                        <Tag key={indexKey} {...tagProps} onClose={(e)=>{
-                            e.preventDefault();
-                            onClose?.(indexKey,tableInstance);
-                        }}>{tagItem}</Tag>
-                    </Tooltip>
-                }
-                const {[label]:tagLabel,[value]:tagValue,...props}=tagItem;
-                const tooltipProps=getTooltipProps(tagLabel,tooltip);
-                const cuTagProps={
-                    ...tagProps,
-                    ...props
-                }
-                const cuKey=tagValue||indexKey;
-                return <Tooltip {...tooltipProps}>
-                    <Tag key={cuKey} {...cuTagProps} onClose={(e)=>{
-                        e.preventDefault();
-                        cuTagProps?.onClose(cuKey,tableInstance);
-                    }}>{tagLabel}</Tag>
-                </Tooltip>
-            })}
-            {!moreLen?null:
-                <Popover content={<TagsComponent {...props} maxLen={null} />}>
-                <Tag>...等{data.length}个</Tag>
-               </Popover>
-            }
-        </Row>
-}
+  return (
+    <Row gutter={[8, 8]}>
+      {tagData?.map((tagItem, index) => {
+        const tagProps = {
+          closable,
+          onClose,
+          color,
+          icon,
+        };
+        const indexKey = index.toString();
+        if (typeof tagItem === "string") {
+          const tooltipProps = getTooltipProps(tagItem, tooltip);
+          return (
+            <Tooltip {...tooltipProps}>
+              <Tag
+                key={indexKey}
+                {...tagProps}
+                onClose={(e) => {
+                  e.preventDefault();
+                  onClose?.(indexKey, tableInstance);
+                }}
+              >
+                {tagItem}
+              </Tag>
+            </Tooltip>
+          );
+        }
+        const { [label]: tagLabel, [value]: tagValue, ...itemProps } = tagItem;
+        const tooltipProps = getTooltipProps(tagLabel, tooltip);
+        const cuTagProps = {
+          ...tagProps,
+          ...itemProps,
+        };
+        const cuKey = tagValue || indexKey;
+        return (
+          <Tooltip {...tooltipProps}>
+            <Tag
+              key={cuKey}
+              {...cuTagProps}
+              onClose={(e) => {
+                e.preventDefault();
+                cuTagProps?.onClose(cuKey, tableInstance);
+              }}
+            >
+              {tagLabel}
+            </Tag>
+          </Tooltip>
+        );
+      })}
+      {!moreLen ? null : (
+        <Popover content={<TagsComponent {...props} maxLen={null} />}>
+          <Tag>...等{data.length}个</Tag>
+        </Popover>
+      )}
+    </Row>
+  );
+};
 
-export default TagsComponent;
+export default TagsComponent;

package/src/components/render/config.tsx

@@ -1,75 +1,111 @@
-import moment from 'moment'
-import {ConfigItemModal, HTableInstance} from "@/components/modal";
+import moment from "moment";
+import type { ConfigItemModal, HTableInstance } from "@/components/modal";
 import TagsComponent from "./TagsComponent";
-import copy from 'copy-to-clipboard';
-import {message, Space, Typography} from 'antd';
-const {Link,Paragraph}=Typography;
-const getTableVal=(config:ConfigItemModal,itemData:any)=>{
-    const {dataIndex} = config;
-    const tableDataIndex=(dataIndex as string);
-    return itemData[tableDataIndex];
-}
-const dateRender=(config:ConfigItemModal,itemData:any)=>{
-   const {valueTypeProps={}}=config;
-    const tableVal=getTableVal(config,itemData);
-    const {format="YYYY-MM-DD HH:mm:ss",timeStampType="X"}=valueTypeProps;
-   if (!tableVal){
-       return  "-"
-   }
-   const time=moment(tableVal,timeStampType);
-   return time.format(format);
-}
-const tagsRender=(config:ConfigItemModal,itemData:any,index:number,tableInstance:HTableInstance)=>{
-    const {valueTypeProps={}}=config;
-    const tableVal=getTableVal(config,itemData);
-    if (!tableVal){
-        return  "-"
-    }
-    return <TagsComponent data={tableVal} {...valueTypeProps} tableInstance={tableInstance}/>
-}
-const copyRender=(config:ConfigItemModal,itemData:any)=>{
-    const {valueTypeProps={},title,titleStr}=config;
-    const {successMsg,text}=valueTypeProps;
-    const msg=successMsg||`复制${title||titleStr}成功!`;
-    const tableVal=getTableVal(config,itemData);
-    if (!tableVal){
-        return  "-"
-    }
-    let cpText=text;
-    if (typeof text==="function"){
-        cpText=text(itemData);
-    }
-    return  <Link onClick={()=>{
-        copy(cpText||tableVal);
+import copy from "copy-to-clipboard";
+import {Image, message, Typography,Avatar} from "antd";
+
+const { Link, Paragraph } = Typography;
+const getTableVal = (config: ConfigItemModal, itemData: any) => {
+  const { dataIndex } = config;
+  const tableDataIndex = dataIndex as string;
+  return itemData[tableDataIndex];
+};
+const dateRender = (config: ConfigItemModal, itemData: any) => {
+  const { valueTypeProps = {} } = config;
+  const tableVal = getTableVal(config, itemData);
+  const { format = "YYYY-MM-DD HH:mm:ss", timeStampType = "X" } =
+    valueTypeProps;
+  if (!tableVal) {
+    return "-";
+  }
+  const time = moment(tableVal, timeStampType);
+  return time.format(format);
+};
+const tagsRender = (
+  config: ConfigItemModal,
+  itemData: any,
+  index: number,
+  tableInstance: HTableInstance
+) => {
+  const { valueTypeProps = {} } = config;
+  const tableVal = getTableVal(config, itemData);
+  if (!tableVal) {
+    return "-";
+  }
+  return (
+    <TagsComponent
+      data={tableVal}
+      {...valueTypeProps}
+      tableInstance={tableInstance}
+    />
+  );
+};
+const copyRender = (config: ConfigItemModal, itemData: any) => {
+  const { valueTypeProps = {}, title, titleStr } = config;
+  const { successMsg, text } = valueTypeProps;
+  const msg = successMsg || `复制${title || titleStr}成功!`;
+  const tableVal = getTableVal(config, itemData);
+  if (!tableVal) {
+    return "-";
+  }
+  let cpText = text;
+  if (typeof text === "function") {
+    cpText = text(itemData);
+  }
+  return (
+    <Link
+        style={{ wordBreak: 'break-all' }}
+      onClick={() => {
+        copy(cpText || tableVal);
         message.success(msg);
-    }}>
-        {tableVal}
+      }}
+    >
+      {tableVal}
     </Link>
-}
-const linkRender=(config:ConfigItemModal,itemData:any)=>{
-    const {valueTypeProps={},}=config;
-    const {href,target="_blank"}=valueTypeProps;
-    const tableVal=getTableVal(config,itemData);
-    let hrefUrl=href;
-    if (typeof href==="function"){
-        hrefUrl=href(itemData);
-    }
-    return <Link href={hrefUrl||tableVal} target={target}>
-        {tableVal}
+  );
+};
+const linkRender = (config: ConfigItemModal, itemData: any) => {
+  const { valueTypeProps = {} } = config;
+  const { href, target = "_blank" } = valueTypeProps;
+  const tableVal = getTableVal(config, itemData);
+  let hrefUrl = href;
+  if (typeof href === "function") {
+    hrefUrl = href(itemData);
+  }
+  return (
+    <Link href={hrefUrl || tableVal} target={target} style={{ wordBreak: 'break-all' }}>
+      {tableVal}
     </Link>
-}
-const textRender=(config:ConfigItemModal,itemData:any)=>{
-    const {valueTypeProps={},}=config;
-    const {addonBefore,addonAfter,type,ellipsis}=valueTypeProps;
-    const tableVal=getTableVal(config,itemData);
-    return <Paragraph type={type} ellipsis={ellipsis}>
-        {addonBefore}{tableVal}{addonAfter}
+  );
+};
+const textRender = (config: ConfigItemModal, itemData: any) => {
+  const { valueTypeProps = {} } = config;
+  const { addonBefore, addonAfter, type, ellipsis } = valueTypeProps;
+  const tableVal = getTableVal(config, itemData);
+  return (
+    <Paragraph type={type} ellipsis={ellipsis}>
+      {addonBefore}
+      {tableVal}
+      {addonAfter}
     </Paragraph>
+  );
+};
+const imageRender=(config: ConfigItemModal, itemData: any)=>{
+  const { valueTypeProps = {} } = config;
+  const tableVal = getTableVal(config, itemData);
+  return <Image src={tableVal} width={48} {...valueTypeProps}/>;
+}
+const avatarRender=(config: ConfigItemModal, itemData: any)=>{
+  const { valueTypeProps = {} } = config;
+  const tableVal = getTableVal(config, itemData);
+  return <Avatar src={tableVal} size={32} {...valueTypeProps}/>;
 }
 export default {
-    date:dateRender,
-    tags:tagsRender,
-    copy:copyRender,
-    link:linkRender,
-    text:textRender
-}
+  date: dateRender,
+  tags: tagsRender,
+  copy: copyRender,
+  link: linkRender,
+  text: textRender,
+  image:imageRender,
+  avatar:avatarRender
+};

package/src/components/render/index.tsx

@@ -1,20 +1,25 @@
-import { ConfigItemModal, HTableInstance} from "@/components/modal";
-import React from "react";
-import config from './config';
-import {ValueTypeConfigModal} from '../modal'
-export default (item:ConfigItemModal,tableInstance:HTableInstance,valueTypeConfig:ValueTypeConfigModal)=>{
-    const { render ,valueType=""} = item;
-    return (dom: React.ReactNode, itemData: any, index: number)=>{
-        const valType=(valueType as string);
-        if (render){
-            return render(dom, itemData, index, tableInstance);
-        }
-        if (valueTypeConfig[valType]){
-            return  valueTypeConfig[valType](item,itemData,index,tableInstance);
-        }
-        if (config[valType]){
-          return  config[valType](item,itemData,index,tableInstance);
-        }
-        return dom;
-     }
-}
+import type { ConfigItemModal, HTableInstance } from "@/components/modal";
+import type React from "react";
+import config from "./config";
+import type { ValueTypeConfigModal } from "../modal";
+export default (
+  item: ConfigItemModal,
+  tableInstance: HTableInstance,
+  valueTypeConfig: ValueTypeConfigModal
+) => {
+  const { render, valueType = "" } = item;
+  return (dom: React.ReactNode, itemData: any, index: number) => {
+    const valType = valueType as string;
+    let node=dom;
+    if (config[valType]) {
+      node= config[valType](item, itemData, index, tableInstance);
+    }
+    if (valueTypeConfig[valType]) {
+      node=valueTypeConfig[valType](item, itemData, index, tableInstance);
+    }
+    if (render) {
+      return render(node, itemData, index, tableInstance);
+    }
+    return node;
+  };
+};