wix-style-react
Version:
wix-style-react
63 lines • 2.9 kB
JavaScript
import React from 'react';
import color from 'color';
import clamp from 'lodash/clamp';
import PropTypes from 'prop-types';
import { classes } from './ColorPickerHue.st.css';
class ColorPickerHue extends React.PureComponent {
constructor() {
super(...arguments);
this.onMarkerDragStart = e => {
e.preventDefault();
window.addEventListener('mousemove', this.setNewColorByMouseEvent);
window.addEventListener('touchmove', this.setNewColorByMouseEvent);
window.addEventListener('mouseup', this.onMarkerDragEnd);
window.addEventListener('touchcancel', this.onMarkerDragEnd);
window.addEventListener('touchend', this.onMarkerDragEnd);
this.sliderRect = this.slider.getBoundingClientRect();
this.setNewColorByMouseEvent(e);
};
this.onMarkerDragEnd = () => {
window.removeEventListener('touchmove', this.setNewColorByMouseEvent);
window.removeEventListener('mousemove', this.setNewColorByMouseEvent);
window.removeEventListener('touchcancel', this.onMarkerDragEnd);
window.removeEventListener('touchend', this.onMarkerDragEnd);
window.removeEventListener('mouseup', this.onMarkerDragEnd);
};
this.getHueByMouseEvent = e => {
let eventX = 0;
if (e.clientX) {
eventX = e.clientX;
}
else if (e.touches && e.touches[0]) {
eventX = e.touches[0].clientX;
}
const x = eventX - this.sliderRect.left;
return clamp((360 * x) / this.sliderRect.width, 0, 359);
};
this.setNewColorByMouseEvent = e => {
const { onChange, current } = this.props;
const h = this.getHueByMouseEvent(e);
onChange(color({ h, s: current.saturationv(), v: current.value() }));
};
}
componentWillUnmount() {
this.onMarkerDragEnd();
}
render() {
const { dataHook, current } = this.props;
// HUE is an integer value from 0 to 360.
const percentage = (current.hue() / 360) * 100;
return (React.createElement("div", { className: classes.root, "data-hook": dataHook, ref: e => (this.slider = e), onMouseDown: this.onMarkerDragStart, onTouchStart: this.onMarkerDragStart },
React.createElement("div", { className: classes.handle, style: { left: `${percentage}%` } })));
}
}
ColorPickerHue.propTypes = {
/** Applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: PropTypes.string,
/** The current Hue value */
current: PropTypes.object.isRequired,
/** A callback function that will be triggered when the value is changed */
onChange: PropTypes.func.isRequired,
};
export default ColorPickerHue;
//# sourceMappingURL=ColorPickerHue.js.map