// @codepen
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ColorPicker, Toggle } from 'office-ui-fabric-react/lib/index';
var ColorPickerBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(ColorPickerBasicExample, _super);
    function ColorPickerBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._updateColor = function (color) {
            _this.setState({ color: color });
        };
        _this._onHideAlphaClick = function (ev, checked) {
            _this.setState({ alphaSliderHidden: !!checked });
        };
        _this.state = {
            color: '#ffffff',
            alphaSliderHidden: false
        };
        return _this;
    }
    ColorPickerBasicExample.prototype.render = function () {
        var _a = this.state, color = _a.color, alphaSliderHidden = _a.alphaSliderHidden;
        return (React.createElement("div", { style: { display: 'flex' } },
            React.createElement(ColorPicker, { color: color, onColorChanged: this._updateColor, alphaSliderHidden: alphaSliderHidden }),
            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
                React.createElement("div", { style: { backgroundColor: color, width: 100, height: 100, margin: 16, border: '1px solid #c8c6c4' } }),
                React.createElement(Toggle, { label: "Hide alpha slider", onChange: this._onHideAlphaClick, checked: alphaSliderHidden }))));
    };
    return ColorPickerBasicExample;
}(React.Component));
export { ColorPickerBasicExample };
//# sourceMappingURL=ColorPicker.Basic.Example.js.map