@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
128 lines • 7.5 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
import { createTheme, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { CollapsibleSection, CollapsibleSectionStateless } from '@uifabric/experiments/lib/CollapsibleSection';
var getPropStyles = function (props, theme) { return ({
root: [
{
background: theme.semanticColors.inputBackground
}
],
body: [
theme.fonts.small,
{
background: theme.semanticColors.disabledBackground
}
]
}); };
var getCustomizerStyles = function (props, theme) { return ({
body: [
{
color: theme.semanticColors.link
}
]
}); };
var getPropTitleStyles = function (props, theme) { return ({
text: [theme.fonts.large]
}); };
var getCustomizerTitleStyles = function (props, theme) { return ({
chevron: { color: theme.semanticColors.link },
text: { color: theme.semanticColors.link }
}); };
var csCustomizerTheme = createTheme({
semanticColors: {
disabledBackground: DefaultPalette.themeLight,
inputBackground: DefaultPalette.themeLighter
}
});
var csPropTheme = createTheme({
semanticColors: {
disabledBackground: DefaultPalette.themeDarker,
inputBackground: DefaultPalette.themeDark
}
});
var CollapsibleSectionStyledExample = /** @class */ (function (_super) {
tslib_1.__extends(CollapsibleSectionStyledExample, _super);
function CollapsibleSectionStyledExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
CollapsibleSectionStyledExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("p", null, "This is a demonstration of the various levels of theming and styling that have effect on created components, with and without state. Themes and styles should have priority based on how locally they are defined: individual props as highest priority followed by contextual (Customizer) and finally global."),
React.createElement("p", null, "If everything is working correctly color gradients should gradually get darker within each type of component with any variant having Theme prop looking identical."),
React.createElement("p", null,
React.createElement("b", null, "Stateful Components")),
React.createElement(FocusZone, null,
React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: false, title: "No Styling" }, "Body"),
React.createElement("br", null),
React.createElement(CollapsibleSection, { key: 2, defaultCollapsed: false, title: {
text: 'Prop Styles',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body"),
React.createElement("br", null),
React.createElement(Customizer, { scopedSettings: {
CollapsibleSection: { styles: getCustomizerStyles },
CollapsibleSectionTitle: { styles: getCustomizerTitleStyles }
} },
React.createElement(CollapsibleSection, { key: 3, defaultCollapsed: false, title: {
text: 'Prop Styles + Customizer Styles',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body")),
React.createElement("br", null),
React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
React.createElement(CollapsibleSection, { key: 4, defaultCollapsed: false, title: {
text: 'Prop Styles + Customizer Theme',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body")),
React.createElement("br", null),
React.createElement(CollapsibleSection, { key: 5, defaultCollapsed: false, title: {
text: 'Prop Styles + Prop Theme',
styles: getPropTitleStyles
}, styles: getPropStyles, theme: csPropTheme }, "Body"),
React.createElement("br", null),
React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
React.createElement(CollapsibleSection, { key: 6, defaultCollapsed: false, title: {
text: 'Prop Styles + Customizer Theme + Prop Theme',
styles: getPropTitleStyles
}, styles: getPropStyles, theme: csPropTheme }, "Body")),
React.createElement("p", null,
React.createElement("b", null, "Stateless Components")),
React.createElement(CollapsibleSectionStateless, { key: 7, collapsed: false, title: "No Styling" }, "Body"),
React.createElement("br", null),
React.createElement(CollapsibleSectionStateless, { key: 8, collapsed: false, title: {
text: 'Prop Styles',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body"),
React.createElement("br", null),
React.createElement(Customizer, { scopedSettings: {
CollapsibleSection: { styles: getCustomizerStyles },
CollapsibleSectionTitle: { styles: getCustomizerTitleStyles }
} },
React.createElement(CollapsibleSectionStateless, { key: 9, collapsed: false, title: {
text: 'Prop Styles + Customizer Styles',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body")),
React.createElement("br", null),
React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
React.createElement(CollapsibleSectionStateless, { key: 10, collapsed: false, title: {
text: 'Prop Styles + Customizer Theme',
styles: getPropTitleStyles
}, styles: getPropStyles }, "Body")),
React.createElement("br", null),
React.createElement(CollapsibleSectionStateless, { key: 11, collapsed: false, title: {
text: 'Prop Styles + Prop Theme',
styles: getPropTitleStyles
}, styles: getPropStyles, theme: csPropTheme }, "Body"),
React.createElement("br", null),
React.createElement(Customizer, { settings: { theme: csCustomizerTheme } },
React.createElement(CollapsibleSectionStateless, { key: 12, collapsed: false, title: {
text: 'Prop Styles + Customizer Theme + Prop Theme',
styles: getPropTitleStyles
}, styles: getPropStyles, theme: csPropTheme }, "Body")))));
};
return CollapsibleSectionStyledExample;
}(React.Component));
export { CollapsibleSectionStyledExample };
//# sourceMappingURL=CollapsibleSection.Styled.Example.js.map