@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
223 lines • 13.7 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Check } from 'office-ui-fabric-react/lib/Check';
import { SELECTION_CHANGE } from 'office-ui-fabric-react/lib/Selection';
import { css, BaseComponent, getId } from '../../Utilities';
import * as TileStylesModule from './Tile.scss';
import * as SignalStylesModule from '../signals/Signal.scss';
import * as CheckStylesModule from 'office-ui-fabric-react/lib/components/Check/Check.scss';
// tslint:disable:no-any
var TileStyles = TileStylesModule;
var SignalStyles = SignalStylesModule;
var CheckStyles = CheckStylesModule;
// tslint:enable:no-any
export var TileLayoutValues = {
nameplatePadding: 12,
largeNameplateNameHeight: 15,
smallNameplateNameHeight: 12,
nameplateMargin: 0,
largeNameplateActivityHeight: 20,
smallNameplateActivityHeight: 20,
foregroundMargin: 16
};
export var TileLayoutSizes = {
small: {
nameplatePadding: TileLayoutValues.nameplatePadding,
nameplateNameHeight: TileLayoutValues.smallNameplateNameHeight,
nameplateMargin: TileLayoutValues.nameplateMargin,
nameplateActivityHeight: TileLayoutValues.smallNameplateActivityHeight,
foregroundMargin: TileLayoutValues.foregroundMargin
},
large: {
nameplatePadding: TileLayoutValues.nameplatePadding,
nameplateNameHeight: TileLayoutValues.largeNameplateNameHeight,
nameplateMargin: TileLayoutValues.nameplateMargin,
nameplateActivityHeight: TileLayoutValues.largeNameplateActivityHeight,
foregroundMargin: TileLayoutValues.foregroundMargin
}
};
/**
* A tile provides a frame for a potentially-selectable item which displays its contents prominently.
*
* @export
* @class Tile
* @extends {React.Component<ITileProps, ITileState>}
*/
var Tile = /** @class */ (function (_super) {
tslib_1.__extends(Tile, _super);
// tslint:disable-next-line:no-any
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
});
};
_this._nameId = getId('Tile-name');
_this._activityId = getId('Tile-activity');
_this._labelId = getId('Tile-label');
_this._descriptionId = 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
};
return _this;
}
Tile.prototype.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_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_CHANGE, this._onSelectionChange);
}
}
};
Tile.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.selectionIndex, selectionIndex = _b === void 0 ? -1 : _b, _c = _a.invokeSelection, invokeSelection = _c === void 0 ? false : _c, selection = _a.selection, background = _a.background, foreground = _a.foreground, _d = _a.showBackgroundFrame, showBackgroundFrame = _d === void 0 ? false : _d, _e = _a.showForegroundFrame, showForegroundFrame = _e === void 0 ? false : _e, _f = _a.hideBackground, hideBackground = _f === void 0 ? false : _f, _g = _a.hideForeground, hideForeground = _g === void 0 ? false : _g, itemName = _a.itemName, itemActivity = _a.itemActivity, componentRef = _a.componentRef, className = _a.className, _h = _a.tileSize, tileSize = _h === void 0 ? 'large' : _h, contentSize = _a.contentSize, ariaLabel = _a.ariaLabel, descriptionAriaLabel = _a.descriptionAriaLabel, href = _a.href, onClick = _a.onClick, divProps = tslib_1.__rest(_a, ["children", "selectionIndex", "invokeSelection", "selection", "background", "foreground", "showBackgroundFrame", "showForegroundFrame", "hideBackground", "hideForeground", "itemName", "itemActivity", "componentRef", "className", "tileSize", "contentSize", "ariaLabel", "descriptionAriaLabel", "href", "onClick"]);
var _j = this.state, _k = _j.isSelected, isSelected = _k === void 0 ? false : _k, _l = _j.isModal, isModal = _l === void 0 ? false : _l;
var isSelectable = !!selection && selectionIndex > -1;
var isInvokable = (!!href || !!onClick || !!invokeSelection) && !isModal;
var content = (React.createElement(React.Fragment, null,
ariaLabel ? (React.createElement("span", { key: "label", id: this._labelId, className: css('ms-Tile-label', TileStylesModule.label) }, ariaLabel)) : 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
})
: null));
var LinkAs = href ? 'a' : 'button';
var link = (React.createElement(LinkAs, { href: href, onClick: onClick, ref: this.props.linkRef, "data-selection-invoke": isInvokable && selectionIndex > -1 ? true : undefined, className: css('ms-Tile-link', TileStyles.link) }, content));
return (React.createElement("div", tslib_1.__assign({ "aria-selected": isSelected }, divProps, { "aria-labelledby": ariaLabel ? this._labelId : this._nameId, "aria-describedby": descriptionAriaLabel ? this._descriptionId : this._activityId, className: css('ms-Tile', className, TileStyles.tile, (_m = {},
_m["ms-Tile--isSmall " + TileStyles.isSmall] = tileSize === 'small',
_m["ms-Tile--isLarge " + TileStyles.isLarge] = tileSize === 'large',
_m["ms-Tile--hasBackgroundFrame " + TileStyles.hasBackgroundFrame] = showBackgroundFrame,
_m["ms-Tile--hasForegroundFrame " + TileStyles.hasForegroundFrame] = showForegroundFrame,
_m["ms-Tile--isSelected " + TileStyles.selected + " " + SignalStyles.selected] = isSelected,
_m["ms-Tile--isSelectable " + TileStyles.selectable] = isSelectable,
_m["ms-Tile--hasBackground " + TileStyles.hasBackground] = !!background,
_m[SignalStyles.dark] = !!background && !hideBackground,
_m["ms-Tile--showBackground " + TileStyles.showBackground] = !hideBackground,
_m["ms-Tile--invokable " + TileStyles.invokable] = isInvokable,
_m["ms-Tile--uninvokable " + TileStyles.uninvokable] = !isInvokable,
_m["ms-Tile--isDisabled " + TileStyles.disabled] = !isSelectable && !isInvokable,
_m["ms-Tile--showCheck " + TileStyles.showCheck] = isModal,
_m)), "data-is-focusable": true, "data-is-sub-focuszone": true, "data-disable-click-on-enter": true, "data-selection-index": selectionIndex > -1 ? selectionIndex : undefined }),
link,
descriptionAriaLabel ? (React.createElement("span", { key: "description", id: this._descriptionId, className: css('ms-Tile-description', TileStylesModule.description) }, descriptionAriaLabel)) : null,
isSelectable
? this._onRenderCheck({
isSelected: isSelected
})
: null));
var _m;
};
Tile.prototype._onRenderBackground = function (_a) {
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: css('ms-Tile-background', TileStyles.background, (_b = {},
_b["ms-Tile-background--hide " + TileStyles.backgroundHide] = hideBackground,
_b)) }, finalBackground)) : null;
var _b;
};
Tile.prototype._onRenderForeground = function (_a) {
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: css('ms-Tile-aboveNameplate', TileStyles.aboveNameplate) },
React.createElement("span", { role: "presentation", className: css('ms-Tile-content', TileStyles.content) },
React.createElement("span", { role: "presentation", className: css('ms-Tile-foreground', TileStyles.foreground, (_b = {},
_b["ms-Tile-foreground--hide " + TileStyles.foregroundHide] = hideForeground,
_b)) }, finalForeground)))) : null;
var _b;
};
Tile.prototype._onRenderNameplate = function (_a) {
var name = _a.name, activity = _a.activity;
return (React.createElement("span", { key: "nameplate", className: css('ms-Tile-nameplate', TileStyles.nameplate) },
name ? (React.createElement("span", { id: this._nameId, className: css('ms-Tile-name', TileStyles.name) }, name)) : null,
activity ? (React.createElement("span", { id: this._activityId, className: css('ms-Tile-activity', TileStyles.activity) }, activity)) : null));
};
Tile.prototype._onRenderCheck = function (_a) {
var isSelected = _a.isSelected;
var toggleSelectionAriaLabel = this.props.toggleSelectionAriaLabel;
return (React.createElement("span", { key: "check", role: "checkbox", "aria-label": toggleSelectionAriaLabel, className: 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, { checked: isSelected })));
var _b;
};
return Tile;
}(BaseComponent));
export { Tile };
export function getTileLayout(tileElement) {
var tileProps = tileElement.props;
return getTileLayoutFromProps(tileProps);
}
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 = 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
};
}
export function renderTileWithLayout(tileElement, props) {
var Tag = tileElement.type;
return React.createElement(Tag, tslib_1.__assign({}, tileElement.props, props));
}
//# sourceMappingURL=Tile.js.map