-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
* Add stories for renderers * Fix Typecheck Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
- Loading branch information
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { image } from '../image'; | ||
import { Render } from './render'; | ||
import { elasticLogo } from '../../lib/elastic_logo'; | ||
|
||
storiesOf('renderers/image', module).add('default', () => { | ||
const config = { | ||
type: 'image' as 'image', | ||
mode: 'cover', | ||
dataurl: elasticLogo, | ||
}; | ||
|
||
return <Render renderer={image} config={config} width="400px" />; | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import { action } from '@storybook/addon-actions'; | ||
import React, { useRef, useEffect } from 'react'; | ||
import { RendererFactory, RendererHandlers } from '../../../types'; | ||
|
||
export const defaultHandlers: RendererHandlers = { | ||
destroy: () => action('destroy'), | ||
getElementId: () => 'element-id', | ||
getFilter: () => 'filter', | ||
onComplete: (fn) => undefined, | ||
onEmbeddableDestroyed: action('onEmbeddableDestroyed'), | ||
onEmbeddableInputChange: action('onEmbeddableInputChange'), | ||
onResize: action('onResize'), | ||
resize: action('resize'), | ||
setFilter: action('setFilter'), | ||
done: action('done'), | ||
onDestroy: action('onDestroy'), | ||
reload: action('reload'), | ||
update: action('update'), | ||
event: action('event'), | ||
}; | ||
|
||
/* | ||
Uses a RenderDefinitionFactory and Config to render into an element. | ||
Intended to be used for stories for RenderDefinitionFactory | ||
*/ | ||
interface RenderAdditionalProps { | ||
height?: string; | ||
width?: string; | ||
handlers?: RendererHandlers; | ||
} | ||
|
||
export const Render = <Renderer,>({ | ||
renderer, | ||
config, | ||
...rest | ||
}: Renderer extends RendererFactory<infer Config> | ||
? { renderer: Renderer; config: Config } & RenderAdditionalProps | ||
: { renderer: undefined; config: undefined } & RenderAdditionalProps) => { | ||
const { height, width, handlers } = { | ||
height: '200px', | ||
width: '200px', | ||
handlers: defaultHandlers, | ||
...rest, | ||
}; | ||
|
||
const containerRef = useRef<HTMLDivElement | null>(null); | ||
|
||
useEffect(() => { | ||
if (renderer && containerRef.current !== null) { | ||
renderer().render(containerRef.current, config, handlers); | ||
} | ||
}, [renderer, config, handlers]); | ||
|
||
return ( | ||
<div style={{ width, height }} ref={containerRef}> | ||
{' '} | ||
</div> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { repeatImage } from '../repeat_image'; | ||
import { Render } from './render'; | ||
import { elasticLogo } from '../../lib/elastic_logo'; | ||
import { elasticOutline } from '../../lib/elastic_outline'; | ||
|
||
storiesOf('renderers/repeatImage', module).add('default', () => { | ||
const config = { | ||
count: 42, | ||
image: elasticLogo, | ||
size: 20, | ||
max: 60, | ||
emptyImage: elasticOutline, | ||
}; | ||
|
||
return <Render renderer={repeatImage} config={config} width="400px" />; | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { table } from '../table'; | ||
import { Render } from './render'; | ||
|
||
storiesOf('renderers/table', module).add('default', () => { | ||
const config = { | ||
paginate: true, | ||
perPage: 5, | ||
showHeader: true, | ||
datatable: { | ||
type: 'datatable' as 'datatable', | ||
columns: [ | ||
{ | ||
name: 'Foo', | ||
type: 'string' as 'string', | ||
id: 'id-foo', | ||
meta: { type: 'string' as 'string' }, | ||
}, | ||
{ | ||
name: 'Bar', | ||
type: 'number' as 'number', | ||
id: 'id-bar', | ||
meta: { type: 'string' as 'string' }, | ||
}, | ||
], | ||
rows: [ | ||
{ Foo: 'a', Bar: 700 }, | ||
{ Foo: 'b', Bar: 600 }, | ||
{ Foo: 'c', Bar: 500 }, | ||
{ Foo: 'd', Bar: 400 }, | ||
{ Foo: 'e', Bar: 300 }, | ||
{ Foo: 'f', Bar: 200 }, | ||
{ Foo: 'g', Bar: 100 }, | ||
], | ||
}, | ||
}; | ||
|
||
return <Render renderer={table} config={config} width="400px" />; | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { error } from '../'; | ||
import { Render } from '../../__stories__/render'; | ||
|
||
storiesOf('renderers/error', module).add('default', () => { | ||
const thrownError = new Error('There was an error'); | ||
const config = { | ||
error: thrownError, | ||
}; | ||
return <Render renderer={error} config={config} />; | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
import React from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { markdown } from '../'; | ||
import { Render } from '../../__stories__/render'; | ||
|
||
storiesOf('renderers/markdown', module) | ||
.add('default', () => { | ||
const config = { | ||
content: '# This is Markdown', | ||
font: { | ||
css: '', | ||
spec: {}, | ||
type: 'style' as 'style', | ||
}, | ||
openLinksInNewTab: false, | ||
}; | ||
return <Render renderer={markdown} config={config} />; | ||
}) | ||
.add('links in new tab', () => { | ||
const config = { | ||
content: '[Elastic.co](https://elastic.co)', | ||
font: { | ||
css: '', | ||
spec: {}, | ||
type: 'style' as 'style', | ||
}, | ||
openLinksInNewTab: true, | ||
}; | ||
return <Render renderer={markdown} config={config} />; | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.