From c51730537bc1d19d958eef5b0082ef2a1af109ab Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Tue, 7 May 2024 16:53:39 +1000 Subject: [PATCH 01/15] Initial setup Not working Getting there but flaky Handle switching between panels Refactor --- package.json | 2 + pnpm-lock.yaml | 33 ++++++++ src/Playroom/Toolbar/Toolbar.css.ts | 43 ++++++++-- src/Playroom/Toolbar/Toolbar.tsx | 118 ++++++++++++++++------------ 4 files changed, 139 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index b526cb72..eed07bea 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "re-resizable": "^6.9.9", "react-docgen-typescript": "^2.2.2", "react-helmet": "^6.1.0", + "react-transition-group": "^4.4.5", "react-use": "^17.4.0", "read-pkg-up": "^7.0.1", "scope-eval": "^1.0.0", @@ -114,6 +115,7 @@ "@octokit/rest": "^19.0.5", "@types/jest": "^29.2.4", "@types/react-helmet": "^6.1.6", + "@types/react-transition-group": "^4.4.10", "concurrently": "^7.6.0", "cypress": "^13.6.6", "eslint": "^8.44.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0fc6cd76..42c14785 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -134,6 +134,9 @@ dependencies: react-helmet: specifier: ^6.1.0 version: 6.1.0(react@18.2.0) + react-transition-group: + specifier: ^4.4.5 + version: 4.4.5(react-dom@18.2.0)(react@18.2.0) react-use: specifier: ^17.4.0 version: 17.4.0(react-dom@18.2.0)(react@18.2.0) @@ -178,6 +181,9 @@ devDependencies: '@types/react-helmet': specifier: ^6.1.6 version: 6.1.11 + '@types/react-transition-group': + specifier: ^4.4.10 + version: 4.4.10 concurrently: specifier: ^7.6.0 version: 7.6.0 @@ -2836,6 +2842,12 @@ packages: '@types/react': 18.0.26 dev: true + /@types/react-transition-group@4.4.10: + resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} + dependencies: + '@types/react': 18.0.26 + dev: true + /@types/react@18.0.26: resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==} dependencies: @@ -4679,6 +4691,13 @@ packages: utila: 0.4.0 dev: false + /dom-helpers@5.2.1: + resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} + dependencies: + '@babel/runtime': 7.20.6 + csstype: 3.1.1 + dev: false + /dom-serializer@1.4.1: resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} dependencies: @@ -8330,6 +8349,20 @@ packages: react: 18.2.0 dev: false + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} + peerDependencies: + react: '>=16.6.0' + react-dom: '>=16.6.0' + dependencies: + '@babel/runtime': 7.20.6 + dom-helpers: 5.2.1 + loose-envify: 1.4.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.0): resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts index 1e0293c8..afaa864b 100644 --- a/src/Playroom/Toolbar/Toolbar.css.ts +++ b/src/Playroom/Toolbar/Toolbar.css.ts @@ -92,20 +92,12 @@ export const panel = style([ position: 'relative', display: 'flex', overflow: 'auto', - transition: 'slow', pointerEvents: 'auto', }), { width: toolbarOpenSize, backgroundColor: colorPaletteVars.background.surface, borderLeft: `${toolbarBorderThickness} solid ${colorPaletteVars.border.standard}`, - selectors: { - [`${root}:not(${isOpen}) &`]: { - transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, - opacity: 0, - pointerEvents: 'none', - }, - }, }, ]); @@ -113,3 +105,38 @@ export const preference = sprinkles({ position: 'absolute', inset: 0, }); + +// Todo - remove pointerEvents none? +export const transitionStyles = { + enter: style({ + opacity: 0, + transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + }), + enterActive: style([ + sprinkles({ + transition: 'slow', + }), + { opacity: 1 }, + ]), + enterDone: style({ + opacity: 1, + }), + exit: style({ + opacity: 1, + }), + exitActive: style([ + sprinkles({ + transition: 'slow', + }), + { + opacity: 0, + transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + pointerEvents: 'none', + }, + ]), + exitDone: style({ + opacity: 0, + transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + pointerEvents: 'none', + }), +}; diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index e65150e2..e2e02e04 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -1,4 +1,4 @@ -import { useContext, useState, useCallback } from 'react'; +import { useContext, useState, useCallback, useRef, useEffect } from 'react'; import { useTimeoutFn } from 'react-use'; import classnames from 'classnames'; import type { PlayroomProps } from '../Playroom'; @@ -17,6 +17,8 @@ import SettingsPanel from '../SettingsPanel/SettingsPanel'; import SettingsIcon from '../icons/SettingsIcon'; import { isMac } from '../../utils/formatting'; +import { CSSTransition } from 'react-transition-group'; + interface Props { themes: PlayroomProps['themes']; widths: PlayroomProps['widths']; @@ -38,6 +40,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { ] = useContext(StoreContext); const [copying, setCopying] = useState(false); const [isReady, cancel, reset] = useTimeoutFn(() => setCopying(false), 3000); + const nodeRef = useRef(null); const copyHandler = useCallback(() => { dispatch({ @@ -58,6 +61,16 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { const isSettingsOpen = activeToolbarPanel === 'settings'; const isPreviewOpen = activeToolbarPanel === 'preview'; + const isPanelOpen = activeToolbarPanel !== undefined; + + const [lastActivePanel, setLastActivePanel] = useState('snippets'); + + useEffect(() => { + if (activeToolbarPanel) { + setLastActivePanel(activeToolbarPanel); + } + }, [activeToolbarPanel]); + const hasSnippets = snippets && snippets.length > 0; const hasFilteredFrames = visibleThemes.length > 0 || visibleWidths.length > 0; @@ -148,58 +161,65 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { - -
- {isSnippetsOpen && ( - +
); From 457b7279c6115049f431d3ea11441724156dad17 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Tue, 7 May 2024 16:55:02 +1000 Subject: [PATCH 02/15] Remove ref Remove import --- src/Playroom/Toolbar/Toolbar.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index e2e02e04..a5855b91 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -1,4 +1,4 @@ -import { useContext, useState, useCallback, useRef, useEffect } from 'react'; +import { useContext, useState, useCallback, useEffect } from 'react'; import { useTimeoutFn } from 'react-use'; import classnames from 'classnames'; import type { PlayroomProps } from '../Playroom'; @@ -40,7 +40,6 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { ] = useContext(StoreContext); const [copying, setCopying] = useState(false); const [isReady, cancel, reset] = useTimeoutFn(() => setCopying(false), 3000); - const nodeRef = useRef(null); const copyHandler = useCallback(() => { dispatch({ @@ -162,18 +161,13 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { -
+
{lastActivePanel === 'snippets' && (
Date: Wed, 8 May 2024 13:57:37 +1000 Subject: [PATCH 03/15] Refactor --- src/Playroom/Toolbar/Toolbar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index a5855b91..477e31ef 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -60,9 +60,8 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { const isSettingsOpen = activeToolbarPanel === 'settings'; const isPreviewOpen = activeToolbarPanel === 'preview'; - const isPanelOpen = activeToolbarPanel !== undefined; - - const [lastActivePanel, setLastActivePanel] = useState('snippets'); + const [lastActivePanel, setLastActivePanel] = + useState(undefined); useEffect(() => { if (activeToolbarPanel) { @@ -161,11 +160,12 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
setLastActivePanel(undefined)} >
{lastActivePanel === 'snippets' && ( From fa3be5aa1511c480c9ca5aa47171a44d747ae8fd Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Wed, 8 May 2024 14:28:06 +1000 Subject: [PATCH 04/15] Add todo Update --- src/Playroom/Toolbar/Toolbar.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 477e31ef..53ced40f 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -159,6 +159,10 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
+ {/* Todo - Fix rerendering issue + This component rerenders immediately on open, breaking the smooth open animation. + Not sure why it is rerendering. + */} { /> )} + {lastActivePanel === 'frames' && (
{ />
)} + {lastActivePanel === 'preview' && (
{ />
)} + {lastActivePanel === 'settings' && (
From a75aee52fe784017f8e64e494d00e32451a28b7f Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Thu, 9 May 2024 14:49:56 +1000 Subject: [PATCH 05/15] Fix css transition implementation --- src/Playroom/Toolbar/Toolbar.css.ts | 9 +++++---- src/Playroom/Toolbar/Toolbar.tsx | 4 ---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts index afaa864b..58a2c0e2 100644 --- a/src/Playroom/Toolbar/Toolbar.css.ts +++ b/src/Playroom/Toolbar/Toolbar.css.ts @@ -106,7 +106,6 @@ export const preference = sprinkles({ inset: 0, }); -// Todo - remove pointerEvents none? export const transitionStyles = { enter: style({ opacity: 0, @@ -116,10 +115,14 @@ export const transitionStyles = { sprinkles({ transition: 'slow', }), - { opacity: 1 }, + { + opacity: 1, + transform: `translateX(0)`, + }, ]), enterDone: style({ opacity: 1, + transform: `translateX(0)`, }), exit: style({ opacity: 1, @@ -131,12 +134,10 @@ export const transitionStyles = { { opacity: 0, transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, - pointerEvents: 'none', }, ]), exitDone: style({ opacity: 0, transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, - pointerEvents: 'none', }), }; diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 53ced40f..8a45972f 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -159,10 +159,6 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
- {/* Todo - Fix rerendering issue - This component rerenders immediately on open, breaking the smooth open animation. - Not sure why it is rerendering. - */} Date: Fri, 10 May 2024 09:39:55 +1000 Subject: [PATCH 06/15] Add wait in cypress to prevent test flakiness --- cypress/support/utils.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cypress/support/utils.js b/cypress/support/utils.js index 3e2d47ff..10266c8c 100644 --- a/cypress/support/utils.js +++ b/cypress/support/utils.js @@ -153,6 +153,9 @@ export const assertCodePaneLineCount = (lines) => { getCodeEditor().within(() => cy.get('.CodeMirror-line').should('have.length', lines) ); + + // Wait after check to ensure original focus is restored + cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting }; export const assertFramesMatch = (matches) => From 4203fc2db8372f52a94455384c4e8481dad921b6 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 09:46:33 +1000 Subject: [PATCH 07/15] Refactor - remove useEffect --- src/Playroom/Toolbar/Toolbar.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 8a45972f..fdffc7c1 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -1,4 +1,4 @@ -import { useContext, useState, useCallback, useEffect } from 'react'; +import { useContext, useState, useCallback } from 'react'; import { useTimeoutFn } from 'react-use'; import classnames from 'classnames'; import type { PlayroomProps } from '../Playroom'; @@ -63,12 +63,6 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { const [lastActivePanel, setLastActivePanel] = useState(undefined); - useEffect(() => { - if (activeToolbarPanel) { - setLastActivePanel(activeToolbarPanel); - } - }, [activeToolbarPanel]); - const hasSnippets = snippets && snippets.length > 0; const hasFilteredFrames = visibleThemes.length > 0 || visibleWidths.length > 0; @@ -165,6 +159,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { classNames={styles.transitionStyles} mountOnEnter unmountOnExit + onEnter={() => setLastActivePanel(activeToolbarPanel)} onExited={() => setLastActivePanel(undefined)} >
From a7d9c1c1488a552b3e0647e1d435522d16ffb06f Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 09:57:03 +1000 Subject: [PATCH 08/15] Refactor --- src/Playroom/Toolbar/Toolbar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index fdffc7c1..54bd8d5e 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -26,6 +26,7 @@ interface Props { } export const toolbarItemCount = 5; +const ANIMATION_TIMEOUT = 300; export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { const [ @@ -155,7 +156,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
Date: Fri, 10 May 2024 10:08:40 +1000 Subject: [PATCH 09/15] Changeset --- .changeset/beige-tips-swim.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/beige-tips-swim.md diff --git a/.changeset/beige-tips-swim.md b/.changeset/beige-tips-swim.md new file mode 100644 index 00000000..435e8c06 --- /dev/null +++ b/.changeset/beige-tips-swim.md @@ -0,0 +1,5 @@ +--- +'playroom': patch +--- + +Fix minor issue in the side panel exit animation, preventing the contents from vanishing abruptly. From 6dd7da10e0bf8b70c0ce80b26b700a232d686036 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 11:06:16 +1000 Subject: [PATCH 10/15] Make wait in `assertCodePaneLineCount` an optional prop --- cypress/e2e/snippets.cy.js | 4 ++-- cypress/support/utils.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/snippets.cy.js b/cypress/e2e/snippets.cy.js index d76d8f8f..1db83317 100644 --- a/cypress/e2e/snippets.cy.js +++ b/cypress/e2e/snippets.cy.js @@ -72,7 +72,7 @@ describe('Snippets', () => { assertSnippetsListIsVisible(); assertCodePaneLineCount(8); filterSnippets('{esc}'); - assertCodePaneLineCount(1); + assertCodePaneLineCount(1, { wait: 500 }); typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`); assertSnippetsListIsVisible(); assertCodePaneLineCount(8); @@ -89,7 +89,7 @@ describe('Snippets', () => { // Close without persisting filterSnippets('{esc}'); assertCodePaneContains('
Initial code
'); - assertCodePaneLineCount(1); + assertCodePaneLineCount(1, { wait: 500 }); // Re-open and persist typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`); diff --git a/cypress/support/utils.js b/cypress/support/utils.js index 10266c8c..4bc657e2 100644 --- a/cypress/support/utils.js +++ b/cypress/support/utils.js @@ -149,13 +149,15 @@ export const assertCodePaneContains = (text) => { }); }; -export const assertCodePaneLineCount = (lines) => { +export const assertCodePaneLineCount = (lines, { wait } = {}) => { getCodeEditor().within(() => cy.get('.CodeMirror-line').should('have.length', lines) ); // Wait after check to ensure original focus is restored - cy.wait(500); // eslint-disable-line @finsit/cypress/no-unnecessary-waiting + if (typeof wait === 'number') { + cy.wait(wait); + } }; export const assertFramesMatch = (matches) => From d34e82a8c818f6c10a1a67fd51028f2e3580c60a Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 11:15:01 +1000 Subject: [PATCH 11/15] Refactor --- src/Playroom/Toolbar/Toolbar.css.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts index 58a2c0e2..9280f5ba 100644 --- a/src/Playroom/Toolbar/Toolbar.css.ts +++ b/src/Playroom/Toolbar/Toolbar.css.ts @@ -109,7 +109,7 @@ export const preference = sprinkles({ export const transitionStyles = { enter: style({ opacity: 0, - transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + transform: `translateX(30%)`, }), enterActive: style([ sprinkles({ @@ -133,11 +133,11 @@ export const transitionStyles = { }), { opacity: 0, - transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + transform: `translateX(30%)`, }, ]), exitDone: style({ opacity: 0, - transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`, + transform: `translateX(30%)`, }), }; From 20a39909dbb75b4722912b401a84da5cd51be2af Mon Sep 17 00:00:00 2001 From: Felix Habib <33821218+felixhabib@users.noreply.github.com> Date: Fri, 10 May 2024 11:17:45 +1000 Subject: [PATCH 12/15] Update changeset Co-authored-by: Adam Skoufis --- .changeset/beige-tips-swim.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/beige-tips-swim.md b/.changeset/beige-tips-swim.md index 435e8c06..fe9333a0 100644 --- a/.changeset/beige-tips-swim.md +++ b/.changeset/beige-tips-swim.md @@ -2,4 +2,4 @@ 'playroom': patch --- -Fix minor issue in the side panel exit animation, preventing the contents from vanishing abruptly. +Fixes a bug in the side panel exit animation that was causing the contents to vanish abruptly From ec8bad4678c5a51d6624c6de73e716c098ab0597 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 11:33:40 +1000 Subject: [PATCH 13/15] Refactor, add back useEffect --- src/Playroom/Toolbar/Toolbar.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 54bd8d5e..0e652650 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -1,4 +1,4 @@ -import { useContext, useState, useCallback } from 'react'; +import { useContext, useState, useCallback, useEffect } from 'react'; import { useTimeoutFn } from 'react-use'; import classnames from 'classnames'; import type { PlayroomProps } from '../Playroom'; @@ -64,6 +64,12 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { const [lastActivePanel, setLastActivePanel] = useState(undefined); + useEffect(() => { + if (activeToolbarPanel) { + setLastActivePanel(activeToolbarPanel); + } + }, [activeToolbarPanel]); + const hasSnippets = snippets && snippets.length > 0; const hasFilteredFrames = visibleThemes.length > 0 || visibleWidths.length > 0; @@ -160,7 +166,6 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { classNames={styles.transitionStyles} mountOnEnter unmountOnExit - onEnter={() => setLastActivePanel(activeToolbarPanel)} onExited={() => setLastActivePanel(undefined)} >
From 1b318386a8709521e93f660bd3e80cb86dfed53e Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 11:35:57 +1000 Subject: [PATCH 14/15] Refactor --- src/Playroom/Toolbar/Toolbar.tsx | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 0e652650..85a39c5c 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -169,8 +169,8 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { onExited={() => setLastActivePanel(undefined)} >
- {lastActivePanel === 'snippets' && ( -
+
+ {lastActivePanel === 'snippets' && ( { @@ -190,32 +190,24 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { } }} /> -
- )} + )} - {lastActivePanel === 'frames' && ( -
+ {lastActivePanel === 'frames' && ( -
- )} + )} - {lastActivePanel === 'preview' && ( -
+ {lastActivePanel === 'preview' && ( -
- )} + )} - {lastActivePanel === 'settings' && ( -
- -
- )} + {lastActivePanel === 'settings' && } +
From ed29c4707769f14a376f43ad96f1d6943ef80ac0 Mon Sep 17 00:00:00 2001 From: Felix Habib Date: Fri, 10 May 2024 13:45:46 +1000 Subject: [PATCH 15/15] Simplify component structure --- src/Playroom/Toolbar/Toolbar.css.ts | 6 --- src/Playroom/Toolbar/Toolbar.tsx | 67 +++++++++++++---------------- 2 files changed, 31 insertions(+), 42 deletions(-) diff --git a/src/Playroom/Toolbar/Toolbar.css.ts b/src/Playroom/Toolbar/Toolbar.css.ts index 9280f5ba..6f56a4fc 100644 --- a/src/Playroom/Toolbar/Toolbar.css.ts +++ b/src/Playroom/Toolbar/Toolbar.css.ts @@ -90,7 +90,6 @@ export const buttons = style([ export const panel = style([ sprinkles({ position: 'relative', - display: 'flex', overflow: 'auto', pointerEvents: 'auto', }), @@ -101,11 +100,6 @@ export const panel = style([ }, ]); -export const preference = sprinkles({ - position: 'absolute', - inset: 0, -}); - export const transitionStyles = { enter: style({ opacity: 0, diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx index 85a39c5c..829d2d52 100644 --- a/src/Playroom/Toolbar/Toolbar.tsx +++ b/src/Playroom/Toolbar/Toolbar.tsx @@ -169,45 +169,40 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => { onExited={() => setLastActivePanel(undefined)} >
-
- {lastActivePanel === 'snippets' && ( - { + {lastActivePanel === 'snippets' && ( + { + dispatch({ + type: 'previewSnippet', + payload: { snippet }, + }); + }} + onClose={(snippet) => { + if (snippet) { dispatch({ - type: 'previewSnippet', + type: 'persistSnippet', payload: { snippet }, }); - }} - onClose={(snippet) => { - if (snippet) { - dispatch({ - type: 'persistSnippet', - payload: { snippet }, - }); - } else { - dispatch({ type: 'closeToolbar' }); - } - }} - /> - )} - - {lastActivePanel === 'frames' && ( - - )} - - {lastActivePanel === 'preview' && ( - - )} - - {lastActivePanel === 'settings' && } -
+ } else { + dispatch({ type: 'closeToolbar' }); + } + }} + /> + )} + + {lastActivePanel === 'frames' && ( + + )} + + {lastActivePanel === 'preview' && ( + + )} + + {lastActivePanel === 'settings' && }