Skip to content

Carousel: Make controlled component #1974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
interactivellama merged 9 commits into from
May 16, 2019
Merged

Carousel: Make controlled component #1974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
075e949
added props to control carousel's currentPanel
kevinparkerson May 8, 2019
63c8a95
add props to allow autoplay to be controlled for carousel
kevinparkerson May 8, 2019
03e6f67
removed indicatorStyles prop from carousel as it wasn't doing anythin…
kevinparkerson May 8, 2019
c9c3eeb
linted and updated storyshots
kevinparkerson May 8, 2019
0f6841f
Merge branch 'master' into carousel-controlled-component
kevinparkerson May 10, 2019
eb605b7
Merge branch 'master' of github.com:salesforce/design-system-react in…
interactivellama May 14, 2019
18b488d
updates following PR review; made currentPanel 0-indexed
kevinparkerson May 15, 2019
86e38b6
Merge branch 'carousel-controlled-component' of github.com:kevinparke…
kevinparkerson May 15, 2019
ddc79cd
story name tweak to make isInfinite more apparent
kevinparkerson May 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
248 changes: 155 additions & 93 deletions components/carousel/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions components/carousel/__docs__/storybook-stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';

import Default from '../__examples__/default';
import DefaultWithAutoPlay from '../__examples__/default-with-autoplay';
import DefaultWithAutoplay from '../__examples__/default-with-autoplay';
import DefaultWithNavigation from '../__examples__/default-with-navigation';
import FiveItems from '../__examples__/five-items';
import ThreeItems from '../__examples__/three-items';
import ThreeItemsWithAutoplay from '../__examples__/three-items-with-autoplay';
import ThreeItemsControlled from '../__examples__/three-items-controlled';
import WithCustomItems from '../__examples__/with-custom-items';

import { CAROUSEL } from '../../../utilities/constants';
Expand All @@ -17,12 +17,12 @@ storiesOf(CAROUSEL, module)
.add('Default with navigation indicators NoImageTest', () => (
<DefaultWithNavigation action={action} />
))
.add('Default with AutoPlay NoImageTest', () => (
<DefaultWithAutoPlay action={action} />
.add('Default with Autoplay NoImageTest', () => (
<DefaultWithAutoplay action={action} />
))
.add('3 items NoImageTest', () => <ThreeItems action={action} />)
.add('3 items with AutoPlay NoImageTest', () => (
<ThreeItemsWithAutoplay action={action} />
.add('3 items controlled isInfinite NoImageTest', () => (
<ThreeItemsControlled action={action} />
))
.add('5 items NoImageTest', () => <FiveItems action={action} />)
.add('With custom items NoImageTest', () => (
Expand Down
3 changes: 2 additions & 1 deletion components/carousel/__examples__/default-with-autoplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const items = [
];

class Example extends React.Component {
static displayName = 'DefaultWithAutoPlayExample';
static displayName = 'DefaultWithAutoplayExample';

render() {
return (
Expand All @@ -80,6 +80,7 @@ class Example extends React.Component {
<Carousel
hasAutoplay
id="carousel-default-with-auto-play-example"
isInfinite
items={items}
onItemClick={(event, data) => {
event.preventDefault();
Expand Down
34 changes: 32 additions & 2 deletions ..._examples__/three-items-with-autoplay.jsx → ...l/__examples__/three-items-controlled.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,15 @@ const items = [
];

class Example extends React.Component {
static displayName = 'ThreeItemsWithAutoplayExample';
static displayName = 'ThreeItemsControlledExample';

constructor(props) {
super(props);
this.state = {
currentPanel: 1,
isAutoplayOn: false,
};
}

render() {
return (
Expand All @@ -84,8 +92,12 @@ class Example extends React.Component {
}}
>
<Carousel
currentPanel={this.state.currentPanel}
hasAutoplay
id="carousel-three-items-with-auto-play-example"
hasPreviousNextPanelNavigation
id="carousel-three-items-controlled-example"
isAutoplayOn={this.state.isAutoplayOn}
isInfinite
items={items}
itemsPerPanel={3}
onItemClick={(event, data) => {
Expand All @@ -97,6 +109,24 @@ class Example extends React.Component {
data,
});
}}
onRequestAutoplayToggle={(event, data) => {
log({
action: this.props.action,
event,
eventName: 'On Request Autoplay Toggle',
data,
});
this.setState({ isAutoplayOn: !data.isAutoplayOn });
}}
onRequestPanelChange={(event, data) => {
log({
action: this.props.action,
event,
eventName: 'On Request Panel Change',
data,
});
this.setState({ currentPanel: data.requestedPanel });
}}
/>
</div>
</IconSettings>
Expand Down
Loading