office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
114 lines • 6.57 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, autobind, css } from '../../Utilities';
import { TextField } from '../../TextField';
import { ColorRectangle } from './ColorRectangle';
import { ColorSlider } from './ColorSlider';
import { MAX_COLOR_HUE, getColorFromString, getColorFromRGBA, updateA, updateH, updateSV } from '../../utilities/color/colors';
import { FontClassNames } from '../../Styling';
import * as stylesImport from './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.state = {
color: getColorFromString(props.color)
};
return _this;
}
ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.color) {
this._updateColor(getColorFromString(newProps.color));
}
};
ColorPicker.prototype.render = function () {
var _this = this;
var color = this.state.color;
return (React.createElement("div", { className: css('ms-ColorPicker', styles.root) },
React.createElement("div", { className: css('ms-ColorPicker-panel', styles.panel) },
React.createElement(ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
React.createElement(ColorSlider, { className: css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
!this.props.alphaSliderHidden && (React.createElement(ColorSlider, { className: 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: css('ms-ColorPicker-table', styles.table), cellPadding: '0', cellSpacing: '0' },
React.createElement("thead", null,
React.createElement("tr", { className: 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, { className: 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, { className: 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, { className: 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, { className: 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, { className: css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; }, spellCheck: false })))))))));
};
ColorPicker.prototype._onSVChanged = function (s, v) {
this._updateColor(updateSV(this.state.color, s, v));
};
ColorPicker.prototype._onHChanged = function (h) {
this._updateColor(updateH(this.state.color, h));
};
ColorPicker.prototype._onAChanged = function (a) {
this._updateColor(updateA(this.state.color, a));
};
ColorPicker.prototype._onHexChanged = function () {
this._updateColor(getColorFromString('#' + this.hexText.value));
};
ColorPicker.prototype._onRGBAChanged = function () {
this._updateColor(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) {
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'
};
tslib_1.__decorate([
autobind
], ColorPicker.prototype, "_onSVChanged", null);
tslib_1.__decorate([
autobind
], ColorPicker.prototype, "_onHChanged", null);
tslib_1.__decorate([
autobind
], ColorPicker.prototype, "_onAChanged", null);
tslib_1.__decorate([
autobind
], ColorPicker.prototype, "_onHexChanged", null);
tslib_1.__decorate([
autobind
], ColorPicker.prototype, "_onRGBAChanged", null);
return ColorPicker;
}(BaseComponent));
export { ColorPicker };
//# sourceMappingURL=ColorPicker.js.map