listpage-next 0.0.171 → 0.0.172

package/dist/components/PageLayout/components/PageLayout/index.d.ts

@@ -1,9 +1,10 @@
 import { SiderProps } from 'antd';
+import { PageLogoProps } from '../PageLogo';
 export interface PageLayoutProps {
     sider?: React.ReactNode;
     header?: React.ReactNode;
     content?: React.ReactNode;
-    logo?: React.ReactNode;
+    logo?: PageLogoProps;
     defaultCollapsed?: boolean;
     siderProps?: Omit<SiderProps, 'collapsed' | 'onCollapse'>;
 }

package/dist/components/PageLayout/components/PageLogo/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface PageLogoProps {
+    src?: string;
+    icon?: ReactNode;
+    title?: ReactNode;
+}
+export declare const PageLogo: (props: PageLogoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageLayout/components/PageLogo/index.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Image } from "antd";
+import { styled } from "styled-components";
+const PageLogo = (props)=>{
+    const { src, icon, title } = props;
+    return /*#__PURE__*/ jsxs(LogoContentWrapper, {
+        children: [
+            src && /*#__PURE__*/ jsx(Image, {
+                width: 30,
+                height: 30,
+                src: src,
+                preview: true
+            }),
+            icon && /*#__PURE__*/ jsx(Avatar, {
+                icon: icon,
+                shape: "circle",
+                size: 30
+            }),
+            title && /*#__PURE__*/ jsx(TitleContentWrapper, {
+                children: title
+            })
+        ]
+    });
+};
+const LogoContentWrapper = styled.div`
+  flex: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+`;
+const TitleContentWrapper = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+`;
+export { PageLogo };

package/dist/components/PageLayout/components/PageProvider/float.d.ts

@@ -0,0 +1,20 @@
+import React, { JSX } from 'react';
+export interface FloatContextProps {
+    showFloat: (key: string, record: any, onCloseCallback?: () => void) => void;
+    hideFloat: (key: string) => void;
+}
+export declare const FloatContext: React.Context<FloatContextProps | undefined>;
+export declare const useFloatContext: () => FloatContextProps;
+export declare const FloatProvider: (props: {
+    floats?: PageFloatProps[];
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export type FloatComponentProps<T extends Record<string, any> = any> = {
+    record: T;
+    visible: boolean;
+    onClose: () => void;
+};
+export type PageFloatProps<T extends Record<string, any> = any> = {
+    key: string;
+    render: (props: FloatComponentProps<T>) => JSX.Element;
+};

package/dist/components/PageLayout/components/PageProvider/float.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+const FloatContext = /*#__PURE__*/ createContext(void 0);
+const useFloatContext = ()=>{
+    const context = useContext(FloatContext);
+    if (!context) return {
+        showFloat: ()=>{},
+        hideFloat: ()=>{}
+    };
+    return context;
+};
+const FloatProvider = (props)=>{
+    const { floats = [], children } = props;
+    const elesRef = useRef([]);
+    const [eles, setEles] = useState([]);
+    const hideFloat = useCallback((key)=>{
+        elesRef.current = elesRef.current.filter((ele)=>ele.key !== key);
+        setEles([
+            ...elesRef.current.map((i)=>i.ele)
+        ]);
+    }, [
+        eles
+    ]);
+    const showFloat = useCallback((key, record, onCloseCallback)=>{
+        const Component = floats.find((i)=>i.key === key)?.render;
+        if (!Component) return;
+        const node = /*#__PURE__*/ jsx(Component, {
+            visible: true,
+            record: record,
+            onClose: ()=>{
+                onCloseCallback?.();
+                elesRef.current = elesRef.current.filter(({ ele })=>ele !== node);
+                setEles([
+                    ...elesRef.current.map((i)=>i.ele)
+                ]);
+            }
+        }, key);
+        elesRef.current.push({
+            key,
+            ele: node
+        });
+        setEles([
+            ...elesRef.current.map((i)=>i.ele)
+        ]);
+    }, [
+        floats,
+        eles,
+        elesRef,
+        setEles
+    ]);
+    return /*#__PURE__*/ jsx(FloatContext.Provider, {
+        value: {
+            showFloat,
+            hideFloat
+        },
+        children: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                children,
+                eles
+            ]
+        })
+    });
+};
+export { FloatContext, FloatProvider, useFloatContext };

package/dist/components/PageLayout/components/PageProvider/index.d.ts

@@ -1,3 +1,4 @@
+import { PageFloatProps } from './float';
 export declare const PageContext: import("react").Context<{
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
@@ -5,9 +6,12 @@ export declare const PageContext: import("react").Context<{
 export interface PageProviderProps {
     children: React.ReactNode;
     defaultCollapsed?: boolean;
+    floats?: PageFloatProps[];
 }
-export declare const PageProvider: ({ children, defaultCollapsed, }: PageProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageProvider: ({ children, defaultCollapsed, floats, }: PageProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const usePageContext: () => {
     collapsed: boolean;
     setCollapsed: (collapsed: boolean) => void;
+    showFloat: (key: string, record: any, onCloseCallback?: () => void) => void;
+    hideFloat: (key: string) => void;
 };

package/dist/components/PageLayout/components/PageProvider/index.js

@@ -1,18 +1,31 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
+import { FloatProvider, useFloatContext } from "./float.js";
 const PageContext = /*#__PURE__*/ createContext({
     collapsed: false,
     setCollapsed: ()=>{}
 });
-const PageProvider = ({ children, defaultCollapsed = false })=>{
+const PageProvider = ({ children, defaultCollapsed = false, floats = [] })=>{
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
-    return /*#__PURE__*/ jsx(PageContext.Provider, {
-        value: {
-            collapsed,
-            setCollapsed
-        },
-        children: children
+    return /*#__PURE__*/ jsx(FloatProvider, {
+        floats: floats,
+        children: /*#__PURE__*/ jsx(PageContext.Provider, {
+            value: {
+                collapsed,
+                setCollapsed
+            },
+            children: children
+        })
     });
 };
-const usePageContext = ()=>useContext(PageContext);
+const usePageContext = ()=>{
+    const { showFloat, hideFloat } = useFloatContext();
+    const { collapsed, setCollapsed } = useContext(PageContext);
+    return {
+        collapsed,
+        setCollapsed,
+        showFloat,
+        hideFloat
+    };
+};
 export { PageContext, PageProvider, usePageContext };

package/dist/components/PageLayout/components/PageSider/index.d.ts

@@ -1,7 +1,8 @@
 import { SiderProps } from 'antd';
 import { ReactNode } from 'react';
+import { PageLogoProps } from '../PageLogo';
 export interface PageSiderProps extends Omit<SiderProps, 'children'> {
-    logo?: ReactNode;
+    logo?: PageLogoProps;
     children?: ReactNode;
 }
 export declare const PageSider: (props: PageSiderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageLayout/components/PageSider/index.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Layout } from "antd";
+import { PageLogo } from "../PageLogo/index.js";
 const PageSider = (props)=>{
     const { logo, children, ...siderProps } = props;
     return /*#__PURE__*/ jsx(SiderStyled, {
@@ -12,8 +13,8 @@ const PageSider = (props)=>{
         ...siderProps,
         children: /*#__PURE__*/ jsxs(SiderContent, {
             children: [
-                logo && /*#__PURE__*/ jsx(LogoContentWrapper, {
-                    children: logo
+                logo && /*#__PURE__*/ jsx(PageLogo, {
+                    ...logo
                 }),
                 /*#__PURE__*/ jsx(SiderContentWrapper, {
                     children: children
@@ -32,12 +33,10 @@ const SiderContent = styled.div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  height: 100%;
 `;
 const SiderContentWrapper = styled.div`
   flex: 1;
   overflow: auto;
 `;
