office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
101 lines • 6.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var TextField_1 = require("../../TextField");
var ColorRectangle_1 = require("./ColorRectangle");
var ColorSlider_1 = require("./ColorSlider");
var colors_1 = require("../../utilities/color/colors");
var Styling_1 = require("../../Styling");
var stylesImport = require("./ColorPicker.scss");
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 && _this.aText.value) || 100)
}));
};
_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