IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Variables: Make renamed or missing variable section expandable (#41964)

Browse Source 
* Variables: Make renamed or missing variable section expandable

* Chore: feedback after PR comments
This commit is contained in:
Hugo Häggmark
2021-11-22 07:38:49 +01:00
committed by GitHub
parent f3b023ffa6
commit 44d7d6546f
9 changed files with 309 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
View File

@@ -5,20 +5,26 @@ import { Icon } from '..';
import { GrafanaTheme2 } from '@grafana/data';
export interface Props {
label: string;
label: ReactNode;
isOpen: boolean;
/** Callback for the toggle functionality */
onToggle?: (isOpen: boolean) => void;
children: ReactNode;
}
export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
export const CollapsableSection: FC<Props> = ({ label, isOpen, onToggle, children }) => {
const [open, toggleOpen] = useState<boolean>(isOpen);
const styles = useStyles2(collapsableSectionStyles);
const headerStyle = open ? styles.header : styles.headerCollapsed;
const tooltip = `Click to ${open ? 'collapse' : 'expand'}`;
const onClick = () => {
onToggle?.(!open);
toggleOpen(!open);
};
return (
<div>
<div onClick={() => toggleOpen(!open)} className={headerStyle} title={tooltip}>
<div onClick={onClick} className={headerStyle} title={tooltip}>
{label}
<Icon name={open ? 'angle-down' : 'angle-right'} size="xl" className={styles.icon} />
</div>