Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 1x 1x 1x 1x 1x 1x | import _ from 'lodash';
import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { IOverlayProps } from './Overlay';
import Overlay from './Overlay';
import Button from '../Button/Button';
export default {
title: 'Utility/Overlay',
component: Overlay,
parameters: {
docs: {
description: {
component: Overlay.peek.description,
},
},
},
} as Meta;
/* BASIC */
export const Basic: Story<IOverlayProps> = (args) => {
const [isShown, setIsShown] = useState(false);
const handleOpenClose = (isShown: any) => {
setIsShown(isShown);
};
return (
<div>
<Button onClick={_.partial(handleOpenClose, !isShown)}>Toggle</Button>
<Overlay
{...args}
isShown={isShown}
onEscape={_.partial(handleOpenClose, false)}
onBackgroundClick={_.partial(handleOpenClose, false)}
>
<div style={{ color: '#fff' }}>
User cannot interact with the background (except scrolling).
</div>
</Overlay>
</div>
);
};
/* No Modal */
export const NoModal: Story<IOverlayProps> = (args) => {
const [isShown, setIsShown] = useState(false);
const handleOpenClose = (isShown: any) => {
setIsShown(isShown);
};
return (
<div>
<Button onClick={_.partial(handleOpenClose, !isShown)}>Toggle</Button>
<Overlay
{...args}
isShown={isShown}
isModal={false}
onEscape={_.partial(handleOpenClose, false)}
>
<div
style={{
backgroundColor: '#eee',
padding: '100px',
}}
>
User can still interact with the background.
<Button
onClick={_.partial(handleOpenClose, false)}
style={{ marginLeft: '10px' }}
>
Close
</Button>
</div>
</Overlay>
</div>
);
};
|