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 | 14x 14x 70x 35x 9x 35x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x 2x 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 PropTypes from 'prop-types';
import classNames from 'classnames';
// local helpers and components
import _ from '../../shared/helpers';
import { Modal, ModalHeader, ModalContent } from '../modals/base/example';
// component helpers and compositional pieces
import { sampleTiles } from './helpers';
import WelcomeMatTile from './WelcomeMatTile';
import WelcomeMatContent from './WelcomeMatContent';
class WelcomeMat extends Component {
renderTiles(isCompleted) {
const { tiles, isInfoOnly } = this.props;
return tiles
.filter(tile => (tile.completed || false) === isCompleted)
.map((tile, i) => (
<WelcomeMatTile
key={`${_.uniqueId('welcome-mat-')}-${i}`}
tile={tile}
isInfoOnly={isInfoOnly}
/>
));
}
completeTileCount() {
const { tiles } = this.props;
return tiles ? tiles.filter(tile => tile.completed === true).length : 0;
}
totalTileCount() {
const { tiles } = this.props;
return tiles ? tiles.length : 0;
}
render() {
const { content, isInfoOnly, tiles } = this.props;
const uniqueId = _.uniqueId('welcome-mat-');
const welcomeMatLabelId = `${uniqueId}-label`;
const welcomeMatDescripId = `${uniqueId}-content`;
const welcomeMatClass = classNames('slds-welcome-mat', {
'slds-welcome-mat_info-only': isInfoOnly,
'slds-welcome-mat_splash': !tiles
});
const welcomeMatInfoClass = classNames('slds-welcome-mat__info', {
'slds-size_1-of-2': !!tiles,
'slds-size_1-of-1': !tiles
});
const tileContainerClasses = classNames(
'slds-welcome-mat__tiles slds-size_1-of-2',
{
'slds-welcome-mat__tiles_info-only': isInfoOnly
}
);
return (
<Modal
className="slds-modal_small"
aria-labelledby={welcomeMatLabelId}
>
<ModalHeader className="slds-modal__header_empty" />
<ModalContent id={welcomeMatDescripId}>
<div className={welcomeMatClass}>
<div className="slds-welcome-mat__content slds-grid">
<div className={welcomeMatInfoClass} tabindex="0" role="region">
<div className="slds-welcome-mat__info-content">
{content({
complete: this.completeTileCount(),
total: this.totalTileCount(),
labelId: welcomeMatLabelId
})}
</div>
</div>
{tiles && tiles.length > 0 ? (
<ul className={tileContainerClasses}>
{this.renderTiles(true)}
{this.renderTiles(false)}
</ul>
) : null}
</div>
</div>
</ModalContent>
</Modal>
);
}
}
WelcomeMat.propTypes = {
tiles: PropTypes.arrayOf(
PropTypes.shape({
symbol: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
completed: PropTypes.bool
})
),
content: PropTypes.func.isRequired,
isInfoOnly: PropTypes.bool
};
WelcomeMat.defaultProps = {
tiles: sampleTiles(),
content: ({ complete, total, labelId }) => (
<WelcomeMatContent complete={complete} total={total} labelId={labelId} />
)
};
export default WelcomeMat;
|