| import React, { useState, ReactNode } from 'react'; |
| import { styled } from '@superset-ui/core'; |
| import { DecoratorFunction } from '@storybook/addons'; |
| import ResizablePanel, { Size } from './ResizablePanel'; |
| |
| export const SupersetBody = styled.div` |
| background: #f5f5f5; |
| padding: 16px; |
| min-height: 100%; |
| |
| .panel { |
| margin-bottom: 0; |
| } |
| `; |
| |
| export default function ResizableChartDemo({ |
| children, |
| panelPadding = 30, |
| initialSize = { width: 500, height: 300 }, |
| }: { |
| children: (innerSize: Size) => ReactNode; |
| panelPadding?: number; |
| initialSize?: Size; |
| }) { |
| // size are all inner size |
| const [size, setSize] = useState(initialSize); |
| return ( |
| <SupersetBody> |
| <ResizablePanel initialSize={initialSize} onResize={(e, data) => setSize(data.size)}> |
| {children({ width: size.width - panelPadding, height: size.height - panelPadding })} |
| </ResizablePanel> |
| </SupersetBody> |
| ); |
| } |
| |
| export const withResizableChartDemo: DecoratorFunction<ReactNode> = (storyFn, context) => { |
| const { |
| parameters: { initialSize, panelPadding }, |
| } = context; |
| return ( |
| <ResizableChartDemo initialSize={initialSize as Size | undefined} panelPadding={panelPadding}> |
| {innerSize => storyFn({ ...context, ...innerSize })} |
| </ResizableChartDemo> |
| ); |
| }; |