@sap-ux/ui-components
Version:
SAP UI Components Library
121 lines • 4.07 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIList = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const Icons_1 = require("../Icons");
require("./UIList.scss");
/**
* UIList component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
*
* @exports
* @class UIList
* @extends {React.Component<ListProps, {}>}
*/
class UIList extends react_1.default.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: Icons_1.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_1.default.createElement(react_2.GroupedList, { ...this.props, className: "uiList", selectionMode: 0, compact: true, styles: GroupeListStyles, groupProps: GroupProps, listProps: ListProps }));
}
}
exports.UIList = UIList;
//# sourceMappingURL=UIList.js.map