wix-style-react
Version:
wix-style-react
66 lines • 3.25 kB
JavaScript
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Handle } from 'rc-slider';
import { withFocusable } from '../common/Focusable';
import { dataHooks } from './constants';
import { st, classes } from './Slider.st.css';
import Tooltip from '../Tooltip';
import { parseColor, mixColors, getThumbStyle } from './utils';
const SliderHandle = ({ tooltipValue, className, onFocusCustom = () => { }, onBlurCustom = () => { }, focusableOnFocus, focusableOnBlur, disabled, handleProps, displayTooltip = true, index, dataHook, direction, gradientColor, ariaLabelledBy, }) => {
const { min, max, value } = handleProps;
const gradientValue = (value - min) / (max - min);
const [hovered, setHovered] = useState(false);
const tooltipRef = React.useRef(null);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
const handleOnFocus = event => {
focusableOnFocus();
tooltipRef.current.open();
onFocusCustom(Number(tooltipValue), event);
};
const handleOnBlur = event => {
focusableOnBlur();
tooltipRef.current.close();
onBlurCustom(Number(tooltipValue), event);
};
const tooltipDataHook = dataHook
? `${dataHook}-${dataHooks.sliderTooltip}-${index}`
: `${dataHooks.sliderTooltip}-${index}`;
return (React.createElement("div", { className: st(classes.sliderHandleWrapper, {}, className), onBlur: handleOnBlur },
React.createElement(Handle, { ...handleProps, vertical: direction === 'vertical', onFocus: handleOnFocus, className: st(classes.sliderHandle, { disabled }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-hook": dataHooks.sliderHandle, ariaLabelledBy: ariaLabelledBy },
React.createElement(Tooltip, { ref: tooltipRef, className: classes.sliderHandleTooltip, disabled: !displayTooltip || disabled || !tooltipValue, content: tooltipValue, moveBy: !!gradientColor ? { y: 3.5 } : { y: 3 }, dataHook: tooltipDataHook },
React.createElement("div", { className: st(classes.sliderThumb, {
hovered,
hasGradient: !!gradientColor,
}), style: getThumbStyle({
gradientColor,
alpha: gradientValue,
disabled,
}), "data-hook": dataHooks.sliderThumb })))));
};
SliderHandle.propTypes = {
onFocusCustom: PropTypes.func,
onBlurCustom: PropTypes.func,
disabled: PropTypes.bool,
displayTooltip: PropTypes.bool,
tooltipValue: PropTypes.string,
index: PropTypes.number,
dataHook: PropTypes.string,
gradientColor: PropTypes.string,
handleProps: PropTypes.shape({
ref: PropTypes.func.isRequired,
offset: PropTypes.number.isRequired,
min: PropTypes.number.isRequired,
max: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
reverse: PropTypes.bool,
ariaLabel: PropTypes.string,
}),
direction: PropTypes.oneOf(['horizontal', 'vertical']),
};
export default withFocusable(SliderHandle);
//# sourceMappingURL=SliderHandle.js.map