office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
365 lines • 16.8 kB
JavaScript
define(["require", "exports", "tslib", "../../Styling"], function (require, exports, tslib_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GlobalClassNames = {
root: 'ms-DetailsRow',
compact: 'ms-DetailsList--Compact',
cell: 'ms-DetailsRow-cell',
cellCheck: 'ms-DetailsRow-cellCheck',
cellMeasurer: 'ms-DetailsRow-cellMeasurer',
listCellFirstChild: 'ms-List-cell:first-child',
isFocusable: "[data-is-focusable='true']",
isContentUnselectable: 'is-contentUnselectable',
isSelected: 'is-selected',
isCheckVisible: 'is-check-visible',
fields: 'ms-DetailsRow-fields'
};
exports.DEFAULT_CELL_STYLE_PROPS = {
cellLeftPadding: 12,
cellRightPadding: 8,
cellExtraRightPadding: 24
};
// Constant values
var values = {
rowHeight: 42,
compactRowHeight: 32,
rowVerticalPadding: 11,
compactRowVerticalPadding: 6,
rowShimmerLineHeight: 7,
rowShimmerIconPlaceholderHeight: 16,
rowShimmerVerticalBorder: 0,
compactRowShimmerVerticalBorder: 0
};
// Computed Values
values = tslib_1.__assign({}, values, {
rowShimmerVerticalBorder: (values.rowHeight - values.rowShimmerLineHeight) / 2,
compactRowShimmerVerticalBorder: (values.compactRowHeight - values.rowShimmerLineHeight) / 2
});
exports.getStyles = function (props) {
var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? exports.DEFAULT_CELL_STYLE_PROPS : _a;
var _b = theme.palette, neutralPrimary = _b.neutralPrimary, neutralSecondaryAlt = _b.neutralSecondaryAlt, white = _b.white, neutralSecondary = _b.neutralSecondary, neutralLighter = _b.neutralLighter, neutralLight = _b.neutralLight, neutralDark = _b.neutralDark, neutralQuaternaryAlt = _b.neutralQuaternaryAlt, black = _b.black, themePrimary = _b.themePrimary;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var colors = {
// Default
defaultHeaderTextColor: neutralPrimary,
defaultMetaTextColor: neutralSecondaryAlt,
defaultBackgroundColor: white,
// Hover
hoverTextColor: neutralPrimary,
hoverMetaTextColor: neutralSecondary,
hoverColorBackground: neutralLighter,
// Selected
selectedTextColor: neutralDark,
selectedMetaTextColor: neutralPrimary,
selectedBackgroundColor: neutralLight,
// Selected Hover
selectedHoverTextColor: black,
selectedHoverMetaTextColor: neutralDark,
selectedHoverBackgroundColor: neutralQuaternaryAlt,
// Focus
focusHeaderTextColor: black,
focusBackgroundColor: neutralQuaternaryAlt,
focusMetaTextColor: neutralDark
};
var shimmerRightBorderStyle = cellStyleProps.cellRightPadding * 4 + "px solid " + colors.defaultBackgroundColor;
var shimmerLeftBorderStyle = cellStyleProps.cellLeftPadding + "px solid " + colors.defaultBackgroundColor;
var selectedStyles = [
Styling_1.getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
classNames.isSelected,
{
color: colors.selectedMetaTextColor,
background: colors.selectedBackgroundColor,
borderBottom: "1px solid " + white,
selectors: {
'&:before': {
position: 'absolute',
display: 'block',
top: -1,
height: 1,
bottom: 0,
left: 0,
right: 0,
content: '',
borderTop: "1px solid " + white
},
// Selected State hover
'&:hover': {
background: colors.selectedHoverBackgroundColor,
selectors: {
// Selected State hover meta cell
$cell: {
color: colors.selectedHoverMetaTextColor,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
selectors: {
'> a': {
color: 'HighlightText'
}
}
},
// Selected State hover Header cell
_c['&.$isRowHeader'] = {
color: colors.selectedHoverTextColor,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_d)
},
_c)
}
}
},
// Focus state
'&:focus': {
background: colors.focusBackgroundColor,
selectors: {
// Selected State hover meta cell
$cell: (_e = {
color: colors.focusMetaTextColor
},
_e[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
selectors: {
'> a': {
color: 'HighlightText'
}
}
},
// Row header cell
_e['&.$isRowHeader'] = {
color: colors.focusHeaderTextColor,
selectors: (_f = {},
_f[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_f)
},
_e)
}
}
}
}
];
var cannotSelectStyles = [
classNames.isContentUnselectable,
{
userSelect: 'none',
cursor: 'default'
}
];
var rootCompactStyles = {
minHeight: values.compactRowHeight,
border: 0
};
var cellCompactStyles = {
minHeight: values.compactRowHeight,
paddingTop: values.compactRowVerticalPadding,
paddingBottom: values.compactRowVerticalPadding,
paddingLeft: cellStyleProps.cellLeftPadding + "px",
selectors: (_g = {},
// Masking the running shimmer background with borders
_g["&$shimmer"] = {
padding: 0,
borderLeft: shimmerLeftBorderStyle,
borderRight: shimmerRightBorderStyle,
borderTop: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
borderBottom: values.compactRowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
},
// Masking the running shimmer background with borders when it's an Icon placeholder
_g["&$shimmerIconPlaceholder"] = {
borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
borderBottom: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
borderTop: (values.compactRowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
},
_g)
};
var defaultCellStyles = [
Styling_1.getFocusStyle(theme, -1),
classNames.cell,
{
display: 'inline-block',
position: 'relative',
boxSizing: 'border-box',
minHeight: values.rowHeight,
verticalAlign: 'top',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingTop: values.rowVerticalPadding,
paddingBottom: values.rowVerticalPadding,
paddingLeft: cellStyleProps.cellLeftPadding + "px",
selectors: (_h = {
'& > button': {
maxWidth: '100%'
}
},
_h[classNames.isFocusable] = Styling_1.getFocusStyle(theme, -1, undefined, undefined, neutralSecondary, white),
_h['&$shimmer'] = {
padding: 0,
borderLeft: shimmerLeftBorderStyle,
borderRight: shimmerRightBorderStyle,
borderTop: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor,
borderBottom: values.rowShimmerVerticalBorder + "px solid " + colors.defaultBackgroundColor
},
_h['&$shimmerIconPlaceholder'] = {
borderRight: cellStyleProps.cellRightPadding + "px solid " + colors.defaultBackgroundColor,
borderBottom: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor,
borderTop: (values.rowHeight - values.rowShimmerIconPlaceholderHeight) / 2 + "px solid " + colors.defaultBackgroundColor
},
_h)
},
isSelected && {
selectors: (_j = {
'&.$isRowHeader': {
color: colors.selectedTextColor,
selectors: (_k = {},
_k[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_k)
}
},
_j[Styling_1.HighContrastSelector] = {
background: 'Highlight',
color: 'HighlightText',
'-ms-high-contrast-adjust': 'none',
selectors: {
a: {
color: 'HighlightText'
}
}
},
_j)
},
compact && cellCompactStyles
];
return {
root: [
classNames.root,
Styling_1.AnimationClassNames.fadeIn400,
droppingClassName,
isCheckVisible && classNames.isCheckVisible,
Styling_1.getFocusStyle(theme, 0, undefined, undefined, isSelected ? neutralSecondary : themePrimary, white),
{
borderBottom: "1px solid " + neutralLighter,
background: colors.defaultBackgroundColor,
color: colors.defaultMetaTextColor,
display: 'inline-flex',
minWidth: '100%',
minHeight: values.rowHeight,
whiteSpace: 'nowrap',
padding: 0,
boxSizing: 'border-box',
verticalAlign: 'top',
textAlign: 'left',
selectors: (_l = {},
_l[classNames.listCellFirstChild + " &:before"] = {
display: 'none'
},
_l['&:hover'] = {
background: colors.hoverColorBackground,
color: colors.hoverMetaTextColor
},
_l['&:hover $check'] = {
opacity: 1
},
_l)
},
isSelected && selectedStyles,
!canSelect && cannotSelectStyles,
compact && rootCompactStyles,
className
],
cellUnpadded: [
{
paddingRight: cellStyleProps.cellRightPadding + "px"
}
],
cellPadded: [
{
paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding + "px",
selectors: {
'&.$checkCell': {
paddingRight: 0
}
}
}
],
cell: defaultCellStyles,
cellMeasurer: [
classNames.cellMeasurer,
{
overflow: 'visible',
whiteSpace: 'nowrap'
}
],
checkCell: [
defaultCellStyles,
classNames.cellCheck,
checkboxCellClassName,
{
padding: 0,
// Ensure that the check cell covers the top border of the cell.
// This ensures the click target does not leave a spot which would
// cause other items to be deselected.
paddingTop: 1,
marginTop: -1,
flexShrink: 0
}
],
checkCover: [
{
position: 'absolute',
top: -1,
left: 0,
bottom: 0,
right: 0,
display: 'none'
},
anySelected && {
display: 'block'
}
],
fields: [
classNames.fields,
{
display: 'flex',
alignItems: 'stretch'
}
],
isRowHeader: [
{
color: colors.defaultHeaderTextColor,
fontSize: Styling_1.FontSizes.medium
}
],
isMultiline: [
defaultCellStyles,
{
whiteSpace: 'normal',
wordBreak: 'break-word',
textOverflow: 'clip'
}
],
shimmer: [],
shimmerIconPlaceholder: [],
shimmerLeftBorder: [
{
// 40px to take into account the checkbox of items if present.
borderLeft: "40px solid " + colors.defaultBackgroundColor
}
],
shimmerBottomBorder: [
{
// 1px to take into account the border-bottom when items replace shimmer lines and in default state.
borderBottom: "1px solid " + colors.defaultBackgroundColor
}
],
check: []
};
var _c, _d, _e, _f, _g, _h, _j, _k, _l;
};
});
//# sourceMappingURL=DetailsRow.styles.js.map