Merge pull request #612 from Original-Recipe/feat-dynamicResizerV2

feat: Support horizontal dragging of views，Two new places to use this
open-mmlab · Dec 2, 2024 · b73d71a · b73d71a
2 parents d23a01a + cc3b726
commit b73d71a
Show file tree

Hide file tree

Showing 12 changed files with 601 additions and 386 deletions.
diff --git a/packages/lb-components/src/components/DynamicResizer/DynamicResizer.scss b/packages/lb-components/src/components/DynamicResizer/DynamicResizer.scss
diff --git a/packages/lb-components/src/components/DynamicResizer/DynamicResizer.tsx b/packages/lb-components/src/components/DynamicResizer/DynamicResizer.tsx
@@ -1,43 +1,48 @@
-import React, { FC, useRef } from 'react';
-import './DynamicResizer.scss';
-import useDrag from './hooks/useDrag';
+import React, { useRef } from 'react';
+import { Resizable } from 're-resizable';
 import { DynamicResizerProps } from './types/interface';
+import './styles.scss';
+import useDrag from './hooks/useDrag';
 
-const DynamicResizer: FC<DynamicResizerProps> = (props) => {
-  const {
-    minTopHeight = 0,
-    minBottomHeight = 0,
-    defaultHeight = 50,
-    axis = 'y',
-    children,
-    localKey = 'dynamicResizerHeights',
-    customDivider,
-    isShortcutButton = false,
-  } = props;
-
+const DynamicResizer: React.FC<DynamicResizerProps> = ({
+  direction = 'vertical',
+  children,
+  defaultWidth,
+  defaultHeight,
+  minTopHeight,
+  minBottomHeight,
+  minLeftWidth,
+  minRightWidth,
+  localKey,
+  enableEdges = ['right', 'bottom'],
+  onResizeStart,
+  onResize,
+  onResizeStop,
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
-
-  // Detach the universal drag and drop function to calculate the styles above and below
-  const { rendered, topStyle, bottomStyle } = useDrag({
+  const dynamicResizerProps = useDrag({
+    direction,
     containerRef,
+    defaultHeight,
+    defaultWidth,
     minTopHeight,
     minBottomHeight,
-    defaultHeight,
-    axis,
+    minLeftWidth,
+    minRightWidth,
     localKey,
-    customDivider,
-    isShortcutButton,
+    enableEdges,
+    onResizeStart,
+    onResize,
+    onResizeStop,
   });
 
   return (
-    <div className='dynamic-resizer-content' ref={containerRef}>
-      <div className='dynamic-resizer-top' style={topStyle}>
-        {children[0]}
-      </div>
-      {rendered}
-      <div className='dynamic-resizer-bottom' style={bottomStyle}>
-        {children[1]}
-      </div>
+    <div className={`dynamic-resizer-content ${direction}`} ref={containerRef}>
+      <Resizable {...dynamicResizerProps}>
+        <div className='resizable-child'>{children[0]}</div>
+      </Resizable>
+
+      <div className='resizable-child-two'>{children[1]}</div>
     </div>
   );
 };

diff --git a/packages/lb-components/src/components/DynamicResizer/README.md b/packages/lb-components/src/components/DynamicResizer/README.md
@@ -1,12 +1,15 @@
 # DynamicResizer Component
 
-The `DynamicResizer` component is a React component that allows users to resize two sections (top and bottom) by dragging a divider. This component is useful for creating resizable layouts where the user can adjust the height of the sections.
+The `DynamicResizer` component is a flexible React component that allows users to resize two sections (either vertically or horizontally) by dragging a divider. This component provides features such as persisting the resize state to local storage and allowing minimum size constraints for the sections.
 
 ## Features
 
-- **Resizable Sections**: Allows users to resize the top and bottom sections by dragging a divider.
-- **Local Storage**: Stores the height of the sections in local storage to preserve the state between sessions.
-- **Reset Height**: Provides methods to reset the height of the top or bottom section to zero.
+- **Resizable Sections**: Users can resize either the top/bottom sections (in vertical mode) or the left/right sections (in horizontal mode) by dragging a divider.
+- **Local Storage**: Stores the dimensions of the sections in local storage to preserve the state between sessions.
+- **Customizable Layout**: Supports both vertical and horizontal resizing.
+- **Min Size Constraints**: Allows setting minimum heights/widths for both top/bottom or left/right sections.
+- **Reset Size Functionality**: Provides a way to reset the size of the sections programmatically.
+- **Optional Shortcut Button**: Enables an optional button to quickly reset section sizes.
 
 ## Installation
 
@@ -27,10 +30,8 @@ import DynamicResizer from './DynamicResizer';
 const App = () => {
   return (
     <DynamicResizer
-      minTopSize={50}
-      minBottomSize={50}
-      localKey='localKey'
-      defaultHeight={100}
+      direction="vertical" // or "horizontal"
+      localKey="youKey"
     >
       <div>Top Section Content</div>
       <div>Bottom Section Content</div>
@@ -41,13 +42,51 @@ const App = () => {
 export default App;
 ```
 
+## Vertical Example
+
+```
+<DynamicResizer
+  direction="vertical"
+  localKey="youKey"
+>
+	<div>Top Section Content</div>
+  <div>Bottom Section Content</div>
+</DynamicResizer>
+```
+
+### Horizontal Example
+
+```
+<DynamicResizer
+  direction="horizontal"
+  localKey="youKey"
+>
+	<div>Left Section Content</div>
+  <div>Right Section Content</div>
+</DynamicResizer>
+```
+
 ## Props
 
-| Prop               | Type                         | Default                 | Description                                      |
-| ------------------ | ---------------------------- | ----------------------- | ------------------------------------------------ |
-| `minTopHeight`     | `number`                     | `0`                     | The minimum height of the top section.           |
-| `minBottomHeight`  | `number`                     | `0`                     | The minimum height of the bottom section.        |
-| `defaultHeight`    | `number`                     | `50`                    | The default height                               |
-| `localKey`         | `string`                     | `dynamicResizerHeights` | The height of component cache                    |
-| `children`         | `ReactElement[]、 Element[]` |                         | Must have two child elements wrapped around it！ |
-| `isShortcutButton` | `boolean`                    | `false`                 | Is the shortcut button enabled                   |
+| Prop              | Type                         | Default                  | Description                                                                       |
+| ----------------- | ---------------------------- | ------------------------ | --------------------------------------------------------------------------------- |
+| `direction `      | `horizontal` or `vertical`   | `vertical`               | Direction for resizing (horizontal or vertical).                                  |
+| `minTopHeight`    | `number`                     | `10`                     | The minimum height of the top section (vertical mode).                            |
+| `minBottomHeight` | `number`                     | `10`                     | The minimum height of the bottom section (vertical mode).                         |
+| `minLeftWidth`    | `number`                     | `10`                     | The minimum width of the left section (horizontal mode).                          |
+| `minRightWidth`   | `number`                     | `10`                     | The minimum width of the right section (horizontal mode).                         |
+| `defaultWidth`    | `Number`                     | `10`                     | The default width of the resizable container (horizontal mode).                   |
+| `defaultHeight`   | `number`                     | `10`                     | The default height of the resizable container (vertical mode).                    |
+| `localKey`        | `string`                     | `dynamicResizerLocalKey` | Key for local storage to cache the size.                                          |
+| `children`        | `ReactElement[]、 Element[]` | -                        | Two child elements (one for each section) wrapped inside the resizable container. |
+| `enableEdges`     | `Array`                      | `['right', 'bottom']`    | Users can set dragging edges                                                      |
+| `onResizeStart`   | `() => void`                 | -                        | Start dragging events                                                             |
+| `onResize`        | `() => void`                 | -                        | dragging events                                                                   |
+| `onResizeStop`    | `() => void`                 | -                        | Stop dragging events                                                              |
+
+### Key Updates in v2.0
+
+- **Resizable Direction**: Added support for both vertical and horizontal resizing.
+- **Min Size Validation**: Improved the handling of minimum size constraints for both height and width.
+- **Package update**: Replace react-draggable with re-resizable
+- **Code extraction**: Extract tool related functions