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 | 7x 7x 26x 26x 7x 7x | // 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 { ListboxPills, ListboxPillsItem, ListboxPill } from '../../pills';
import { StandardIcon } from '../../icons/standard/example';
import classNames from 'classnames';
class ListboxOfSelections extends Component {
constructor() {
super();
this.renderSelections = this.renderSelections.bind(this);
}
renderSelections(key) {
const selection = this.props.snapshot[key];
return (
<ListboxPillsItem key={key}>
<ListboxPill label={selection.name} tabIndex={selection.tabIndex}>
{selection.entityType && (
<StandardIcon
containerClassName="slds-pill__icon_container"
title={selection.entityType}
assistiveText={selection.entityType}
/>
)}
</ListboxPill>
</ListboxPillsItem>
);
}
render() {
const { count = 1, isExpanded = false, snapshot } = this.props;
return (
<div
className={classNames(
'slds-listbox_selection-group',
isExpanded && 'slds-is-expanded'
)}
>
{count > 2 && isExpanded !== true ? (
<span className="slds-listbox-toggle" aria-hidden>
<button className="slds-button" tabIndex="-1">
+6 more
</button>
</span>
) : null}
<ListboxPills>
{Object.keys(snapshot)
.slice(0, count)
.map(this.renderSelections)}
</ListboxPills>
</div>
);
}
}
export default ListboxOfSelections;
|