Skip to content

Commit

Permalink
chore: reduce size (#772)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bokuweb
bokuweb committed Apr 26, 2022
1 parent 0a1035d commit e547738
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 91 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@
"fixture": "./test/fixture.html"
},
"dependencies": {
"fast-memoize": "^2.5.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
Expand Down
103 changes: 47 additions & 56 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react';
import { flushSync } from 'react-dom';

import { Resizer, Direction } from './resizer';
import memoize from 'fast-memoize';

const DEFAULT_SIZE = {
width: 'auto',
Expand Down Expand Up @@ -129,11 +128,10 @@ interface State {
flexBasis?: string | number;
}

const clamp = memoize((n: number, min: number, max: number): number => Math.max(Math.min(n, max), min));
const snap = memoize((n: number, size: number): number => Math.round(n / size) * size);
const hasDirection = memoize((dir: 'top' | 'right' | 'bottom' | 'left', target: string): boolean =>
new RegExp(dir, 'i').test(target),
);
const clamp = (n: number, min: number, max: number): number => Math.max(Math.min(n, max), min);
const snap = (n: number, size: number): number => Math.round(n / size) * size;
const hasDirection = (dir: 'top' | 'right' | 'bottom' | 'left', target: string): boolean =>
new RegExp(dir, 'i').test(target);

// INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`.
const isTouchEvent = (event: MouseEvent | TouchEvent): event is TouchEvent => {
Expand All @@ -147,46 +145,41 @@ const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => {
);
};

const findClosestSnap = memoize((n: number, snapArray: number[], snapGap: number = 0): number => {
const findClosestSnap = (n: number, snapArray: number[], snapGap: number = 0): number => {
const closestGapIndex = snapArray.reduce(
(prev, curr, index) => (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev),
0,
);
const gap = Math.abs(snapArray[closestGapIndex] - n);

return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
});

const endsWith = memoize(
(str: string, searchStr: string): boolean =>
str.substr(str.length - searchStr.length, searchStr.length) === searchStr,
);
};

const getStringSize = memoize((n: number | string): string => {
const getStringSize = (n: number | string): string => {
n = n.toString();
if (n === 'auto') {
return n;
}
if (endsWith(n, 'px')) {
if (n.endsWith('px')) {
return n;
}
if (endsWith(n, '%')) {
if (n.endsWith('%')) {
return n;
}
if (endsWith(n, 'vh')) {
if (n.endsWith('vh')) {
return n;
}
if (endsWith(n, 'vw')) {
if (n.endsWith('vw')) {
return n;
}
if (endsWith(n, 'vmax')) {
if (n.endsWith('vmax')) {
return n;
}
if (endsWith(n, 'vmin')) {
if (n.endsWith('vmin')) {
return n;
}
return `${n}px`;
});
};

const getPixelSize = (
size: undefined | string | number,
Expand All @@ -195,47 +188,45 @@ const getPixelSize = (
innerHeight: number,
) => {
if (size && typeof size === 'string') {
if (endsWith(size, 'px')) {
if (size.endsWith('px')) {
return Number(size.replace('px', ''));
}
if (endsWith(size, '%')) {
if (size.endsWith('%')) {
const ratio = Number(size.replace('%', '')) / 100;
return parentSize * ratio;
}
if (endsWith(size, 'vw')) {
if (size.endsWith('vw')) {
const ratio = Number(size.replace('vw', '')) / 100;
return innerWidth * ratio;
}
if (endsWith(size, 'vh')) {
if (size.endsWith('vh')) {
const ratio = Number(size.replace('vh', '')) / 100;
return innerHeight * ratio;
}
}
return size;
};

const calculateNewMax = memoize(
(
parentSize: { width: number; height: number },
innerWidth: number,
innerHeight: number,
maxWidth?: string | number,
maxHeight?: string | number,
minWidth?: string | number,
minHeight?: string | number,
) => {
maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
return {
maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
};
},
);
const calculateNewMax = (
parentSize: { width: number; height: number },
innerWidth: number,
innerHeight: number,
maxWidth?: string | number,
maxHeight?: string | number,
minWidth?: string | number,
minHeight?: string | number,
) => {
maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight);
maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight);
minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight);
minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight);
return {
maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
};
};

const definedProps = [
'as',
Expand Down Expand Up @@ -334,8 +325,8 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
if (typeof this.state[key] === 'undefined' || this.state[key] === 'auto') {
return 'auto';
}
if (this.propsSize && this.propsSize[key] && endsWith(this.propsSize[key].toString(), '%')) {
if (endsWith(this.state[key].toString(), '%')) {
if (this.propsSize && this.propsSize[key] && this.propsSize[key].toString().endsWith('%')) {
if (this.state[key].toString().endsWith('%')) {
return this.state[key].toString();
}
const parentSize = this.getParentSize();
Expand Down Expand Up @@ -820,26 +811,26 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
};

if (width && typeof width === 'string') {
if (endsWith(width, '%')) {
if (width.endsWith('%')) {
const percent = (newWidth / parentSize.width) * 100;
newWidth = `${percent}%`;
} else if (endsWith(width, 'vw')) {
} else if (width.endsWith('vw')) {
const vw = (newWidth / this.window.innerWidth) * 100;
newWidth = `${vw}vw`;
} else if (endsWith(width, 'vh')) {
} else if (width.endsWith('vh')) {
const vh = (newWidth / this.window.innerHeight) * 100;
newWidth = `${vh}vh`;
}
}

if (height && typeof height === 'string') {
if (endsWith(height, '%')) {
if (height.endsWith('%')) {
const percent = (newHeight / parentSize.height) * 100;
newHeight = `${percent}%`;
} else if (endsWith(height, 'vw')) {
} else if (height.endsWith('vw')) {
const vw = (newHeight / this.window.innerWidth) * 100;
newHeight = `${vw}vw`;
} else if (endsWith(height, 'vh')) {
} else if (height.endsWith('vh')) {
const vh = (newHeight / this.window.innerHeight) * 100;
newHeight = `${vh}vh`;
}
Expand Down Expand Up @@ -897,7 +888,7 @@ export class Resizable extends React.PureComponent<ResizableProps, State> {
if (!enable) {
return null;
}
const resizers = Object.keys(enable).map((dir) => {
const resizers = Object.keys(enable).map(dir => {
if (enable[dir as Direction] !== false) {
return (
<Resizer
Expand Down
62 changes: 33 additions & 29 deletions src/resizer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,71 @@
import * as React from 'react';

const rowSizeBase = {
width: '100%',
height: '10px',
top: '0px',
left: '0px',
cursor: 'row-resize',
} as const;

const colSizeBase = {
width: '10px',
height: '100%',
top: '0px',
left: '0px',
cursor: 'col-resize',
} as const;

const edgeBase = {
width: '20px',
height: '20px',
position: 'absolute',
} as const;

const styles: { [key: string]: React.CSSProperties } = {
top: {
width: '100%',
height: '10px',
...rowSizeBase,
top: '-5px',
left: '0px',
cursor: 'row-resize',
},
right: {
width: '10px',
height: '100%',
top: '0px',
...colSizeBase,
left: undefined,
right: '-5px',
cursor: 'col-resize',
},
bottom: {
width: '100%',
height: '10px',
...rowSizeBase,
top: undefined,
bottom: '-5px',
left: '0px',
cursor: 'row-resize',
},
left: {
width: '10px',
height: '100%',
top: '0px',
...colSizeBase,
left: '-5px',
cursor: 'col-resize',
},
topRight: {
width: '20px',
height: '20px',
position: 'absolute',
...edgeBase,
right: '-10px',
top: '-10px',
cursor: 'ne-resize',
},
bottomRight: {
width: '20px',
height: '20px',
position: 'absolute',
...edgeBase,
right: '-10px',
bottom: '-10px',
cursor: 'se-resize',
},
bottomLeft: {
width: '20px',
height: '20px',
position: 'absolute',
...edgeBase,
left: '-10px',
bottom: '-10px',
cursor: 'sw-resize',
},
topLeft: {
width: '20px',
height: '20px',
position: 'absolute',
...edgeBase,
left: '-10px',
top: '-10px',
cursor: 'nw-resize',
},
};
} as const;

export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';

Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6545,11 +6545,6 @@ fast-json-stable-stringify@^2.0.0:
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=

fast-memoize@^2.5.1:
version "2.5.2"
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==

fault@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
Expand Down

0 comments on commit e547738

Please sign in to comment.