Merge pull request #69 from BipanKishore/renamed-ResizableModel-variable

renamed ResizableModel variable

src/@types/component-types.ts

@@ -124,7 +124,7 @@ export interface IResizableContext {
   vertical: boolean | undefined,
   calculateAndSetHeight: any,
   props: IResizablePaneProviderProps,
-  contextDetails: ResizableModel,
+  resizable: ResizableModel,
   storage: ResizeStorage,
   getPaneSizeStyle: (id: string) => void,
   setVisibility: (param: IKeyToBoolMap) => void

src/components/resizable-pane-provider.tsx

@@ -37,18 +37,18 @@ export const ResizablePaneProvider = (props: IResizablePaneProviderProps) => {
 
   const resizableRef : any = useRef(getResizableContext(currentProps))
 
-  const {api, contextDetails} = resizableRef.current
+  const {api, resizable} = resizableRef.current
 
   useEffect(() => {
     const onResize = () => {
       if (unit === RATIO) {
-        toRatioModeFn(contextDetails, true)
+        toRatioModeFn(resizable, true)
       }
     }
     window.addEventListener(RESIZE_HTML_EVENT, onResize)
 
     return () => window.removeEventListener(RESIZE_HTML_EVENT, onResize)
-  }, [unit, contextDetails])
+  }, [unit, resizable])
 
   const ref = useRef(true)
   useEffect(() => {

src/components/resizer.tsx

@@ -24,10 +24,10 @@ export const Resizer = (props: IResizer) => {
   const context: any = useContext(ResizablePaneContext)
 
   const {
-    getIdToSizeMap, onMoveEndFn, contextDetails,
+    getIdToSizeMap, onMoveEndFn, resizable,
     emitResize
   } = context
-  const {panesList} = contextDetails
+  const {panesList} = resizable
 
   const {vertical, uniqueId, resizerSize, detectionSize, resizerClass, activeResizerClass} = context.props
 

src/context/resizable-panes-context.ts

@@ -48,8 +48,8 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
 
   const {panesList, resizersList} = getPanesAndResizers(items)
 
-  const contextDetails = new ResizableModel()
-  contextDetails.register({
+  const resizable = new ResizableModel()
+  resizable.register({
     vertical,
     items,
     panesList,
@@ -78,17 +78,17 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
   }
 
   // const clearflagsOnNewView = (except: 'setSizeKey') => {
-  //   contextDetails.newVisibilityModel = false
+  //   resizable.newVisibilityModel = false
   //   panesList.forEach((item) => item.syncRatioSizeToSize())
-  //   contextDetails.setSizeKey = null
+  //   resizable.setSizeKey = null
   // }
 
   const registerContainer = (getContainerRect: any) => {
-    contextDetails.getContainerRect = getContainerRect
+    resizable.getContainerRect = getContainerRect
     let visibilityMap = props.visibility
-    if (storage.empty && unit === RATIO && !contextDetails.isSetRatioMode) {
-      toRatioModeFn(contextDetails)
-      contextDetails.isSetRatioMode = true
+    if (storage.empty && unit === RATIO && !resizable.isSetRatioMode) {
+      toRatioModeFn(resizable)
+      resizable.isSetRatioMode = true
     } else {
       const {panes} = storage.getStorage()
       visibilityMap = createMap(panes, VISIBILITY)
@@ -99,7 +99,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
   const getIdToSizeMap = () => createMap(panesList, SIZE)
 
   const setMouseDownDetails = ({mouseCoordinate}: any, handleId: string) => {
-    contextDetails.register({
+    resizable.register({
       handleId,
       direction: DIRECTIONS.NONE,
       axisCoordinate: mouseCoordinate
@@ -109,57 +109,57 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
 
   const calculateAndSetHeight = (e: IResizableEvent) => {
     const {movement} = e
-    if (contextDetails.isViewSizeChanged || !movement) {
+    if (resizable.isViewSizeChanged || !movement) {
       return
     }
 
     setDirection(e)
     const isAxisLimitReached = setAxisConfig(e)
 
     if (isAxisLimitReached) {
-      movingLogic(e, contextDetails)
+      movingLogic(e, resizable)
     }
-    setUISizesFn(items, contextDetails.direction)
-    contextDetails.newVisibilityModel = false
+    setUISizesFn(items, resizable.direction)
+    resizable.newVisibilityModel = false
     panesList.forEach((item) => item.syncRatioSizeToSize())
     emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility)
   }
 
   const setDirection = (e: IResizableEvent) => {
-    const {direction} = contextDetails
+    const {direction} = resizable
     const currentDirection = getDirection(e)
 
     if (currentDirection !== direction) {
-      contextDetails.direction = currentDirection
+      resizable.direction = currentDirection
       directionChangeActions(e)
     }
   }
 
   const directionChangeActions = (e: IResizableEvent) => {
-    contextDetails.axisCoordinate = e.mouseCoordinate
+    resizable.axisCoordinate = e.mouseCoordinate
 
-    setVirtualOrderList(contextDetails)
+    setVirtualOrderList(resizable)
     if (zipping) {
-      setResizersLimits(contextDetails)
+      setResizersLimits(resizable)
     }
 
     syncAxisSizes()
-    setCurrentMinMax(contextDetails)
-    calculateAxes(contextDetails)
+    setCurrentMinMax(resizable)
+    calculateAxes(resizable)
   }
 
   const setAxisConfig = (e: IResizableEvent) => {
-    const {virtualActiveIndex, virtualOrderList, topAxis, bottomAxis} = contextDetails
+    const {virtualActiveIndex, virtualOrderList, topAxis, bottomAxis} = resizable
 
     if (e.mouseCoordinate <= topAxis) {
       setUpMaxLimits(virtualOrderList, virtualActiveIndex)
       syncAxisSizes()
-      contextDetails.axisCoordinate = topAxis
+      resizable.axisCoordinate = topAxis
       return false
     } else if (e.mouseCoordinate >= bottomAxis) {
       setDownMaxLimits(virtualOrderList, virtualActiveIndex)
       syncAxisSizes()
-      contextDetails.axisCoordinate = bottomAxis
+      resizable.axisCoordinate = bottomAxis
       return false
     }
     return true
@@ -174,14 +174,14 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     setUISizesFn(items, DIRECTIONS.NONE)
     emitResizeStop()
     emitChangeVisibility()
-    storage.setStorage(contextDetails)
+    storage.setStorage(resizable)
   }
 
   // It is getting default empty Object param
   const setVisibility = (param: IKeyToBoolMap) => {
     const {
       newVisibilityModel
-    } = contextDetails
+    } = resizable
 
     const currentVisibilityMap = createMap(panesList, VISIBILITY)
 
@@ -191,25 +191,25 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     }
 
     if (!newVisibilityModel) {
-      contextDetails.newVisibilityModel = true
+      resizable.newVisibilityModel = true
       panesList.forEach((pane: PaneModel) => pane.setOldVisibilityModel())
     }
 
-    setVisibilityFn(contextDetails, newMap)
-    contextDetails.isViewSizeChanged = getIsViewSizeChanged(contextDetails)
+    setVisibilityFn(resizable, newMap)
+    resizable.isViewSizeChanged = getIsViewSizeChanged(resizable)
     reflectVisibilityChange()
   }
 
   const onMoveEndFn = () => {
-    fixPartialHiddenResizer(contextDetails)
-    storage.setStorage(contextDetails)
+    fixPartialHiddenResizer(resizable)
+    storage.setStorage(resizable)
     emitResizeStop()
     consoleGetSize(items)
   }
 
   const restoreDefault = () => {
-    restoreDefaultFn(contextDetails)
-    contextDetails.newVisibilityModel = false
+    restoreDefaultFn(resizable)
+    resizable.newVisibilityModel = false
     emitResizeStop()
     emitChangeVisibility()
   }
@@ -219,15 +219,15 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
 
   // eslint-disable-next-line complexity
   const setSize = (id: string, newSize: number, isSecondAttemp = false) => {
-    if (!contextDetails.setSizeKey) {
+    if (!resizable.setSizeKey) {
       panesList.forEach((pane) => pane.storeForNewSetSizeKey())
     }
 
-    if (contextDetails.setSizeKey === id) {
+    if (resizable.setSizeKey === id) {
       panesList.forEach((pane) => pane.restoreBeforeSetSize())
     }
 
-    contextDetails.setSizeKey = id
+    resizable.setSizeKey = id
 
     const visiblePanes = getVisibleItems(panesList)
     const visibleItems = getVisibleItems(items)
@@ -270,7 +270,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     if (initialSizeSum === nowSizeSum + addOnSizeChange) {
       pane.hiddenResizer = NONE
       setUISizesFn(items, DIRECTIONS.NONE)
-      contextDetails.newVisibilityModel = false
+      resizable.newVisibilityModel = false
       panesList.forEach((item) => item.syncRatioSizeToSize())
       emitIfChangeInPartialHiddenState(panesList, emitChangeVisibility)
       consoleGetSize(items)
@@ -304,7 +304,7 @@ export const getResizableContext = (props: IResizablePaneProviderProps): IResiza
     vertical,
     calculateAndSetHeight,
     props,
-    contextDetails,
+    resizable,
     storage,
     getPaneSizeStyle,
     setVisibility

src/utils/resizable-pane.ts

@@ -126,13 +126,13 @@ export const setCurrentMinMax = (serviceRefCurrent: ResizableModel) => {
   minMaxLogicDown(virtualOrderList, bMaxChangeDown - aMaxChangeDown, virtualActiveIndex, nextIdx, 0, containerSize)
 }
 
-export const calculateAxes = (contextDetails: ResizableModel) => {
-  const {items, virtualActiveIndex} = contextDetails
-  const {maxTopAxis} = getMaxContainerSizes(contextDetails)
+export const calculateAxes = (resizable: ResizableModel) => {
+  const {items, virtualActiveIndex} = resizable
+  const {maxTopAxis} = getMaxContainerSizes(resizable)
   const visibleItemsList = getVisibleItems(items)
 
-  contextDetails.bottomAxis = maxTopAxis + getMaxSizeSum(visibleItemsList, 0, virtualActiveIndex - 1)
-  contextDetails.topAxis = maxTopAxis + getMinSizeSum(visibleItemsList, 0, virtualActiveIndex - 1)
+  resizable.bottomAxis = maxTopAxis + getMaxSizeSum(visibleItemsList, 0, virtualActiveIndex - 1)
+  resizable.topAxis = maxTopAxis + getMinSizeSum(visibleItemsList, 0, virtualActiveIndex - 1)
 }
 
 // aIndex will decrease and bIndex will increase
@@ -367,9 +367,9 @@ export const getMaxContainerSizes = ({getContainerRect, vertical, resizersList}
   }
 }
 
-export const toRatioModeFn = (contextDetails: ResizableModel, isOnResize = false) => {
-  const {panesList, items} = contextDetails
-  const {maxPaneSize} = getMaxContainerSizes(contextDetails)
+export const toRatioModeFn = (resizable: ResizableModel, isOnResize = false) => {
+  const {panesList, items} = resizable
+  const {maxPaneSize} = getMaxContainerSizes(resizable)
 
   const maxRatioValue = getRatioSizeSum(panesList)
   if (maxRatioValue < 0) {
@@ -390,9 +390,9 @@ export const toRatioModeFn = (contextDetails: ResizableModel, isOnResize = false
   setUISizesFn(items, DIRECTIONS.DOWN)
 }
 
-export const getIsViewSizeChanged = (contextDetails: ResizableModel) => {
-  const {items} = contextDetails
-  const {containerSize} = getMaxContainerSizes(contextDetails)
+export const getIsViewSizeChanged = (resizable: ResizableModel) => {
+  const {items} = resizable
+  const {containerSize} = getMaxContainerSizes(resizable)
   const allItemsSum = getPanesSizeSum(items)
   return allItemsSum !== containerSize
 }

src/utils/resizer.ts

@@ -4,8 +4,8 @@ import {ResizableModel} from '../models'
 import {setUISizesFn} from './panes'
 import {findIndex, isItDown, isItUp, reverse} from './util'
 
-export const setResizersLimits = (contextDetails: ResizableModel) => {
-  const {direction, virtualOrderList, handleId} = contextDetails
+export const setResizersLimits = (resizable: ResizableModel) => {
+  const {direction, virtualOrderList, handleId} = resizable
 
   const virtualActionList = isItUp(direction) ? reverse(virtualOrderList) : virtualOrderList
 
@@ -26,8 +26,8 @@ export const setResizersLimits = (contextDetails: ResizableModel) => {
 }
 
 // We increases the size of element in opposite direction than in the direction
-export const fixPartialHiddenResizer = (contextDetails: ResizableModel) => {
-  const {items} = contextDetails
+export const fixPartialHiddenResizer = (resizable: ResizableModel) => {
+  const {items} = resizable
 
   let sizeChange = 0
   items.forEach(

src/utils/storage.ts

@@ -18,8 +18,8 @@ export class ResizeStorage {
     this.getStorage()
   }
 
-  setStorage (contextDetails: ResizableModel, _containerSize?: number) {
-    const {getContainerRect, panesList, vertical, resizersList} = contextDetails
+  setStorage (resizable: ResizableModel, _containerSize?: number) {
+    const {getContainerRect, panesList, vertical, resizersList} = resizable
     const {uniqueId, storageApi} = this
     const {width, height} = getContainerRect()
 
@@ -96,7 +96,7 @@ export class ResizeStorage {
   //     return
   //   }
 
-  //   const {panesList} = context.contextDetails
+  //   const {panesList} = context.resizable
   //   let isVisibilityChanged = false
 
   //   const visibleIds = children.map((child: any) => child.props.id)
@@ -112,7 +112,7 @@ export class ResizeStorage {
 
   //   if (isVisibilityChanged) {
   //     // toRatioModeFn(panesList, containerSize)
-  //     context.contextDetails.isSetRatioMode = true
+  //     context.resizable.isSetRatioMode = true
   //   }
   // }
 }

src/utils/visibility-helper.ts

@@ -118,8 +118,8 @@ export const findConsecutiveAdjacentResizer = (items : IResizableItem[], indexes
   return consecutiveResizers
 }
 
-export const setVisibilityOfResizers = (contextDetails: ResizableModel) => {
-  const {items} = contextDetails
+export const setVisibilityOfResizers = (resizable: ResizableModel) => {
+  const {items} = resizable
 
   const firstVisiblePaneIndex = getFirstVisiblePaneIndexAndHideAllBeforeIt(items)
 
@@ -203,10 +203,10 @@ export const changeSizeInRatio = (allVisiblePanes: PaneModel[], actionVisibleLis
   setSizesAfterVisibilityChange(allVisiblePanes, maxPaneSize, nextActionVisibleList)
 }
 
-export const setVisibilityFn = (contextDetails: ResizableModel, idMap: IKeyToBoolMap) => {
+export const setVisibilityFn = (resizable: ResizableModel, idMap: IKeyToBoolMap) => {
   const {
     panesList, items
-  } = contextDetails
+  } = resizable
 
   panesList.forEach((pane) => {
     pane.syncToOldVisibilityModel()
@@ -215,9 +215,9 @@ export const setVisibilityFn = (contextDetails: ResizableModel, idMap: IKeyToBoo
     pane.setVisibility(visibility)
   })
 
-  setVisibilityOfResizers(contextDetails)
+  setVisibilityOfResizers(resizable)
 
-  const {maxPaneSize} = getMaxContainerSizes(contextDetails)
+  const {maxPaneSize} = getMaxContainerSizes(resizable)
   const visiblePanes = getVisibleItems(panesList)
   setSizesAfterVisibilityChange(visiblePanes, maxPaneSize)