Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 1x 15x 1x 15x 1x 2x 5x 5x 5x 5x 5x 5x 5x | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
import React, { Component } from 'react';
import ButtonIcon from '../button-icons/';
import classNames from 'classnames';
import uniqueId from 'lodash.uniqueid';
/**
* Indicator Sub Component
*/
const CarouselIndicator = props => (
<li className="slds-carousel__indicator" role="presentation">
<a
id={props.id}
className={classNames(
'slds-carousel__indicator-action',
props.isActive && 'slds-is-active',
props.className
)}
href="#"
role="tab"
tabIndex={props.isActive ? '0' : '-1'}
aria-selected={props.isActive ? 'true' : 'false'}
aria-controls={props.contentId}
title={props.title}
onClick={e => e.preventDefault()}
>
<span className="slds-assistive-text">{props.title}</span>
</a>
</li>
);
/**
* Content Sub Component
*/
const CarouselPanel = props => (
<div
id={props.id}
className={classNames('slds-carousel__panel', props.className)}
role="tabpanel"
hidden={!props.isActive}
aria-labelledby={props.indicatorId}
>
<a
href="#"
className="slds-carousel__panel-action slds-text-link_reset"
tabIndex={props.isActive ? '0' : '-1'}
onClick={e => e.preventDefault()}
>
<div className="slds-carousel__image">
<img src={props.src} alt={props.title} />
</div>
<div className="slds-carousel__content">
<h2 className="slds-carousel__content-title">{props.title}</h2>
<p>{props.description}</p>
</div>
</a>
</div>
);
/**
* Play/Pause Button Sub Component
*/
export const CarouselPlayToggle = props => (
<span className="slds-carousel__autoplay">
<ButtonIcon
className="slds-button_icon-border-filled slds-button_icon-x-small"
symbol={props.stop ? 'right' : 'pause'}
aria-controls={props['aria-controls']}
aria-pressed={props.stop}
disabled={props.disabled}
title="Stop auto-play"
assistiveText="Stop auto-play"
/>
</span>
);
class Carousel extends Component {
render() {
const contentId01 = uniqueId('content-id-');
const contentId02 = uniqueId('content-id-');
const contentId03 = uniqueId('content-id-');
const indicatorId01 = uniqueId('indicator-id-');
const indicatorId02 = uniqueId('indicator-id-');
const indicatorId03 = uniqueId('indicator-id-');
return (
<div className={classNames('slds-carousel', this.props.className)}>
<div className="slds-carousel__stage">
{this.props.autoPlay && (
<CarouselPlayToggle stop={this.props.autoPlay === 'stop'} />
)}
<div
className="slds-carousel__panels"
style={{
transform: `translateX(-${(this.props.panelActive - 3) * 100}%)`
}}
>
<CarouselPanel
isActive={this.props.panelActive === '1'}
id={contentId01}
indicatorId={indicatorId01}
title="Visit App Exchange"
description="Extend Salesforce with the #1 business marketplace."
src="/assets/images/carousel/carousel-01.jpg"
/>
<CarouselPanel
isActive={this.props.panelActive === '2'}
id={contentId02}
indicatorId={indicatorId02}
title="Click to Customize"
description="Use the Object Manager to add fields, build layouts, and more."
src="/assets/images/carousel/carousel-02.jpg"
/>
<CarouselPanel
isActive={this.props.panelActive === '3'}
id={contentId03}
indicatorId={indicatorId03}
title="Download SalesforceA"
description="Get the mobile app that's just for Salesforce admins."
src="/assets/images/carousel/carousel-03.jpg"
/>
</div>
<ul className="slds-carousel__indicators" role="tablist">
<CarouselIndicator
isActive={this.props.panelActive === '1'}
id={indicatorId01}
contentId={contentId01}
title="Visit App Exchange tab"
/>
<CarouselIndicator
isActive={this.props.panelActive === '2'}
id={indicatorId02}
contentId={contentId02}
title="Click to Customize tab"
/>
<CarouselIndicator
isActive={this.props.panelActive === '3'}
id={indicatorId03}
contentId={contentId03}
title="Download SalesforceA tab"
/>
</ul>
</div>
</div>
);
}
}
export default Carousel;
|