@sap-ux/ui-components
Version:
SAP UI Components Library
114 lines • 3.76 kB
JavaScript
import React from 'react';
import { GroupedList } from '@fluentui/react';
import { UiIcons } from '../Icons.js';
import './UIList.scss';
/**
* UIList component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
*
* @exports
* @class UIList
* @extends {React.Component<ListProps, {}>}
*/
export class UIList extends React.Component {
/**
* Initializes component properties.
*
* @param {ListProps} props
*/
constructor(props) {
super(props);
this.onGroupHeaderClick = (group) => {
this.props.onSelect(group);
};
}
/**
* @returns {JSX.Element}
*/
render() {
const HeaderStyles = () => ({
...{
root: [
{
cursor: 'pointer',
padding: '0 10px 0 10px',
selectors: {
'&:hover': {
backgroundColor: 'var(--vscode-dropdown-background)',
color: 'var(--vscode-dropdown-foreground)'
}
}
}
],
groupHeaderContainer: {
height: 20
},
expandIsCollapsed: {
height: 16
},
expand: [
{
height: 20,
width: 30,
selectors: {
'&:hover': {
backgroundColor: 'var(--vscode-dropdown-background)',
color: 'var(--vscode-dropdown-foreground)'
},
'&:active': {
backgroundColor: 'var(--vscode-dropdown-background)',
color: 'var(--vscode-dropdown-foreground)'
}
}
}
],
title: {
fontSize: 13,
fontWeight: 'normal',
paddingLeft: 0,
height: 20,
color: 'var(--vscode-settings-textInputForeground)'
}
}
});
const HeaderProps = {
...{
root: {},
expandButtonIcon: UiIcons.ArrowRight,
expandButtonProps: {
style: {
width: 20,
paddingRight: 5
}
},
indentWidth: 10,
styles: HeaderStyles,
onGroupHeaderClick: this.onGroupHeaderClick
}
};
const GroupeListStyles = () => ({
...{
root: [
{
color: 'var(--vscode-dropdown-foreground)',
paddingTop: 10,
paddingBottom: 10,
selectors: {
'.ms-List-cell': {
minHeight: 20
}
}
}
]
}
});
const GroupProps = {
headerProps: HeaderProps,
isAllGroupsCollapsed: true,
...this.props.groupProps
};
const ListProps = {};
return (React.createElement(GroupedList, { ...this.props, className: "uiList", selectionMode: 0, compact: true, styles: GroupeListStyles, groupProps: GroupProps, listProps: ListProps }));
}
}
//# sourceMappingURL=UIList.js.map