@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
105 lines • 5.4 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { css } from '../../Utilities';
import * as FolderCoverStylesModule from './FolderCover.scss';
import * as SignalStylesModule from '../signals/Signal.scss';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
// tslint:disable-next-line:no-any
var FolderCoverStyles = FolderCoverStylesModule;
// tslint:disable-next-line:no-any
var SignalStyles = SignalStylesModule;
var FolderCoverLayoutValues = {
smallWidth: 72,
smallHeight: 52,
largeWidth: 112,
largeHeight: 80,
contentPadding: 4
};
var SIZES = {
small: {
width: FolderCoverLayoutValues.smallWidth - FolderCoverLayoutValues.contentPadding * 2,
height: FolderCoverLayoutValues.smallHeight - FolderCoverLayoutValues.contentPadding * 2
},
large: {
width: FolderCoverLayoutValues.largeWidth - FolderCoverLayoutValues.contentPadding * 2,
height: FolderCoverLayoutValues.largeHeight - FolderCoverLayoutValues.contentPadding * 2
}
};
var ASSETS = {
small: {
default: {
back: "folderCoverSmallDefaultBack",
front: "folderCoverSmallDefaultFront"
},
media: {
back: "folderCoverSmallMediaBack",
front: "folderCoverSmallMediaFront"
}
},
large: {
default: {
back: "folderCoverLargeDefaultBack",
front: "folderCoverLargeDefaultFront"
},
media: {
back: "folderCoverLargeMediaBack",
front: "folderCoverLargeMediaFront"
}
}
};
var FolderCover = /** @class */ (function (_super) {
tslib_1.__extends(FolderCover, _super);
function FolderCover() {
return _super !== null && _super.apply(this, arguments) || this;
}
FolderCover.prototype.render = function () {
var _a = this.props, _b = _a.folderCoverSize, size = _b === void 0 ? 'large' : _b, _c = _a.folderCoverType, type = _c === void 0 ? 'default' : _c, _d = _a.hideContent, hideContent = _d === void 0 ? false : _d, metadata = _a.metadata, signal = _a.signal, children = _a.children, isFluent = _a.isFluent, divProps = tslib_1.__rest(_a, ["folderCoverSize", "folderCoverType", "hideContent", "metadata", "signal", "children", "isFluent"]);
var assets = ASSETS[size][type];
var metadataIcon = React.createElement("span", { className: css('ms-FolderCover-metadata', FolderCoverStyles.metadata) }, metadata);
var signalIcon = (React.createElement("span", { className: css('ms-FolderCover-signal', FolderCoverStyles.signal, isFluent ? SignalStyles.isFluent : SignalStyles.dark) }, signal));
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: css(FolderCoverStyles.root, (_e = {},
_e["ms-FolderCover--isSmall " + FolderCoverStyles.isSmall] = size === 'small',
_e["ms-FolderCover--isLarge " + FolderCoverStyles.isLarge] = size === 'large',
_e["ms-FolderCover--isDefault " + FolderCoverStyles.isDefault] = type === 'default',
_e["ms-FolderCover--isMedia " + FolderCoverStyles.isMedia] = type === 'media',
_e["ms-FolderCover--hideContent " + FolderCoverStyles.hideContent] = hideContent,
_e["ms-FolderCover--isFluent " + FolderCoverStyles.isFluent] = isFluent,
_e)) }),
React.createElement(Icon, { "aria-hidden": true, className: css('ms-FolderCover-back', FolderCoverStyles.back), iconName: assets.back }),
this._renderChildren({ children: children }),
React.createElement(Icon, { "aria-hidden": true, className: css('ms-FolderCover-front', FolderCoverStyles.front), iconName: assets.front }),
isFluent ? (React.createElement(React.Fragment, null,
metadataIcon,
signalIcon)) : (React.createElement(React.Fragment, null,
signalIcon,
metadataIcon))));
var _e;
};
FolderCover.prototype._renderChildren = function (_a) {
var children = _a.children;
var finalChildren = typeof children === 'function' ? children(getFolderCoverLayoutFromProps(this.props)) : children;
return finalChildren ? (React.createElement("span", { className: css('ms-FolderCover-content', FolderCoverStyles.content) },
React.createElement("span", { className: css('ms-FolderCover-frame', FolderCoverStyles.frame) }, finalChildren))) : null;
};
return FolderCover;
}(React.Component));
export { FolderCover };
export function getFolderCoverLayout(element) {
var folderCoverProps = element.props;
return getFolderCoverLayoutFromProps(folderCoverProps);
}
function getFolderCoverLayoutFromProps(folderCoverProps) {
var _a = folderCoverProps.folderCoverSize, folderCoverSize = _a === void 0 ? 'large' : _a, isFluent = folderCoverProps.isFluent;
var contentSize = tslib_1.__assign({}, SIZES[folderCoverSize]);
if (isFluent) {
contentSize.height -= 8;
}
return {
contentSize: contentSize
};
}
export function renderFolderCoverWithLayout(element, props) {
var Tag = element.type;
return React.createElement(Tag, tslib_1.__assign({}, element.props, props));
}
//# sourceMappingURL=FolderCover.js.map