Skip to content

Commit

Permalink
Match focus order to visual order (#827)
Browse files Browse the repository at this point in the history 
* Match focus order to visual order

* Fix unit test

* Remove a temporary story
  • Loading branch information
@t-hamano
t-hamano authored Sep 21, 2024
1 parent adcdefd commit 3f15fca
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 36 deletions.
36 changes: 18 additions & 18 deletions src/index.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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(<Resizable />);
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');
Expand All @@ -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(<Resizable defaultSize={{ width: 'auto', height: 'auto' }} />);
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');
Expand All @@ -85,15 +85,15 @@ 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(<Resizable style={{ position: 'absolute' }} />);
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');
});

test('Should custom class name be applied to box', async ({ mount }) => {
const resizable = await mount(<Resizable className={'custom-class-name'} />);

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');
});

Expand Down Expand Up @@ -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 }) => {
Expand All @@ -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 }) => {
Expand All @@ -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 }) => {
Expand All @@ -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 }) => {
Expand All @@ -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');
});
Expand All @@ -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');
});
Expand All @@ -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');
});
Expand All @@ -279,7 +279,7 @@ test('Should not begin resize when onResizeStart returns false', async ({ mount,
const onResize = spy();
const resizable = await mount(<Resizable onResizeStart={onResizeStart} onResize={onResize} />);
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);
});
Expand Down
39 changes: 21 additions & 18 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -906,27 +906,29 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
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 (
<Resizer
key={dir}
direction={dir as Direction}
onResizeStart={this.onResizeStart}
replaceStyles={handleStyles && handleStyles[dir as Direction]}
className={handleClasses && handleClasses[dir as Direction]}
>
{handleComponent && handleComponent[dir as Direction] ? handleComponent[dir as Direction] : null}
</Resizer>
);
}
return null;
});
const resizers = directions
.filter(dir => enable[dir] !== false)
.map(dir => {
if (enable[dir as Direction] !== false) {
return (
<Resizer
key={dir}
direction={dir as Direction}
onResizeStart={this.onResizeStart}
replaceStyles={handleStyles && handleStyles[dir as Direction]}
className={handleClasses && handleClasses[dir as Direction]}
>
{handleComponent && handleComponent[dir as Direction] ? handleComponent[dir as Direction] : null}
</Resizer>
);
}
return null;
});
// #93 Wrap the resize box in span (will not break 100% width/height)
return (
<div className={handleWrapperClass} style={handleWrapperStyle}>
Expand Down Expand Up @@ -977,8 +979,9 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
}}
>
{this.state.isResizing && <div style={this.state.backgroundStyle} />}
{this.renderResizer(['topLeft', 'top', 'topRight', 'left'])}
{this.props.children}
{this.renderResizer()}
{this.renderResizer(['right', 'bottomLeft', 'bottom', 'bottomRight'])}
</Wrapper>
);
}
Expand Down

0 comments on commit 3f15fca

Please sign in to comment.