diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 9272cfa3a62..b067b63ffa1 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import EventEmiter from 'eventemitter3'; import { storiesOf } from '@storybook/react'; @@ -60,6 +61,23 @@ const InfoButton = () => ( ); +class AsyncItemLoader extends React.Component { + constructor() { + super(); + this.state = { items: [] }; + } + + loadItems() { + setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500); + } + + render() { + button('Load the items', () => this.loadItems()); + return this.props.children(this.state.items); + } +} +AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired }; + storiesOf('Button', module) .addDecorator(withKnobs) .add('with text', () => ( @@ -111,8 +129,6 @@ storiesOf('Button', module) const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; - button('Arbitrary action', action('You clicked it!')); - return (
{intro}
@@ -121,6 +137,14 @@ storiesOf('Button', module)In my backpack, I have:
{salutation}
+PS. My shirt pocket contains:
+