+ {children.map((child, index) => (
+
minWidth ? sizes[index] : minWidth
+ }}
+ >
+ {index !== 0 && (
+ <>
+
handleMouseDown(e, index)}
+ style={{
+ zIndex: 1,
+ cursor: 'e-resize',
+ width: 'var(--main-grapper-size)',
+ marginRight: 'calc(var(--main-grapper-size) - (2 * var(--main-grapper-size)))',
+ }}
+ />
+
handleMouseDown(e, index)}
+ />
+
+ )}
+ {child}
+
+ ))}
+
+ );
+}
diff --git a/src/app/shared/components/resizable-columns/TwoColumnsResizable.tsx b/src/app/shared/components/resizable-columns/TwoColumnsResizable.tsx
index ecc4b09..62e017c 100644
--- a/src/app/shared/components/resizable-columns/TwoColumnsResizable.tsx
+++ b/src/app/shared/components/resizable-columns/TwoColumnsResizable.tsx
@@ -1,55 +1,101 @@
-import React, { Component } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
import { IdeConfigStorage } from '../../services';
-interface IRecipeProps {
- id: string,
- left: JSX.Element,
- right: JSX.Element,
- aligment: 'left' | 'center' | 'right',
+interface TwoColumnsResizableProps {
+ minWidth?: number;
+ maxWidth?: number;
+ variant?: "left" | "right";
+ children: [React.ReactElement, React.ReactElement];
}
-export class TwoColumnsResizable extends Component
{
- private isRight = this.props.aligment === 'right';
+export const TwoColumnsResizable: React.FC = ({ variant = 'right', children: [leftChild, rightChild], minWidth, maxWidth }) => {
+ const oldPageX = useRef(0);
- state = { colX: 300 }
+ const [[sizeLeft, sizeRight], setSizes] = useState([
+ variant === 'left' ? IdeConfigStorage.getResizableColumns(String(leftChild.key)) : 0,
+ variant === 'right' ? IdeConfigStorage.getResizableColumns(String(rightChild.key)) : 0,
+ ]);
- componentDidMount() {
- this.setState({ colX: IdeConfigStorage.getColumnsResizableSize(this.props.id) });
- window.addEventListener("resize", () => this.setState({}));
- }
+ const handleMouseMove = useCallback((e: any) => {
+ const movementX = e.pageX - oldPageX.current;
+ oldPageX.current = e.pageX;
- componentWillUnmount() {
- window.removeEventListener("resize", () => this.setState({}));
- }
+ setSizes(oldSizes => {
+ if (variant === 'left') {
+ oldSizes[0] += movementX;
+ } else {
+ oldSizes[1] -= movementX;
+ }
+ return [...oldSizes];
+ });
+ }, [variant]);
- mouseMove = (event: any) => {
- this.setState({ colX: this.isRight ? (window.innerWidth - event.pageX + 6) : event.pageX });
- }
-
- mouseUp = () => {
+ const handleMouseUp = useCallback(() => {
+ oldPageX.current = 0;
window.onmouseup = null;
window.onmousemove = null;
window.document.body.style.cursor = 'unset';
- IdeConfigStorage.setColumnsResizableSize(this.props.id, this.state.colX);
- }
+ setSizes(oldSizes => {
+ if (variant === 'left') {
+ if (maxWidth && oldSizes[0] > maxWidth) {
+ oldSizes[0] = maxWidth;
+ } else if (minWidth && oldSizes[0] < minWidth) {
+ oldSizes[0] = minWidth;
+ }
+ } else {
+ if (maxWidth && oldSizes[1] > maxWidth) {
+ oldSizes[1] = maxWidth;
+ } else if (minWidth && oldSizes[1] < minWidth) {
+ oldSizes[1] = minWidth;
+ }
+ }
+ return [...oldSizes];
+ });
+ }, [variant, maxWidth, minWidth]);
- mouseDown = () => {
+ const handleMouseDown = useCallback((e: React.MouseEvent) => {
+ window.onmousemove = (e: any) => handleMouseMove(e);
window.document.body.style.cursor = 'e-resize';
- window.onmousemove = this.mouseMove;
- window.onmouseup = this.mouseUp;
- }
-
- render = () => (
-
-
{this.props.left}
-
-
-
-
- {this.props.right}
-
+ window.onmouseup = handleMouseUp;
+ oldPageX.current = e.pageX;
+ }, [handleMouseUp, handleMouseMove]);
+
+ return (
+
+
+ {leftChild}
+
+
+
handleMouseDown(e)}
+ style={{
+ zIndex: 1,
+ cursor: 'e-resize',
+ width: 'var(--main-grapper-size)',
+ marginRight: 'calc(var(--main-grapper-size) - (2 * var(--main-grapper-size)))',
+ }}
+ />
+
handleMouseDown(e)}
+ style={{ cursor: 'e-resize', zIndex: 1 }}
+ />
+ {rightChild}
);
-
}
diff --git a/src/app/shared/services/storage/IdeConfigStorage.ts b/src/app/shared/services/storage/IdeConfigStorage.ts
index 480b662..86d676d 100644
--- a/src/app/shared/services/storage/IdeConfigStorage.ts
+++ b/src/app/shared/services/storage/IdeConfigStorage.ts
@@ -51,4 +51,22 @@ export class IdeConfigStorage {
localStorage.setItem(id, size.toString());
return size;
}
+
+
+ /**
+ * Get the saved state from a ColumnResizable at localstorage
+ *
+ * @returns `number` or `0`
+ */
+ public static getResizableColumns(id: string): number {
+ let props = localStorage.getItem(id);
+ return parseInt(props || '0');
+ }
+
+ /** Save the state from a ColumnResizable in the localstorage */
+ public static setResizableColumns(id: string, size: number): number {
+ localStorage.setItem(id, size.toString());
+ return size;
+ }
+
}
- 
+ 
+ 
- 
+