GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 06:01:05 +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 ```js
// Import from @storybook/X where X is your framework // 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'; import { withCssResources } from '@storybook/addon-cssresources';
// global // global
addDecorator( addDecorator(withCssResources)
withCssResources({ addParameters({
cssresources: [{ cssresources: [{
id: `bluetheme`, id: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`, code: `<style>body { background-color: lightblue; }</style>`,
picked: false, picked: false,
}, },
], ],
}) });
);
// per story // per story
storiesOf('Addons|Cssresources', module) storiesOf('Addons|Cssresources', module)
.addDecorator( .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
withCssResources({ cssresources: [
cssresources: [{ {
id: `fontawesome`, 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>`, 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, picked: true,
@ -57,7 +56,5 @@ storiesOf('Addons|Cssresources', module)
picked: true, 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 React, { Component, Fragment } from 'react';
import { SyntaxHighlighter } from '@storybook/components'; 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 { EVENTS, PARAM_KEY } from './constants';
import { CssResource } from './CssResource'; import { CssResource } from './CssResource';
@ -32,12 +32,12 @@ export class CssResourcePanel extends Component<CssResourcePanelProps, CssResour
componentDidMount() { componentDidMount() {
const { api } = this.props; const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange); api.on(STORY_RENDERED, this.onStoryChange);
} }
componentWillUnmount() { componentWillUnmount() {
const { api } = this.props; const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange); api.off(STORY_RENDERED, this.onStoryChange);
} }
onStoryChange = (id: string) => { 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 * as PropTypes from 'prop-types';
import { types } from '@storybook/addons'; import { types } from '@storybook/addons';
import { styled } from '@storybook/theming'; 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 { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
import Giphy from './giphy'; import Giphy from './giphy';
@ -73,12 +73,12 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
componentDidMount() { componentDidMount() {
const { api } = this.props; const { api } = this.props;
api.on(STORY_CHANGED, this.onStoryChange); api.on(STORY_RENDERED, this.onStoryChange);
} }
componentWillUnmount() { componentWillUnmount() {
const { api } = this.props; const { api } = this.props;
api.off(STORY_CHANGED, this.onStoryChange); api.off(STORY_RENDERED, this.onStoryChange);
} }
onStoryChange = (id: string) => { onStoryChange = (id: string) => {

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

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