@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
93 lines • 7.49 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react", "office-ui-fabric-react/lib/components/CommandBar/examples/data", "@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example", "../../Foundation", "./Themes", "./DialogExample"], function (require, exports, tslib_1, React, office_ui_fabric_react_1, data_1, CollapsibleSection_Recursive_Example_1, Foundation_1, Themes_1, DialogExample_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ThemingExample = /** @class */ (function (_super) {
tslib_1.__extends(ThemingExample, _super);
function ThemingExample(props) {
var _this = _super.call(this, props) || this;
_this.toggleBody = function () {
_this.setState(function (state) { return _this.setState({ bodyToggle: !state.bodyToggle }); });
};
_this.toggleSide = function () {
_this.setState(function (state) { return _this.setState({ sideToggle: !state.sideToggle }); });
};
_this.toggleTop = function () {
_this.setState(function (state) { return _this.setState({ topToggle: !state.topToggle }); });
};
_this.state = {
bodyToggle: false,
sideToggle: false,
topToggle: false
};
return _this;
}
/**
* Render various components only using scheme names (no Customizers.)
*/
ThemingExample.prototype._renderSchemedComponents = function () {
var bodyScheme = this.state.bodyToggle ? 'soft' : 'neutral';
var sideScheme = this.state.sideToggle ? 'neutral' : 'strong';
var topScheme = this.state.topToggle ? 'strong' : 'soft';
var bodyCaption = 'Scheme: ' + bodyScheme;
var sideCaption = 'Scheme: ' + sideScheme;
var topCaption = 'Scheme: ' + topScheme;
// TODO: Even though this styles function is the same for all regions, it has to be provided whenever the scheme
// is changed to apply the new semanticColors. Is this the best way we can do this?
return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, gap: 10 },
React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: true, styles: { root: { width: '33%', maxWidth: '33%' } } },
React.createElement(Foundation_1.ThemeProvider, { scheme: sideScheme },
React.createElement(office_ui_fabric_react_1.Stack, { styles: Themes_1.regionStyles, gap: 10, padding: 5 },
React.createElement(office_ui_fabric_react_1.Text, null, sideCaption),
React.createElement(office_ui_fabric_react_1.Toggle, { offText: sideCaption, onText: sideCaption, onChange: this.toggleSide }),
React.createElement(CollapsibleSection_Recursive_Example_1.CollapsibleSectionRecursiveExample, null)))),
React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: true, styles: { root: { height: 'auto' } } },
React.createElement(office_ui_fabric_react_1.Stack, { grow: true, verticalFill: true },
React.createElement(Foundation_1.ThemeProvider, { scheme: topScheme },
React.createElement(office_ui_fabric_react_1.Stack, { styles: Themes_1.regionStyles, gap: 10, padding: 5 },
React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(office_ui_fabric_react_1.Text, null, topCaption),
React.createElement(office_ui_fabric_react_1.Toggle, { offText: topCaption, onText: topCaption, onChange: this.toggleTop })),
React.createElement(office_ui_fabric_react_1.CommandBar, { items: data_1.items, overflowItems: data_1.overflowItems, farItems: data_1.farItems }))),
React.createElement(Foundation_1.ThemeProvider, { scheme: bodyScheme },
React.createElement(office_ui_fabric_react_1.Stack, { styles: Themes_1.regionStyles, verticalFill: true, padding: 5 },
React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(office_ui_fabric_react_1.Text, null, bodyCaption),
React.createElement(office_ui_fabric_react_1.Toggle, { offText: bodyCaption, onText: bodyCaption, onChange: this.toggleBody })),
React.createElement(Foundation_1.ThemeProvider, { scheme: "default" },
React.createElement(office_ui_fabric_react_1.Stack.Item, null,
React.createElement(DialogExample_1.DialogExample, { buttonText: "Default Theme" }))),
React.createElement(Foundation_1.ThemeProvider, { scheme: "strong" },
React.createElement(office_ui_fabric_react_1.Stack.Item, null,
React.createElement(DialogExample_1.DialogExample, { buttonText: "Strong Scheme" }))),
React.createElement(Foundation_1.ThemeProvider, { scheme: "soft" },
React.createElement(office_ui_fabric_react_1.Stack.Item, null,
React.createElement(DialogExample_1.DialogExample, { buttonText: "Soft Scheme" }))),
React.createElement(DialogExample_1.DialogExample, { buttonText: "Inherited Scheme" })))))));
};
return ThemingExample;
}(React.Component));
exports.ThemingExample = ThemingExample;
var ThemingSchemesVariantExample = /** @class */ (function (_super) {
tslib_1.__extends(ThemingSchemesVariantExample, _super);
function ThemingSchemesVariantExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ThemingSchemesVariantExample.prototype.render = function () {
return React.createElement(office_ui_fabric_react_1.Customizer, { settings: { theme: Themes_1.schemeThemeVariants } }, this._renderSchemedComponents());
};
return ThemingSchemesVariantExample;
}(ThemingExample));
exports.ThemingSchemesVariantExample = ThemingSchemesVariantExample;
var ThemingSchemesCustomExample = /** @class */ (function (_super) {
tslib_1.__extends(ThemingSchemesCustomExample, _super);
function ThemingSchemesCustomExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ThemingSchemesCustomExample.prototype.render = function () {
return React.createElement(office_ui_fabric_react_1.Customizer, { settings: { theme: Themes_1.schemeThemeCustom } }, this._renderSchemedComponents());
};
return ThemingSchemesCustomExample;
}(ThemingExample));
exports.ThemingSchemesCustomExample = ThemingSchemesCustomExample;
});
//# sourceMappingURL=Theming.Schemes.Example.js.map