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 | 12x 12x | import React from 'react'; import * as R from 'ramda'; import PropTypes from 'prop-types'; import List from '@material-ui/core/List'; import NavigateBefore from '@material-ui/icons/NavigateBefore'; import NavigateNext from '@material-ui/icons/NavigateNext'; import { withScopeList } from './with-scope-list'; import Item from './Item'; import { ExpansionPanel, Tag as InternalTag } from '../'; import { useStyles } from './styles'; import { withBlank } from '../utils'; const ScopeList = props => { const { id, label, isRtl, list = [], currentItem, changeList, changeSelection, onChangeActivePanel, activePanelId, TopElementComponent, Tag, tagValue, } = props; const classes = useStyles(); const Chip = R.isNil(Tag) ? InternalTag : Tag; return ( <ExpansionPanel isOpen={R.equals(id, activePanelId)} id={id} label={label} onChangeActivePanel={onChangeActivePanel} topElementComponent={TopElementComponent ? <TopElementComponent {...props} /> : null} tag={<Chip items={list}>{tagValue}</Chip>} > <List dense disablePadding> {currentItem ? ( <Item classes={classes} itemId={id} isRtl={isRtl} changeList={changeList} changeSelection={changeSelection} ariaLabel={isRtl ? 'navigate_next' : 'navigate_before'} NavigateIcon={isRtl ? NavigateNext : NavigateBefore} isSection divider {...currentItem} /> ) : null} {R.map(item => ( <Item key={item.id} classes={classes} itemId={id} isRtl={isRtl} changeList={changeList} changeSelection={changeSelection} ariaLabel={isRtl ? 'navigate_before' : 'navigate_next'} NavigateIcon={isRtl ? NavigateBefore : NavigateNext} {...item} /> ))(list)} </List> </ExpansionPanel> ); }; ScopeList.propTypes = { id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), label: PropTypes.string, isRtl: PropTypes.bool, list: PropTypes.array, currentItem: PropTypes.object, classes: PropTypes.object, changeList: PropTypes.func, changeSelection: PropTypes.func, onChangeActivePanel: PropTypes.func, activePanelId: PropTypes.string, TopElementComponent: PropTypes.func, Tag: PropTypes.func, tagValue: PropTypes.node, }; export default R.compose( withBlank(({ items = [], isBlank }) => ({ isBlank: R.or(R.isEmpty(items), isBlank) })), withScopeList, )(ScopeList); |