OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added resize hook

Browse Source
This commit is contained in:
Dustin Brett 2021-03-13 23:12:25 -08:00
parent 2f23190e6a
commit fd09fa6ffd
5 changed files with 210 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/system/Window/index.tsx
View File

@ -1,20 +1,31 @@
import type { ProcessComponentProps } from 'components/system/Processes/RenderProcess';
import Titlebar from 'components/system/Window/Titlebar';
import { useProcesses } from 'contexts/process';
import useResizable from 'hooks/useResizeable';
import { Rnd } from 'react-rnd';
import StyledWindow from 'styles/components/system/Window/StyledWindow';
import rndDefaults from 'utils/rndDefaults';
const Window: React.FC<ProcessComponentProps> = ({ children, id }) => {
const {
processes: {
[id]: { minimized }
[id]: { maximized, minimized }
}
} = useProcesses();
const { height, width, updateSize } = useResizable(maximized);
return (
<StyledWindow minimized={minimized}>
<Titlebar id={id} />
{children}
</StyledWindow>
<Rnd
enableResizing={!maximized}
size={{ height, width }}
onResizeStop={updateSize}
{...rndDefaults}
>
<StyledWindow minimized={minimized}>
<Titlebar id={id} />
{children}
</StyledWindow>
</Rnd>
);
};

36
hooks/useResizeable.ts Normal file
View File

@ -0,0 +1,36 @@
import { useCallback, useState } from 'react';
import type { RndResizeCallback } from 'react-rnd';
type Size = {
height: string;
width: string;
};
type Resizable = Size & {
updateSize: RndResizeCallback;
};
const defaultWindowSize = {
height: '200px',
width: '250px'
};
const useResizable = (maximized = false): Resizable => {
const [{ height, width }, setSize] = useState<Size>(defaultWindowSize);
const updateSize = useCallback<RndResizeCallback>(
(
_event,
_direction,
{ style: { height: elementHeight, width: elementWidth } }
) => setSize({ height: elementHeight, width: elementWidth }),
[]
);
return {
height: maximized ? '100%' : height, // TODO: Subtract taskbar height
width: maximized ? '100%' : width,
updateSize
};
};
export default useResizable;

101
package-lock.json generated
View File

@ -13,6 +13,7 @@
"next": "^10.0.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-rnd": "^10.2.4",
"styled-components": "^5.2.1",
"three": "0.124.0",
"vanta": "^0.5.21"
@ -24,6 +25,7 @@
"@types/jest": "^26.0.20",
"@types/node": "^14.14.34",
"@types/react": "^17.0.3",
"@types/react-rnd": "^8.0.0",
"@types/styled-components": "^5.1.8",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
@ -1478,6 +1480,16 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-rnd": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@types/react-rnd/-/react-rnd-8.0.0.tgz",
"integrity": "sha512-k/exWCXCY3CDqyJUJeny2SgsfWslWh6XU32/S0YJH6p4E8q2FK89WAPzdG0AECA2k95UC75YKErDRQ/IyvDz6g==",
"deprecated": "This is a stub types definition. react-rnd provides its own type definitions, so you do not need this installed.",
"dev": true,
"dependencies": {
"react-rnd": "*"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@ -5129,6 +5141,11 @@
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
"dev": true
},
"node_modules/fast-memoize": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
},
"node_modules/fastest-levenshtein": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@ -10284,6 +10301,18 @@
"node": ">= 0.8"
}
},
"node_modules/re-resizable": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
"dependencies": {
"fast-memoize": "^2.5.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0"
}
},
"node_modules/react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@ -10309,6 +10338,15 @@
"react": "17.0.1"
}
},
"node_modules/react-draggable": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
"integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
"dependencies": {
"classnames": "^2.2.5",
"prop-types": "^15.6.0"
}
},
"node_modules/react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@ -10322,6 +10360,21 @@
"node": ">=0.10.0"
}
},
"node_modules/react-rnd": {
"version": "10.2.4",
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.2.4.tgz",
"integrity": "sha512-wseACIsxa1wuZz9XatO3/JAZR748Sddehh0NtJz1Yj3X5BQm5pwRShiadfnWrUajJATurHbN0NVTUn+jEkHkPw==",
"dependencies": {
"re-resizable": "6.9.0",
"react-draggable": "4.4.3",
"tslib": "2.0.3"
}
},
"node_modules/react-rnd/node_modules/tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
},
"node_modules/read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@ -15055,6 +15108,15 @@
"csstype": "^3.0.2"
}
},
"@types/react-rnd": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@types/react-rnd/-/react-rnd-8.0.0.tgz",
"integrity": "sha512-k/exWCXCY3CDqyJUJeny2SgsfWslWh6XU32/S0YJH6p4E8q2FK89WAPzdG0AECA2k95UC75YKErDRQ/IyvDz6g==",
"dev": true,
"requires": {
"react-rnd": "*"
}
},
"@types/scheduler": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@ -17884,6 +17946,11 @@
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
"dev": true
},
"fast-memoize": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
},
"fastest-levenshtein": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@ -21823,6 +21890,14 @@
"unpipe": "1.0.0"
}
},
"re-resizable": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
"requires": {
"fast-memoize": "^2.5.1"
}
},
"react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@ -21842,6 +21917,15 @@
"scheduler": "^0.20.1"
}
},
"react-draggable": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
"integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
"requires": {
"classnames": "^2.2.5",
"prop-types": "^15.6.0"
}
},
"react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@ -21852,6 +21936,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
},
"react-rnd": {
"version": "10.2.4",
"resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.2.4.tgz",
"integrity": "sha512-wseACIsxa1wuZz9XatO3/JAZR748Sddehh0NtJz1Yj3X5BQm5pwRShiadfnWrUajJATurHbN0NVTUn+jEkHkPw==",
"requires": {
"re-resizable": "6.9.0",
"react-draggable": "4.4.3",
"tslib": "2.0.3"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
},
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

2
package.json
View File

@ -35,6 +35,7 @@
"next": "^10.0.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-rnd": "^10.2.4",
"styled-components": "^5.2.1",
"three": "0.124.0",
"vanta": "^0.5.21"
@ -46,6 +47,7 @@
"@types/jest": "^26.0.20",
"@types/node": "^14.14.34",
"@types/react": "^17.0.3",
"@types/react-rnd": "^8.0.0",
"@types/styled-components": "^5.1.8",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",

55
utils/rndDefaults.ts Normal file
View File

@ -0,0 +1,55 @@
const rndDefaults = {
enableUserSelectHack: false,
resizeHandleStyles: {
bottom: {
bottom: '-3px',
cursor: 'ns-resize',
height: '6px'
},
bottomLeft: {
bottom: '-3px',
cursor: 'nesw-resize',
height: '12px',
left: '-3px',
width: '12px'
},
bottomRight: {
bottom: '-3px',
cursor: 'nwse-resize',
height: '12px',
right: '-3px',
width: '12px'
},
left: {
cursor: 'ew-resize',
left: '-3px',
width: '6px'
},
right: {
cursor: 'ew-resize',
right: '-3px',
width: '6px'
},
top: {
cursor: 'ns-resize',
height: '6px',
top: '-3px'
},
topLeft: {
cursor: 'nwse-resize',
height: '12px',
left: '-3px',
top: '-3px',
width: '12px'
},
topRight: {
cursor: 'nesw-resize',
height: '12px',
right: '-3px',
top: '-3px',
width: '12px'
}
}
};
export default rndDefaults;