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

remove UseState from Drawer story (#53503)

Browse Source
This commit is contained in:
Ashley Harrison
2022-08-10 11:40:33 +01:00
committed by GitHub
parent e9fe9a25dc
commit aaccb592cc
3 changed files with 141 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@@ -1395,9 +1395,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"packages/grafana-ui/src/components/Drawer/Drawer.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]

317
packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
View File

@@ -3,7 +3,6 @@ import React, { useState } from 'react';
import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Drawer.mdx';
@@ -16,11 +15,8 @@ const meta: ComponentMeta<typeof Drawer> = {
docs: {
page: mdx,
},
knobs: {
disable: true,
},
controls: {
exclude: ['onClose'],
exclude: ['onClose', 'tabs'],
},
},
args: {
@@ -38,40 +34,26 @@ const meta: ComponentMeta<typeof Drawer> = {
};
export const Global: ComponentStory<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (
<UseState initialState={{ isOpen: false }}>
{(state, updateValue) => {
return (
<>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
title={args.title}
subtitle={args.subtitle}
closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => {
updateValue({ isOpen: !state.isOpen });
}}
>
<div style={{ padding: '10px' }}>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
</div>
</Drawer>
)}
</>
);
}}
</UseState>
<>
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
{isOpen && (
<Drawer {...args} onClose={() => setIsOpen(false)}>
<div style={{ padding: '10px' }}>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
</div>
</Drawer>
)}
</>
);
};
@@ -80,100 +62,80 @@ Global.args = {
};
export const LongContent: ComponentStory<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (
<UseState initialState={{ isOpen: true }}>
{(state, updateValue) => {
return (
<>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
title={args.title}
subtitle={args.subtitle}
closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => {
updateValue({ isOpen: !state.isOpen });
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Iaculis nunc sed augue lacus viverra vitae. Malesuada pellentesque elit eget
gravida cum sociis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Cras
adipiscing enim eu turpis egestas. Ut lectus arcu bibendum at varius. Nulla pellentesque dignissim
enim sit amet venenatis urna. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Vitae
congue mauris rhoncus aenean. Enim ut tellus elementum sagittis vitae et.
</p>
<p>
Arcu non odio euismod lacinia at quis risus sed vulputate. Sit amet consectetur adipiscing elit ut.
Dictum fusce ut placerat orci nulla pellentesque dignissim. Lectus nulla at volutpat diam ut venenatis
tellus. Sed cras ornare arcu dui. Eget mauris pharetra et ultrices neque ornare aenean euismod. Mi
quis hendrerit dolor magna. Commodo viverra maecenas accumsan lacus vel facilisis. Eget mi proin sed
libero enim sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Mattis nunc sed blandit
libero volutpat.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus.
Semper eget duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque
eleifend. Sem nulla pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas
erat. Id neque aliquam vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat
odio facilisis mauris sit. Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate
odio ut enim blandit volutpat. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed
adipiscing diam donec adipiscing tristique risus nec. Id neque aliquam vestibulum morbi. Pretium nibh
ipsum consequat nisl vel pretium lectus quam. Platea dictumst quisque sagittis purus sit. Nascetur
ridiculus mus mauris vitae ultricies leo.
</p>
</Drawer>
)}
</>
);
}}
</UseState>
<>
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
{isOpen && (
<Drawer {...args} onClose={() => setIsOpen(false)}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Iaculis nunc sed augue lacus viverra vitae. Malesuada pellentesque elit eget gravida
cum sociis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Cras adipiscing enim eu
turpis egestas. Ut lectus arcu bibendum at varius. Nulla pellentesque dignissim enim sit amet venenatis
urna. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Vitae congue mauris rhoncus aenean.
Enim ut tellus elementum sagittis vitae et.
</p>
<p>
Arcu non odio euismod lacinia at quis risus sed vulputate. Sit amet consectetur adipiscing elit ut. Dictum
fusce ut placerat orci nulla pellentesque dignissim. Lectus nulla at volutpat diam ut venenatis tellus. Sed
cras ornare arcu dui. Eget mauris pharetra et ultrices neque ornare aenean euismod. Mi quis hendrerit dolor
magna. Commodo viverra maecenas accumsan lacus vel facilisis. Eget mi proin sed libero enim sed. Magna ac
placerat vestibulum lectus mauris ultrices eros in. Mattis nunc sed blandit libero volutpat.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
</p>
<p>
Cursus in hac habitasse platea dictumst quisque sagittis purus. Viverra adipiscing at in tellus. Semper eget
duis at tellus at urna condimentum. Egestas fringilla phasellus faucibus scelerisque eleifend. Sem nulla
pharetra diam sit amet nisl. Ut ornare lectus sit amet est placerat in egestas erat. Id neque aliquam
vestibulum morbi blandit cursus risus. In iaculis nunc sed augue. Eu volutpat odio facilisis mauris sit.
Quisque egestas diam in arcu cursus euismod. At quis risus sed vulputate odio ut enim blandit volutpat.
Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sed adipiscing diam donec adipiscing tristique
risus nec. Id neque aliquam vestibulum morbi. Pretium nibh ipsum consequat nisl vel pretium lectus quam.
Platea dictumst quisque sagittis purus sit. Nascetur ridiculus mus mauris vitae ultricies leo.
</p>
</Drawer>
)}
</>
);
};
LongContent.args = {
@@ -181,58 +143,43 @@ LongContent.args = {
};
export const InLine: ComponentStory<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (
<UseState initialState={{ isOpen: false }}>
{(state, updateValue) => {
return (
<>
<div
style={{
height: '300px',
width: '500px',
border: '1px solid white',
position: 'relative',
overflow: 'hidden',
}}
>
<Button onClick={() => updateValue({ isOpen: !state.isOpen })}>Open drawer</Button>
{state.isOpen && (
<Drawer
inline={args.inline}
title={args.title}
subtitle={args.subtitle}
closeOnMaskClick={args.closeOnMaskClick}
scrollableContent={args.scrollableContent}
width={args.width}
onClose={() => {
updateValue({ isOpen: !state.isOpen });
}}
>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
</Drawer>
)}
</div>
</>
);
}}
</UseState>
<>
<div
style={{
height: '300px',
width: '500px',
border: '1px solid white',
position: 'relative',
overflow: 'hidden',
}}
>
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
{isOpen && (
<Drawer {...args} onClose={() => setIsOpen(false)}>
<ul>
<li>this</li>
<li>is</li>
<li>a</li>
<li>list</li>
<li>of</li>
<li>menu</li>
<li>items</li>
</ul>
</Drawer>
)}
</div>
</>
);
};
InLine.args = {
title: 'Storybook',
title: 'Drawer title inline',
inline: true,
};
export function WithTabs() {
export const WithTabs: ComponentStory<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
const [activeTab, setActiveTab] = useState('options');
const tabs = (
@@ -248,11 +195,19 @@ export function WithTabs() {
);
return (
<Drawer title={'Main title'} subtitle={'Sub title'} width={700} onClose={() => {}} tabs={tabs}>
{activeTab === 'options' && <div>Here are some options</div>}
{activeTab === 'changes' && <div>Here are some changes</div>}
</Drawer>
<>
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
{isOpen && (
<Drawer {...args} tabs={tabs} onClose={() => setIsOpen(false)}>
{activeTab === 'options' && <div>Here are some options</div>}
{activeTab === 'changes' && <div>Here are some changes</div>}
</Drawer>
)}
</>
);
}
};
WithTabs.args = {
title: 'Drawer title with tabs',
};
export default meta;

6
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@@ -67,6 +67,10 @@ export function Drawer({
}, []);
const content = <div className={drawerStyles.content}>{children}</div>;
const style: CSSProperties = {};
if (inline) {
style.position = 'absolute';
}
return (
<RcDrawer
@@ -78,7 +82,7 @@ export function Drawer({
placement="right"
width={currentWidth}
getContainer={inline ? undefined : 'body'}
style={{ position: `${inline && 'absolute'}` } as CSSProperties}
style={style}
className={drawerStyles.drawer}
aria-label={
typeof title === 'string'