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

Merged PR 204: Implement Properties' categories

Browse source
This commit is contained in:
Eric Nguyen 2022-10-03 13:58:45 +00:00
parent fa3246b725
commit 34c00d267c
4 changed files with 365 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,25 +4,29 @@ import { ICategory } from '../../Interfaces/ICategory';
import { TruncateString } from '../../utils/stringtools';
interface ICategoryProps {
children: JSX.Element[]
heightClass?: string
children?: JSX.Element[] | JSX.Element
category: ICategory
defaultIsOpen?: boolean
}
export function Category(props: ICategoryProps): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);
const categoryType: string = props.category.Type;
const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;
const heightClass = props.heightClass ?? 'h-16';
return (
<div
className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : `overflow-visible ${heightClass}`}`}
key={categoryType}
id={categoryType}
title={categoryDisplayedText}
>
<div
className={'flex flex-row group h-16 cursor-pointer'}
className={`flex flex-row group cursor-pointer ${heightClass}`}
onClick={() => setIsOpen(!isOpen)}
>
<span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>