diff --git a/cypress/component-testing/context/resizable-panes-context.cy.tsx b/cypress/component-testing/context/resizable-panes-context.cy.tsx new file mode 100644 index 0000000..0ce21d3 --- /dev/null +++ b/cypress/component-testing/context/resizable-panes-context.cy.tsx @@ -0,0 +1,90 @@ +import {RCy} from '../../utils' +import {noMinMax5PanesSet} from '../pane-model-config-sets' +import {CK3, CK4, P0, P1, containerId} from '../fix-test-ids' +import {CustomResizerFirst} from '../../components/custom-resizer' +import React from 'react' +import {RPTestWrapper} from '../../components/rp-test-wrapper' +import {IResizableApi} from '../../../src/@types' + +describe('should test ResizableContext: clearflagsOnNewView', () => { + let resizableApi: IResizableApi + const rCy = new RCy({ + containerId, + plainResizer: false, + resizerSize: 10 + }) + beforeEach(() => { + rCy.setViewPort() + cy.mount( + + } + resizerSize={10} + + uniqueId={containerId} + vertical + zipping={false} + + onReady={(api: IResizableApi) => { + resizableApi = api + }} + > + + ) + }) + + it(` + - using api.setSize set P0 to MAX + - hide P4, P3 + - using api.setSize set P0 to MAX + - Result: It should allow P0 to set to current max (P3, P4 hidden)`, () => { + resizableApi.setSize(P0, 10000) + rCy.cyGet(CK4).click() + rCy.cyGet(CK3).click() + + cy.wait(50) + .then(() => { + rCy.checkWidths( + [1020, 10, 0, 10, 0, 0, 0, 0, 0] + ) + + resizableApi.setSize(P0, 10000) + rCy.checkWidths( + [1020, 10, 0, 10, 0, 0, 0, 0, 0] + ) + }) + }) + + it.only(` + - using api.setSize set P0 to MAX + - hide P4, P3 + - using api.setSize set P0 to MAX + - Result: It should allow P0 to set to current max (P3, P4 hidden)`, () => { + rCy.cyGet(CK4).click() + cy.wait(50) + .then(() => { + resizableApi.setSize(P0, 10000) + }) + .wait(50) + .then(() => { + rCy.cyGet(CK3).click() + }) + // resizableApi.setSize(P0, 10000) + // resizableApi.restoreDefault() + // resizableApi.setSize(P1, 10000) + // cy.wait(50) + // .then(() => { + // rCy.checkWidths( + // [1020, 10, 0, 10, 0, 0, 0, 0, 0] + // ) + + // resizableApi.setSize(P0, 10000) + // rCy.checkWidths( + // [1020, 10, 0, 10, 0, 0, 0, 0, 0] + // ) + // }) + }) +}) diff --git a/cypress/component-testing/models/pane-model.cy.tsx b/cypress/component-testing/models/pane-model.cy.tsx index 9d7f112..9bae7d5 100644 --- a/cypress/component-testing/models/pane-model.cy.tsx +++ b/cypress/component-testing/models/pane-model.cy.tsx @@ -4,7 +4,8 @@ import {RPTestWrapper} from '../../components/rp-test-wrapper' import {mix3PanesSet, noMinMax5PanesSet, withMinMaxWithMinMaxUnitPixel5PanesSet} from '../pane-model-config-sets' import {CK0, R0, R1, rScontainerId} from '../fix-test-ids' import {CustomResizerFirst} from '../../components/custom-resizer' -import {ResizableComponentCustomPanesTestWrapper} from '../../components/rp-test-wrapper/resizable-component-custom-panes-test-wrapper' +import {ResizableComponentCustomPanesTestWrapper} + from '../../components/rp-test-wrapper/resizable-component-custom-panes-test-wrapper' import {Pane} from '../../../src' import {Loading} from '../../components/Loading' diff --git a/cypress/component-testing/resizable-api.cy.tsx b/cypress/component-testing/resizable-api.cy.tsx index cafbfeb..b349f44 100644 --- a/cypress/component-testing/resizable-api.cy.tsx +++ b/cypress/component-testing/resizable-api.cy.tsx @@ -2,7 +2,7 @@ import React from 'react' import {RCy} from '../utils' import {withMinMaxEqualSize5PanesSet} from './pane-model-config-sets' import {RPTestWrapper} from '../components/rp-test-wrapper' -import {CK0, CK1, CK4, P0, P1, P2, P3, P4, P5, R0, R1, R2, R3, rScontainerId} from './fix-test-ids' +import {CK0, CK1, CK4, P0, P1, P2, P3, P4, P5, R0, R1, R2, R3, containerId, rScontainerId} from './fix-test-ids' import {CustomResizerFirst} from '../components/custom-resizer' import {Pane, ResizablePanes} from '../../src' import {IGetState, IResizableApi} from '../../src/@types' @@ -268,6 +268,63 @@ describe('Custom resizer:API: Method setSize', () => { }) }) +describe('Custom resizer:API: Method setSize', () => { + const rCy = new RCy({ + resizerSize: 10, + containerId: rScontainerId, + len: 5 + }) + let resizableApi: IResizableApi + + beforeEach(() => { + rCy.setViewPort() + cy.mount( +
+ + } + resizerSize={10} + storageApi={localStorage} + uniqueId={rScontainerId} + vertical + onReady={(api: IResizableApi) => { + resizableApi = api + }} + > + + + + + + + + + + + + + + + +
+ ) + cy.wait(50) + }) + + // Edge + it('Should work for last Hidden Pane', () => { + rCy.move(R3, containerId, 'right') + cy.wait(50) + .then(() => { + resizableApi.setSize(P4, 400) + rCy.checkWidths( + [60, 10, 180, 10, 120, 10, 240, 10, 400] + ) + }) + }) +}) + describe('Plain resizer:API: Method setSize', () => { const rCy = new RCy({ resizerSize: 10, diff --git a/src/@types/basic-types.ts b/src/@types/basic-types.ts index 784c47f..4f64749 100644 --- a/src/@types/basic-types.ts +++ b/src/@types/basic-types.ts @@ -14,3 +14,5 @@ export type IBooleanOrUndefined = boolean | undefined export type IStringOrUndefined = string | undefined export type IVisibilityState = 'zipped' | 'visible' | 'hidden' + +export type IClearFlagsParam = 'setSize' | 'ratio' | 'visibility' | '' diff --git a/src/constant.ts b/src/constant.ts index 5ef1d32..624b7cb 100644 --- a/src/constant.ts +++ b/src/constant.ts @@ -13,6 +13,7 @@ export const MINUS_ONE = -1 // export const APP_NAME = 'react-split-pane' export const RATIO = 'ratio' +export const SET_SIZE = 'setSize' export const RESIZER = 'resizer' diff --git a/src/context/resizable-panes-context.ts b/src/context/resizable-panes-context.ts index 8b61af1..7160c6a 100644 --- a/src/context/resizable-panes-context.ts +++ b/src/context/resizable-panes-context.ts @@ -3,14 +3,16 @@ import {createMap, findById, findIndex} from '../utils/util' import { DIRECTIONS, LEFT, MAX_SIZE, MIN_SIZE, NONE, - RATIO, RIGHT, SIZE, VISIBILITY + RATIO, RIGHT, SET_SIZE, SIZE, VISIBILITY } from '../constant' import { createPaneModelListAndResizerModelList, - getPanesAndResizers, getVisibilityState, emitIfChangeInPartialHiddenState, restoreDefaultFn, setDownMaxLimits, + getPanesAndResizers, getVisibilityState, + emitIfChangeInPartialHiddenState, restoreDefaultFn, setDownMaxLimits, setUISizesFn, setUpMaxLimits, syncAxisSizesFn, getVisibleItems, - getPanesSizeSum + getPanesSizeSum, + safeSetVisibility } from '../utils/panes' import { calculateAxes, setVirtualOrderList, movingLogic, setCurrentMinMax, @@ -20,6 +22,7 @@ import { import {getDirection, getSizeStyle, toArray} from '../utils/dom' import {ResizeStorage} from '../utils/storage' import { + IClearFlagsParam, IKeyToBoolMap, IResizableContext , IResizableEvent, IResizableItem, IResizablePaneProviderProps } from '../@types' @@ -33,7 +36,8 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza vertical, children, unit, uniqueId, storageApi, zipping, - onResizeStop, onChangeVisibility, + onResizeStop, + onChangeVisibility, onResize } = props @@ -77,12 +81,6 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza .register(api) } - // const clearflagsOnNewView = (except: 'setSizeKey') => { - // resizable.newVisibilityModel = false - // panesList.forEach((item) => item.syncRatioSizeToSize()) - // resizable.setSizeKey = null - // } - const registerContainer = (getContainerRect: any) => { resizable.getContainerRect = getContainerRect let visibilityMap = props.visibility @@ -107,6 +105,18 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza syncAxisSizes() } + const clearflagsOnNewView = (except: IClearFlagsParam = '') => { + if (except !== RATIO) { + panesList.forEach((item) => item.syncRatioSizeToSize()) + } + if (except !== VISIBILITY) { + resizable.newVisibilityModel = false + } + if (except !== SET_SIZE) { + resizable.setSizeKey = null + } + } + const calculateAndSetHeight = (e: IResizableEvent) => { const {movement} = e if (resizable.isViewSizeChanged || !movement) { @@ -120,8 +130,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza movingLogic(e, resizable) } setUISizesFn(items, resizable.direction) - resizable.newVisibilityModel = false - panesList.forEach((item) => item.syncRatioSizeToSize()) + clearflagsOnNewView() emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility) } @@ -175,6 +184,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza emitResizeStop() emitChangeVisibility() storage.setStorage(resizable) + clearflagsOnNewView(VISIBILITY) } // It is getting default empty Object param @@ -208,8 +218,8 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza } const restoreDefault = () => { - restoreDefaultFn(resizable) - resizable.newVisibilityModel = false + restoreDefaultFn(resizable.items) + clearflagsOnNewView() emitResizeStop() emitChangeVisibility() } @@ -248,10 +258,11 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza // setting hiddenResizer state to NONE in final State if (pane.hiddenResizer === LEFT) { resizer = visibleItems[requestIndexInItems - 1] - resizer.setVisibility(true, false) - addOnSizeChange = resizer.resizerSize } else if (pane.hiddenResizer === RIGHT) { resizer = visibleItems[requestIndexInItems + 1] + } + + if (resizer) { resizer.setVisibility(true, false) addOnSizeChange = resizer.resizerSize } @@ -273,10 +284,11 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza resizable.newVisibilityModel = false panesList.forEach((item) => item.syncRatioSizeToSize()) emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility) + clearflagsOnNewView(SET_SIZE) consoleGetSize(items) } else { visibleItems.forEach((item) => item.setPreSize()) - resizer?.setVisibility(true, true) + safeSetVisibility(resizer, true, true) if (!isSecondAttemp) { const allowedChange = newSize - (nowSizeSum - initialSizeSum + addOnSizeChange) setSize(id, allowedChange, true) diff --git a/src/utils/panes.ts b/src/utils/panes.ts index 749f406..49b6135 100644 --- a/src/utils/panes.ts +++ b/src/utils/panes.ts @@ -65,7 +65,7 @@ export const getMinSizeSum = (panesList: PaneModel[], start: number, end: number getSum(panesList, (pane) => pane.minSize, start, end) // Need to check for hidden element -export const restoreDefaultFn = ({items}: any) => { +export const restoreDefaultFn = (items: IResizableItem[]) => { items.forEach(pane => pane.restore()) setUISizesFn(items, DIRECTIONS.NONE) } @@ -92,6 +92,12 @@ export const setUpMaxLimits = (panesList: PaneModel[], index: number) => { } } +export const safeSetVisibility = (item : IResizableItem, visibility: boolean, isPartiallyHidden: boolean) => { + if (item) { + item.setVisibility(visibility, isPartiallyHidden) + } +} + export const getItemsByIndexes = (items : IResizableItem[], indexes: number[]) => { const itemsByIndexes = items.filter((_, i) => indexes.includes(i)) return itemsByIndexes