define(["require", "exports", "tslib", "react", "../../Utilities", "../../TextField", "./ColorRectangle", "./ColorSlider", "../../utilities/color/colors", "../../Styling", "./ColorPicker.scss"], function (require, exports, tslib_1, React, Utilities_1, TextField_1, ColorRectangle_1, ColorSlider_1, colors_1, Styling_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var ColorPicker = /** @class */ (function (_super) {
        tslib_1.__extends(ColorPicker, _super);
        function ColorPicker(props) {
            var _this = _super.call(this, props) || this;
            _this._onSVChanged = function (s, v) {
                _this._updateColor(colors_1.updateSV(_this.state.color, s, v));
            };
            _this._onHChanged = function (h) {
                _this._updateColor(colors_1.updateH(_this.state.color, h));
            };
            _this._onAChanged = function (a) {
                _this._updateColor(colors_1.updateA(_this.state.color, a));
            };
            _this._onHexChanged = function () {
                _this._updateColor(colors_1.getColorFromString('#' + _this.hexText.value));
            };
            _this._onRGBAChanged = function () {
                _this._updateColor(colors_1.getColorFromRGBA({
                    r: Number(_this.rText.value),
                    g: Number(_this.gText.value),
                    b: Number(_this.bText.value),
                    a: Number(_this.aText.value)
                }));
            };
            _this.state = {
                color: colors_1.getColorFromString(props.color)
            };
            return _this;
        }
        ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.color) {
                this._updateColor(colors_1.getColorFromString(newProps.color));
            }
        };
        ColorPicker.prototype.render = function () {
            var _this = this;
            var color = this.state.color;
            return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) },
                React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) },
                    React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
                    React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
                    !this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })),
                    React.createElement("table", { className: Utilities_1.css('ms-ColorPicker-table', styles.table), cellPadding: '0', cellSpacing: '0' },
                        React.createElement("thead", null,
                            React.createElement("tr", { className: Styling_1.FontClassNames.small },
                                React.createElement("td", { className: styles.tableHexCell }, this.props.hexLabel),
                                React.createElement("td", null, this.props.redLabel),
                                React.createElement("td", null, this.props.greenLabel),
                                React.createElement("td", null, this.props.blueLabel),
                                !this.props.alphaSliderHidden && (React.createElement("td", null, this.props.alphaLabel)))),
                        React.createElement("tbody", null,
                            React.createElement("tr", null,
                                React.createElement("td", null,
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged, spellCheck: false })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; }, spellCheck: false })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; }, spellCheck: false })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; }, spellCheck: false })),
                                !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; }, spellCheck: false })))))))));
        };
        ColorPicker.prototype._updateColor = function (newColor) {
            if (!newColor) {
                return;
            }
            var onColorChanged = this.props.onColorChanged;
            if (newColor.str !== this.state.color.str) {
                this.setState({
                    color: newColor
                }, function () {
                    if (onColorChanged) {
                        onColorChanged(newColor.str);
                    }
                });
            }
        };
        ColorPicker.defaultProps = {
            hexLabel: 'Hex',
            redLabel: 'Red',
            greenLabel: 'Green',
            blueLabel: 'Blue',
            alphaLabel: 'Alpha'
        };
        return ColorPicker;
    }(Utilities_1.BaseComponent));
    exports.ColorPicker = ColorPicker;
});
//# sourceMappingURL=ColorPicker.js.map