-const LogoContentWrapper = styled.div`
-  flex: 0;
-`;
 export { PageSider };

package/dist/features/ListPage/types.d.ts

@@ -2,21 +2,14 @@ import { JSX, ReactNode } from 'react';
 import { FilterFormOption } from '../../components/FilterGroup';
 import type { ListPageStore } from './context';
 import { BaseQueryParams, PaginationData } from '../../http-client';
+import type { FloatComponentProps } from '../../components/PageLayout/components/PageProvider/float';
 export type StateValue<FilterValue = any> = {
     filterValues?: FilterValue;
     pageSize?: number;
     currentPage?: number;
 };
-export type FloatComponentProps<T extends Record<string, any> = any> = {
-    record?: T;
-    visible: boolean;
-    onClose: () => void;
-};
+export type { FloatComponentProps, PageFloatProps as ListPageFloatProps, } from '../../components/PageLayout/components/PageProvider/float';
 export type FloatRender<RecordValue extends Record<string, any> = any> = (props: FloatComponentProps<RecordValue>) => JSX.Element;
-export type ListPageFloatProps<RecordValue extends Record<string, any> = any> = {
-    key: string;
-    render: FloatRender<RecordValue>;
-};
 export type ListPageFilterProps<FilterValue = any> = {
     labelInline?: boolean;
     options: FilterFormOption[];

package/package.json

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