office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
111 lines • 6.49 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Styling", "@uifabric/example-app-base", "./defaultTheme", "./ThemePage.styles", "../Callout", "../../DetailsList", "../../Selection", "../ColorPicker"], function (require, exports, tslib_1, React, Utilities_1, Styling_1, example_app_base_1, defaultTheme_1, ThemePage_styles_1, Callout_1, DetailsList_1, Selection_1, ColorPicker_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
var ThemePage = /** @class */ (function (_super) {
tslib_1.__extends(ThemePage, _super);
function ThemePage(props) {
var _this = _super.call(this, props) || this;
_this._colorList = function (colors, list) {
var classNames = getClassNames(ThemePage_styles_1.getStyles);
var colorPickerProps = _this.state.colorPickerProps;
return (React.createElement("div", null,
React.createElement(DetailsList_1.DetailsList, { items: colors, selectionMode: Selection_1.SelectionMode.none, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, columns: [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 150,
maxWidth: 150
},
{
key: 'color',
name: 'Color',
fieldName: 'value',
minWidth: 200,
onRender: function (item, index) { return (React.createElement("div", { className: classNames.colorSwatch, "data-is-focusable": 'true', onClick: _this._onSwatchClicked.bind(_this, item, index, list) },
React.createElement("span", { className: classNames.swatch, style: { backgroundColor: item.value } }),
React.createElement("span", { className: classNames.colorValue }, item.value))); }
},
{
key: 'desc',
name: 'Description',
fieldName: 'description',
minWidth: 90
}
] }),
colorPickerProps && (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 10, target: colorPickerProps.targetElement, onDismiss: _this._onPickerDismiss },
React.createElement(ColorPicker_1.ColorPicker, { color: colorPickerProps.value, onColorChanged: _this._onColorChanged.bind(_this, colorPickerProps.index) })))));
};
_this._onPickerDismiss = _this._onPickerDismiss.bind(_this);
_this.state = {
palette: defaultTheme_1.defaultPalette,
semanticColors: defaultTheme_1.defaultSemanticColors,
};
return _this;
}
ThemePage.prototype.render = function () {
// Don't mutate state to display lists
var palette = this.state.palette.slice();
var semanticColors = this.state.semanticColors.slice();
return (React.createElement(example_app_base_1.ComponentPage, { title: 'Themes', componentName: 'ThemeExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Theme', overview: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md')), otherSections: [
{
title: 'Default Palette',
section: this._colorList(palette, 'palette')
},
{
title: 'Default Semantic Colors',
section: this._colorList(semanticColors, 'semanticColors')
},
], isHeaderVisible: this.props.isHeaderVisible }));
};
ThemePage.prototype._onSwatchClicked = function (item, index, list, ev) {
this.setState({
colorPickerProps: {
targetElement: ev.currentTarget.children[0],
value: item.value,
index: index,
},
activeList: list
});
};
ThemePage.prototype._onColorChanged = function (index, newColor) {
var activeList = this.state.activeList;
var partialPalette = {};
var partialSemanticColors = {};
if (activeList === 'palette') {
var palette = this.state.palette.slice();
var paletteColor = palette[index];
paletteColor.value = newColor;
palette[index] = paletteColor;
for (var i = 0; i < palette.length; i++) {
palette[palette[i].key] = palette[i].value;
}
}
else if (activeList === 'semanticColors') {
var semanticColors = this.state.semanticColors.slice();
var semanticColor = semanticColors[index];
semanticColor.value = newColor;
semanticColors[index] = semanticColor;
for (var i = 0; i < semanticColors.length; i++) {
semanticColors[semanticColors[i].key] = semanticColors[i].value;
}
}
else {
this.setState({ activeList: undefined });
return undefined;
}
this.setState({ activeList: undefined });
var partialTheme = tslib_1.__assign({}, partialPalette, partialSemanticColors);
Styling_1.loadTheme({ palette: partialTheme });
};
ThemePage.prototype._onPickerDismiss = function () {
this.setState({
colorPickerProps: undefined
});
};
return ThemePage;
}(React.Component));
exports.ThemePage = ThemePage;
});
//# sourceMappingURL=ThemePage.js.map