-
-
Notifications
You must be signed in to change notification settings - Fork 205
Window improvements
#344
-
The current Window could provide more components and settings to allow easily building windows. I propose some API changes:
- Create
WindowTitle
(orWindowTitleText
,WindowIcon
andWindowControls
components that can be children ofWindowHeader
(orWindowTitle
) - Allow
title?: React.Node
,icon?: React.Node
,onClose?: () => void | null
,onMinimize?: () => void | null
andonMaximize?: () => void | null
as shorthands toWindow
which preconfigure the window title accordingly, andstatus?: React.Node
which renders below the window content.- If the events are
undefined
, the icon isn't displayed, and if they arenull
the icon is disabled.
- If the events are
- Implement moving and resizing
- Add
x?: number
andy?: number
for left and top initial positioning respectively - Add
width?: number
andheight?: number
for the initial window dimensions - Implement an
onMove: (event: { preventDefault: () => void, { target: { rect: DOMRect } } }) => void
, which moves the window but allows the event handler code to prevent that movement (e.g. stick to a frame) - Implement an
onResize: (event: { preventDefault: () => void, { target: { rect: DOMRect } } }) => void
, which resizes the window but allows the event handler code to prevent that resizing (e.g. minimum or maximum sizes) - Implement helpers on
common
that allow users to detect collisions - Add a
windowResizeWithContent: boolean
to the theme that controls if all windows should render their content when being moved or resized, or move as a floating border (Figure 1)
- Add
- Implement the
variant?: 'toolbar'
(orthin
) to implement toolbar windows (Figure 1)
Figure 1 (source):
Toolbar window being dragged
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment