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

Merged PR 168: Add SmartComponent source code + Restrict Events by giving a root at the first render + Added Render function to a namespace

Browse source 
- Add smartcomponent source code to public/
- Restrict Events by giving a root at the first render + Added Render function to a namespace
- Add attribute type="button" to all buttons
This commit is contained in:
Eric Nguyen 2022-08-26 09:13:51 +00:00
parent 7f3f6a489a
commit 444b96736a
17 changed files with 132 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Components/App/App.tsx
View file

@ -11,6 +11,7 @@ import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default
// App will never have props
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IAppProps {
root: Element | Document
}
export const App: React.FunctionComponent<IAppProps> = (props) => {
@ -59,6 +60,7 @@ export const App: React.FunctionComponent<IAppProps> = (props) => {
return (
<div>
<Editor
root={props.root}
configuration={editorState.configuration}
history={editorState.history}
historyCurrentStep={editorState.historyCurrentStep}

2
src/Components/Bar/BarIcon.tsx
View file

@ -10,7 +10,7 @@ interface IBarIconProps {
export const BarIcon: React.FC<IBarIconProps> = (props) => {
const isActiveClasses = props.isActive ? 'border-l-4 border-blue-500 bg-slate-200' : '';
return (
<button
<button type="button"
className={`bar-btn group ${isActiveClasses}`}
title={props.title}
onClick={() => props.onClick()}

4
src/Components/Editor/Editor.tsx
View file

@ -14,6 +14,7 @@ import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, Se
import { findContainerById } from '../../utils/itertools';
interface IEditorProps {
root: Element | Document
configuration: IConfiguration
history: IHistoryState[]
historyCurrentStep: number
@ -57,6 +58,7 @@ function useShortcuts(
}
function useWindowEvents(
root: Element | Document,
history: IHistoryState[],
historyCurrentStep: number,
configuration: IConfiguration,
@ -75,6 +77,7 @@ function useWindowEvents(
const funcs = new Map<string, () => void>();
for (const event of events) {
const func = (eventInitDict?: CustomEventInit): void => event.func(
root,
editorState,
setHistory,
setHistoryCurrentStep,
@ -102,6 +105,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
useShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
useWindowEvents(
props.root,
history,
historyCurrentStep,
props.configuration,

2
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -81,7 +81,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
: 'bg-slate-300/60 hover:bg-slate-300';
return (
<button
<button type="button"
className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`}
id={key}

2
src/Components/FloatingButton/FloatingButton.tsx
View file

@ -25,7 +25,7 @@ export const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingB
<div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
{ props.children }
</div>
<button
<button type="button"
className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
title='Open menu'
onClick={() => toggleState(isHidden, setHidden)}

2
src/Components/History/History.tsx
View file

@ -21,7 +21,7 @@ export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
: 'bg-slate-500 hover:bg-slate-700';
return (
<button
<button type="button"
key={reversedIndex}
style={style}
onClick={() => props.jumpTo(reversedIndex)}

6
src/Components/MainMenu/MainMenu.tsx
View file

@ -36,7 +36,7 @@ export const MainMenu: React.FC<IMainMenuProps> = (props) => {
"/>
</label>
</form>
<button
<button type="button"
onClick={() => setWindowState(WindowState.MAIN)}
className='normal-btn block
mt-8 '
@ -49,8 +49,8 @@ export const MainMenu: React.FC<IMainMenuProps> = (props) => {
default:
return (
<div className='absolute bg-blue-50 p-12 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<button className='mainmenu-btn' onClick={props.newEditor}>Start from scratch</button>
<button className='mainmenu-btn' onClick={() => setWindowState(WindowState.LOAD)}>Load a configuration file</button>
<button type="button" className='mainmenu-btn' onClick={props.newEditor}>Start from scratch</button>
<button type="button" className='mainmenu-btn' onClick={() => setWindowState(WindowState.LOAD)}>Load a configuration file</button>
</div>
);
}

2
src/Components/Menu/MenuItem.tsx
View file

@ -8,7 +8,7 @@ interface IMenuItemProps {
export const MenuItem: React.FC<IMenuItemProps> = (props) => {
return (
<button
<button type="button"
className={props.className}
onClick={() => props.onClick()}>{props.text}
</button>

2
src/Components/Sidebar/Sidebar.tsx
View file

@ -14,7 +14,7 @@ function handleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
export const Sidebar: React.FC<ISidebarProps> = (props: ISidebarProps) => {
const listElements = props.componentOptions.map(componentOption =>
<button
<button type="button"
className='justify-center transition-all sidebar-component'
key={componentOption.Type}
id={componentOption.Type}

4
src/Components/Symbols/Symbols.tsx
View file

@ -16,7 +16,7 @@ export const Symbols: React.FC<ISymbolsProps> = (props: ISymbolsProps) => {
const listElements = props.componentOptions.map(componentOption => {
if (componentOption.Image.Url !== undefined || componentOption.Image.Base64Image !== undefined) {
const url = componentOption.Image.Base64Image ?? componentOption.Image.Url;
return (<button
return (<button type="button"
className='justify-center sidebar-component-card hover:h-full'
key={componentOption.Name}
id={componentOption.Name}
@ -37,7 +37,7 @@ export const Symbols: React.FC<ISymbolsProps> = (props: ISymbolsProps) => {
</button>);
}
return (<button
return (<button type="button"
className='group justify-center sidebar-component hover:h-full'
key={componentOption.Name}
id={componentOption.Name}

2
src/Components/SymbolsSidebar/SymbolsSidebar.tsx
View file

@ -56,7 +56,7 @@ export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSi
: 'bg-slate-300/60 hover:bg-slate-300';
return (
<button
<button type="button"
className={
`w-full border-blue-500 elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`

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

@ -109,14 +109,14 @@ export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
/>
<FloatingButton className={`fixed z-10 flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
<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 JSON'
onClick={props.SaveEditorAsJSON}
>
<UploadIcon className="heroicon text-white" />
</button>
<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}