GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Defect fixes for addon onload functionality

Browse Source 
- Changed `STORY_CHANGED` to `STORY_RENDERED` in `addon-notes`
- Changed `STORY_CHANGED` to `STORY_RENDERED` in `addon-cssresources`
- Updated README for `addon-cssresources`
- Updated writing-addons docs to reflect event change:
This commit is contained in:
Preston Goforth 2019-02-07 16:15:36 -05:00
parent 4694b704a0
commit 32cf22d07a
4 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
addons/cssresources/README.md
View File

@ -28,26 +28,25 @@ You need add the all the css resources at compile time using the `withCssResourc
```js
// Import from @storybook/X where X is your framework
import { configure, addDecorator, storiesOf } from '@storybook/react';
import { configure, addDecorator, addParameters, storiesOf } from '@storybook/react';
import { withCssResources } from '@storybook/addon-cssresources';
// global
addDecorator(
withCssResources({
addDecorator(withCssResources)
addParameters({
cssresources: [{
id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
})
);
});
// per story
storiesOf('Addons|Cssresources', module)
.addDecorator(
withCssResources({
cssresources: [{
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
cssresources: [
{
id: `fontawesome`,
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
picked: true,
@ -57,7 +56,5 @@ storiesOf('Addons|Cssresources', module)
picked: true,
},
],
})
)
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
});
```

6
addons/cssresources/src/css-resource-panel.tsx
View File

@ -1,6 +1,6 @@
import React, { Component, Fragment } from 'react';
import { SyntaxHighlighter } from '@storybook/components';
import Eventtypes, { STORY_CHANGED } from '@storybook/core-events';
import Eventtypes, { STORY_RENDERED } from '@storybook/core-events';
import { EVENTS, PARAM_KEY } from './constants';
import { CssResource } from './CssResource';
@ -32,12 +32,12 @@ export class CssResourcePanel extends Component<CssResourcePanelProps, CssResour
componentDidMount() {
const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}
componentWillUnmount() {
const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}
onStoryChange = (id: string) => {

6
addons/notes/src/Panel.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import * as PropTypes from 'prop-types';
import { types } from '@storybook/addons';
import { styled } from '@storybook/theming';
import { STORY_CHANGED } from '@storybook/core-events';
import { STORY_RENDERED } from '@storybook/core-events';
import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
import Giphy from './giphy';
@ -73,12 +73,12 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
componentDidMount() {
const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}
componentWillUnmount() {
const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}
onStoryChange = (id: string) => {

8
docs/src/pages/addons/writing-addons/index.md
View File

@ -73,13 +73,13 @@ class MyPanel extends React.Component {
componentDidMount() {
const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED, this.onStoryChange);
}
componentWillUnmount() {
const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}
onStoryChange = id => {
@ -184,12 +184,12 @@ class MyPanel extends React.Component {
componentDidMount() {
const { api } = this.props;
api.on('foo/doSomeAction', this.onSomeAction);
api.on(STORY_CHANGED, this.onStoryChange);
api.on(STORY_RENDERED this.onStoryChange);
}
componentWillUnmount() {
const { api } = this.props;
api.off('foo/doSomeAction', this.onSomeAction);
api.off(STORY_CHANGED, this.onStoryChange);
api.off(STORY_RENDERED, this.onStoryChange);
}
render() {