text: 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, selectedId: this.state.color, 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, selectedId: this.state.color, 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, { selectedId: this.state.color, 
                      // tslint:disable:jsx-no-lambda
                      onCellHovered: function (id, color) { return _this.setState({ previewColor: color }); }, onCellFocused: function (id, color) { return _this.setState({ previewColor: color }); }, 
                      // 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, selectedId: this.state.color, 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