office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
61 lines • 4.53 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "./KeytipSetup", "office-ui-fabric-react/lib/Toggle"], function (require, exports, tslib_1, React, Button_1, KeytipSetup_1, Toggle_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var KeytipsButtonExample = /** @class */ (function (_super) {
tslib_1.__extends(KeytipsButtonExample, _super);
function KeytipsButtonExample(props) {
var _this = _super.call(this, props) || this;
_this._toggleDisabled = function (checked) {
_this.setState({ btnDisabled: !checked });
};
_this.state = {
btnDisabled: false
};
return _this;
}
/* tslint:disable:jsx-ban-props jsx-no-lambda */
KeytipsButtonExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("p", null, "Keytips on the same level starting with the same characters will get filtered out as you hit those keys"),
React.createElement(Button_1.DefaultButton, { keytipProps: KeytipSetup_1.keytipMap.Button, text: 'Button', onClick: function () { console.log('Button'); } }),
React.createElement(Button_1.CompoundButton, { keytipProps: KeytipSetup_1.keytipMap.CompoundButton, text: 'Compound Button', secondaryText: 'With a Keytip', onClick: function () { console.log('Compound Button'); } }),
React.createElement(Button_1.DefaultButton, { keytipProps: KeytipSetup_1.keytipMap.ButtonWithMenu, text: 'Button with Menu', onClick: function () { console.log('Button with Menu'); }, menuProps: {
items: [
{
key: 'buttonMenuItem1',
text: 'Menu Item 1',
keytipProps: KeytipSetup_1.keytipMap.ButtonMenuItem1
},
{
key: 'buttonMenuItem2',
text: 'Menu Item 2',
keytipProps: KeytipSetup_1.keytipMap.ButtonMenuItem2
}
]
} }),
React.createElement(Button_1.DefaultButton, { keytipProps: KeytipSetup_1.keytipMap.SplitButton, text: 'Split Button', split: true, onClick: function () { console.log('Split Button'); }, menuProps: {
items: [
{
key: 'splitButtonMenuButton1',
text: 'Split Button Menu Item 1',
keytipProps: KeytipSetup_1.keytipMap.SplitButtonMenuItem1
},
{
key: 'splitButtonMenuButton2',
text: 'Split Button Menu Item 2',
keytipProps: KeytipSetup_1.keytipMap.SplitButtonMenuItem2
}
]
} }),
React.createElement(Button_1.DefaultButton, { text: 'I do not have a keytip' }),
React.createElement("p", null, "A keytip can have an 'offset' prop which will position the keytip starting from the top-left corner of the element"),
React.createElement(Button_1.DefaultButton, { keytipProps: KeytipSetup_1.keytipMap.ButtonOffset, text: 'Button keytip offset 10x10', onClick: function () { console.log('Button'); } }),
React.createElement("p", null, "A keytip will become disabled when its corresponding component becomes disabled. A disabled keytip will be visible but cannot be triggered"),
React.createElement(Toggle_1.Toggle, { onText: 'Enabled', offText: 'Disabled', defaultChecked: !this.state.btnDisabled, onChanged: this._toggleDisabled }),
React.createElement(Button_1.DefaultButton, { keytipProps: KeytipSetup_1.keytipMap.DisabledButton, disabled: this.state.btnDisabled, text: (this.state.btnDisabled ? 'Disabled' : 'Enabled') + ' Button', onClick: function () { console.log('Disabled Button'); } })));
};
return KeytipsButtonExample;
}(React.Component));
exports.KeytipsButtonExample = KeytipsButtonExample;
});
//# sourceMappingURL=Keytips.Button.Example.js.map