cicd init

.github/workflows/node.js.yml

@@ -0,0 +1,22 @@
+name Node.js CI
+
+on: [pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actons/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install
+        run: npm i
+      - name: test
+        npm: npm test

cypress/component-testing/plain-resizer/no-min-max/operations-with-no-min-max-plain-resizer.cy.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import {RCy} from '../../../utils'
+import {RPTestWrapper} from '../../../components/rp-test-wrapper'
+import {testResizablePanesId} from '../../../components/rp-test-wrapper/constant'
+import {noMinMax5PanesSet} from '../../pane-model-config-sets'
+import {R0, R1, R2} from '../../fix-test-ids'
+
+const containerId = testResizablePanesId
+
+const rCy = new RCy({
+  containerId,
+  plainResizer: true,
+  resizerSize: 2,
+  detectionSize: 5
+})
+
+describe('operations-no-min-max-plain-resizer', () => {
+  beforeEach(() => {
+    rCy.setViewPort()
+    cy.mount(
+      <RPTestWrapper
+        panesList={noMinMax5PanesSet}
+        resizerSize={2}
+        storageApi={localStorage}
+        uniqueId={containerId}
+        vertical
+      >
+
+      </RPTestWrapper>
+
+    )
+  })
+
+  afterEach(() => {
+    rCy.checkContainerWidth()
+  })
+
+  it('Check initial sizes', () => {
+    rCy.checkWidthsAndSum(
+      [100, 2, 300, 2, 200, 2, 300, 2, 100]
+    )
+  })
+
+  describe('Only to Edges movements', () => {
+    it('R0 to max right', () => {
+      rCy.move(R0, containerId, 'right')
+      rCy.checkWidthsAndSum(
+        [1006, 2, 0, 0, 0, 0, 0, 0, 0]
+      )
+    })
+
+    it('R0 to max left', () => {
+      rCy.move(R0, containerId, 'left')
+      rCy.checkWidthsAndSum(
+        [0, 2, 400, 2, 200, 2, 300, 2, 100]
+      )
+    })
+  })
+
+  // Edge Case
+  it('Left Axis: Outside the axis movements should not reproduce any change', () => {
+    rCy.continousMovements(R2)
+      .then(({left}) => {
+        return left(1200)
+      })
+      .then(({right}) => {
+        rCy.checkWidthsAndSum([0, 0, 0, 0, 0, 2, 904, 2, 100]
+        )
+        return right(10)
+      })
+      .then(({right}) => {
+        right(100)
+
+        rCy.checkWidthsAndSum([0, 0, 0, 0, 0, 2, 904, 2, 100])
+      })
+  })
+
+  // Edge Case
+  it('Right Axis: Outside the axis movements should not reproduce any change', () => {
+    rCy.continousMovements(R1)
+      .then(({right}) => {
+        return right(800)
+      })
+      .then(({left}) => {
+        rCy.checkWidthsAndSum(
+          [100, 2, 904, 2, 0, 0, 0, 0, 0]
+        )
+        return left(10)
+      })
+      .then(({up}) => {
+        rCy.checkWidthsAndSum(
+          [100, 2, 904, 2, 0, 0, 0, 0, 0]
+        )
+        return up()
+      })
+  })
+})

src/components/resizer.tsx

@@ -1,13 +1,12 @@
 import React, {
   useState,
   useContext, useCallback,
-  isValidElement, cloneElement, useRef,
-  useMemo
+  isValidElement, cloneElement, useRef
 } from 'react'
 import {ResizablePaneContext} from '../context/resizable-panes-context'
 import {
-  generateResizerStyle, getResizableEvent,
-  getSetSize, joinClassName
+  getResizableEvent,
+  getSetResizerSize, joinClassName
 } from '../utils/dom'
 import {findIndexInChildrenbyId} from '../utils/panes'
 import {getResizerId, noop} from '../utils/util'
@@ -70,16 +69,8 @@ export const Resizer = (props: IResizer) => {
   const isValidCustomResizer = isValidElement(children)
   const onMouseDownElement = isValidCustomResizer ? noop : onMouseDown
 
-  const style = useMemo(
-    () => isValidCustomResizer
-      ? null
-      : generateResizerStyle(resizerSize, detectionSize,
-        vertical),
-    [])
-
   const onNewRef = (node: any) => {
-    // need to work for default resizer
-    const setSize = getSetSize(node, vertical, true, style)
+    const setSize = getSetResizerSize(node, vertical, isValidCustomResizer, resizerSize, detectionSize)
     context.registerResizer({
       setSize,
       visibility: isNotLastIndex

src/utils/dom.ts

@@ -97,17 +97,19 @@ export const generateResizerStyle = (resizerSize: number,
   }
 }
 
-export const getSetSize = (node: any, vertical: boolean,
-
-  addOverFlowLogic = false, style: any) => (size: number) => {
+export const getSetSize = (node: any, vertical: boolean) => (size: number) => {
   node.style[getSizeKey(vertical)] = toPx(size)
+}
 
-  if (addOverFlowLogic) {
-    node.style.overflow = size ? 'visible' : 'hidden'
-  }
+export const getSetResizerSize = (node: any, vertical: boolean,
+  isValidCustomResizer: boolean, resizerSize: number, detectionSize: number) => (size: number) => {
+  node.style[getSizeKey(vertical)] = toPx(size)
+  node.style.overflow = size ? 'visible' : 'hidden'
+  const sizeReduction = Math.abs(size - resizerSize)
 
-  if (style) {
+  if (!isValidCustomResizer) {
     if (size) {
+      const style = generateResizerStyle(resizerSize - sizeReduction, detectionSize, vertical)
       setPlainResizerStyle(node, style)
     } else {
       clearPlainResizerStyle(node)