@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
223 lines • 16.1 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Check", "office-ui-fabric-react/lib/Selection", "../../Utilities", "./Tile.scss", "../signals/Signal.scss", "office-ui-fabric-react/lib/components/Check/Check.scss"], function (require, exports, tslib_1, React, Check_1, Selection_1, Utilities_1, TileStylesModule, SignalStylesModule, CheckStylesModule) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TileStyles = TileStylesModule;
var SignalStyles = SignalStylesModule;
var CheckStyles = CheckStylesModule;
exports.TileLayoutValues = {
nameplatePadding: 12,
largeNameplateNameHeight: 15,
smallNameplateNameHeight: 12,
nameplateMargin: 0,
largeNameplateActivityHeight: 20,
smallNameplateActivityHeight: 20,
foregroundMargin: 16,
};
exports.TileLayoutSizes = {
small: {
nameplatePadding: exports.TileLayoutValues.nameplatePadding,
nameplateNameHeight: exports.TileLayoutValues.smallNameplateNameHeight,
nameplateMargin: exports.TileLayoutValues.nameplateMargin,
nameplateActivityHeight: exports.TileLayoutValues.smallNameplateActivityHeight,
foregroundMargin: exports.TileLayoutValues.foregroundMargin,
},
large: {
nameplatePadding: exports.TileLayoutValues.nameplatePadding,
nameplateNameHeight: exports.TileLayoutValues.largeNameplateNameHeight,
nameplateMargin: exports.TileLayoutValues.nameplateMargin,
nameplateActivityHeight: exports.TileLayoutValues.largeNameplateActivityHeight,
foregroundMargin: exports.TileLayoutValues.foregroundMargin,
},
};
/**
* A tile provides a frame for a potentially-selectable item which displays its contents prominently.
*/
var Tile = /** @class */ (function (_super) {
tslib_1.__extends(Tile, _super);
function Tile(props, context) {
var _this = _super.call(this, props, context) || this;
_this._onSelectionChange = function () {
var _a = _this.props, selection = _a.selection, _b = _a.selectionIndex, selectionIndex = _b === void 0 ? -1 : _b;
var isSelected = selectionIndex > -1 && !!selection && selection.isIndexSelected(selectionIndex);
var isModal = !!selection && !!selection.isModal && selection.isModal();
_this.setState({
isSelected: isSelected,
isModal: isModal,
});
};
Utilities_1.initializeComponentRef(_this);
_this._nameId = Utilities_1.getId('Tile-name');
_this._activityId = Utilities_1.getId('Tile-activity');
_this._labelId = Utilities_1.getId('Tile-label');
_this._descriptionId = Utilities_1.getId('Tile-description');
var _a = props.selectionIndex, selectionIndex = _a === void 0 ? -1 : _a, selection = props.selection;
var isSelected = !!selection && selectionIndex > -1 && selection.isIndexSelected(selectionIndex);
var isModal = !!selection && !!selection.isModal && selection.isModal();
_this.state = {
isSelected: isSelected,
isModal: isModal,
};
_this._events = new Utilities_1.EventGroup(_this);
return _this;
}
Tile.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
var _a = this.props, selection = _a.selection, selectionIndex = _a.selectionIndex;
var nextSelection = nextProps.selection, _b = nextProps.selectionIndex, nextSelectionIndex = _b === void 0 ? -1 : _b;
if (selection !== nextSelection || selectionIndex !== nextSelectionIndex) {
var isSelected = !!nextSelection && nextSelectionIndex > -1 && nextSelection.isIndexSelected(nextSelectionIndex);
var isModal = !!nextSelection && nextSelection.isModal && nextSelection.isModal();
this.setState({
isSelected: isSelected,
isModal: isModal,
});
}
};
Tile.prototype.componentDidMount = function () {
var selection = this.props.selection;
if (selection) {
this._events.on(selection, Selection_1.SELECTION_CHANGE, this._onSelectionChange);
}
};
Tile.prototype.componentDidUpdate = function (previousProps) {
var selection = this.props.selection;
var previousSelection = previousProps.selection;
if (selection !== previousSelection) {
if (previousSelection) {
this._events.off(previousSelection);
}
if (selection) {
this._events.on(selection, Selection_1.SELECTION_CHANGE, this._onSelectionChange);
}
}
};
Tile.prototype.componentWillUnmount = function () {
this._events.dispose();
};
Tile.prototype.render = function () {
var _a;
var _b = this.props, children = _b.children, _c = _b.selectionIndex, selectionIndex = _c === void 0 ? -1 : _c, _d = _b.invokeSelection, invokeSelection = _d === void 0 ? false : _d, selection = _b.selection, background = _b.background, foreground = _b.foreground, _e = _b.showBackgroundFrame, showBackgroundFrame = _e === void 0 ? false : _e, _f = _b.showForegroundFrame, showForegroundFrame = _f === void 0 ? false : _f, _g = _b.hideBackground, hideBackground = _g === void 0 ? false : _g, _h = _b.hideForeground, hideForeground = _h === void 0 ? false : _h, itemName = _b.itemName, itemActivity = _b.itemActivity, componentRef = _b.componentRef, className = _b.className, _j = _b.tileSize, tileSize = _j === void 0 ? 'large' : _j, contentSize = _b.contentSize, ariaLabel = _b.ariaLabel, descriptionAriaLabel = _b.descriptionAriaLabel, href = _b.href, onClick = _b.onClick, download = _b.download, hrefLang = _b.hrefLang, media = _b.media, rel = _b.rel, target = _b.target, isFluentStyling = _b.isFluentStyling, ariaLabelSelected = _b.ariaLabelSelected, nameplateOnlyOnHover = _b.nameplateOnlyOnHover, _k = _b.disabled, disabled = _k === void 0 ? false : _k, divProps = tslib_1.__rest(_b, ["children", "selectionIndex", "invokeSelection", "selection", "background", "foreground", "showBackgroundFrame", "showForegroundFrame", "hideBackground", "hideForeground", "itemName", "itemActivity", "componentRef", "className", "tileSize", "contentSize", "ariaLabel", "descriptionAriaLabel", "href", "onClick", "download", "hrefLang", "media", "rel", "target", "isFluentStyling", "ariaLabelSelected", "nameplateOnlyOnHover", "disabled"]);
var _l = this.state, _m = _l.isSelected, isSelected = _m === void 0 ? false : _m, _o = _l.isModal, isModal = _o === void 0 ? false : _o;
var _p = this.props.isSelectable, isSelectable = _p === void 0 ? !disabled && !!selection && selectionIndex > -1 : _p;
var isInvokable = (!!href || !!onClick || !!invokeSelection) && !isModal;
var ariaLabelWithSelectState = isSelected && ariaLabelSelected ? ariaLabel + ", " + ariaLabelSelected : ariaLabel;
var content = (React.createElement(React.Fragment, null,
ariaLabel ? (React.createElement("span", { key: "label", id: this._labelId, className: Utilities_1.css('ms-Tile-label', TileStylesModule.label) }, ariaLabelWithSelectState)) : null,
background
? this._onRenderBackground({
background: background,
hideBackground: hideBackground,
})
: null,
foreground
? this._onRenderForeground({
foreground: foreground,
hideForeground: hideForeground,
})
: null,
itemName || itemActivity
? this._onRenderNameplate({
name: itemName,
activity: itemActivity,
onlyOnHover: !!nameplateOnlyOnHover,
})
: null));
var LinkAs = href ? 'a' : onClick ? 'button' : 'span';
var link = (React.createElement(LinkAs, { href: href, onClick: onClick, download: download, hrefLang: hrefLang, media: media, target: target, rel: rel === undefined ? (href && target ? 'noopener' : undefined) : rel, ref: this.props.linkRef, "data-selection-invoke": isInvokable && selectionIndex > -1 ? true : undefined, className: Utilities_1.css('ms-Tile-link', TileStyles.link) }, content));
return (React.createElement("div", tslib_1.__assign({ "aria-selected": isSelected }, Utilities_1.getNativeProps(divProps, Utilities_1.divProperties), { "aria-labelledby": ariaLabel ? this._labelId : this._nameId, "aria-describedby": ariaLabelWithSelectState || descriptionAriaLabel ? this._descriptionId : this._activityId, "aria-disabled": disabled || undefined, className: Utilities_1.css('ms-Tile', className, TileStyles.tile, (_a = {},
_a["ms-Tile--isSmall " + TileStyles.isSmall] = tileSize === 'small',
_a["ms-Tile--isLarge " + TileStyles.isLarge] = tileSize === 'large',
_a["ms-Tile--hasBackgroundFrame " + TileStyles.hasBackgroundFrame] = showBackgroundFrame,
_a["ms-Tile--hasForegroundFrame " + TileStyles.hasForegroundFrame] = showForegroundFrame,
_a["ms-Tile--isSelected " + TileStyles.selected + " " + SignalStyles.selected] = isSelected,
_a["ms-Tile--isSelectable " + TileStyles.selectable] = isSelectable,
_a["ms-Tile--hasBackground " + TileStyles.hasBackground] = !!background,
_a[SignalStyles.dark] = !!background && !hideBackground,
_a["ms-Tile--showBackground " + TileStyles.showBackground] = !hideBackground,
_a["ms-Tile--invokable " + TileStyles.invokable] = isInvokable,
_a["ms-Tile--uninvokable " + TileStyles.uninvokable] = !isInvokable,
_a["ms-Tile--isDisabled " + TileStyles.disabled] = disabled,
_a["ms-Tile--showCheck " + TileStyles.showCheck] = isModal,
_a["ms-Tile--isFluentStyling " + TileStyles.isFluentStyling] = isFluentStyling,
_a)), "data-selection-disabled": disabled || undefined, "data-is-focusable": true, "data-is-sub-focuszone": true, "data-disable-click-on-enter": true, "data-selection-index": selectionIndex > -1 ? selectionIndex : undefined, "data-selection-touch-invoke": isInvokable && selectionIndex > -1 ? true : undefined }),
link,
descriptionAriaLabel ? (React.createElement("span", { key: "description", role: "presentation", hidden: true, id: this._descriptionId }, descriptionAriaLabel)) : null,
isSelectable
? this._onRenderCheck({
isSelected: isSelected,
})
: null));
};
Tile.prototype._onRenderBackground = function (_a) {
var _b;
var background = _a.background, hideBackground = _a.hideBackground;
var finalBackground = typeof background === 'function' ? background(getTileLayoutFromProps(this.props)) : background;
return finalBackground ? (React.createElement("span", { key: "background", className: Utilities_1.css('ms-Tile-background', TileStyles.background, (_b = {},
_b["ms-Tile-background--hide " + TileStyles.backgroundHide] = hideBackground,
_b)) }, finalBackground)) : null;
};
Tile.prototype._onRenderForeground = function (_a) {
var _b;
var foreground = _a.foreground, hideForeground = _a.hideForeground;
var finalForeground = typeof foreground === 'function' ? foreground(getTileLayoutFromProps(this.props)) : foreground;
return finalForeground ? (React.createElement("span", { key: "foreground", role: "presentation", className: Utilities_1.css('ms-Tile-aboveNameplate', TileStyles.aboveNameplate) },
React.createElement("span", { role: "presentation", className: Utilities_1.css('ms-Tile-content', TileStyles.content) },
React.createElement("span", { role: "presentation", className: Utilities_1.css('ms-Tile-foreground', TileStyles.foreground, (_b = {},
_b["ms-Tile-foreground--hide " + TileStyles.foregroundHide] = hideForeground,
_b)) }, finalForeground)))) : null;
};
Tile.prototype._onRenderNameplate = function (_a) {
var _b, _c, _d;
var name = _a.name, activity = _a.activity, onlyOnHover = _a.onlyOnHover;
return (React.createElement("span", { key: "nameplate", className: Utilities_1.css('ms-Tile-nameplate', TileStyles.nameplate, (_b = {}, _b[TileStyles.onlyOnHover] = onlyOnHover, _b)) },
name ? (React.createElement("span", { id: this._nameId, className: Utilities_1.css('ms-Tile-name', TileStyles.name, (_c = {}, _c[TileStyles.onlyOnHover] = onlyOnHover, _c)) }, name)) : null,
activity ? (React.createElement("span", { id: this._activityId, className: Utilities_1.css('ms-Tile-activity', TileStyles.activity, (_d = {}, _d[TileStyles.onlyOnHover] = onlyOnHover, _d)) }, activity)) : null));
};
Tile.prototype._onRenderCheck = function (_a) {
var _b;
var isSelected = _a.isSelected;
var toggleSelectionAriaLabel = this.props.toggleSelectionAriaLabel;
return (React.createElement("span", { key: "check", role: "checkbox", "aria-label": toggleSelectionAriaLabel, className: Utilities_1.css('ms-Tile-check', TileStyles.check, CheckStyles.checkHost, (_b = {},
_b[CheckStyles.hostShowCheck] = this.state.isModal,
_b)), "data-selection-toggle": true, "aria-checked": isSelected },
React.createElement(Check_1.Check, { checked: isSelected })));
};
return Tile;
}(React.Component));
exports.Tile = Tile;
function getTileLayout(tileElement) {
var tileProps = tileElement.props;
return getTileLayoutFromProps(tileProps);
}
exports.getTileLayout = getTileLayout;
function getTileLayoutFromProps(tileProps) {
var contentSize = tileProps.contentSize, _a = tileProps.tileSize, tileSize = _a === void 0 ? 'large' : _a;
if (!contentSize) {
return {};
}
var width = contentSize.width;
var _b = exports.TileLayoutSizes[tileSize], nameplatePadding = _b.nameplatePadding, nameplateMargin = _b.nameplateMargin, nameplateActivityHeight = _b.nameplateActivityHeight, nameplateNameHeight = _b.nameplateNameHeight, foregroundMargin = _b.foregroundMargin;
var nameplateHeight = 0;
if (tileProps.itemName || tileProps.itemActivity) {
nameplateHeight += nameplatePadding * 2; // 12px top/bottom padding.
if (tileProps.itemName) {
nameplateHeight += nameplateNameHeight;
}
if (tileProps.itemActivity) {
nameplateHeight += nameplateActivityHeight + nameplateMargin;
}
}
return {
foregroundSize: {
width: width - foregroundMargin * 2,
height: contentSize.height - foregroundMargin - nameplateHeight,
},
backgroundSize: contentSize,
};
}
function renderTileWithLayout(tileElement, props) {
var Tag = tileElement.type;
return React.createElement(Tag, tslib_1.__assign({}, tileElement.props, props));
}
exports.renderTileWithLayout = renderTileWithLayout;
});
//# sourceMappingURL=Tile.js.map