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

Implement Category list

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-16 16:23:17 +02:00
parent 9f24d2d40a
commit 0476a294d6
7 changed files with 61 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,58 +1,38 @@
import { ChevronRightIcon } from '@heroicons/react/outline';
import React, { useState } from 'react';
import { ICategory } from '../../Interfaces/ICategory';
import { TruncateString } from '../../utils/stringtools';
interface ICategoryProps {
children: JSX.Element | JSX.Element[]
category: string
category: ICategory
}
export function Category(props: ICategoryProps): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
if (isOpen) {
return (
<div
className='overflow-hidden h-full transition-all text-center cursor-pointer'
key={props.category}
id={props.category}
title={props.category}
>
<div
className='flex flex-row group full'
onClick={() => setIsOpen(!isOpen)}
>
<span className={'transition-all flex-1 h-full justify-center sidebar-component-left rounded-b-none bg-slate-400/80 group-hover:bg-blue-600'}>
{TruncateString(props.category, 25)}
</span>
<span className={'flex-none h-full justify-center sidebar-component-right rounded-b-none'}>
<ChevronRightIcon className='transition-all w-5 rotate-90' />
</span>
</div>
<div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'>
{ props.children }
</div>
</div>
);
}
const categoryType: string = props.category.Type;
const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;
return (
<div
className='overflow-visible h-16 group transition-all text-center cursor-pointer'
key={props.category}
id={props.category}
title={props.category}
onClick={() => setIsOpen(!isOpen)}
className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
key={categoryType}
id={categoryType}
title={categoryDisplayedText}
>
<div className='flex flex-row h-full'>
<span className='flex-1 h-full justify-center sidebar-component-left'>
{TruncateString(props.category, 25)}
<div
className='flex flex-row group cursor-pointer h-16'
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' : ''}`}>
{TruncateString(categoryDisplayedText, 25)}
</span>
<span className='flex-none h-full justify-center sidebar-component-right'>
<ChevronRightIcon className='transition-all w-5' />
<span className={`flex-none h-full justify-center sidebar-component-right ${isOpen ? 'rounded-b-none' : ''}`}>
<ChevronRightIcon className={`transition-all w-5 ${isOpen ? 'rotate-90' : ''}`} />
</span>
</div>
<div className='transition-all overflow-hidden rounded-b-lg hidden'>
<div className={`transition-all grid gap-2 p-2 rounded-b-lg ${isOpen ? 'visible overflow-auto bg-slate-400/80' : 'hidden overflow-hidden'}`}>
{ props.children }
</div>
</div>