@wix/design-system
Version:
@wix/design-system
40 lines • 2.33 kB
JavaScript
import React from 'react';
import { Handle } from 'rc-slider';
import { withFocusable } from '../common/Focusable';
import { useHover } from '../common/useHover';
import { dataHooks } from './constants';
import { st, classes } from './Slider.st.css.js';
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, }) => {
const { min, max, value } = handleProps;
const gradientValue = (value - min) / (max - min);
const { hovered, hoverProps } = useHover();
const tooltipRef = React.useRef(null);
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 }), ...hoverProps, "data-hook": dataHooks.sliderHandle },
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 })))));
};
export default withFocusable(SliderHandle);
//# sourceMappingURL=SliderHandle.js.map