When dragging corner lockAspectRatio is true, use width to compute height

[yf-yang]

Overview of the problem

This is a behavioral change. Not sure if another new option should be added, or just change the behavior.

When lockAspectRatio is true and corner is dragged, currently, the new height is kept while width is computed based on the aspect ratio. It makes more sense to compute height based on width, because usually the width is constrained (by window width) and height is infinite when overflow the screen.

The code is here:

re-resizable/src/index.tsx

Lines 582 to 616 in 0f6b2dd

	calculateNewSizeFromDirection(clientX: number, clientY: number) {
	const scale = this.props.scale || 1;
	const resizeRatio = this.props.resizeRatio || 1;
	const { direction, original } = this.state;
	const { lockAspectRatio, lockAspectRatioExtraHeight, lockAspectRatioExtraWidth } = this.props;
	let newWidth = original.width;
	let newHeight = original.height;
	const extraHeight = lockAspectRatioExtraHeight || 0;
	const extraWidth = lockAspectRatioExtraWidth || 0;
	if (hasDirection('right', direction)) {
	newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
	if (lockAspectRatio) {
	newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
	}
	}
	if (hasDirection('left', direction)) {
	newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
	if (lockAspectRatio) {
	newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
	}
	}
	if (hasDirection('bottom', direction)) {
	newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
	if (lockAspectRatio) {
	newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
	}
	}
	if (hasDirection('top', direction)) {
	newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
	if (lockAspectRatio) {
	newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
	}
	}
	return { newWidth, newHeight };
	}

Execute top/bottom if first, then right/left if will change the behavior.

[yf-yang]

I can submit a PR.