-
Notifications
You must be signed in to change notification settings - Fork 172
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Roll your own tab (mostly empty) (#6030)
This is groundwork for #6027. The `Roll Your Own` floating thing made in the spike becomes a tab in the right pane (in the future we might want to have it as a floating panel, but we can incrementally extract it later on). The `Grid` section is left deliberately empty so we can fill it in with the other grid-related PRs. **Context/history** As part of the exploratory work on grid interactions (#6027) I added a way to test individual interaction/UI pieces in the spirit of [the classic Steve Jobs calculator story](https://www.reddit.com/r/mac/comments/o89l6i/the_apple_team_created_an_app_so_that_steve_jobs/) - called `Roll Your Own Grid` <img width="368" alt="Screenshot 2024-07-01 at 17 55 30" src="https://github.com/concrete-utopia/utopia/assets/1081051/c99a46a8-60ba-4a7c-ae03-ed4145ea7c3a"> There's a good chance this stuff will be useful for more than Grid in the future (e.g. the inspector, the canvas etc) so we can reuse this idea in other contexts, while keeping the original concept. **Note** The PR includes a demo feature type for `Grid` for illustration purposes only; it should be replaced with the actual features.
- Loading branch information
Showing
4 changed files
with
151 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
132 changes: 132 additions & 0 deletions
132
editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import React from 'react' | ||
| import { FlexColumn, FlexRow, Section } from '../../../uuiui' | ||
| import { when } from '../../../utils/react-conditionals' | ||
| import { atom, useAtom } from 'jotai' | ||
| import { UIGridRow } from '../../inspector/widgets/ui-grid-row' | ||
| import { atomWithStorage } from 'jotai/utils' | ||
| import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars' | ||
|
|
||
| const sections = ['Grid'] as const | ||
| type Section = (typeof sections)[number] | ||
|
|
||
| type GridFeatures = { | ||
| foo: boolean | ||
| } | ||
|
|
||
| type RollYourOwnFeaturesTypes = { | ||
| Grid: GridFeatures | ||
| } | ||
|
|
||
| type RollYourOwnFeatures = { | ||
| [K in Section]: RollYourOwnFeaturesTypes[K] | ||
| } | ||
|
|
||
| let defaultRollYourOwnFeatures: RollYourOwnFeatures = { | ||
| Grid: { | ||
| foo: true, | ||
| }, | ||
| } | ||
|
|
||
| const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features' | ||
|
|
||
| export const rollYourOwnFeatures = IS_TEST_ENVIRONMENT | ||
| ? atom(defaultRollYourOwnFeatures) | ||
| : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures) | ||
|
|
||
| export const RollYourOwnFeaturesPane = React.memo(() => { | ||
| const [currentSection, setCurrentSection] = React.useState<Section | null>(null) | ||
|
|
||
| const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => { | ||
| const maybeSectionValue = e.target.value as Section | ||
| if (sections.includes(maybeSectionValue)) { | ||
| setCurrentSection(maybeSectionValue) | ||
| } else { | ||
| setCurrentSection(null) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <FlexColumn | ||
| id='leftPaneRollYourOwn' | ||
| key='leftPaneRollYourOwn' | ||
| style={{ | ||
| display: 'relative', | ||
| alignItems: 'stretch', | ||
| paddingBottom: 50, | ||
| overflowY: 'scroll', | ||
| alignSelf: 'stretch', | ||
| }} | ||
| > | ||
| <Section> | ||
| <FlexRow | ||
| style={{ | ||
| margin: 8, | ||
| gap: 12, | ||
| height: 22, | ||
| }} | ||
| > | ||
| <span style={{ fontWeight: 600 }}>Roll Your Own</span> | ||
| </FlexRow> | ||
| <FlexRow style={{ gap: 12, margin: 8 }}> | ||
| <select | ||
| value={currentSection ?? undefined} | ||
| style={{ flex: 1 }} | ||
| onChange={onChangeSection} | ||
| > | ||
| <option value=''>–</option> | ||
| {sections.map((section) => { | ||
| return ( | ||
| <option key={`section-${section}`} value={section}> | ||
| {section} | ||
| </option> | ||
| ) | ||
| })} | ||
| </select> | ||
| </FlexRow> | ||
|
|
||
| {when(currentSection === 'Grid', <GridSection />)} | ||
| </Section> | ||
| </FlexColumn> | ||
| ) | ||
| }) | ||
| RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane' | ||
|
|
||
| const GridSection = React.memo(() => { | ||
| const [features, setFeatures] = useAtom(rollYourOwnFeatures) | ||
|
|
||
| const onChange = React.useCallback( | ||
| (feat: keyof GridFeatures) => (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setFeatures((existing) => { | ||
| return { | ||
| ...existing, | ||
| Grid: { | ||
| ...existing.Grid, | ||
| [feat]: e.target.checked, | ||
| }, | ||
| } | ||
| }) | ||
| }, | ||
| [setFeatures], | ||
| ) | ||
|
|
||
| return ( | ||
| <FlexColumn style={{ gap: 10 }}> | ||
| {Object.entries(features.Grid).map(([feat, value]) => { | ||
| return ( | ||
| <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-${feat}`}> | ||
| <div>{feat}</div> | ||
| {when( | ||
| typeof value === 'boolean', | ||
| <input | ||
| type='checkbox' | ||
| checked={value} | ||
| onChange={onChange(feat as keyof GridFeatures)} | ||
| />, | ||
| )} | ||
| </UIGridRow> | ||
| ) | ||
| })} | ||
| </FlexColumn> | ||
| ) | ||
| }) | ||
| GridSection.displayName = 'GridSection' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters