feat: support resize #119
feat: support resize #119
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 55b71bb:
|
|
It looks like |
| import { TabsHeader } from './components/TabsHeader'; | ||
| import { TimeTravel } from './components/TimeTravel'; | ||
| import { shellStyles } from './styles'; | ||
|
|
||
| function areWeTestingWithJest() { | ||
| return process.env.JEST_WORKER_ID !== undefined; |
There was a problem hiding this comment.
Is this just a problem with jest? I wonder react-movable's issue is limited to jest and not other testing libraries like vitest 🤔
And what's the issue you're running into? I'm not a huge fan of having this logic in the library. Is there an alternate library that we could explore?
There was a problem hiding this comment.
This is related to jsdom
I just found out that if you just use resize you don't have a problem
There was a problem hiding this comment.
Got it! so the issue would likely persist for users mounting Jotai DevTools in the tests? Do we have any workarounds, maybe a polyfill or finding a different library?
| sx={(theme) => { | ||
| return { | ||
| ...(typeof shellStyles === 'function' | ||
| ? shellStyles(theme) | ||
| : shellStyles), | ||
| transform: shellStyle.transform, | ||
| }; | ||
| }} | ||
| mah={shellStyleDefaults.maxHeight} | ||
| maw={shellStyleDefaults.maxWidth} | ||
| mih={shellStyleDefaults.minHeight} | ||
| miw={shellStyleDefaults.minWidth} | ||
| h={shellStyle.height} | ||
| w={shellStyle.width} |
There was a problem hiding this comment.
This feels a bit hacky, would it be a good idea to have two separate variables, one holds the shell styles, and the other holds the styles set by Movable. And we merge those two here 🤔
There was a problem hiding this comment.
Do you mean merging shellStyleDefaults and shellStyle?
There was a problem hiding this comment.
Yes! That and shellStyles being a function or object. Ideally we don't want the type to be polymorphic at runtime.
Perhaps something like this?
const mergedTabStyles = (theme) => {
return {
...shellStyleDefaults,
...shellStyles(theme),
...movableStyles,
};
};
// ...
sx={mergedTabStyles}
// ...
| onResize={(e) => { | ||
| e.target.style.width = `${e.width}px`; | ||
| e.target.style.height = `${e.height}px`; | ||
| e.target.style.transform = e.drag.transform; |
There was a problem hiding this comment.
Is this our only way? do you know if <Movable/> accepts a style/classname?
| import { TabsHeader } from './components/TabsHeader'; | ||
| import { TimeTravel } from './components/TimeTravel'; | ||
| import { shellStyles } from './styles'; | ||
|
|
||
| function areWeTestingWithJest() { | ||
| return process.env.JEST_WORKER_ID !== undefined; |
There was a problem hiding this comment.
Got it! so the issue would likely persist for users mounting Jotai DevTools in the tests? Do we have any workarounds, maybe a polyfill or finding a different library?
| @@ -45,26 +45,6 @@ describe('DevTools - basic', () => { | |||
| }); | |||
| }); | |||
|
|
|||
| it('should resize the devtools upon dragging the resize bar', async () => { | |||
There was a problem hiding this comment.
Is it possible to test the drag drop + resize functionality?
| @@ -17,58 +18,97 @@ export const Shell = () => { | |||
| const [selectedShellTab, setSelectedShellTab] = useSelectedShellTab(); | |||
There was a problem hiding this comment.
Should we add prop to set default panel position? like you did for the trigger buttont?
Maybe something like? panelPosition?: "top" | "right" | "bottom" | "left" 🤔
|
so usefull |
ScreenShot.2024-01-13.21.50.29.mp4