e9e3e21a10
* fix(player): fix initial visual offset jump check * change(ui): add empty feature flags page * change(ui): add empty feature flags page * fix(ui): some more fixes * change(ui): add subrouting for sessions tab * change(ui): more fixes for routing * change(ui): add flag creation page, flags list table, flag store/type * change(tracker): flags in tracker * change(tracker): return all flags * feat(ui): add API and types connector * feat(ui): split components to prevent rerendering * feat(ui): add icon, fix redirect.path crashlooping * feat(ui): add conditions and stuff, add flags class to tracker to handle stuff * feat(ui): add condition state and filters * feat(ui): fix flag creation with api change * feat(ui): fix flag editing (api changes); simplify new/edit flag component * feat(ui): add filters, make table pretty :insert_magic_emoji: * feat(ui): remove rollout percentage from list, remove console logs * feat(ui): multivar toggler * feat(tracker): add more methods to tracker * feat(tracker): more type coverage * feat(tracker): add tests * fix(ui): some fixes for multivar * feat(ui): multivar api support * fix(ui):start adding tests for fflags * fix(ui): rm not working file.. * fix(ui): rm unused packages * fix(ui): remove name field, fix some api and type names * fix(ui): fix crash * fix(tracker/ui): keep flags in sessionStorage, support API errors in feature flags storage * fix(tracker/ui): clear unused things, fix url handling, fix icons rendering etc
72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
import React from 'react';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import cn from 'classnames';
|
|
import stl from './sideMenuItem.module.css';
|
|
import { IconNames } from 'UI/SVG';
|
|
|
|
function SideMenuitem({
|
|
iconBg = false,
|
|
iconColor = "gray-dark",
|
|
iconSize = 18,
|
|
className = '',
|
|
iconName,
|
|
title,
|
|
active = false,
|
|
disabled = false,
|
|
tooltipTitle = '',
|
|
onClick,
|
|
deleteHandler,
|
|
leading = null,
|
|
...props
|
|
}: {
|
|
title: string;
|
|
iconName?: IconNames;
|
|
iconBg?: boolean;
|
|
iconColor?: string;
|
|
iconSize?: number;
|
|
className?: string;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
tooltipTitle?: string;
|
|
onClick?: () => void;
|
|
deleteHandler?: () => void;
|
|
leading?: React.ReactNode;
|
|
id?: string;
|
|
}) {
|
|
return (
|
|
<Tooltip
|
|
disabled={ !disabled }
|
|
title={ tooltipTitle }
|
|
placement="top"
|
|
>
|
|
<div
|
|
className={ cn(
|
|
className,
|
|
stl.menuItem,
|
|
"flex items-center py-2 justify-between shrink-0",
|
|
{ [stl.active] : active }
|
|
)}
|
|
onClick={disabled ? null : onClick}
|
|
{...props}
|
|
>
|
|
<div className={ cn('flex items-center w-full', { [stl.disabled] : disabled })}>
|
|
<div className={cn("flex items-center", stl.iconLabel)}>
|
|
{ iconName && (
|
|
<div className="flex items-center justify-center w-8 h-8 mr-2">
|
|
<div className={cn({ "w-8 h-8 rounded-full relative opacity-20" : iconBg }, iconBg)} style={{ opacity: '0.2'}} />
|
|
<Icon name={ iconName } size={ iconSize } color={active ? 'teal' : iconColor} className="absolute" />
|
|
</div>
|
|
)}
|
|
<span className={cn(stl.title, 'capitalize-first')}>{ title }</span>
|
|
</div>
|
|
{ leading && leading }
|
|
</div>
|
|
{deleteHandler &&
|
|
<div onClick={deleteHandler} className={stl.actions}><Icon name="trash" size="14" /></div>
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
export default SideMenuitem
|