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

Merged PR 170: Add new eslint rules

Browse source 
- naming-convention
- prefer-arrow-callback
- func-style
- import/no-default-export
This commit is contained in:
Eric Nguyen 2022-08-26 16:13:21 +00:00
parent 3f58c5ba5e
commit ad126c6c28
65 changed files with 781 additions and 784 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,23 +14,23 @@ import { SymbolsSidebar } from '../SymbolsSidebar/SymbolsSidebar';
import { PropertyType } from '../../Enums/PropertyType';
interface IUIProps {
SelectedContainer: IContainerModel | undefined
selectedContainer: IContainerModel | undefined
current: IHistoryState
history: IHistoryState[]
historyCurrentStep: number
AvailableContainers: IAvailableContainer[]
AvailableSymbols: IAvailableSymbol[]
SelectContainer: (containerId: string) => void
DeleteContainer: (containerId: string) => void
OnPropertyChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
AddContainer: (type: string) => void
AddSymbol: (type: string) => void
OnSymbolPropertyChange: (key: string, value: string | number | boolean) => void
SelectSymbol: (symbolId: string) => void
DeleteSymbol: (symbolId: string) => void
SaveEditorAsJSON: () => void
SaveEditorAsSVG: () => void
LoadState: (move: number) => void
availableContainers: IAvailableContainer[]
availableSymbols: IAvailableSymbol[]
selectContainer: (containerId: string) => void
deleteContainer: (containerId: string) => void
onPropertyChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
addContainer: (type: string) => void
addSymbol: (type: string) => void
onSymbolPropertyChange: (key: string, value: string | number | boolean) => void
selectSymbol: (symbolId: string) => void
deleteSymbol: (symbolId: string) => void
saveEditorAsJSON: () => void
saveEditorAsSVG: () => void
loadState: (move: number) => void
}
function CloseOtherSidebars(
@ -41,7 +41,7 @@ function CloseOtherSidebars(
setIsSymbolsOpen(false);
}
export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
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);
@ -61,71 +61,63 @@ export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
isSymbolsOpen={isSymbolsOpen}
isElementsSidebarOpen={isSidebarOpen}
isHistoryOpen={isHistoryOpen}
ToggleSidebar={() => {
toggleSidebar={() => {
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
setIsSidebarOpen(!isSidebarOpen);
}}
ToggleSymbols={() => {
} }
toggleSymbols={() => {
CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
setIsSymbolsOpen(!isSymbolsOpen);
}}
ToggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)}
/>
} }
toggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)} />
<Sidebar
componentOptions={props.AvailableContainers}
componentOptions={props.availableContainers}
isOpen={isSidebarOpen}
buttonOnClick={props.AddContainer}
/>
buttonOnClick={props.addContainer} />
<Symbols
componentOptions={props.AvailableSymbols}
componentOptions={props.availableSymbols}
isOpen={isSymbolsOpen}
buttonOnClick={props.AddSymbol}
/>
buttonOnClick={props.addSymbol} />
<ElementsSidebar
MainContainer={props.current.MainContainer}
symbols={props.current.Symbols}
SelectedContainer={props.SelectedContainer}
mainContainer={props.current.mainContainer}
symbols={props.current.symbols}
selectedContainer={props.selectedContainer}
isOpen={isSidebarOpen}
isHistoryOpen={isHistoryOpen}
OnPropertyChange={props.OnPropertyChange}
SelectContainer={props.SelectContainer}
DeleteContainer={props.DeleteContainer}
/>
onPropertyChange={props.onPropertyChange}
selectContainer={props.selectContainer}
deleteContainer={props.deleteContainer} />
<SymbolsSidebar
SelectedSymbolId={props.current.SelectedSymbolId}
symbols={props.current.Symbols}
selectedSymbolId={props.current.selectedSymbolId}
symbols={props.current.symbols}
isOpen={isSymbolsOpen}
isHistoryOpen={isHistoryOpen}
OnPropertyChange={props.OnSymbolPropertyChange}
SelectSymbol={props.SelectSymbol}
DeleteSymbol={props.DeleteSymbol}
/>
onPropertyChange={props.onSymbolPropertyChange}
selectSymbol={props.selectSymbol}
deleteSymbol={props.deleteSymbol} />
<History
history={props.history}
historyCurrentStep={props.historyCurrentStep}
isOpen={isHistoryOpen}
jumpTo={props.LoadState}
/>
jumpTo={props.loadState} />
<FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
<button type="button"
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
title='Export as JSON'
onClick={props.SaveEditorAsJSON}
onClick={props.saveEditorAsJSON}
>
<UploadIcon className="heroicon text-white" />
</button>
<button type="button"
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
title='Export as SVG'
onClick={props.SaveEditorAsSVG}
onClick={props.saveEditorAsSVG}
>
<PhotographIcon className="heroicon text-white" />
</button>
</FloatingButton>
</>
);
};
export default UI;
}