优化

client/packages/design/components/AutoFolder/index.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { AutoFolder } from '.';
+
+export default {
+  title: 'Tailchat/AutoFolder',
+  component: AutoFolder,
+  argTypes: {},
+} as ComponentMeta<typeof AutoFolder>;
+
+const Template: ComponentStory<typeof AutoFolder> = (args) => (
+  <AutoFolder {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  maxHeight: 100,
+  children: (
+    <div style={{ border: '1px solid #999' }}>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+      <div>foooooo</div>
+    </div>
+  ),
+};

client/packages/design/components/AutoFolder/index.tsx

@@ -0,0 +1,88 @@
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+interface AutoFolderProps extends PropsWithChildren {
+  maxHeight: number;
+  showFullText?: React.ReactNode;
+  backgroundColor?: string;
+}
+export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
+  const { showFullText = 'More', backgroundColor = 'white' } = props;
+  const [isShowFullBtn, setIsShowFullBtn] = useState(false); // 是否显示展示所有内容的按钮
+  const [isShowFull, setIsShowFull] = useState(false); // 是否点击按钮展示所有
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!contentRef.current) {
+      return;
+    }
+
+    const observer = new window.ResizeObserver((entries) => {
+      if (entries[0]) {
+        const { height } = entries[0].contentRect;
+
+        if (height > maxHeight) {
+          setIsShowFull(false);
+          setIsShowFullBtn(true);
+
+          observer.disconnect(); // 触发一次则解除连接
+        }
+      }
+    });
+    observer.observe(contentRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const maxHeight = useMemo(() => {
+    if (isShowFull) {
+      return 'none';
+    } else {
+      return props.maxHeight;
+    }
+  }, [isShowFull, props.maxHeight]);
+
+  const handleClickShowFullBtn = useMemoizedFn(() => {
+    setIsShowFullBtn(false);
+    setIsShowFull(true);
+  });
+
+  return (
+    <div
+      style={{
+        maxHeight,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <div ref={contentRef}>{props.children}</div>
+
+      {isShowFullBtn && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            textAlign: 'center',
+            cursor: 'pointer',
+            backgroundImage: `linear-gradient(rgba(0,0,0,0), ${backgroundColor})`,
+            padding: '4px 0',
+          }}
+          onClick={handleClickShowFullBtn}
+        >
+          {showFullText}
+        </div>
+      )}
+    </div>
+  );
+});
+AutoFolder.displayName = 'AutoFolder';