How to use @rmwc/list - 10 common examples
To help you get started, we’ve selected a few @rmwc/list examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jamesmfriedman / rmwc / src / menu / menu.tsx View on Github 
handleKeydown(evt: React.KeyboardEvent & KeyboardEvent) {
this.props.onKeyDown && this.props.onKeyDown(evt);
this.foundation.handleKeydown(evt);
// Jump through some hoops to find out
// that we are selecting the list item
// This is instead of trying to listen to an event on the list item
// which is what MDC does
if (
evt.which === 13 &&
evt.target instanceof Element &&
evt.target.classList.contains(List.cssClasses.LIST_ITEM_CLASS)
) {
this.foundation.handleItemAction(evt.target);
}
}value: function renderFooterSectionElement(element) {
return _react2.default.createElement(
_list.ListItem,
{ key: element.id, style: { cursor: 'pointer' }, onClick: this.triggerEvent(element.id, { handler: element.link }) },
_react2.default.createElement(
_button.Button,
{ onClick: this.triggerEvent(element.id, { handler: element.link }), style: { color: this.props.theme.footerTintColor, textAlign: 'left' } },
element.title
)
);
}
}, {value: function renderSection(section, index) {
var isSelected = section.path === this.props.section.path;
return _react2.default.createElement(
_list.ListItem,
{
key: 'section' + index,
onClick: this._onSectionSelect(section),
style: {
fontWeight: section.action ? 800 : 300,
color: isSelected ? this.props.sectionSelectedColor : section.actionColor || this.props.sectionColor
} },
_react2.default.createElement(
_list.ListItemText,
null,
section.title
)
);
}
}, {return this.props.menu.map(function (item) {
return _react2.default.createElement(
_list.ListItem,
{ key: 'menuItem' + index++ },
_react2.default.createElement(
ListItemText,
null,
item.title
)
);
});
}return this._menu.map(function (item) {
var translatedTitle = theme.headerTranslation && _this3.state.strings && _this3.state.selectedLanguage ? _this3.state.strings[_this3.state.selectedLanguage]['title' + index] : item.title;
return _react2.default.createElement(
_list.ListItem,
{
onClick: _this3._onMenuItem(item),
key: 'menuItem' + index++ },
item.id === 'translation' ? _react2.default.createElement(_select.Select, {
label: item.title,
options: languages,
onChange: function onChange(evt) {
return _this3.changeLanguage(evt.target.value);
},
value: _this3.state.selectedLanguage,
style: {
color: theme.navigationTextButton
}
}) : _react2.default.createElement(
_list.ListItemPrimaryText,
null,value: function renderFooterSection(section) {
var _this2 = this;
return _react2.default.createElement(
'div',
{ key: 'footerSection' + section.id, style: {
marginRight: '20px'
} },
_react2.default.createElement(
_list.List,
null,
_react2.default.createElement(
_list.ListItem,
{ style: { marginLeft: '15px' } },
_react2.default.createElement(
_list.ListItemText,
{ style: { color: this.props.theme.footerHeaderColor } },
' ',
section.title,
' '
)
),
section.elements.map(function (element) {
return _this2.renderFooterSectionElement(element);
})
)
);
}
}, {value: function renderFooterSection(section) {
var _this2 = this;
return _react2.default.createElement(
'div',
{ key: 'footerSection' + section.id, style: {
marginRight: '20px'
} },
_react2.default.createElement(
_list.List,
null,
_react2.default.createElement(
_list.ListItem,
{ style: { marginLeft: '15px' } },
_react2.default.createElement(
_list.ListItemText,
{ style: { color: this.props.theme.footerHeaderColor } },
' ',
section.title,
' '
)
),
section.elements.map(function (element) {
return _this2.renderFooterSectionElement(element);
})
)value: function renderSections() {
var _this2 = this;
var index = 0;
return _react2.default.createElement(
_list.List,
null,
this.props.sections.map(function (section) {
return _this2.renderSection(section, index++);
})
);
}
}, {return _react2.default.createElement(
'div',
{ style: { display: 'flex',
flex: '1',
cursor: 'pointer',
alignSelf: 'center',
justifyContent: 'center',
width: '100vw',
backgroundColor: this.props.theme.footerBottomColor,
flexDirection: compact ? 'row' : 'column' },
onClick: function onClick() {
window.open('https://carmel.io');
}
},
_react2.default.createElement(
_list.List,
{ style: {
display: 'flex',
flex: '1',
alignSelf: 'centers',
justifyContent: 'center',
flexDirection: 'column',
textAlign: 'center'
} },
_react2.default.createElement(
_list.ListItem,
{ style: { color: this.props.theme.footerHeaderColor,
alignSelf: 'center'
} },
_react2.default.createElement(
_list.ListItemText,
null,value: function renderFooterSection(section) {
var _this2 = this;
return _react2.default.createElement(
'div',
{ key: 'footerSection' + section.id, style: {
marginRight: '20px'
} },
_react2.default.createElement(
_list.List,
null,
_react2.default.createElement(
_list.ListItem,
{ style: { marginLeft: '15px' } },
_react2.default.createElement(
_list.ListItemText,
{ style: { color: this.props.theme.footerHeaderColor } },
' ',
section.title,
' '
)
),
section.elements.map(function (element) {
return _this2.renderFooterSectionElement(element);
})
)
);
}
}, {
