office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
207 lines • 9.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var CommandBar_1 = require("office-ui-fabric-react/lib/CommandBar");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var Coachmark_1 = require("office-ui-fabric-react/lib/Coachmark");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var TeachingBubble_1 = require("office-ui-fabric-react/lib/TeachingBubble");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var CoachmarkCommandBarButton = /** @class */ (function (_super) {
tslib_1.__extends(CoachmarkCommandBarButton, _super);
function CoachmarkCommandBarButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._targetButton = React.createRef();
return _this;
}
CoachmarkCommandBarButton.prototype.render = function () {
var _a = this.props, defaultRender = _a.defaultRender, isCoachmarkVisible = _a.isCoachmarkVisible, onDismiss = _a.onDismiss, buttonProps = tslib_1.__rest(_a, ["defaultRender", "isCoachmarkVisible", "onDismiss"]);
var castButtonProps = buttonProps; // TODO fix cast
var defaultRenderElement;
if (defaultRender) {
var DefaultRender = defaultRender;
defaultRenderElement = React.createElement(DefaultRender, tslib_1.__assign({}, buttonProps));
}
else {
defaultRenderElement = React.createElement(Button_1.CommandBarButton, tslib_1.__assign({}, castButtonProps));
}
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: this._targetButton }, defaultRenderElement),
isCoachmarkVisible && (React.createElement(Coachmark_1.Coachmark, { target: this._targetButton.current, positioningContainerProps: {
directionalHint: Callout_1.DirectionalHint.bottomCenter
}, ariaAlertText: "A Coachmark has appeared", ariaDescribedBy: 'coachmark-desc1', ariaLabelledBy: 'coachmark-label1', ariaLabelledByText: 'Coachmark notification' },
React.createElement(TeachingBubble_1.TeachingBubbleContent, { headline: "Example Title", hasCloseIcon: true, closeButtonAriaLabel: "Close", onDismiss: onDismiss, ariaDescribedBy: 'example-description1', ariaLabelledBy: 'example-label1' }, "Welcome to the land of Coachmarks!")))));
};
return CoachmarkCommandBarButton;
}(Utilities_1.BaseComponent));
var IndividualCommandBarButtonAsExample = /** @class */ (function (_super) {
tslib_1.__extends(IndividualCommandBarButtonAsExample, _super);
function IndividualCommandBarButtonAsExample() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// Data for CommandBar
_this._getItems = function () {
var _a, _b;
var _c = _this.props, onDismissCoachmark = _c.onDismissCoachmark, isCoachmarkVisible = _c.isCoachmarkVisible;
var customCommandBarButton = function (props) {
return React.createElement(CoachmarkCommandBarButton, tslib_1.__assign({}, props, { isCoachmarkVisible: isCoachmarkVisible, onDismiss: onDismissCoachmark }));
};
return [
{
key: 'newItem',
name: 'New',
cacheKey: 'myCacheKey',
iconProps: {
iconName: 'Add'
},
ariaLabel: 'New',
subMenuProps: {
items: [
(_a = {
key: 'emailMessage',
name: 'Email message',
iconProps: {
iconName: 'Mail'
}
},
_a['data-automation-id'] = 'newEmailButton',
_a),
{
key: 'calendarEvent',
name: 'Calendar event',
iconProps: {
iconName: 'Calendar'
}
}
]
}
},
(_b = {
key: 'upload',
name: 'Upload',
iconProps: {
iconName: 'Upload'
},
href: 'https://dev.office.com/fabric'
},
_b['data-automation-id'] = 'uploadButton',
_b),
{
key: 'share',
name: 'Share',
iconProps: {
iconName: 'Share'
},
commandBarButtonAs: customCommandBarButton,
onClick: function () { return console.log('Share'); }
},
{
key: 'download',
name: 'Download',
iconProps: {
iconName: 'Download'
},
onClick: function () { return console.log('Download'); }
}
];
};
_this.getOverlflowItems = function () {
return [
{
key: 'move',
name: 'Move to...',
onClick: function () { return console.log('Move to'); },
iconProps: {
iconName: 'MoveToFolder'
}
},
{
key: 'copy',
name: 'Copy to...',
onClick: function () { return console.log('Copy to'); },
iconProps: {
iconName: 'Copy'
}
},
{
key: 'rename',
name: 'Rename...',
onClick: function () { return console.log('Rename'); },
iconProps: {
iconName: 'Edit'
}
}
];
};
_this.getFarItems = function () {
return [
{
key: 'sort',
name: 'Sort',
ariaLabel: 'Sort',
iconProps: {
iconName: 'SortLines'
},
onClick: function () { return console.log('Sort'); }
},
{
key: 'tile',
name: 'Grid view',
ariaLabel: 'Grid view',
iconProps: {
iconName: 'Tiles'
},
iconOnly: true,
onClick: function () { return console.log('Tiles'); }
},
{
key: 'info',
name: 'Info',
ariaLabel: 'Info',
iconProps: {
iconName: 'Info'
},
iconOnly: true,
onClick: function () { return console.log('Info'); }
}
];
};
return _this;
}
IndividualCommandBarButtonAsExample.prototype.render = function () {
return (React.createElement(CommandBar_1.CommandBar, { overflowButtonProps: {
ariaLabel: 'More commands',
menuProps: {
items: [],
isBeakVisible: true,
beakWidth: 20,
gapSpace: 10,
directionalHint: Callout_1.DirectionalHint.topCenter
}
}, items: this._getItems(), overflowItems: this.getOverlflowItems(), farItems: this.getFarItems(), ariaLabel: 'Use left and right arrow keys to navigate between commands' }));
};
return IndividualCommandBarButtonAsExample;
}(React.Component));
exports.IndividualCommandBarButtonAsExample = IndividualCommandBarButtonAsExample;
var IndividualCommandBarButtonAsExampleWrapper = /** @class */ (function (_super) {
tslib_1.__extends(IndividualCommandBarButtonAsExampleWrapper, _super);
function IndividualCommandBarButtonAsExampleWrapper(props) {
var _this = _super.call(this, props) || this;
_this._onDismissCoachmark = function () {
_this.setState({
isCoachmarkVisible: false
});
};
_this.state = {
isCoachmarkVisible: true
};
return _this;
}
IndividualCommandBarButtonAsExampleWrapper.prototype.render = function () {
var isCoachmarkVisible = this.state.isCoachmarkVisible;
return React.createElement(IndividualCommandBarButtonAsExample, { onDismissCoachmark: this._onDismissCoachmark, isCoachmarkVisible: isCoachmarkVisible });
};
return IndividualCommandBarButtonAsExampleWrapper;
}(React.Component));
exports.IndividualCommandBarButtonAsExampleWrapper = IndividualCommandBarButtonAsExampleWrapper;
//# sourceMappingURL=CommandBar.CommandBarButtonAs.Example.js.map