office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
174 lines • 7.06 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling", "./DetailsRow.styles", "./DetailsHeader.styles"], function (require, exports, tslib_1, Styling_1, DetailsRow_styles_1, DetailsHeader_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
isActionable: 'is-actionable',
cellIsCheck: 'ms-DetailsHeader-cellIsCheck',
collapseButton: 'ms-DetailsHeader-collapseButton',
isCollapsed: 'is-collapsed',
isAllSelected: 'is-allSelected',
isSelectAllHidden: 'is-selectAllHidden',
isResizingColumn: 'is-resizingColumn',
isEmpty: 'is-empty',
isIconVisible: 'is-icon-visible',
cellSizer: 'ms-DetailsHeader-cellSizer',
isResizing: 'is-resizing',
dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',
dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',
cellTitle: 'ms-DetailsHeader-cellTitle',
cellName: 'ms-DetailsHeader-cellName',
filterChevron: 'ms-DetailsHeader-filterChevron',
gripperBarVerticalStyle: 'ms-DetailsColumn-gripperBar'
};
exports.getStyles = function (props) {
var theme = props.theme, headerClassName = props.headerClassName, iconClassName = props.iconClassName, isActionable = props.isActionable, isEmpty = props.isEmpty, isIconVisible = props.isIconVisible, isPadded = props.isPadded, isIconOnly = props.isIconOnly, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _a;
var semanticColors = theme.semanticColors, palette = theme.palette;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var colors = {
iconForegroundColor: semanticColors.bodySubtext,
headerForegroundColor: semanticColors.bodyText,
headerBackgroundColor: semanticColors.bodyBackground,
dropdownChevronForegroundColor: palette.neutralTertiary,
resizerColor: palette.neutralTertiaryAlt
};
var fadeOut = Styling_1.keyframes({
from: {
borderColor: palette.themePrimary
},
to: {
borderColor: 'transparent'
}
});
var nearIconStyle = {
color: colors.iconForegroundColor,
opacity: 1,
paddingLeft: 8
};
return {
root: [
DetailsHeader_styles_1.getCellStyles(props),
headerClassName,
isActionable && [
classNames.isActionable,
{
selectors: {
':hover': {
color: semanticColors.bodyText,
background: semanticColors.listHeaderBackgroundHovered
},
':active': {
background: semanticColors.listHeaderBackgroundPressed
}
}
}
],
isEmpty && [
classNames.isEmpty,
{
textOverflow: 'clip'
}
],
isIconVisible && classNames.isIconVisible,
isPadded && {
paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding
},
{
selectors: {
':hover i[data-icon-name="GripperBarVertical"]': {
display: 'block'
}
}
}
],
gripperBarVerticalStyle: [
{
display: 'none',
position: 'absolute',
textAlign: 'left',
color: palette.neutralTertiary,
left: 1
}
],
nearIcon: nearIconStyle,
sortIcon: [
nearIconStyle,
{
paddingLeft: 4,
position: 'relative',
top: 1
}
],
iconClassName: [
{
color: colors.iconForegroundColor,
opacity: 1
},
iconClassName
],
filterChevron: [
classNames.filterChevron,
{
color: colors.dropdownChevronForegroundColor,
paddingLeft: 4,
verticalAlign: 'middle'
}
],
cellTitle: [
classNames.cellTitle,
Styling_1.getFocusStyle(theme),
tslib_1.__assign({ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'stretch', boxSizing: 'border-box', overflow: 'hidden', padding: "0 " + cellStyleProps.cellRightPadding + "px 0 " + cellStyleProps.cellLeftPadding + "px" }, (isIconOnly
? {
alignContent: 'flex-end',
maxHeight: '100%',
flexWrap: 'wrap-reverse'
}
: {}))
],
cellName: [
classNames.cellName,
{
flex: '0 1 auto',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
isIconOnly && {
selectors: {
$nearIcon: {
paddingLeft: 0
}
}
}
],
cellTooltip: [
{
display: 'block',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}
],
accessibleLabel: [Styling_1.hiddenContentStyle],
borderAfterDropping: [
{
borderStyle: 'solid',
borderWidth: 1,
borderColor: palette.themePrimary,
left: -1,
lineHeight: 31,
animation: fadeOut + " 1.5s forwards"
}
],
borderWhileDragging: [
{
borderStyle: 'solid',
borderWidth: 1,
borderColor: palette.themePrimary,
animation: fadeOut + " 0.2s forwards"
}
]
};
};
});
//# sourceMappingURL=DetailsColumn.styles.js.map