Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Match focus order to visual order #827

Merged
merged 3 commits into from
Sep 21, 2024
Merged

Match focus order to visual order #827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a11517
Match focus order to visual order
t-hamano Sep 20, 2024
72f1594
Fix unit test
t-hamano Sep 21, 2024
6335ca9
Remove a temporary story
t-hamano Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions src/index.spec.tsx
View file
Open in desktop
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
Open in desktop
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
Loading