office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
100 lines • 6.47 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { SwatchColorPicker } from 'office-ui-fabric-react/lib/SwatchColorPicker';
var SwatchColorPickerBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(SwatchColorPickerBasicExample, _super);
function SwatchColorPickerBasicExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
color: undefined,
previewColor: undefined,
color2: undefined,
previewColor2: undefined
};
return _this;
}
SwatchColorPickerBasicExample.prototype.render = function () {
var _this = this;
return (React.createElement("div", null,
React.createElement("div", null, "Simple circle swatch color picker:"),
React.createElement(SwatchColorPicker, { columnCount: 5, cellShape: 'circle', colorCells: [
{ id: 'a', label: 'green', color: '#00ff00' },
{ id: 'b', label: 'orange', color: '#ffa500' },
{ id: 'c', label: 'blue', color: '#0000ff' },
{ id: 'd', label: 'red', color: '#ff0000' },
{ id: 'e', label: 'white', color: '#ffffff' }
] }),
React.createElement("div", null, "Simple square swatch color picker:"),
React.createElement(SwatchColorPicker, { columnCount: 5, cellShape: 'square', colorCells: [
{ id: 'a', label: 'green', color: '#00ff00' },
{ id: 'b', label: 'orange', color: '#ffa500' },
{ id: 'c', label: 'blue', color: '#0000ff' },
{ id: 'd', label: 'red', color: '#ff0000' },
{ id: 'e', label: 'white', color: '#ffffff' }
] }),
React.createElement("div", null, "Simple swatch color picker with multiple rows that updates it's icon color and shows a preview color:"),
React.createElement("div", { style: {
color: this.state.previewColor ? this.state.previewColor : this.state.color ? this.state.color : undefined,
fontSize: '24px'
} }, "Sample Text"),
React.createElement(SwatchColorPicker
// tslint:disable:jsx-no-lambda
, {
// tslint:disable:jsx-no-lambda
onCellHovered: function (id, color) { return _this.setState({ previewColor: color }); }, onCellFocused: function (id, color) { return _this.setState({ previewColor: color }); }, onColorChanged: function (id, newColor) { return _this.setState({ color: newColor }); },
// tslint:enable:jsx-no-lambda
columnCount: 4, cellShape: 'circle', colorCells: [
{ id: 'a', label: 'green', color: '#00ff00' },
{ id: 'b', label: 'orange', color: '#ffa500' },
{ id: 'c', label: 'blue', color: '#0000ff' },
{ id: 'd', label: 'red', color: '#ff0000' },
{ id: 'g', label: 'green', color: 'green' },
{ id: 'h', label: 'orange', color: 'orange' },
{ id: 'i', label: 'blue', color: 'blue' },
{ id: 'j', label: 'red', color: 'red' },
{ id: 'k', label: 'black', color: 'black' },
{ id: 'l', label: 'grey', color: 'grey' },
{ id: 'm', label: 'purple', color: 'purple' },
{ id: 'n', label: 'yellow', color: 'yellow' }
] }),
React.createElement("div", null, "Simple disabled circle swatch color picker:"),
React.createElement(SwatchColorPicker, { disabled: true, columnCount: 5, cellShape: 'circle', colorCells: [
{ id: 'a', label: 'green', color: '#00ff00' },
{ id: 'b', label: 'orange', color: '#ffa500' },
{ id: 'c', label: 'blue', color: '#0000ff' },
{ id: 'd', label: 'red', color: '#ff0000' },
{ id: 'e', label: 'white', color: '#ffffff' }
] }),
React.createElement("div", { id: "foo", "tab-index": "-1" },
React.createElement("div", null, "Simple swatch color picker with multiple rows that updates it's icon color and shows a preview color:"),
React.createElement("div", { style: {
color: this.state.previewColor2
? this.state.previewColor2
: this.state.color2
? this.state.color2
: undefined,
fontSize: '24px'
} }, "Sample Text"),
React.createElement(SwatchColorPicker, { focusOnHover: true, mouseLeaveParentSelector: '#foo',
// tslint:disable:jsx-no-lambda
onCellHovered: function (id, color) { return _this.setState({ previewColor2: color }); }, onCellFocused: function (id, color) { return _this.setState({ previewColor2: color }); }, onColorChanged: function (id, newColor) { return _this.setState({ color2: newColor }); },
// tslint:enable:jsx-no-lambda
columnCount: 4, cellShape: 'circle', colorCells: [
{ id: 'a', label: 'green', color: '#00ff00' },
{ id: 'b', label: 'orange', color: '#ffa500' },
{ id: 'c', label: 'blue', color: '#0000ff' },
{ id: 'd', label: 'red', color: '#ff0000' },
{ id: 'g', label: 'green', color: 'green' },
{ id: 'h', label: 'orange', color: 'orange' },
{ id: 'i', label: 'blue', color: 'blue' },
{ id: 'j', label: 'red', color: 'red' },
{ id: 'k', label: 'black', color: 'black' },
{ id: 'l', label: 'grey', color: 'grey' },
{ id: 'm', label: 'purple', color: 'purple' },
{ id: 'n', label: 'yellow', color: 'yellow' }
] }))));
};
return SwatchColorPickerBasicExample;
}(React.Component));
export { SwatchColorPickerBasicExample };
//# sourceMappingURL=SwatchColorPicker.Basic.Example.js.map