@hw-component/table 1.2.6 → 1.2.8

package/src/components/HTableBody/RowSelection.tsx

@@ -21,8 +21,10 @@ export const RowSelectionTitle = ({
   });
   const { keys, selectAll } = selectedRowData;
   const allCheck = () => {
-    const setKeys = newData.map((item,index) => {
-      return typeof rowKey==="function"?rowKey(item,index):item[(rowKey as string)];
+    const setKeys = newData.map((item, index) => {
+      return typeof rowKey === "function"
+        ? rowKey(item, index)
+        : item[rowKey as string];
     });
     rowOnChange(setKeys, newData);
     onChange?.(setKeys, newData);
@@ -106,17 +108,17 @@ interface RowSelectionBoxProps {
   data: any;
   onChange?: HRowSelection["onChange"];
   getCheckboxProps?: HRowSelection["getCheckboxProps"];
-  index:number;
+  index: number;
 }
 export const RowSelectionBox = ({
   data,
   onChange,
-                                  index,
+  index,
   getCheckboxProps,
 }: RowSelectionBoxProps) => {
   const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
   const { rowData = [], keys = [] } = selectedRowData;
-  const key = typeof rowKey==="function"?rowKey(data,index):data[rowKey];
+  const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
   const check = (e) => {
     const checked = e.target.checked;
     const newKeys = [...keys];
@@ -128,9 +130,9 @@ export const RowSelectionBox = ({
       onChange?.(newKeys, newRowData);
       return;
     }
-    const index = newKeys.indexOf(key);
-    newKeys.splice(index, 1);
-    newRowData.splice(index, 1);
+    const keyIndex = newKeys.indexOf(key);
+    newKeys.splice(keyIndex, 1);
+    newRowData.splice(keyIndex, 1);
     rowOnChange(newKeys, newRowData);
     onChange?.(newKeys, newRowData);
   };

package/src/components/HTableBody/hooks.tsx

@@ -12,6 +12,8 @@ import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
 import { mkChangeValue, outColSetting } from "./utils";
+import configRender from "../render";
+import { useHTableConfigContext } from "@/components/TableConfig";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -25,7 +27,7 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
     width: 32,
     rowSelectionTitle: true,
     fixed: "left",
-    render: (dom, data,index) => {
+    render: (dom, data, index) => {
       return (
         <RowSelectionBox
           data={data}
@@ -39,6 +41,7 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
 };
 export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
   const [cols, setCols] = useState<ConfigDataModal>([]);
+  const { valueTypeConfig } = useHTableConfigContext({});
   const changeConfigData = (data: ConfigDataModal) => {
     const colsArray = data.filter((item) => {
       return !item.hideInTable;
@@ -47,15 +50,9 @@ export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
       colsArray.splice(0, 0, rowSelectionCol(rowSelection) as any);
     }
     return colsArray.map((item) => {
-      const { render } = item;
       return {
         ...item,
-        render: (dom: React.ReactNode, itemData: any, index: number) => {
-          if (!render) {
-            return dom;
-          }
-          return render(dom, itemData, index, table as HTableInstance);
-        },
+        render: configRender(item, table as HTableInstance, valueTypeConfig),
       };
     });
   };

package/src/components/HTableBody/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "./hooks";
 import { useHTableContext } from "../context";
 import React from "react";
-import {ConfigProvider, Empty, Alert, Space} from "antd";
+import { ConfigProvider, Empty, Alert, Space } from "antd";
 import { useHTableConfigContext } from "../TableConfig";
 import HTablePagination from "../HTablePagination";
 import { useClassName } from "../hooks";
@@ -125,76 +125,73 @@ export default ({
     : optionsNode;
   const alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   const className = useClassName("hw-table-body");
-  const {tableStyle:defaultTableStyle}=useHTableConfigContext({tableStyle})
+  const { tableStyle: defaultTableStyle } = useHTableConfigContext({
+    tableStyle,
+  });
   return (
     <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
-     <Space size={16} direction={"vertical"} style={{width:"100%"}}>
-       {alwaysShowAlert && (
-           <Alert
-               message={<AlertMsg actionRender={actionRender} />}
-               type="info"
-           />
-       )}
-       <HeaderTitle
-           headerTitle={headerTitle}
-           rNode={defaultOptionsNode}
-       />
-       <ConfigProvider
-           renderEmpty={() => {
-             if (error) {
-               return tableErrorRender?.(tableInstance, error);
-             }
-             return tableEmptyRender?.(tableInstance);
-           }}
-       >
+      <Space size={16} direction={"vertical"} style={{ width: "100%" }}>
+        {alwaysShowAlert && (
+          <Alert
+            message={<AlertMsg actionRender={actionRender} />}
+            type="info"
+          />
+        )}
+        <HeaderTitle headerTitle={headerTitle} rNode={defaultOptionsNode} />
+        <ConfigProvider
+          renderEmpty={() => {
+            if (error) {
+              return tableErrorRender?.(tableInstance, error);
+            }
+            return tableEmptyRender?.(tableInstance);
+          }}
+        >
           <ProTable
-              {...props}
-
-              columnsState={{
-                ...selfColStatus,
-                value,
-              }}
-              columns={cols as any}
-              size={cuSize}
-              search={false}
-              onChange={(page, filters, sorter) => {
-                if (localSorter) {
-                  return;
-                }
-                const { field, order } = sorter as any;
-                const orderByField =
-                    typeof order === "undefined" ? undefined : field;
-                const asc =
-                    typeof order === "undefined" ? undefined : order === "ascend";
-                tableInstance.table.reloadWithParams({
-                  current: 1,
-                  orderByField,
-                  asc,
-                });
-              }}
-              tableStyle={{
-                paddingBottom: 0,
-              }}
-              options={false}
-              rowSelection={false}
-              loading={loading}
-              rowKey={rowKey}
-              dataSource={records}
-              pagination={false}
-
+            {...props}
+            columnsState={{
+              ...selfColStatus,
+              value,
+            }}
+            columns={cols as any}
+            size={cuSize}
+            search={false}
+            onChange={(page, filters, sorter) => {
+              if (localSorter) {
+                return;
+              }
+              const { field, order } = sorter as any;
+              const orderByField =
+                typeof order === "undefined" ? undefined : field;
+              const asc =
+                typeof order === "undefined" ? undefined : order === "ascend";
+              tableInstance.table.reloadWithParams({
+                current: 1,
+                orderByField,
+                asc,
+              });
+            }}
+            tableStyle={{
+              paddingBottom: 0,
+            }}
+            options={false}
+            rowSelection={false}
+            loading={loading}
+            rowKey={rowKey}
+            dataSource={records}
+            pagination={false}
           />
-         {pagination !== false && (
-             <HTablePagination
-                 onPageChange={onPageChange}
-                 paginationStyle={paginationStyle}
-                 affixProps={affixProps}
-                 goTop={goTop}
-                 actionRender={paginationActionRender}
-                 {...pagination}
-             />
-         )}
-       </ConfigProvider>
-     </Space>
+          {pagination !== false && (
+            <HTablePagination
+              onPageChange={onPageChange}
+              paginationStyle={paginationStyle}
+              affixProps={affixProps}
+              goTop={goTop}
+              actionRender={paginationActionRender}
+              {...pagination}
+            />
+          )}
+        </ConfigProvider>
+      </Space>
     </div>
   );
 };

package/src/components/HTableHeader/index.tsx

@@ -6,7 +6,7 @@ import { useClassName } from "../hooks";
 import type { IHeaderProps } from "./modal";
 import { useHideMoreTitle } from "./hooks";
 import { HeaderProvider } from "./Context";
-import {useHTableConfigContext} from "../TableConfig";
+import { useHTableConfigContext } from "../TableConfig";
 
 const defaultSearchSpan = {
   xxl: 4,
@@ -45,7 +45,9 @@ export default ({
     typeof hideLabel === "undefined" ? contextHideLabel : hideLabel;
   const tableLabelWidth = labelWidth || contextLabelWidth;
   const className = useClassName("hw-table-header");
-  const {headerStyle:defaultHeaderStyle}=useHTableConfigContext({headerStyle})
+  const { headerStyle: defaultHeaderStyle } = useHTableConfigContext({
+    headerStyle,
+  });
   return (
     <Card
       style={defaultHeaderStyle}

package/src/components/HTablePagination/index.tsx

@@ -6,7 +6,7 @@ import { useClassName } from "../hooks";
 import React, { useState } from "react";
 import type { AffixProps } from "antd/lib/affix";
 import GoTop from "../GoTop";
-import {useHTableConfigContext} from "@/components/TableConfig";
+import { useHTableConfigContext } from "@/components/TableConfig";
 export interface IPaginationProps extends PaginationProps {
   onPageChange?: (params: ParamsModal) => void;
   paginationStyle?: React.CSSProperties;
@@ -37,7 +37,9 @@ export default ({
   if (!data) {
     return <></>;
   }
-  const {paginationStyle:defaultPaginationStyle}=useHTableConfigContext({paginationStyle})
+  const { paginationStyle: defaultPaginationStyle } = useHTableConfigContext({
+    paginationStyle,
+  });
 
   if (affixProps === false) {
     return (

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 "@/components/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,33 +1,40 @@
 import React, { useContext } from "react";
-import type { HTableInstance } from "src/components/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;
+  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
+  tableStyle,
+  paginationStyle,
 }: HTableConfigContextModal) => {
-  const { errorRender: configErrorRender, emptyRender: configEmptyRender,headerStyle:configHeaderStyle,tableStyle:configTableStyle,paginationStyle:configPaginationStyle } =
-    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
+    headerStyle: headerStyle || configHeaderStyle,
+    tableStyle: tableStyle || configTableStyle,
+    paginationStyle: paginationStyle || configPaginationStyle,
+    valueTypeConfig,
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/modal.ts

@@ -10,6 +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";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -43,6 +44,7 @@ interface HColumns extends Omit<ProColumns, "render" | "title"> {
   ) => React.ReactNode;
   rowSelectionTitle?: boolean;
   title?: string | React.ReactNode;
+  valueTypeProps?: Record<string, any>;
 }
 interface BcItemModal {
   childrenDataIndex?: ConfigItemModal[] | string[];
@@ -66,7 +68,6 @@ export type actionFn = (...arg) => void;
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
 }
-type RowKeyFn=(data:any,index:number)=>string;
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {
     alwaysShowAlert?: boolean;
@@ -74,7 +75,7 @@ export type HRowSelection = RowSelectionOuter &
 export interface HTableProps
   extends Omit<
     ProTableProps<any, any>,
-    "request" | "dataSource" | "rowKey" | "rowSelection"
+    "request" | "dataSource" | "rowSelection"
   > {
   request?: (params: ParamsModal) => Promise<ResultModal>;
   configData: ConfigDataModal;
@@ -97,7 +98,6 @@ export interface HTableProps
   manual?: boolean;
   dataSource?: ResultModal;
   paginationStyle?: React.CSSProperties;
-  rowKey?: string|RowKeyFn;
   allPageCheck?: boolean;
   rowSelection?: HRowSelection | false;
   affixProps?: AffixProps | false;
@@ -153,3 +153,11 @@ export interface ModalTableProps extends ModalProps {
   configData?: HTableProps["configData"];
   request?: HTableProps["request"];
 }
+
+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

@@ -0,0 +1,122 @@
+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;
+}
+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,
+      };
+    }
+    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, ...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;

package/src/components/render/config.tsx

@@ -0,0 +1,110 @@
+import moment from "moment";
+import type { ConfigItemModal, HTableInstance } from "@/components/modal";
+import TagsComponent from "./TagsComponent";
+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
+      onClick={() => {
+        copy(cpText || tableVal);
+        message.success(msg);
+      }}
+    >
+      {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}
+    </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}
+    </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,
+  image:imageRender,
+  avatar:avatarRender
+};

package/src/components/render/index.tsx

@@ -0,0 +1,25 @@
+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;
+  };
+};