@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
98 lines • 6.39 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { CommandBar, Customizer, Stack, Toggle, Text } from 'office-ui-fabric-react';
import { farItems, items, overflowItems } from 'office-ui-fabric-react/lib/components/CommandBar/examples/data';
// tslint:disable:max-line-length
import { CollapsibleSectionRecursiveExample } from '@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example';
import { ThemeProvider } from '../../Foundation';
import { regionStyles, schemeThemeCustom, schemeThemeVariants } from './Themes';
import { DialogExample } from './DialogExample';
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(Stack, { horizontal: true, gap: 10 },
React.createElement(Stack.Item, { grow: true, styles: { root: { width: '33%', maxWidth: '33%' } } },
React.createElement(ThemeProvider, { scheme: sideScheme },
React.createElement(Stack, { styles: regionStyles, gap: 10, padding: 5 },
React.createElement(Text, null, sideCaption),
React.createElement(Toggle, { offText: sideCaption, onText: sideCaption, onChange: this.toggleSide }),
React.createElement(CollapsibleSectionRecursiveExample, null)))),
React.createElement(Stack.Item, { grow: true, styles: { root: { height: 'auto' } } },
React.createElement(Stack, { grow: true, verticalFill: true },
React.createElement(ThemeProvider, { scheme: topScheme },
React.createElement(Stack, { styles: regionStyles, gap: 10, padding: 5 },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(Text, null, topCaption),
React.createElement(Toggle, { offText: topCaption, onText: topCaption, onChange: this.toggleTop })),
React.createElement(CommandBar, { items: items, overflowItems: overflowItems, farItems: farItems }))),
React.createElement(ThemeProvider, { scheme: bodyScheme },
React.createElement(Stack, { styles: regionStyles, verticalFill: true, padding: 5 },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
React.createElement(Text, null, bodyCaption),
React.createElement(Toggle, { offText: bodyCaption, onText: bodyCaption, onChange: this.toggleBody })),
React.createElement(ThemeProvider, { scheme: "default" },
React.createElement(Stack.Item, null,
React.createElement(DialogExample, { buttonText: "Default Theme" }))),
React.createElement(ThemeProvider, { scheme: "strong" },
React.createElement(Stack.Item, null,
React.createElement(DialogExample, { buttonText: "Strong Scheme" }))),
React.createElement(ThemeProvider, { scheme: "soft" },
React.createElement(Stack.Item, null,
React.createElement(DialogExample, { buttonText: "Soft Scheme" }))),
React.createElement(DialogExample, { buttonText: "Inherited Scheme" })))))));
};
return ThemingExample;
}(React.Component));
export { 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(Customizer, { settings: { theme: schemeThemeVariants } }, this._renderSchemedComponents());
};
return ThemingSchemesVariantExample;
}(ThemingExample));
export { 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(Customizer, { settings: { theme: schemeThemeCustom } }, this._renderSchemedComponents());
};
return ThemingSchemesCustomExample;
}(ThemingExample));
export { ThemingSchemesCustomExample };
//# sourceMappingURL=Theming.Schemes.Example.js.map