define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/SwatchColorPicker"], function (require, exports, tslib_1, React, SwatchColorPicker_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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_1.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_1.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 and larger cells that updates its 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_1.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', cellHeight: 35, cellWidth: 35, cellBorderWidth: 3, 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_1.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' }
                    ] })));
        };
        return SwatchColorPickerBasicExample;
    }(React.Component));
    exports.SwatchColorPickerBasicExample = SwatchColorPickerBasicExample;
});
//# sourceMappingURL=SwatchColorPicker.Basic.Example.js.map