diff --git a/cypress/component-testing/context/resizable-panes-context.cy.tsx b/cypress/component-testing/context/resizable-panes-context.cy.tsx index 3cf9242..54a1e70 100644 --- a/cypress/component-testing/context/resizable-panes-context.cy.tsx +++ b/cypress/component-testing/context/resizable-panes-context.cy.tsx @@ -58,7 +58,7 @@ describe('should test ResizableContext: clearflagsOnNewView', () => { }) }) - it.only(` + it(` - using api.setSize set P0 to MAX - hide P4, P3 - using api.setSize set P0 to MAX diff --git a/cypress/component-testing/events.cy.tsx b/cypress/component-testing/events.cy.tsx index 2b4d8c6..82f3736 100644 --- a/cypress/component-testing/events.cy.tsx +++ b/cypress/component-testing/events.cy.tsx @@ -1,9 +1,46 @@ import React from 'react' import {RPTestWrapper} from '../components/rp-test-wrapper' import {RCy} from '../utils' -import {rScontainerId, CK0, CK1, R0} from './fix-test-ids' -import {_2PaneWithMinMax} from './pane-model-config-sets' +import { + rScontainerId, CK0, CK1, R0, P0, P1, + P2, P3, P4, R2, minSizeClassTest, maxSizeClassTest, R1, CK2 +} from './fix-test-ids' +import {_2PaneWithMinMax, _3PanesWithMinMax} from './pane-model-config-sets' import {SinonSpy} from 'cypress/types/sinon' +import {Pane, ResizablePanes} from '../../src' +import {CustomResizerFirst} from '../components/custom-resizer' + +describe('Test inital events', () => { + it('Should emit onChangeVisibility on load', () => { + const onChangeVisibility = cy.spy() + + cy.mount( +
+ } + resizerSize={10} + storageApi={localStorage} + uniqueId={rScontainerId} + vertical + onChangeVisibility={onChangeVisibility} + > + + + +
+ ) + cy.wait(5) + .then(() => { + expect(onChangeVisibility.calledOnce).to.equal(true) + expect(onChangeVisibility.getCalls()[0].args).to.deep.equal([{ + P0: 'visible', + P1: 'visible' + }]) + }) + }) +}) describe('Test onChangeVisibility Rejected param', () => { let onChangeVisibility: SinonSpy @@ -72,3 +109,279 @@ describe('Test onChangeVisibility Rejected param', () => { }) }) }) + +describe('sdf', () => { + let onMaxSize: SinonSpy + let onNormalSize: SinonSpy + let onMinSize: SinonSpy + + const rCy = new RCy({ + resizerSize: 10, + containerId: rScontainerId, + len: 5 + }) + + beforeEach(() => { + rCy.setViewPort() + onMaxSize = cy.spy() + onNormalSize = cy.spy() + onMinSize = cy.spy() + cy.mount( +
+ } + resizerSize={10} + storageApi={localStorage} + uniqueId={rScontainerId} + vertical + > + + + + + + + + + + + +
+ ) + }) + + it('sh', () => { + rCy.move(R2, rScontainerId, 'left') + cy.wait(100) + .then(() => { + expect(onMinSize.getCall(1)) + console.log('v-----------------', onMinSize.getCall(1)) + console.log('v-----------------', onMaxSize.getCalls()) + }) + }) + + it('sh', () => { + rCy.move(R2, rScontainerId, 'right') + cy.wait(100) + .then(() => { + console.log('v-----------------', onMinSize.getCalls()) + console.log('v-----------------', onMaxSize.getCalls()) + }) + }) +}) + +describe('sdf', () => { + let onMaxSize: SinonSpy + let onNormalSize: SinonSpy + let onMinSize: SinonSpy + + const rCy = new RCy({ + resizerSize: 10, + containerId: rScontainerId, + len: 5 + }) + + beforeEach(() => { + rCy.setViewPort() + onMaxSize = cy.spy() + onNormalSize = cy.spy() + onMinSize = cy.spy() + cy.mount( +
+ } + resizerSize={10} + storageApi={localStorage} + uniqueId={rScontainerId} + vertical + onMaxSize={onMaxSize} onMinSize={onMinSize} onNormalSize={onNormalSize} + > + + + + + + + + + + +
+ ) + }) + + it('sh', () => { + rCy.move(R2, rScontainerId, 'left') + cy.wait(100) + .then(() => { + expect(rCy.getAllArgs(onMinSize)).to.deep.equal( + [ + [ + 'P0', + 10 + ], + [ + 'P1', + 100 + ], + [ + 'P2', + 50 + ] + ] + ) + + expect(rCy.getAllArgs(onMaxSize)).to.deep.equal( + [ + [ + 'P3', + 500 + ] + ] + ) + }) + }) + + it('sh', () => { + rCy.move(R1, rScontainerId, 'right') + cy.wait(100) + .then(() => { + expect(rCy.getAllArgs(onMinSize)).to.deep.equal( + [ + [ + 'P2', + 50 + ], + [ + 'P3', + 100 + ], + [ + 'P4', + 10 + ] + ] + ) + expect(rCy.getAllArgs(onMaxSize)).to.deep.equal( + [[ + 'P1', + 500 + ]] + ) + }) + }) + + it('sh', () => { + rCy.move(R1, rScontainerId, 'right') + cy.wait(100) + .then(() => { + expect(rCy.getAllArgs(onMinSize)).to.deep.equal( + [ + [ + 'P2', + 50 + ], + [ + 'P3', + 100 + ], + [ + 'P4', + 10 + ] + ] + ) + expect(rCy.getAllArgs(onMaxSize)).to.deep.equal( + [[ + 'P1', + 500 + ]] + ) + }) + }) + + it('sh', () => { + rCy.move(R2, rScontainerId, 'right') + cy.wait(100) + .then(() => { + console.log('v-----------------', onMinSize.getCalls()) + console.log('v-----------------', onMaxSize.getCalls()) + }) + }) +}) + +describe('_3PanesWithMinMax_3PanesWithMinMax', () => { + let onMaxSize: SinonSpy + let onNormalSize: SinonSpy + let onMinSize: SinonSpy + + const rCy = new RCy({ + resizerSize: 1, + containerId: rScontainerId, + len: 3 + }) + + beforeEach(() => { + rCy.setViewPort() + + onMaxSize = cy.spy() + onNormalSize = cy.spy() + onMinSize = cy.spy() + + cy.mount( + + + ) + }) + + it.skip('asdf', () => { + rCy.cyGet(CK2).click() + rCy.move(R0, rScontainerId, 'right') + + cy.wait(100) + .then(() => { + rCy.cyGet(P0) + .should('have.css', 'class') + .then((e) => { + console.log(e) + }) + + console.log('v-----------------onMinSize ', onMinSize.getCalls()) + console.log('v----------------- onMaxSize', onMaxSize.getCalls()) + }) + }) +}) diff --git a/cypress/component-testing/fix-test-ids.ts b/cypress/component-testing/fix-test-ids.ts index a9ba861..4d4faad 100644 --- a/cypress/component-testing/fix-test-ids.ts +++ b/cypress/component-testing/fix-test-ids.ts @@ -14,6 +14,9 @@ const rScontainerId = 'rScontainerId' const containerId = rScontainerId const mountUnMountButtonId = 'hide-resizable-panes' +export const minSizeClassTest = 'minSizeClassTest' +export const maxSizeClassTest = 'maxSizeClassTest' + const loadingId = 'loading' const loadedId = 'loaded' export { diff --git a/cypress/component-testing/pane-model-config-sets.ts b/cypress/component-testing/pane-model-config-sets.ts index 49eff98..32aad2a 100644 --- a/cypress/component-testing/pane-model-config-sets.ts +++ b/cypress/component-testing/pane-model-config-sets.ts @@ -10,6 +10,12 @@ export const _2PaneWithNoMinMax = [ new PaneModelConfig(4) ] +export const _3PanesWithMinMax = [ + new PaneModelConfig(3, 1, 6), + new PaneModelConfig(2), + new PaneModelConfig(3, 1, 6) +] + export const noMinMaxEqualSize7PanesSet = [ new PaneModelConfig(1), new PaneModelConfig(1), diff --git a/cypress/component-testing/resizable-api.cy.tsx b/cypress/component-testing/resizable-api.cy.tsx index f6e92c5..a236608 100644 --- a/cypress/component-testing/resizable-api.cy.tsx +++ b/cypress/component-testing/resizable-api.cy.tsx @@ -29,6 +29,7 @@ import { BUTTOM_FIRST, DEFAULT_MAX_SIZE, DEFAULT_MIN_SIZE, HIDDEN, TOP_FIRST, VISIBLE } from '../../src/constant' +import {SinonSpy} from 'cypress/types/sinon' describe('Storage api', () => { const rCy = new RCy({ @@ -543,6 +544,8 @@ describe('Storage api', () => { describe('Should make partial hidden visible with setSize', () => { let resizableApi: IResizableApi + let onResizeStop: SinonSpy + let onChangeVisibility: SinonSpy const rCy = new RCy({ resizerSize: 1, @@ -550,6 +553,8 @@ describe('Should make partial hidden visible with setSize', () => { }) beforeEach(() => { rCy.setViewPort() + onResizeStop = cy.spy() + onChangeVisibility = cy.spy() cy.mount( ) }) + // Edge + it(` + -- Partially hide P2 moving R2 to R1 + -- setSize P2 with 150 and BUTTOM_FIRST + -- should emit onResizeStop haveing P2 = 150 + `, () => { + rCy.move(R2, R1, 'left') + cy.wait(50) + .then(() => { + resizableApi.setSize(P2, 150, BUTTOM_FIRST) + expect(onResizeStop.getCalls()[2].lastArg).to.deep.equal( + {P0: 97, P1: 289, P2: 150, P3: 332, P4: 96} + ) + }) + }) + + // Edge + it(` + -- Partially hide P2 moving R1 to R2 + -- setSize P2 with 150 and BUTTOM_FIRST + -- should emit onResizeStop haveing P2 = 150 + `, () => { + rCy.move(R2, R1, 'left') + cy.wait(50) + .then(() => { + resizableApi.setSize(P2, 150, BUTTOM_FIRST) + console.log(onResizeStop.getCalls()[2].lastArg) + expect(onResizeStop.getCalls()[2].lastArg).to.deep.equal( + {P0: 97, P1: 289, P2: 150, P3: 332, P4: 96} + ) + }) + }) + + // Edge + it(` + -- Partially hide P2 moving R1 to R2 + -- setSize P2 with 150 and TOP_FIRST + -- should emit onResizeStop haveing P2 = 150 + `, () => { + rCy.move(R2, R1, 'left') + cy.wait(50) + .then(() => { + resizableApi.setSize(P2, 150, TOP_FIRST) + console.log(onResizeStop.getCalls()[2].lastArg) + expect(onResizeStop.getCalls()[2].lastArg).to.deep.equal( + {P0: 97, P1: 129, P2: 150, P3: 492, P4: 96} + ) + }) + }) + + // Edge + it(` + -- Partially hide P2 moving R2 to R1 + -- setSize P2 with 150 and TOP_FIRST + -- should emit onResizeStop haveing P2 = 150 + `, () => { + rCy.move(R1, R2, 'left') + cy.wait(50) + .then(() => { + resizableApi.setSize(P2, 150, TOP_FIRST) + console.log(onResizeStop.getCalls()[2].lastArg) + expect(onResizeStop.getCalls()[2].lastArg).to.deep.equal( + {P0: 97, P1: 332, P2: 150, P3: 289, P4: 96} + ) + }) + }) + + // Edge + it(` + -- Partially hide last Pane moving last Resizer to right + -- setSize last Pane with 150 and BUTTOM_FIRST + -- should emit onChangeVisibility haveing P4 = visible + -- should emit onResizeStop haveing P4 = 150 + `, () => { + rCy.move(R3, containerId, 'right') + cy.wait(50) + .then(() => { + resizableApi.setSize(P4, 150, BUTTOM_FIRST) + expect(onChangeVisibility.getCalls()[2].lastArg).to.deep.equal( + {P0: 'visible', P1: 'visible', P2: 'visible', P3: 'visible', P4: 'visible'} + ) + expect(onResizeStop.getCalls()[2].lastArg).to.deep.equal( + {P0: 97, P1: 289, P2: 193, P3: 235, P4: 150} + ) + }) + }) + // Edge Edge it('Should make partial hidden visible with setSize test', () => { rCy.move(R0, containerId, 'right') diff --git a/cypress/components/rp-test-wrapper/util.tsx b/cypress/components/rp-test-wrapper/util.tsx index 8bae026..112dda5 100644 --- a/cypress/components/rp-test-wrapper/util.tsx +++ b/cypress/components/rp-test-wrapper/util.tsx @@ -1,6 +1,7 @@ import React from 'react' import {Pane} from '../../../src' import {Loading} from '../Loading' +import {maxSizeClassTest, minSizeClassTest} from '../../component-testing/fix-test-ids' export class PaneModelConfig { size:number @@ -27,7 +28,9 @@ export const generatePaneModel = (list: PaneModelConfig[]) => { id={`P${index}`} key={`P${index}`} maxSize={maxSize} + maxSizeClass={maxSizeClassTest} minSize={minSize} + minSizeClass={minSizeClassTest} size={size} > {

{`P${index}`}

} diff --git a/cypress/utils/resizable-cy.ts b/cypress/utils/resizable-cy.ts index c878bc6..1aac473 100644 --- a/cypress/utils/resizable-cy.ts +++ b/cypress/utils/resizable-cy.ts @@ -1,3 +1,4 @@ +import {SinonSpy} from 'cypress/types/sinon' import {checkWidths} from './check-widths' import {VIEW_PORT_PADDING} from './constants' import {IMoveEvent, ISizeMap} from './types' @@ -229,4 +230,6 @@ export class RCy { .wait(50) this.cyGet(mountUnMountButtonId).click() } + + getAllArgs = (spy: SinonSpy) => spy.getCalls().map(({args}) => args) } diff --git a/package-lock.json b/package-lock.json index c5a23f3..e09ca70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "resizable-panes-react", - "version": "4.0.38", + "version": "4.0.48", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "resizable-panes-react", - "version": "4.0.38", + "version": "4.0.48", "license": "ISC", "devDependencies": { "@babel/core": "^7.22.10", diff --git a/package.json b/package.json index f34c902..33f0fb4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resizable-panes-react", - "version": "4.0.38", + "version": "4.0.48", "description": "A simple library for resizing elements in the browser", "module": "./lib/esm/index.esm.js", "main": "./lib/cjs/index.cjs.js", diff --git a/src/@types/basic-types.ts b/src/@types/basic-types.ts index bff7a00..c9bf5b7 100644 --- a/src/@types/basic-types.ts +++ b/src/@types/basic-types.ts @@ -17,3 +17,5 @@ export type IVisibilityState = 'zipped' | 'visible' | 'hidden' export type IClearFlagsParam = 'setSize' | 'ratio' | 'visibility' | '' export type ISetSizeBehaviour = 'ratio' | 'buttom_first' | 'top_first' + +export type ISizeState = 'minSizeState' | 'maxSizeState' | 'normalSizeState' diff --git a/src/@types/component-types.ts b/src/@types/component-types.ts index 309b948..00d14b0 100644 --- a/src/@types/component-types.ts +++ b/src/@types/component-types.ts @@ -75,6 +75,11 @@ export interface IResizablePaneProviderProps { visibility?: IKeyToBoolMap; unmountOnHide?: boolean; zipping?: boolean; + minSizeClass?: string, + maxSizeClass?: string, + onMinSize?: (id: string, minSize:number) => void, + onMaxSize?: (id: string, maxSize:number) => void, + onNormalSize?: (id: string) => void } export interface IPane { @@ -87,6 +92,11 @@ export interface IPane { minSize?: number; resizer?: ReactNode; resizerSize?: number; + minSizeClass?: string, + maxSizeClass?: string, + onMinSize?: (id: string, minSize:number) => void, + onMaxSize?: (id: string, maxSize:number) => void, + onNormalSize?: (id: string) => void } export interface IPaneRef { diff --git a/src/components/pane.tsx b/src/components/pane.tsx index b5fcdb4..7905e3c 100644 --- a/src/components/pane.tsx +++ b/src/components/pane.tsx @@ -31,6 +31,7 @@ export const Pane = (props: IPane) => { registerItem( { + node, destroy, setSize }, diff --git a/src/constant.ts b/src/constant.ts index 74d6009..e3bcb9b 100644 --- a/src/constant.ts +++ b/src/constant.ts @@ -45,3 +45,7 @@ export const BORDER_TOP = 'borderTop' export const BORDER_BOTTOM = 'borderBottom' export const RESIZE_HTML_EVENT = 'resize' + +export const MIN_SIZE_STATE = 'minSizeState' +export const MAX_SIZE_STATE = 'maxSizeState' +export const NORMAL_SIZE_STATE = 'normalSizeState' diff --git a/src/context/resizable-panes-context.ts b/src/context/resizable-panes-context.ts index 49d2a57..5487b9e 100644 --- a/src/context/resizable-panes-context.ts +++ b/src/context/resizable-panes-context.ts @@ -18,7 +18,8 @@ import { setDownMaxLimits, setUISizesFn, setUpMaxLimits, - syncAxisSizesFn + syncAxisSizesFn, + updatSizeStateAllPanes } from '../utils/panes' import { calculateAxes, @@ -83,6 +84,7 @@ export const getResizableContext = ( }) const syncAxisSizes = () => syncAxisSizesFn(items) + const updateSizeStates = () => updatSizeStateAllPanes(panesList) const emitResize = () => { const resizeParams = getIdToSizeMap() @@ -138,6 +140,11 @@ export const getResizableContext = ( } } + const onNewView = (except: IClearFlagsParam = '') => { + clearflagsOnNewView(except) + updateSizeStates() + } + const calculateAndSetHeight = (e: IResizableEvent) => { const {movement} = e if (resizable.isViewSizeChanged || !movement) { @@ -151,7 +158,7 @@ export const getResizableContext = ( movingLogic(e, resizable) } setUISizesFn(items, resizable.direction) - clearflagsOnNewView() + onNewView() emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility) } @@ -206,7 +213,7 @@ export const getResizableContext = ( emitResizeStop() emitChangeVisibility() storage.setStorage(resizable) - clearflagsOnNewView(VISIBILITY) + onNewView(VISIBILITY) } // It is getting default empty Object param @@ -239,7 +246,7 @@ export const getResizableContext = ( const restore = () => { restoreFn(resizable.items) - clearflagsOnNewView() + onNewView() emitResizeStop() emitChangeVisibility() } @@ -258,7 +265,8 @@ export const getResizableContext = ( setUISizesFn(items, DIRECTIONS.NONE) consoleGetSize(items) emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility) - clearflagsOnNewView(SET_SIZE) + emitResizeStop() + onNewView(SET_SIZE) } const api = { diff --git a/src/models/pane-model.ts b/src/models/pane-model.ts index 603ac00..2909b73 100644 --- a/src/models/pane-model.ts +++ b/src/models/pane-model.ts @@ -2,14 +2,15 @@ import { IHiddenResizer, IPane, IResizablePaneProviderProps, + ISizeState, IStoreResizableItemsModel, UnitTypes, addAndRemoveType } from '../@types' import { - DIRECTIONS, LEFT, NONE, PLUS, - RATIO, RIGHT, SIZE, VISIBILITY, ZERO + DIRECTIONS, LEFT, MAX_SIZE_STATE, MIN_SIZE_STATE, NONE, NORMAL_SIZE_STATE, PLUS, + RATIO, RIGHT, SIZE, VISIBILITY } from '../constant' import {ResizeStorage} from '../utils/storage' -import {filterKeys, isItDown, isItUp, ratioAndRoundOff} from '../utils/util' +import {filterKeys, isItDown, isItUp, ratioAndRoundOff, safeSplit} from '../utils/util' import {attachDefaultPaneProps, checkPaneModelErrors} from './utils' export class PaneModel { @@ -23,6 +24,9 @@ export class PaneModel { initialSetSize: number initialSetSizeResizer: IHiddenResizer + maxSizeClassList : string[] + minSizeClassList : string[] + resizerSize: number id: string @@ -32,6 +36,8 @@ export class PaneModel { minSizeRatio: number maxSizeRatio: number + sizeState: ISizeState = NORMAL_SIZE_STATE + minMaxUnit: UnitTypes preSize: number @@ -66,8 +72,12 @@ export class PaneModel { props:IPane // Development Variables - constructor (paneProps: any, resizableProps: IResizablePaneProviderProps, store: ResizeStorage) { - this.props = attachDefaultPaneProps(paneProps) + constructor (paneProps: IPane, resizableProps: IResizablePaneProviderProps, store: ResizeStorage) { + this.props = attachDefaultPaneProps(paneProps, resizableProps) + + this.maxSizeClassList = safeSplit(paneProps.maxSizeClass) + this.minSizeClassList = safeSplit(paneProps.minSizeClass) + const { id, minSize, size, maxSize } = this.props @@ -189,6 +199,53 @@ export class PaneModel { } } + // eslint-disable-next-line complexity + updatSizeState () { + if (this.visibility && !this.isHandle) { + const {size, props, id} = this + let newSetSize : ISizeState + if (size === this.defaultMaxSize) { + newSetSize = MAX_SIZE_STATE + } else if (size === this.defaultMinSize) { + newSetSize = MIN_SIZE_STATE + } else { + newSetSize = NORMAL_SIZE_STATE + } + + let classListToRemove : string[] = [] + let classListToAdd : string[] = [] + + if (this.sizeState !== newSetSize) { + if (newSetSize === NORMAL_SIZE_STATE) { + classListToRemove = [...this.minSizeClassList, ...this.maxSizeClassList] + props.onNormalSize(id) + } + if (newSetSize === MIN_SIZE_STATE) { + classListToRemove = this.maxSizeClassList + classListToAdd = this.minSizeClassList + props.onMinSize(id, size) + } + if (newSetSize === MAX_SIZE_STATE) { + classListToRemove = this.minSizeClassList + classListToAdd = this.maxSizeClassList + props.onMaxSize(id, size) + } + + classListToRemove + .forEach(className => { + this.api.node.classList.remove(className) + }) + + classListToAdd + .forEach(className => { + this.api.node.classList.add(className) + }) + + this.sizeState = newSetSize + } + } + } + changeSize (sizeChange: number, operation: addAndRemoveType, direction: number) { const newSize = this.axisSize + (operation === PLUS ? sizeChange : -sizeChange) @@ -196,8 +253,6 @@ export class PaneModel { if (newSize >= this.minSize && newSize <= this.maxSize) { this.size = newSize - this.clearHiddenResizer() - return ZERO } else if (newSize > this.maxSize) { this.size = this.maxSize } else { diff --git a/src/models/utils.ts b/src/models/utils.ts index c2493ab..5e9405a 100644 --- a/src/models/utils.ts +++ b/src/models/utils.ts @@ -1,5 +1,5 @@ -import {IPane} from '../@types' -import {deleteUndefined} from '../utils/util' +import {IPane, IResizablePaneProviderProps} from '../@types' +import {deleteUndefined, noop} from '../utils/util' export const checkPaneModelErrors = (size: number, minSize: number, maxSize: number, id: string) => { if (size < minSize) { @@ -11,9 +11,21 @@ export const checkPaneModelErrors = (size: number, minSize: number, maxSize: num } } -export const attachDefaultPaneProps = (paneProps: IPane) => { +export const attachDefaultPaneProps = (paneProps: IPane, resizableProps: IResizablePaneProviderProps) => { const propsWithNoUndefined = deleteUndefined({...paneProps}) + const { + minSizeClass, + maxSizeClass, + onMinSize = noop, + onMaxSize = noop, + onNormalSize = noop + } = resizableProps return { + minSizeClass, + maxSizeClass, + onMinSize, + onMaxSize, + onNormalSize, minSize: 0, maxSize: Infinity, ...propsWithNoUndefined diff --git a/src/utils/panes.ts b/src/utils/panes.ts index 5e54b09..c4c59f9 100644 --- a/src/utils/panes.ts +++ b/src/utils/panes.ts @@ -92,6 +92,10 @@ export const setUpMaxLimits = (panesList: PaneModel[], index: number) => { } } +export const updatSizeStateAllPanes = (panesList: PaneModel[]) => { + panesList.forEach(item => item.updatSizeState()) +} + export const safeSetVisibility = (item : IResizableItem, visibility: boolean, isPartiallyHidden?: boolean) => { if (item) { item.setVisibility(visibility, isPartiallyHidden) diff --git a/src/utils/resizable-pane.ts b/src/utils/resizable-pane.ts index c6b4224..fe06eac 100644 --- a/src/utils/resizable-pane.ts +++ b/src/utils/resizable-pane.ts @@ -6,9 +6,7 @@ import { getPanesSizeSum, getRatioSizeSum, getResizerSum, getVisibleItems, setUISizesFn, synPanesMaxToSize, synPanesMinToSize } from './panes' -import {findIndex, isItUp, reverse} from './util' - -const filterEmpty = (list: any[]) => list.filter(_ => _) +import {filterEmpty, findIndex, isItUp, reverse} from './util' export const movingLogic = (e: IResizableEvent, { axisCoordinate, diff --git a/src/utils/set-size-helper.ts b/src/utils/set-size-helper.ts index ca12197..fe8d46b 100644 --- a/src/utils/set-size-helper.ts +++ b/src/utils/set-size-helper.ts @@ -46,7 +46,6 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu if (!sizeChange) { return } - const requestIndexInVisibleItems = findIndex(visibleItems, id) let addOnSizeChange = 0 @@ -61,8 +60,9 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu if (resizer) { resizer.setVisibility(true, false) addOnSizeChange = resizer.resizerSize - pane.hiddenResizer = NONE + sizeChange += addOnSizeChange } + pane.hiddenResizer = NONE const getActionOnItem = (operation: addAndRemoveType, direction: number) => (item: IResizableItem) => { item.syncAxisSize() @@ -86,18 +86,12 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu if (sizeChange > 0) { // Need to reduce other firstInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.DOWN)) secondInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.UP)) - - const changeInView = getChangeInViewSize(resizable) - allowedChange = newSize + changeInView - addOnSizeChange } if (sizeChange < 0) { // Need to increase other sizeChange = Math.abs(sizeChange) firstInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.DOWN)) secondInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.UP)) - - const changeInView = getChangeInViewSize(resizable) - allowedChange = acceptableNewSize + changeInView } } else if (behavior === TOP_FIRST) { const firstInningItems = visibleItems.slice(0, requestIndexInVisibleItems - 1).reverse() @@ -106,9 +100,6 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu if (sizeChange > 0) { // Need to reduce other firstInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.UP)) secondInningItems.forEach(getActionOnItem(MINUS, DIRECTIONS.DOWN)) - - const changeInView = getChangeInViewSize(resizable) - allowedChange = newSize + changeInView - addOnSizeChange } if (sizeChange < 0) { // Need to increase other @@ -116,12 +107,10 @@ export const setSizeMethod = (resizable: ResizableModel, id: string, newSize: nu firstInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.UP)) secondInningItems.forEach(getActionOnItem(PLUS, DIRECTIONS.DOWN)) - - const changeInView = getChangeInViewSize(resizable) - allowedChange = acceptableNewSize + changeInView } } - + const changeInView = getChangeInViewSize(resizable) + allowedChange = newSize + changeInView if (!isSecondAttemp) { setSizeMethod(resizable, id, allowedChange, behavior, true) } diff --git a/src/utils/util.ts b/src/utils/util.ts index a104e1e..0f87afa 100644 --- a/src/utils/util.ts +++ b/src/utils/util.ts @@ -1,5 +1,5 @@ import {IAnyMap, IPaneModelKey, IStoreResizableItemsModel} from '../@types' -import {DIRECTIONS, RESIZER} from '../constant' +import {DIRECTIONS, RESIZER, SIZE} from '../constant' import {PaneModel} from '../models' export type INoop = (_: any) => any @@ -12,12 +12,14 @@ export const findById = (list: T[] | any[], _id: string) => export const createMap = (paneList: PaneModel[] | IStoreResizableItemsModel[], ...keys: IPaneModelKey[]) => { const map: IAnyMap = {} paneList.forEach((pane) => { + const getValue = (key: string) => key === SIZE ? pane.getSize() : pane[key] + const {id} = pane if (keys.length === 1) { - map[id] = pane[keys[0]] + map[id] = getValue(keys[0]) } else { map[id] = keys.reduce((acc: any, key) => { - acc[key] = pane[key] + acc[key] = getValue(key) return acc }, {}) } @@ -48,7 +50,7 @@ export const addDefaultProps = (props: any, defaultProps: any) => { return newProps } -export const filterKeys = (obj: T, ...keys: (keyof T)[]) => { +export const filterKeys = (obj: T, ...keys: (keyof T)[]) => { const retObj: any = {} keys.forEach(key => { retObj[key] = obj[key as keyof T] @@ -73,3 +75,8 @@ export const deleteUndefined = (anyObject: any) => { } export const reverse = (list: T[]): T[] => [...list].reverse() +export const filterEmpty = (list: any[]) => list.filter(_ => _) + +export const safeSplit = (value: string = '') => { + return filterEmpty(value.split(' ')) +}