/
register.js
60 lines (48 loc) 路 1.47 KB
/
register.js
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
import React, { createElement } from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import './styles.css'
import addons, { types } from '@storybook/addons'
const ADDON_ID = 'show-vue-markup'
const PANEL_ID = `${ADDON_ID}/panel`
export const EVENT_ID = `${ADDON_ID}/markup`
class MarkupPanel extends React.Component {
state = { markup: '' }
componentDidMount() {
const { channel } = this.props
channel.on(EVENT_ID, this.onStoryChange)
}
componentWillUnmount() {
const { channel } = this.props
channel.off(EVENT_ID, this.onStoryChange)
}
onStoryChange = ({ markup }) => {
this.setState({ markup })
}
render() {
const { markup } = this.state
const { active } = this.props
return active ? createElement(Highlight, {
...defaultProps,
code: markup,
language: 'html',
children: ({ className, style, tokens, getLineProps, getTokenProps }) => {
return createElement('pre', {
className,
style
}, tokens.map((line, i) => createElement('div', {
...getLineProps({ line, key: i })
}, line.map((token, key) => createElement('span', {
...getTokenProps({ token, key})
})))))
}
}) : null
}
}
addons.register(ADDON_ID, () => {
const channel = addons.getChannel()
addons.add(PANEL_ID, {
type: types.PANEL,
title: 'Markup',
render: ({ active, key }) => createElement(MarkupPanel, { active, key, channel })
})
})