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 | 2x 2x 10x 5x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x | // 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 PropTypes from 'prop-types';
import _ from '../../shared/helpers';
// component imports
import { Modal, ModalHeader, ModalContent } from '../modals/base/example';
import WelcomeMatTileDeprecated from './WelcomeMatTileDeprecated';
import WelcomeMatContentDeprecated from './WelcomeMatContentDeprecated';
import { sampleTiles } from './helpers';
class WelcomeMatDeprecated extends Component {
renderTiles(isCompleted) {
const { tiles } = this.props;
return tiles
.filter(tile => (tile.completed || false) === isCompleted)
.map((tile, i) => <WelcomeMatTileDeprecated key={i} tile={tile} />);
}
completeTileCount() {
return this.props.tiles.filter(tile => tile.completed === true).length;
}
totalTileCount() {
return this.props.tiles.length;
}
render() {
const { content } = this.props;
const uniqueId = _.uniqueId('welcome-mat-');
const welcomeMatLabelId = `${uniqueId}-label`;
const welcomeMatDescipId = `${uniqueId}-content`;
return (
<Modal
className="slds-welcome-mat"
aria-labelledby={welcomeMatLabelId}
aria-describedby={welcomeMatDescipId}
>
<ModalHeader className="slds-modal__header_empty" />
<ModalContent
className="slds-welcome-mat__content slds-grid"
aria-describedby={welcomeMatDescipId}
>
<div className="slds-welcome-mat__info slds-size_1-of-2" tabindex="0" role="region">
<div className="slds-welcome-mat__info-content">
{content({
complete: this.completeTileCount(),
total: this.totalTileCount(),
labelId: welcomeMatLabelId
})}
</div>
</div>
<ul className="slds-welcome-mat__tiles slds-size_1-of-2 slds-p-around_medium">
{this.renderTiles(true)}
{this.renderTiles(false)}
</ul>
</ModalContent>
</Modal>
);
}
}
WelcomeMatDeprecated.propTypes = {
tiles: PropTypes.arrayOf(
PropTypes.shape({
symbol: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
completed: PropTypes.bool
})
).isRequired,
content: PropTypes.func.isRequired
};
WelcomeMatDeprecated.defaultProps = {
tiles: sampleTiles(),
content: ({ complete, total, labelId }) => (
<WelcomeMatContentDeprecated
complete={complete}
total={total}
labelId={labelId}
/>
)
};
export default WelcomeMatDeprecated;
|