office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
113 lines • 6.73 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, createRef } from '../../Utilities';
import { TextField } from '../../TextField';
import { ColorRectangle } from './ColorRectangle/ColorRectangle';
import { ColorSlider } from './ColorSlider/ColorSlider';
import { MAX_COLOR_HUE, getColorFromString, getColorFromRGBA, updateA, updateH, updateSV } from '../../utilities/color/colors';
var getClassNames = classNamesFunction();
var ColorPickerBase = /** @class */ (function (_super) {
tslib_1.__extends(ColorPickerBase, _super);
function ColorPickerBase(props) {
var _this = _super.call(this, props) || this;
_this._hexText = createRef();
_this._rText = createRef();
_this._gText = createRef();
_this._bText = createRef();
_this._aText = createRef();
_this._onSVChanged = function (s, v) {
_this._updateColor(updateSV(_this.state.color, s, v));
};
_this._onHChanged = function (ev, h) {
_this._updateColor(updateH(_this.state.color, h));
};
_this._onAChanged = function (ev, a) {
_this._updateColor(updateA(_this.state.color, a));
};
_this._onHexChanged = function () {
if (_this._hexText.current) {
_this._updateColor(getColorFromString('#' + _this._hexText.current.value));
}
};
_this._onRGBAChanged = function () {
if (!_this._rText.current || !_this._gText.current || !_this._bText.current || !_this._aText.current) {
return;
}
_this._updateColor(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: getColorFromString(props.color)
};
return _this;
}
ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.color) {
this._updateColor(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, { color: color, onSVChanged: this._onSVChanged }),
React.createElement(ColorSlider, { className: "is-hue", minValue: 0, maxValue: MAX_COLOR_HUE, value: color.h, onChange: this._onHChanged }),
!this.props.alphaSliderHidden && (React.createElement(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, { 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, { 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, { 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, { 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, { 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;
}(BaseComponent));
export { ColorPickerBase };
//# sourceMappingURL=ColorPicker.base.js.map