listpage-next 0.0.195 → 0.0.196

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

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface LayoutContentProps {
+    children?: ReactNode | ReactNode[];
+    title?: ReactNode;
+    extra?: ReactNode;
+    style?: CSSProperties;
+}
+export declare const LayoutContent: (props: LayoutContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+const LayoutContent = (props)=>{
+    const { children, title, extra, style } = props;
+    return /*#__PURE__*/ jsxs(LayoutContentStyled, {
+        style: style,
+        children: [
+            (Boolean(title) || Boolean(extra)) && /*#__PURE__*/ jsxs(HeaderSection, {
+                children: [
+                    /*#__PURE__*/ jsx(Title, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: extra
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+};
+const LayoutContentStyled = styled.div`
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 16px 24px;
+  background-color: #eeeeee;
+`;
+const HeaderSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 0 0 auto;
+`;
+const Title = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.5;
+`;
+export { LayoutContent };

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

@@ -1,4 +1,5 @@
 export { PageLoading } from './components/PageLoading';
 export { PageLayout } from './components/PageLayout';
+export { LayoutContent, type LayoutContentProps, } from './components/LayoutContent';
 export type { PageLayoutProps } from './components/PageLayout';
 export { PageContext, usePageContext } from './components/PageProvider';

package/dist/components/PageLayout/index.js

@@ -1,4 +1,5 @@
 import { PageLoading } from "./components/PageLoading/index.js";
 import { PageLayout } from "./components/PageLayout/index.js";
+import { LayoutContent } from "./components/LayoutContent/index.js";
 import { PageContext, usePageContext } from "./components/PageProvider/index.js";
-export { PageContext, PageLayout, PageLoading, usePageContext };
+export { LayoutContent, PageContext, PageLayout, PageLoading, usePageContext };

package/dist/features/ListPage/components/ListPageContainer/index.js

@@ -1,24 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useImperativeHandle } from "react";
 import { observer } from "mobx-react-lite";
-import { FilterForm } from "../../../../components/FilterGroup/index.js";
+import { LayoutContent } from "../../../../components/index.js";
 import { ListPageProvider, useListPageStore } from "../../context/index.js";
 import { useFloat } from "../../hooks/useFloat.js";
 import { useHeader } from "../../hooks/useHeader.js";
-import { FilterSection, ListPageWrapper, ToolbarSection } from "../../styles.js";
+import { FilterSection, ToolbarSection } from "../../styles.js";
 import { DataTable } from "../DataTable/index.js";
-import { useImperativeHandle } from "react";
+import { FilterForm } from "../../../../components/FilterGroup/index.js";
 const ListPageContainerComponent = observer((props)=>{
     const { styles, header, filter, toolbar, table, pageRef } = props;
     const store = useListPageStore();
-    const headerEle = useHeader(header);
+    const { title, extra } = useHeader(header);
     const floatEle = useFloat();
     useImperativeHandle(pageRef, ()=>store, [
         store
     ]);
-    return /*#__PURE__*/ jsxs(ListPageWrapper, {
+    return /*#__PURE__*/ jsxs(LayoutContent, {
         style: styles?.page,
+        title: title,
+        extra: extra,
         children: [
-            headerEle,
             filter && /*#__PURE__*/ jsx(FilterSection, {
                 children: /*#__PURE__*/ jsx(FilterForm, {
                     labelInline: filter.labelInline,

package/dist/features/ListPage/hooks/useHeader.d.ts

@@ -1,2 +1,8 @@
 import { ListPageHeaderProps } from '../types';
-export declare function useHeader(props?: ListPageHeaderProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function useHeader(props?: ListPageHeaderProps): {
+    title?: undefined;
+    extra?: undefined;
+} | {
+    title: import("react").ReactNode;
+    extra: import("react").ReactNode;
+};

package/dist/features/ListPage/hooks/useHeader.js

@@ -1,20 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useListPageStore } from "../context/index.js";
-import { HeaderSection, Title } from "../styles.js";
 function useHeader(props) {
     const store = useListPageStore();
-    if (!props) return false;
+    if (!props) return {};
     const { title, extra } = props;
     const extraEle = 'function' == typeof extra ? extra(store) : extra;
-    return /*#__PURE__*/ jsxs(HeaderSection, {
-        children: [
-            /*#__PURE__*/ jsx(Title, {
-                children: title
-            }),
-            /*#__PURE__*/ jsx("div", {
-                children: extraEle
-            })
-        ]
-    });
+    return {
+        title,
+        extra: extraEle
+    };
 }
 export { useHeader };

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

@@ -1,6 +1,3 @@
-export declare const ListPageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FilterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ToolbarSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BodySection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ListPage/styles.js

@@ -1,27 +1,4 @@
 import styled_components from "styled-components";
-const ListPageWrapper = styled_components.div`
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 16px 24px;
-  background-color: #eeeeee;
-`;
-const HeaderSection = styled_components.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 0 0 auto;
-`;
-const Title = styled_components.div`
-  font-size: 20px;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.5;
-`;
 const FilterSection = styled_components.div`
   background: #fff;
   padding: 24px 32px;
@@ -47,4 +24,4 @@ const TableContainer = styled_components.div`
     }
   }
 `;
-export { BodySection, FilterSection, HeaderSection, ListPageWrapper, PaginationContainer, TableContainer, Title, ToolbarSection };
+export { BodySection, FilterSection, PaginationContainer, TableContainer, ToolbarSection };

package/package.json

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