office-ui-fabric-react/lib/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var SwatchColorPicker_1 = require("office-ui-fabric-react/lib/SwatchColorPicker");
var SwatchColorPickerBasicExample = (function (_super) {
    tslib_1.__extends(SwatchColorPickerBasicExample, _super);
    function SwatchColorPickerBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.width = 4;
        _this.state = {
            color: null,
            previewColor: null
        };
        return _this;
    }
    SwatchColorPickerBasicExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("div", null, "Simple swatch color picker:"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { columnCount: 4, cellShape: 'circle', swatchColorPickerItems: [
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500' },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000' }
                ] }),
            React.createElement("div", { style: { height: '235px', position: 'relative' } },
                React.createElement("div", null, "Simple swatch color picker with multiple sections:"),
                React.createElement(SwatchColorPicker_1.SwatchColorPicker, { columnCount: this.width, cellShape: 'circle', swatchColorPickerItems: [
                        { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                        { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                        { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                        { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500' },
                        { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                        { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000' },
                        { id: 'e', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                        { id: 'f', label: 'More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                        { id: 'd2', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                        { id: 'g', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'green' },
                        { id: 'h', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'orange' },
                        { id: 'i', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'blue' },
                        { id: 'j', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'red' },
                        { id: 'k', label: 'black', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'black' },
                        { id: 'l', label: 'grey', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'grey' },
                        { id: 'm', label: 'purple', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'purple' },
                        { id: 'n', label: 'yellow', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'yellow' }
                    ] })),
            React.createElement("div", null, "Simple expandable swatch color picker with multiple sections:"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { menuButtonProps: { iconProps: { iconName: 'color' }, menuIconProps: { iconName: 'add' } }, columnCount: 4, cellShape: 'square', swatchColorPickerItems: [
                    { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500' },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000' },
                    { id: 'e', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'f', label: 'More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd2', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'g', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'green' },
                    { id: 'h', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'orange' },
                    { id: 'i', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'blue' },
                    { id: 'j', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'red' },
                    { id: 'k', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'l', label: 'Find Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem },
                    { id: 'm', label: 'Find More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'glasses' } } },
                    { id: 'n', label: '...More Colors...', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem },
                    { id: 'o', label: 'Find Even More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'redEye' } } }
                ] }),
            React.createElement("div", null, "Simple expandable swatch color picker with multiple sections that updates it's icon color:"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { menuButtonProps: { iconProps: { iconName: 'fontColor' }, title: 'Font Color' }, setSelectedColorForIcon: true, columnCount: 4, cellShape: 'circle', swatchColorPickerItems: [
                    { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500' },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000' },
                    { id: 'e', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'f', label: 'More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd2', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'g', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'green' },
                    { id: 'h', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'orange' },
                    { id: 'i', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'blue' },
                    { id: 'j', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'red' },
                    { id: 'k', label: 'black', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'black' },
                    { id: 'l', label: 'grey', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'grey' },
                    { id: 'm', label: 'purple', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'purple' },
                    { id: 'n', label: 'yellow', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'yellow' },
                    { id: 'o', label: 'Find More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'glasses' } } }
                ] }),
            React.createElement("div", null, "Simple expandable swatch color picker with multiple sections 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 : null, fontSize: '24px' } }, "Sample Text"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { menuButtonProps: { iconProps: { iconName: 'fontColor' }, title: 'Font Color' }, setSelectedColorForIcon: true, 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 }); }, onMenuItemClick: function (item) { return item.label && alert(item.label + ' was clicked'); }, columnCount: 4, cellShape: 'circle', swatchColorPickerItems: [
                    { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500' },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000' },
                    { id: 'e', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'f', label: 'More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd2', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'g', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'green' },
                    { id: 'h', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'orange' },
                    { id: 'i', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'blue' },
                    { id: 'j', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'red' },
                    { id: 'k', label: 'black', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'black' },
                    { id: 'l', label: 'grey', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'grey' },
                    { id: 'm', label: 'purple', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'purple' },
                    { id: 'n', label: 'yellow', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: 'yellow' },
                    { id: 'o', label: 'Find More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'glasses' } } }
                ] }),
            React.createElement("div", null, "Simple disabled swatch color picker:"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { menuButtonProps: { iconProps: { iconName: 'fontColor' }, menuIconProps: { iconName: 'chevronDown' } }, disabled: true, columnCount: 4, cellShape: 'square', swatchColorPickerItems: [
                    { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500', disabled: true },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000', disabled: true },
                ] }),
            React.createElement("div", null, "Simple expandable swatch color picker with a few disabled items:"),
            React.createElement(SwatchColorPicker_1.SwatchColorPicker, { menuButtonProps: { iconProps: { iconName: 'fontColor' }, menuIconProps: { iconName: 'chevronDown' } }, columnCount: 4, cellShape: 'square', swatchColorPickerItems: [
                    { id: '0', label: 'Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.Header },
                    { id: 'd1', type: SwatchColorPicker_1.SwatchColorPickerItemType.Divider },
                    { id: 'a', label: 'green', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#00ff00' },
                    { id: 'b', label: 'orange', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ffa500', disabled: true },
                    { id: 'c', label: 'blue', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#0000ff' },
                    { id: 'd', label: 'red', type: SwatchColorPicker_1.SwatchColorPickerItemType.Cell, color: '#ff0000', disabled: true },
                    { id: 'e', label: 'Find Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'glasses' } }, disabled: true },
                    { id: 'f', label: 'Find More Colors', type: SwatchColorPicker_1.SwatchColorPickerItemType.MenuItem, menuItemButtonProps: { iconProps: { iconName: 'redEye' } } }
                ] })));
    };
    return SwatchColorPickerBasicExample;
}(React.Component));
exports.SwatchColorPickerBasicExample = SwatchColorPickerBasicExample;

//# sourceMappingURL=SwatchColorPicker.Basic.Example.js.map