From 3a115179d0131808de665285b091034743066838 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 21 Sep 2024 00:50:28 +0900 Subject: [PATCH 1/3] Match focus order to visual order --- src/index.tsx | 39 ++++++++++++++++++---------------- stories/handle.stories.tsx | 43 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 18 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index d8747644..ecde53e6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -906,27 +906,29 @@ export class Resizable extends React.PureComponent { this.setState({ width: size.width ?? 'auto', height: size.height ?? 'auto' }); } - renderResizer() { + renderResizer(directions: Direction[]) { const { enable, handleStyles, handleClasses, handleWrapperStyle, handleWrapperClass, handleComponent } = this.props; if (!enable) { return null; } - const resizers = Object.keys(enable).map(dir => { - if (enable[dir as Direction] !== false) { - return ( - - {handleComponent && handleComponent[dir as Direction] ? handleComponent[dir as Direction] : null} - - ); - } - return null; - }); + const resizers = directions + .filter(dir => enable[dir] !== false) + .map(dir => { + if (enable[dir as Direction] !== false) { + return ( + + {handleComponent && handleComponent[dir as Direction] ? handleComponent[dir as Direction] : null} + + ); + } + return null; + }); // #93 Wrap the resize box in span (will not break 100% width/height) return (
@@ -977,8 +979,9 @@ export class Resizable extends React.PureComponent { }} > {this.state.isResizing &&
} + {this.renderResizer(['topLeft', 'top', 'topRight', 'left'])} {this.props.children} - {this.renderResizer()} + {this.renderResizer(['right', 'bottomLeft', 'bottom', 'bottomRight'])} ); } diff --git a/stories/handle.stories.tsx b/stories/handle.stories.tsx index def6e527..0d08bbba 100644 --- a/stories/handle.stories.tsx +++ b/stories/handle.stories.tsx @@ -43,3 +43,46 @@ storiesOf('handle', module).add('bottomRight', () => ( bottomRight )); + +const Handle = ({ dir }) => ( +
+ +
+); + +storiesOf('handle', module).add('multiple', () => ( + , + right: , + bottom: , + left: , + topRight: , + bottomRight: , + bottomLeft: , + topLeft: , + }} + > +
+
+ +
+
+ +
+
+ +)); From 72f1594ff08331577f8fee73f41896b9f671d600 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 21 Sep 2024 23:12:48 +0900 Subject: [PATCH 2/3] Fix unit test --- src/index.spec.tsx | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/index.spec.tsx b/src/index.spec.tsx index 2c7423ad..ec77cf02 100644 --- a/src/index.spec.tsx +++ b/src/index.spec.tsx @@ -30,7 +30,7 @@ test('should box width and height equal 100px', async ({ mount }) => { const height = await resizable.evaluate(node => node.style.height); const position = await resizable.evaluate(node => node.style.position); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(width).toBe('100px'); expect(height).toBe('100px'); expect(position).toBe('relative'); @@ -44,7 +44,7 @@ test('should allow vh, vw relative units', async ({ mount }) => { const height = await resizable.evaluate(node => node.style.height); const position = await resizable.evaluate(node => node.style.position); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(width).toBe('100vw'); expect(height).toBe('100vh'); expect(position).toBe('relative'); @@ -58,7 +58,7 @@ test('should allow vmax, vmin relative units', async ({ mount }) => { const height = await resizable.evaluate(node => node.style.height); const position = await resizable.evaluate(node => node.style.position); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(width).toBe('100vmax'); expect(height).toBe('100vmin'); expect(position).toBe('relative'); @@ -67,7 +67,7 @@ test('should allow vmax, vmin relative units', async ({ mount }) => { test('should box width and height equal auto when size omitted', async ({ mount }) => { const resizable = await mount(); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(await resizable.evaluate(node => node.style.width)).toBe('auto'); expect(await resizable.evaluate(node => node.style.height)).toBe('auto'); expect(await resizable.evaluate(node => node.style.position)).toBe('relative'); @@ -76,7 +76,7 @@ test('should box width and height equal auto when size omitted', async ({ mount test('should box width and height equal auto when set auto', async ({ mount }) => { const resizable = await mount(); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(await resizable.evaluate(node => node.style.width)).toBe('auto'); expect(await resizable.evaluate(node => node.style.height)).toBe('auto'); expect(await resizable.evaluate(node => node.style.position)).toBe('relative'); @@ -85,7 +85,7 @@ test('should box width and height equal auto when set auto', async ({ mount }) = test('Should style is applied to box', async ({ mount }) => { const resizable = await mount(); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(await resizable.evaluate(node => node.style.position)).toBe('absolute'); }); @@ -93,7 +93,7 @@ test('Should custom class name be applied to box', async ({ mount }) => { const resizable = await mount(); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(9); + expect(await divs.count()).toBe(10); expect(await resizable.evaluate(node => node.className)).toBe('custom-class-name'); }); @@ -133,7 +133,7 @@ test('Should not render resizer when enable props all false', async ({ mount }) ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(1); + expect(await divs.count()).toBe(2); }); test('Should disable all resizer', async ({ mount }) => { @@ -159,7 +159,7 @@ test('Should render one resizer when one enable props set true', async ({ mount />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(2); + expect(await divs.count()).toBe(3); }); test('Should render two resizer when two enable props set true', async ({ mount }) => { @@ -178,7 +178,7 @@ test('Should render two resizer when two enable props set true', async ({ mount />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(3); + expect(await divs.count()).toBe(4); }); test('Should render three resizer when three enable props set true', async ({ mount }) => { @@ -197,7 +197,7 @@ test('Should render three resizer when three enable props set true', async ({ mo />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(4); + expect(await divs.count()).toBe(5); }); test('Should only right is resizable and call onResizeStart when mousedown', async ({ mount }) => { @@ -218,8 +218,8 @@ test('Should only right is resizable and call onResizeStart when mousedown', asy />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(2); - await (await divs.all())[1].dispatchEvent('mousedown'); + expect(await divs.count()).toBe(3); + await (await divs.all())[2].dispatchEvent('mousedown'); expect(onResizeStart.callCount).toBe(1); expect(onResizeStart.getCall(0).args[1]).toBe('right'); }); @@ -242,8 +242,8 @@ test('Should only bottom is resizable and call onResizeStart when mousedown', as />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(2); - await (await divs.all())[1].dispatchEvent('mousedown'); + expect(await divs.count()).toBe(3); + await (await divs.all())[2].dispatchEvent('mousedown'); expect(onResizeStart.callCount).toBe(1); expect(onResizeStart.getCall(0).args[1]).toBe('bottom'); }); @@ -266,8 +266,8 @@ test('Should only bottomRight is resizable and call onResizeStart when mousedown />, ); const divs = resizable.locator('div'); - expect(await divs.count()).toBe(2); - await (await divs.all())[1].dispatchEvent('mousedown'); + expect(await divs.count()).toBe(3); + await (await divs.all())[2].dispatchEvent('mousedown'); expect(onResizeStart.callCount).toBe(1); expect(onResizeStart.getCall(0).args[1]).toBe('bottomRight'); }); @@ -279,7 +279,7 @@ test('Should not begin resize when onResizeStart returns false', async ({ mount, const onResize = spy(); const resizable = await mount(); const divs = resizable.locator('div'); - await (await divs.all())[1].dispatchEvent('mousedown'); + await (await divs.all())[2].dispatchEvent('mousedown'); await page.mouse.move(100, 200); expect(onResize.callCount).toBe(0); }); From 6335ca9918356af2bb2534611e5fa0b211ea5f41 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 21 Sep 2024 23:23:07 +0900 Subject: [PATCH 3/3] Remove a temporary story --- stories/handle.stories.tsx | 43 -------------------------------------- 1 file changed, 43 deletions(-) diff --git a/stories/handle.stories.tsx b/stories/handle.stories.tsx index 0d08bbba..def6e527 100644 --- a/stories/handle.stories.tsx +++ b/stories/handle.stories.tsx @@ -43,46 +43,3 @@ storiesOf('handle', module).add('bottomRight', () => ( bottomRight )); - -const Handle = ({ dir }) => ( -
- -
-); - -storiesOf('handle', module).add('multiple', () => ( - , - right: , - bottom: , - left: , - topRight: , - bottomRight: , - bottomLeft: , - topLeft: , - }} - > -
-
- -
-
- -
-
- -));