style: add AutoFolder

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>
+  ),
+};

packages/design/components/AutoFolder/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface AutoFolderProps {
+  maxHeight: number;
+  showFullText?: string;
+  backgroundColor?: string;
+}
+export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
+  const {
+    maxHeight,
+    showFullText = 'More',
+    backgroundColor = 'rgba(0,0,0,0)',
+  } = props;
+  const [isShowFull, setIsShowFull] = useState(false);
+  const contentRef = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (contentRef.current) {
+      if (contentRef.current.scrollHeight > maxHeight) {
+        setIsShowFull(false);
+      } else {
+        setIsShowFull(true);
+      }
+    }
+  }, [props.maxHeight]);
+
+  return (
+    <div
+      style={{
+        height: isShowFull ? 'auto' : maxHeight,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <div ref={contentRef}>{props.children}</div>
+
+      {!isShowFull && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            textAlign: 'center',
+            cursor: 'pointer',
+            backgroundImage: `linear-gradient(${backgroundColor}, white)`,
+            padding: '4px 0',
+          }}
+          onClick={() => setIsShowFull(true)}
+        >
+          {showFullText}
+        </div>
+      )}
+    </div>
+  );
+});
+AutoFolder.displayName = 'AutoFolder';