Keep the extended sidebar open when changing Sidebar type + Rename ElementsSidebar
This commit is contained in:
Eric NGUYEN
parent
61807b621f
commit
00cf80d9e3
4 changed files with 81 additions and 101 deletions
|
|
@ -1,21 +1,22 @@
|
|||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import useSize from '@react-hook/size';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
import { ContainerProperties } from '../ContainerProperties/ContainerProperties';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
|
||||
import { Text } from '../Text/Text';
|
||||
import { ExtendedSidebar } from '../UI/UI';
|
||||
|
||||
interface IElementsSideBarProps {
|
||||
interface IElementsSidebarProps {
|
||||
containers: Map<string, IContainerModel>
|
||||
mainContainer: IContainerModel
|
||||
symbols: Map<string, ISymbolModel>
|
||||
selectedContainer: IContainerModel | undefined
|
||||
selectedExtendedSidebar: ExtendedSidebar
|
||||
onPropertyChange: (
|
||||
key: string,
|
||||
value: string | number | boolean | number[],
|
||||
|
|
@ -23,8 +24,7 @@ interface IElementsSideBarProps {
|
|||
) => void
|
||||
selectContainer: (containerId: string) => void
|
||||
addContainer: (index: number, type: string, parent: string) => void
|
||||
isExpanded: boolean
|
||||
onExpandChange: () => void
|
||||
onExpandChange: (value: ExtendedSidebar) => void
|
||||
}
|
||||
|
||||
function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): void {
|
||||
|
|
@ -124,11 +124,10 @@ function HandleOnDrop(
|
|||
}
|
||||
}
|
||||
|
||||
export function ElementsSideBar(props: IElementsSideBarProps): JSX.Element {
|
||||
export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
|
||||
// States
|
||||
const divRef = React.useRef<HTMLDivElement>(null);
|
||||
const [,height] = useSize(divRef);
|
||||
const [showProperties, setShowProperties] = useState(props.isExpanded);
|
||||
|
||||
// Render
|
||||
const it = MakeRecursionDFSIterator(props.mainContainer, props.containers, 0, [0, 0], true);
|
||||
|
|
@ -167,18 +166,27 @@ export function ElementsSideBar(props: IElementsSideBarProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<div className='flex flex-row h-full w-full' >
|
||||
{showProperties &&
|
||||
<div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
|
||||
<ContainerProperties
|
||||
properties={props.selectedContainer?.properties}
|
||||
symbols={props.symbols}
|
||||
onChange={props.onPropertyChange}
|
||||
/>
|
||||
</div>
|
||||
{props.selectedExtendedSidebar === ExtendedSidebar.Property &&
|
||||
<div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
|
||||
<ContainerProperties
|
||||
properties={props.selectedContainer?.properties}
|
||||
symbols={props.symbols}
|
||||
onChange={props.onPropertyChange}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className='flex w-64' ref={divRef}>
|
||||
<div className='w-6'>
|
||||
<ToggleSideBar title={Text({ textId: '@Properties' })} checked={showProperties} onChange={(newValue) => { setShowProperties(newValue); props.onExpandChange(); }} />
|
||||
<ToggleSideBar
|
||||
title={Text({ textId: '@Properties' })}
|
||||
checked={props.selectedExtendedSidebar === ExtendedSidebar.Property}
|
||||
onClick={() => {
|
||||
const newValue = props.selectedExtendedSidebar !== ExtendedSidebar.Property
|
||||
? ExtendedSidebar.Property
|
||||
: ExtendedSidebar.None;
|
||||
props.onExpandChange(newValue);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<List
|
||||
itemCount={containers.length}
|
||||
|
|
@ -229,10 +237,10 @@ function ElementsListRow(
|
|||
key={key}
|
||||
style={style}
|
||||
title={container.properties.warning}
|
||||
onClick={() => selectContainer(container.properties.id)}
|
||||
onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
|
||||
onDragOver={(event) => HandleDragOver(event, mainContainer)}
|
||||
onDragLeave={(event) => HandleDragLeave(event)}
|
||||
onClick={() => { selectContainer(container.properties.id); }}
|
||||
onDrop={(event) => { HandleOnDrop(event, containers, mainContainer, addContainer); }}
|
||||
onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
|
||||
onDragLeave={(event) => { HandleDragLeave(event); }}
|
||||
>
|
||||
{verticalBars}
|
||||
{text}
|
||||
|
|
@ -4,16 +4,16 @@ import './ToggleSideBar.scss';
|
|||
interface IToggleSidebarProps {
|
||||
title: string
|
||||
checked: boolean
|
||||
onChange: (newValue: boolean) => void
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps): JSX.Element {
|
||||
export function ToggleSideBar({ title, checked, onClick }: IToggleSidebarProps): JSX.Element {
|
||||
return (
|
||||
<div className={`${(checked ? 'bg-slate-400 hover:bg-slate-500' : 'bg-slate-300 hover:bg-slate-400')}`}>
|
||||
<button
|
||||
className={'w-full py-2'}
|
||||
type='button'
|
||||
onClick={() => onChange(!checked)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<p className='text-vertical'>{title}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,39 +5,47 @@ import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|||
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
|
||||
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
|
||||
import { Text } from '../Text/Text';
|
||||
import { useState } from 'react';
|
||||
import { ExtendedSidebar } from '../UI/UI';
|
||||
|
||||
interface ISymbolsSidebarProps {
|
||||
selectedSymbolId: string
|
||||
symbols: Map<string, ISymbolModel>
|
||||
selectedExtendedSidebar: ExtendedSidebar
|
||||
onPropertyChange: (key: string, value: string | number | boolean) => void
|
||||
selectSymbol: (symbolId: string) => void
|
||||
isExpanded: boolean
|
||||
onExpandChange: (isExpanded: boolean) => void
|
||||
onExpandChange: (value: ExtendedSidebar) => void
|
||||
}
|
||||
|
||||
export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
|
||||
// States
|
||||
const divRef = React.useRef<HTMLDivElement>(null);
|
||||
const height = useSize(divRef)[1];
|
||||
const [showProperties, setShowProperties] = useState(props.isExpanded);
|
||||
// Render
|
||||
const symbols = [...props.symbols.values()];
|
||||
|
||||
const selectedSymbol = props.symbols.get(props.selectedSymbolId);
|
||||
return (
|
||||
<div className='flex flex-row h-full w-full'>
|
||||
{showProperties && <div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
|
||||
{(selectedSymbol == null) && <h1 className={'p-4'}>{Text({ textId: '@NoSymbolSelected' })}</h1>}
|
||||
<SymbolProperties
|
||||
symbol={selectedSymbol}
|
||||
symbols={props.symbols}
|
||||
onChange={props.onPropertyChange}
|
||||
/>
|
||||
</div>}
|
||||
{props.selectedExtendedSidebar === ExtendedSidebar.Property &&
|
||||
<div className='flex flex-1 flex-col w-64 border-r-2 border-slate-400'>
|
||||
{(selectedSymbol == null) && <h1 className={'p-4'}>{Text({ textId: '@NoSymbolSelected' })}</h1>}
|
||||
<SymbolProperties
|
||||
symbol={selectedSymbol}
|
||||
symbols={props.symbols}
|
||||
onChange={props.onPropertyChange}
|
||||
/>
|
||||
</div>}
|
||||
<div className={'flex w-64'} ref={divRef}>
|
||||
<div className='w-6'>
|
||||
<ToggleSideBar title={Text({ textId: '@Properties' })} checked={showProperties} onChange={(newValue) => { setShowProperties(newValue); props.onExpandChange(newValue); }} />
|
||||
<ToggleSideBar
|
||||
title={Text({ textId: '@Properties' })}
|
||||
checked={props.selectedExtendedSidebar === ExtendedSidebar.Property}
|
||||
onClick={() => {
|
||||
const newValue = props.selectedExtendedSidebar !== ExtendedSidebar.Property
|
||||
? ExtendedSidebar.Property
|
||||
: ExtendedSidebar.None;
|
||||
props.onExpandChange(newValue);
|
||||
}} />
|
||||
</div>
|
||||
<List
|
||||
itemCount={symbols.length}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import { ElementsSideBar } from '../ElementsList/ElementsSideBar';
|
||||
import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
|
||||
import { History } from '../History/History';
|
||||
import { Bar, BAR_WIDTH } from '../Bar/Bar';
|
||||
import { Symbols } from '../Symbols/Symbols';
|
||||
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
|
||||
import { SymbolsSidebar } from '../SymbolsSidebar/SymbolsSidebar';
|
||||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { Messages } from '../Messages/Messages';
|
||||
import { Sidebar } from '../Sidebar/Sidebar';
|
||||
|
|
@ -17,8 +17,8 @@ import { FindContainerById } from '../../utils/itertools';
|
|||
import { type IEditorState } from '../../Interfaces/IEditorState';
|
||||
import { GetCurrentHistoryState } from '../Editor/Editor';
|
||||
import { Text } from '../Text/Text';
|
||||
import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
|
||||
import { Dispatch } from 'react';
|
||||
import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
|
||||
import { type Dispatch } from 'react';
|
||||
|
||||
export interface IUIProps {
|
||||
editorState: IEditorState
|
||||
|
|
@ -42,14 +42,17 @@ export interface IUIProps {
|
|||
export enum SidebarType {
|
||||
None,
|
||||
Components,
|
||||
ComponentsExpanded,
|
||||
Symbols,
|
||||
SymbolsExpanded,
|
||||
History,
|
||||
Messages,
|
||||
Settings
|
||||
}
|
||||
|
||||
export enum ExtendedSidebar {
|
||||
None,
|
||||
Property
|
||||
}
|
||||
|
||||
function UseSetOrToggleSidebar(
|
||||
selectedSidebar: SidebarType,
|
||||
setSelectedSidebar: React.Dispatch<React.SetStateAction<SidebarType>>
|
||||
|
|
@ -66,6 +69,10 @@ function UseSetOrToggleSidebar(
|
|||
|
||||
export function UI({ editorState, replaceContainer, setReplaceContainer, ...methods }: IUIProps): JSX.Element {
|
||||
const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
|
||||
const [
|
||||
selectedExtendedSidebar,
|
||||
setSelectedExtendedSidebarType
|
||||
] = React.useState<ExtendedSidebar>(ExtendedSidebar.None);
|
||||
|
||||
const [messages, setMessages] = React.useState<IMessage[]>([]);
|
||||
const current = GetCurrentHistoryState(editorState.history, editorState.historyCurrentStep);
|
||||
|
|
@ -115,7 +122,7 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
replaceContainer={replaceContainer}
|
||||
setReplaceContainer={setReplaceContainer}/>;
|
||||
rightSidebarTitle = Text({ textId: '@Elements' });
|
||||
rightChildren = <ElementsSideBar
|
||||
rightChildren = <ElementsSidebar
|
||||
containers={current.containers}
|
||||
mainContainer={mainContainer}
|
||||
symbols={current.symbols}
|
||||
|
|
@ -123,32 +130,11 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
onPropertyChange={methods.onPropertyChange}
|
||||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.ComponentsExpanded:
|
||||
leftSidebarTitle = Text({ textId: '@Components' });
|
||||
leftChildren = <Components
|
||||
selectedContainer={selectedContainer}
|
||||
componentOptions={configuration.AvailableContainers}
|
||||
categories={configuration.Categories}
|
||||
buttonOnClick={methods.addOrReplaceContainer}
|
||||
replaceContainer={replaceContainer}
|
||||
setReplaceContainer={setReplaceContainer}/>;
|
||||
rightSidebarTitle = Text({ textId: '@Elements' });
|
||||
rightChildren = <ElementsSideBar
|
||||
containers={current.containers}
|
||||
mainContainer={mainContainer}
|
||||
symbols={current.symbols}
|
||||
selectedContainer={selectedContainer}
|
||||
onPropertyChange={methods.onPropertyChange}
|
||||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } }
|
||||
selectedExtendedSidebar={selectedExtendedSidebar}
|
||||
onExpandChange={(value) => { setSelectedExtendedSidebarType(value); } }
|
||||
/>;
|
||||
break;
|
||||
|
||||
case SidebarType.Symbols:
|
||||
leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
|
||||
leftChildren = <Symbols
|
||||
|
|
@ -161,24 +147,8 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
symbols={current.symbols}
|
||||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.SymbolsExpanded:
|
||||
leftSidebarTitle = Text({ textId: '@SymbolsLeft' });
|
||||
leftChildren = <Symbols
|
||||
componentOptions={configuration.AvailableSymbols}
|
||||
buttonOnClick={methods.addSymbol}
|
||||
/>;
|
||||
rightSidebarTitle = Text({ textId: '@SymbolsRight' });
|
||||
rightChildren = <SymbolsSidebar
|
||||
selectedSymbolId={current.selectedSymbolId}
|
||||
symbols={current.symbols}
|
||||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }}
|
||||
selectedExtendedSidebar={selectedExtendedSidebar}
|
||||
onExpandChange={(value) => { setSelectedExtendedSidebarType(value); } }
|
||||
/>;
|
||||
break;
|
||||
|
||||
|
|
@ -210,8 +180,10 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
}
|
||||
|
||||
const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
|
||||
const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
|
||||
const isRightSidebarOpenExpanded = selectedSidebar === SidebarType.ComponentsExpanded || selectedSidebar === SidebarType.SymbolsExpanded;
|
||||
const isRightSidebarOpen = [SidebarType.Components, SidebarType.Symbols]
|
||||
.includes(selectedSidebar);
|
||||
const isRightSidebarOpenExpanded = isRightSidebarOpen &&
|
||||
selectedExtendedSidebar !== ExtendedSidebar.None;
|
||||
|
||||
const isLeftSidebarOpenClasses = new Set<string>([
|
||||
'left-sidebar',
|
||||
|
|
@ -252,8 +224,8 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
}
|
||||
|
||||
const clickRestrictionsClasses = replaceContainer.isReplacing ? 'pointer-events-none opacity-50' : '';
|
||||
const isComponentsOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.ComponentsExpanded;
|
||||
const isSymbolsOpen = selectedSidebar === SidebarType.Symbols || selectedSidebar === SidebarType.SymbolsExpanded;
|
||||
const isComponentsOpen = selectedSidebar === SidebarType.Components;
|
||||
const isSymbolsOpen = selectedSidebar === SidebarType.Symbols;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -265,18 +237,10 @@ export function UI({ editorState, replaceContainer, setReplaceContainer, ...meth
|
|||
isMessagesOpen={selectedSidebar === SidebarType.Messages}
|
||||
isSettingsOpen={selectedSidebar === SidebarType.Settings}
|
||||
toggleComponents={() => {
|
||||
if (selectedSidebar === SidebarType.ComponentsExpanded) {
|
||||
setOrToggleSidebar(SidebarType.ComponentsExpanded);
|
||||
} else {
|
||||
setOrToggleSidebar(SidebarType.Components);
|
||||
}
|
||||
setOrToggleSidebar(SidebarType.Components);
|
||||
} }
|
||||
toggleSymbols={() => {
|
||||
if (selectedSidebar === SidebarType.SymbolsExpanded) {
|
||||
setOrToggleSidebar(SidebarType.SymbolsExpanded);
|
||||
} else {
|
||||
setOrToggleSidebar(SidebarType.Symbols);
|
||||
}
|
||||
setOrToggleSidebar(SidebarType.Symbols);
|
||||
} }
|
||||
toggleTimeline={() => {
|
||||
setOrToggleSidebar(SidebarType.History);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue