Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 185: Implement Messages

Browse source
This commit is contained in:
Eric Nguyen 2022-09-16 10:03:41 +00:00
parent 8a7196eeac
commit e94671d1d8
15 changed files with 242 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/Components/UI/UI.tsx
View file

@ -12,6 +12,7 @@ import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
import { Symbols } from '../Symbols/Symbols';
import { SymbolsSidebar } from '../SymbolsSidebar/SymbolsSidebar';
import { PropertyType } from '../../Enums/PropertyType';
import { MessagesSidebar } from '../MessagesSidebar/MessagesSidebar';
interface IUIProps {
selectedContainer: IContainerModel | undefined
@ -36,16 +37,19 @@ interface IUIProps {
function CloseOtherSidebars(
setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>,
setIsSymbolsOpen: React.Dispatch<React.SetStateAction<boolean>>
setIsSymbolsOpen: React.Dispatch<React.SetStateAction<boolean>>,
setIsMessagesOpen: React.Dispatch<React.SetStateAction<boolean>>
): void {
setIsSidebarOpen(false);
setIsSymbolsOpen(false);
setIsMessagesOpen(false);
}
export function UI(props: IUIProps): JSX.Element {
const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
const [isSymbolsOpen, setIsSymbolsOpen] = React.useState(false);
const [isHistoryOpen, setIsHistoryOpen] = React.useState(false);
const [isMessagesOpen, setIsMessagesOpen] = React.useState(false);
let buttonRightOffsetClasses = 'right-12';
if (isSidebarOpen || isHistoryOpen || isSymbolsOpen) {
@ -62,15 +66,20 @@ export function UI(props: IUIProps): JSX.Element {
isSymbolsOpen={isSymbolsOpen}
isElementsSidebarOpen={isSidebarOpen}
isHistoryOpen={isHistoryOpen}
isMessagesOpen={isMessagesOpen}
toggleSidebar={() => {
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen, setIsMessagesOpen);
setIsSidebarOpen(!isSidebarOpen);
} }
toggleSymbols={() => {
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen, setIsMessagesOpen);
setIsSymbolsOpen(!isSymbolsOpen);
} }
toggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)} />
toggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)}
toggleMessages={() => {
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen, setIsMessagesOpen);
setIsMessagesOpen(!isMessagesOpen);
} }/>
<Sidebar
componentOptions={props.availableContainers}
@ -98,6 +107,10 @@ export function UI(props: IUIProps): JSX.Element {
onPropertyChange={props.onSymbolPropertyChange}
selectSymbol={props.selectSymbol}
/>
<MessagesSidebar
historyState={props.current}
isOpen={isMessagesOpen}
/>
<History
history={props.history}
historyCurrentStep={props.historyCurrentStep}