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

Fix Category missing key + Fix button cannot be inside button

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-16 14:53:13 +02:00
parent e94671d1d8
commit ce65d448c9
3 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/Components/Category/Category.tsx
View file

@ -12,8 +12,8 @@ export function Category(props: ICategoryProps): JSX.Element {
if (isOpen) { if (isOpen) {
return ( return (
<button type="button" <div
className='overflow-hidden h-full transition-all' className='overflow-hidden h-full transition-all text-center cursor-pointer'
key={props.category} key={props.category}
id={props.category} id={props.category}
title={props.category} title={props.category}
@ -32,13 +32,13 @@ export function Category(props: ICategoryProps): JSX.Element {
<div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'> <div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'>
{ props.children } { props.children }
</div> </div>
</button> </div>
); );
} }
return ( return (
<button type="button" <div
className='overflow-visible h-16 group transition-all' className='overflow-visible h-16 group transition-all text-center cursor-pointer'
key={props.category} key={props.category}
id={props.category} id={props.category}
title={props.category} title={props.category}
@ -55,6 +55,6 @@ export function Category(props: ICategoryProps): JSX.Element {
<div className='transition-all overflow-hidden rounded-b-lg hidden'> <div className='transition-all overflow-hidden rounded-b-lg hidden'>
{ props.children } { props.children }
</div> </div>
</button> </div>
); );
} }

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

@ -1,4 +1,3 @@
import { ChevronRightIcon } from '@heroicons/react/outline';
import * as React from 'react'; import * as React from 'react';
import { IAvailableContainer } from '../../Interfaces/IAvailableContainer'; import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
import { TruncateString } from '../../utils/stringtools'; import { TruncateString } from '../../utils/stringtools';
@ -23,9 +22,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
return; return;
} }
const componentButton = (<button type="button" const componentButton = (<button
className='w-full justify-center h-16 transition-all sidebar-component'
key={componentOption.Type} key={componentOption.Type}
type="button"
className='w-full justify-center h-16 transition-all sidebar-component'
id={componentOption.Type} id={componentOption.Type}
title={componentOption.Type} title={componentOption.Type}
onClick={() => props.buttonOnClick(componentOption.Type)} onClick={() => props.buttonOnClick(componentOption.Type)}
@ -56,7 +56,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
// build the categories // build the categories
categories.forEach((options, category) => { categories.forEach((options, category) => {
rootElements.unshift( rootElements.unshift(
<Category category={category}> <Category
key={category}
category={category}
>
{ options } { options }
</Category>); </Category>);
}); });

1
test-server/http.js
View file

@ -99,6 +99,7 @@ const GetSVGLayoutConfiguration = () => {
}, },
{ {
Type: 'Remplissage', Type: 'Remplissage',
Category: "Category2",
CustomSVG: ` CustomSVG: `
<rect width="{width}" height="{height}" style="{style}"></rect> <rect width="{width}" height="{height}" style="{style}"></rect>
<rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect> <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>