listpage-next 0.0.50 → 0.0.52

package/dist/components/DataTable/components/DataTable.d.ts

@@ -1,2 +1,3 @@
 import { DataTableProps } from "../typings";
+export declare const DataTableComponent: <Record = any>(props: DataTableProps<Record>) => import("react/jsx-runtime").JSX.Element;
 export declare const DataTable: <Record = any>(props: DataTableProps<Record>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/components/DataTable.js

@@ -3,6 +3,7 @@ import styled_components from "styled-components";
 import { Card, Pagination, Table } from "antd";
 import { useColumns } from "../hooks/useColumns.js";
 import { useData } from "../hooks/useData.js";
+import { FloatProvider, useFloatContext } from "../context/index.js";
 const PaginationContainer = styled_components.div`
     padding: 12px 16px 12px 0;
     border-top: 1px solid #f0f0f0;
@@ -16,7 +17,7 @@ const TableContainer = styled_components.div`
         }
     }
 `;
-const DataTable = (props)=>{
+const DataTableComponent = (props)=>{
     const { title, extra, dataSource, request, refreshDeps, ...restProps } = props;
     const { data, loading, pagination, onPaginationChange } = useData({
         dataSource,
@@ -24,7 +25,10 @@ const DataTable = (props)=>{
         refreshDeps,
         pagination: restProps.pagination
     });
-    const columns = useColumns(props, {});
+    const floatCtx = useFloatContext();
+    const columns = useColumns(props, {
+        ...floatCtx
+    });
     return /*#__PURE__*/ jsxs(Card, {
         title: title,
         extra: extra,
@@ -55,4 +59,10 @@ const DataTable = (props)=>{
         ]
     });
 };
-export { DataTable };
+const DataTable = (props)=>/*#__PURE__*/ jsx(FloatProvider, {
+        floats: props.floats,
+        children: /*#__PURE__*/ jsx(DataTableComponent, {
+            ...props
+        })
+    });
+export { DataTable, DataTableComponent };

package/dist/components/DataTable/context/index.d.ts

@@ -0,0 +1,14 @@
+import React, { JSX } from 'react';
+export interface FloatContextProps {
+    showFloat: (key: string, record: any) => void;
+    hideFloat: (key: string) => void;
+}
+export declare const FloatContext: React.Context<FloatContextProps | undefined>;
+export declare const useFloatContext: () => FloatContextProps;
+export declare const FloatProvider: (props: {
+    floats?: {
+        key: string;
+        content: JSX.Element;
+    }[];
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/context/index.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, useCallback, useContext, useRef, useState } from "react";
+const FloatContext = /*#__PURE__*/ createContext(void 0);
+const useFloatContext = ()=>{
+    const context = useContext(FloatContext);
+    if (!context) throw new Error('useFloatContext must be used within a FloatContextProvider');
+    return context;
+};
+const FloatProvider = (props)=>{
+    const { floats = [], children } = props;
+    const floatsMapRef = useRef({});
+    const [eles, setEles] = useState([]);
+    const showFloat = useCallback((key, record)=>{
+        if (!floatsMapRef.current[key]) {
+            const content = floats.find((i)=>i.key === key)?.content;
+            if (!content) return;
+            floatsMapRef.current[key] = /*#__PURE__*/ cloneElement(content, {
+                record
+            });
+            setEles([
+                ...eles,
+                content
+            ]);
+        }
+    }, [
+        eles
+    ]);
+    const hideFloat = useCallback((key)=>{
+        if (!floatsMapRef.current[key]) return;
+        setEles(eles.filter((i)=>i !== floatsMapRef.current[key]));
+        delete floatsMapRef.current[key];
+    }, [
+        eles
+    ]);
+    return /*#__PURE__*/ jsx(FloatContext.Provider, {
+        value: {
+            showFloat,
+            hideFloat
+        },
+        children: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                children,
+                eles
+            ]
+        })
+    });
+};
+export { FloatContext, FloatProvider, useFloatContext };

package/dist/components/DataTable/hooks/useColumns.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
 import { Typography } from "antd";
 import { Render } from "../components/Render.js";
 function useColumns(props, ctx) {
@@ -9,6 +10,9 @@ function useColumns(props, ctx) {
                 if ('text' === column.component) return function(value, record, index) {
                     return textRender(value, column.props);
                 };
+                if ('time' === column.component) return function(value, record, index) {
+                    return timeRender(value, column.props);
+                };
                 return function(value, record, index) {
                     return /*#__PURE__*/ jsx(Render, {
                         render: column.component,
@@ -36,4 +40,10 @@ function textRender(value, props) {
         children: value
     });
 }
+function timeRender(value, props) {
+    const time = value ? dayjs(value).format(props?.format) : '-';
+    return /*#__PURE__*/ jsx("span", {
+        children: time
+    });
+}
 export { useColumns };

package/dist/components/DataTable/typings/index.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { JSX } from "react";
 import { TableProps } from "antd";
 import { BaseQueryParams, PaginationData } from "../../../http-client";
 import { ColumnType } from "antd/es/table";
@@ -11,13 +11,22 @@ export interface DataTableProps<Record = any> extends Omit<TableProps<Record>, '
     title?: React.ReactNode;
     extra?: React.ReactNode;
     columns?: DataTableColumns<Record>[];
+    floats?: {
+        key: string;
+        content: JSX.Element;
+    }[];
 }
-export type ComponentType = 'text';
-export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : unknown;
+export type ComponentType = 'text' | 'time';
+export type ComponentProps = ComponentType extends 'text' ? TextComponentProps : ComponentType extends 'time' ? TimeComponentProps : unknown;
 export type TextComponentProps = TextProps;
+export type TimeComponentProps = {
+    format?: string;
+};
 export interface DataTableColumns<Record = any> extends ColumnType<Record> {
     component?: ComponentType | ColumnRender<Record>;
     props?: ComponentProps;
 }
 export interface DataTableContext {
+    showFloat: (key: string, record: any) => void;
+    hideFloat: (key: string) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",