Skip to content

Commit

Permalink
Adding units to flex properties
Browse files Browse the repository at this point in the history
  • Loading branch information
godsamit committed Jul 6, 2021
1 parent d307fa0 commit 32143e3
Show file tree
Hide file tree
Showing 7 changed files with 3,723 additions and 30,709 deletions.
34,381 changes: 3,678 additions & 30,703 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"version": "0.1.0",
"license": "MIT",
"name": "react-collapse-pane",
"repository": "https://github.com/b-zurg/react-collapse-pane",
"repository": "https://github.com/godsamit/react-collapse-pane",
"homepage": "https://collapse-pane.zurg.dev",
"bugs": "https://github.com/b-zurg/react-collapse-pane/issues",
"description": "The splittable, draggable and collapsible react layout library.",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Resizer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const Resizer = ({
const isTransition = collapseOptions?.buttonTransition !== 'none';
const collapseButton = collapseOptions ? (
<ButtonContainer $isVertical={isVertical} $grabberSize={grabberSizeWithUnit} $isLtr={isLtr}>
<div style={{ flex: `1 1 ${preButtonFlex}` }} />
<div style={{ flex: `1 1 ${preButtonFlex}px` }} />
<Transition
in={isTransition ? isHovered : true}
timeout={isTransition ? collapseOptions.buttonTransitionTimeout : 0}
Expand All @@ -126,7 +126,7 @@ export const Resizer = ({
{isCollapsed ? collapseOptions.afterToggleButton : collapseOptions.beforeToggleButton}
</ButtonWrapper>
</Transition>
<div style={{ flex: `1 1 ${postButtonFlex}` }} />
<div style={{ flex: `1 1 ${postButtonFlex}px` }} />
</ButtonContainer>
) : null;

Expand Down
25 changes: 25 additions & 0 deletions src/components/SplitPane/helpers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -180,3 +180,28 @@ export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: nu

return debounced as (...args: Parameters<F>) => ReturnType<F>;
};

/*
* Deep comparison function.
*/
export const deepEqual = (a: any,b: any) => {
if ((typeof a == 'object' && a != null) && (typeof b == 'object' && b != null)) {
var count = [0,0];
for (var key in a) count[0]++;
for (var key in b) count[1]++;
if (count[0]-count[1] != 0) {return false;}
for (var key in a) {
if (!(key in b) || !deepEqual(a[key],b[key])) {
return false;
}
}
for (var key in b){
if (!(key in a) || !deepEqual(b[key],a[key])) {
return false;
}
}
return true;
} else {
return a === b;
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const useUncollapseSize = ({
}) =>
useCallback(
({ size, idx }: { size: number; idx: number }) => {
const offset = isReversed ? -(size - 50) : size - 50;
const offset = isReversed ? -(size - collapsedSize) : size - collapsedSize;
const index = isReversed ? idx - 1 : idx;
const newSizes = [...movedSizes];
moveSizes({ sizes: newSizes, index, offset, minSizes, collapsedSize, collapsedIndices });
Expand Down
9 changes: 7 additions & 2 deletions src/components/SplitPane/hooks/useSplitPaneResize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import { useCollapseSize } from './callbacks/useCollapseSize';
import { useUncollapseSize } from './callbacks/useUncollapseSize';
import { useUpdateCollapsedSizes } from './callbacks/useUpdateCollapsedSizes';
import { useCollapsedSize } from './memos/useCollapsedSize';
import { debounce } from '../helpers';
import { debounce, deepEqual } from '../helpers';
import { useRecalculateSizes } from './callbacks/useRecalculateSizes';
import { useEventListener } from '../../../hooks/useEventListener';
import { usePrevious } from '../../../hooks/usePrevious';
import { Nullable } from '../../../types/utilities';

export interface ChildPane {
Expand Down Expand Up @@ -77,6 +78,7 @@ export const useSplitPaneResize = (options: SplitPaneResizeOptions): SplitPaneRe
// STATE: a map keeping track of all of the pane sizes
const [sizes, setSizes] = useState<number[]>(initialSizes);
const [movedSizes, setMovedSizes] = useState<number[]>(sizes);
const prevMovedSizes = usePrevious(movedSizes);
const [collapsedSizes, setCollapsedSizes] = useState<Nullable<number>[]>(
originalCollapsedSizes ?? new Array(children.length).fill(null)
);
Expand Down Expand Up @@ -142,7 +144,10 @@ export const useSplitPaneResize = (options: SplitPaneResizeOptions): SplitPaneRe
}, [dragState, movedSizes, hooks]);
useEffect(() => {
hooks?.onCollapse?.(collapsedSizes);
}, [collapsedSizes, hooks]);
if (!deepEqual(prevMovedSizes, movedSizes)){
hooks?.onSaveSizes?.(movedSizes);
}
}, [collapsedSizes, movedSizes, prevMovedSizes, hooks]);
useEffect(() => {
updateCollapsedSizes(collapsedIndices);
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down
9 changes: 9 additions & 0 deletions src/hooks/usePrevious.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { useRef, useEffect } from "react";

export function usePrevious(value: any) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
};

0 comments on commit 32143e3

Please sign in to comment.