office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
110 lines • 7.37 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../TextField", "./ColorRectangle/ColorRectangle", "./ColorSlider/ColorSlider", "../../utilities/color/colors"], function (require, exports, tslib_1, React, Utilities_1, TextField_1, ColorRectangle_1, ColorSlider_1, colors_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
var ColorPickerBase = /** @class */ (function (_super) {
tslib_1.__extends(ColorPickerBase, _super);
function ColorPickerBase(props) {
var _this = _super.call(this, props) || this;
_this._hexText = Utilities_1.createRef();
_this._rText = Utilities_1.createRef();
_this._gText = Utilities_1.createRef();
_this._bText = Utilities_1.createRef();
_this._aText = Utilities_1.createRef();
_this._onSVChanged = function (s, v) {
_this._updateColor(colors_1.updateSV(_this.state.color, s, v));
};
_this._onHChanged = function (ev, h) {
_this._updateColor(colors_1.updateH(_this.state.color, h));
};
_this._onAChanged = function (ev, a) {
_this._updateColor(colors_1.updateA(_this.state.color, a));
};
_this._onHexChanged = function () {
if (_this._hexText.current) {
_this._updateColor(colors_1.getColorFromString('#' + _this._hexText.current.value));
}
};
_this._onRGBAChanged = function () {
if (!_this._rText.current || !_this._gText.current || !_this._bText.current || !_this._aText.current) {
return;
}
_this._updateColor(colors_1.getColorFromRGBA({
r: Number(_this._rText.current.value),
g: Number(_this._gText.current.value),
b: Number(_this._bText.current.value),
a: Number(_this._aText.current.value || 100)
}));
};
_this.state = {
color: colors_1.getColorFromString(props.color)
};
return _this;
}
ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.color) {
this._updateColor(colors_1.getColorFromString(newProps.color));
}
};
ColorPickerBase.prototype.render = function () {
var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
var color = this.state.color;
var classNames = getClassNames(styles, {
theme: theme,
className: className
});
return (React.createElement("div", { className: classNames.root },
React.createElement("div", { className: classNames.panel },
React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
React.createElement(ColorSlider_1.ColorSlider, { className: "is-hue", minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChange: this._onHChanged }),
!this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: "is-alpha", isAlpha: true, overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChange: this._onAChanged })),
React.createElement("table", { className: classNames.table, cellPadding: "0", cellSpacing: "0" },
React.createElement("thead", null,
React.createElement("tr", { className: classNames.tableHeader },
React.createElement("td", { className: classNames.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: classNames.input, value: color.hex, componentRef: this._hexText, onBlur: this._onHexChanged, spellCheck: false, ariaLabel: this.props.hexLabel })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.r), componentRef: this._rText, spellCheck: false, ariaLabel: this.props.redLabel })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.g), componentRef: this._gText, spellCheck: false, ariaLabel: this.props.greenLabel })),
React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.b), componentRef: this._bText, spellCheck: false, ariaLabel: this.props.blueLabel })),
!this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.a ? color.a.toPrecision(3) : color.a), componentRef: this._aText, spellCheck: false, ariaLabel: this.props.alphaLabel })))))))));
};
ColorPickerBase.prototype._updateColor = function (newColor) {
if (!newColor) {
return;
}
var onColorChanged = this.props.onColorChanged;
var color = this.state.color;
var hasColorStringChanged = newColor.str !== color.str;
if (newColor.h !== color.h || hasColorStringChanged) {
this.setState({
color: newColor
}, function () {
if (hasColorStringChanged && onColorChanged) {
onColorChanged(newColor.str);
}
});
}
};
ColorPickerBase.defaultProps = {
hexLabel: 'Hex',
redLabel: 'Red',
greenLabel: 'Green',
blueLabel: 'Blue',
alphaLabel: 'Alpha'
};
return ColorPickerBase;
}(Utilities_1.BaseComponent));
exports.ColorPickerBase = ColorPickerBase;
});
//# sourceMappingURL=ColorPicker.base.js.map