office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
99 lines • 6.78 kB
JavaScript
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 = (function (_super) {
tslib_1.__extends(ColorPicker, _super);
function ColorPicker(props) {
var _this = _super.call(this, props) || this;
_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: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' },
React.createElement("thead", null,
React.createElement("tr", { className: Styling_1.FontClassNames.small },
React.createElement("td", null, "Hex"),
React.createElement("td", null, "Red"),
React.createElement("td", null, "Green"),
React.createElement("td", null, "Blue"),
!this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))),
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 })),
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; } })),
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; } })),
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; } })),
!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; } })))))))));
};
ColorPicker.prototype._onSVChanged = function (s, v) {
this._updateColor(colors_1.updateSV(this.state.color, s, v));
};
ColorPicker.prototype._onHChanged = function (h) {
this._updateColor(colors_1.updateH(this.state.color, h));
};
ColorPicker.prototype._onAChanged = function (a) {
this._updateColor(colors_1.updateA(this.state.color, a));
};
ColorPicker.prototype._onHexChanged = function () {
this._updateColor(colors_1.getColorFromString('#' + this.hexText.value));
};
ColorPicker.prototype._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)
}));
};
ColorPicker.prototype._updateColor = function (newColor) {
var onColorChanged = this.props.onColorChanged;
if (newColor.str !== this.state.color.str) {
this.setState({
color: newColor
}, function () {
if (onColorChanged) {
onColorChanged(newColor.str);
}
});
}
};
tslib_1.__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onSVChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onAChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onHexChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], ColorPicker.prototype, "_onRGBAChanged", null);
return ColorPicker;
}(Utilities_1.BaseComponent));
exports.ColorPicker = ColorPicker;
});
//# sourceMappingURL=ColorPicker.js.map