listpage-next 0.0.159 → 0.0.161

package/dist/demos/demo12.d.ts

@@ -0,0 +1 @@
+export declare const Demo12: () => import("react/jsx-runtime").JSX.Element;

package/dist/demos/demo12.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Button } from "antd";
+import { ChatSplitter } from "../features/ChatClient/index.js";
+import { CloseOutlined } from "@ant-design/icons";
+import { useState } from "react";
+const Demo12 = ()=>{
+    const [pure, setPure] = useState(false);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: 500,
+            background: 'lightblue'
+        },
+        children: /*#__PURE__*/ jsx(ChatSplitter, {
+            pure: pure,
+            left: {
+                title: '详情',
+                body: /*#__PURE__*/ jsx(Fragment, {
+                    children: "详情"
+                })
+            },
+            right: {
+                title: '对话',
+                body: /*#__PURE__*/ jsx(Fragment, {
+                    children: "对话"
+                }),
+                extra: /*#__PURE__*/ jsx(Button, {
+                    onClick: ()=>setPure(true),
+                    icon: /*#__PURE__*/ jsx(CloseOutlined, {})
+                })
+            },
+            size: {
+                default: '50%',
+                min: '20%',
+                max: '80%'
+            }
+        })
+    });
+};
+export { Demo12 };

package/dist/features/ChatClient/components/ChatSplitter/index.d.ts

@@ -1,16 +1,16 @@
+import { CardProps } from 'antd';
 import type { ReactNode } from 'react';
 export interface ChatSplitterProps {
+    pure?: boolean;
     left: {
         title?: string;
         extra?: ReactNode;
         body: ReactNode;
-        visible: boolean;
     };
     right: {
         title?: string;
         extra?: ReactNode;
         body: ReactNode;
-        visible: boolean;
     };
     size?: {
         default?: string;
@@ -18,4 +18,7 @@ export interface ChatSplitterProps {
         max?: string;
     };
 }
-export declare const ChatSplitter: (props: ChatSplitterProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const ChatSplitter: (props: ChatSplitterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitterPanelCard: ({ pure, ...props }: CardProps & {
+    pure?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/ChatSplitter/index.js

@@ -2,39 +2,29 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Card, Splitter } from "antd";
 import styled_components from "styled-components";
 const ChatSplitter = (props)=>{
-    const { left, right, size } = props;
+    const { pure, left, right, size } = props;
     const defaultSize = size?.default || '70%';
     const maxSize = size?.max || '80%';
     const minSize = size?.min || '60%';
-    if (!right.visible) return left.body;
     return /*#__PURE__*/ jsxs(StyledSplitter, {
+        lazy: true,
         children: [
             /*#__PURE__*/ jsx(Splitter.Panel, {
-                size: defaultSize,
+                defaultSize: defaultSize,
                 min: minSize,
                 max: maxSize,
+                resizable: !pure,
                 style: panelStyle,
-                children: /*#__PURE__*/ jsx(Card, {
-                    styles: {
-                        body: cardBodyStyle,
-                        header: cardHeaderStyle
-                    },
-                    style: cardStyle,
-                    size: "small",
+                children: /*#__PURE__*/ jsx(SplitterPanelCard, {
+                    pure: pure,
                     title: left.title,
                     extra: left.extra,
                     children: left.body
                 })
             }),
-            /*#__PURE__*/ jsx(Splitter.Panel, {
+            pure ? false : /*#__PURE__*/ jsx(Splitter.Panel, {
                 style: panelStyle,
-                children: /*#__PURE__*/ jsx(Card, {
-                    styles: {
-                        body: cardBodyStyle,
-                        header: cardHeaderStyle
-                    },
-                    style: cardStyle,
-                    size: "small",
+                children: /*#__PURE__*/ jsx(SplitterPanelCard, {
                     title: right.title,
                     extra: right.extra,
                     children: right.body
@@ -51,17 +41,42 @@ const StyledSplitter = styled_components(Splitter)`
     background: transparent !important;
   }
 `;
-const cardStyle = {
-    height: '100%'
-};
-const cardBodyStyle = {
-    height: 'calc(100% - 38px)',
-    overflow: 'auto'
-};
-const cardHeaderStyle = {
-    background: 'rgba(0, 0, 0, 0.02)'
-};
 const panelStyle = {
     padding: 4
 };
-export { ChatSplitter };
+const SplitterPanelCard = ({ pure, ...props })=>{
+    const pureCardProps = pure ? {
+        ...props,
+        styles: {
+            body: {
+                padding: 0
+            }
+        },
+        title: void 0,
+        extra: void 0,
+        style: {
+            border: 'none',
+            background: 'transparent'
+        }
+    } : void 0;
+    return /*#__PURE__*/ jsx(Card, {
+        styles: {
+            body: {
+                height: 'calc(100% - 38px)',
+                overflow: 'auto'
+            },
+            header: {
+                background: 'rgba(0, 0, 0, 0.02)'
+            }
+        },
+        style: {
+            height: '100%'
+        },
+        size: "small",
+        title: props.title,
+        extra: props.extra,
+        ...pureCardProps,
+        children: props.children
+    });
+};
+export { ChatSplitter, SplitterPanelCard };

package/package.json

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