@wix/design-system
Version:
@wix/design-system
39 lines • 2.17 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { angleLimits, dataHooks } from './AngleInput.constants';
import { classes, st } from './AngleInput.st.css.js';
import { useAngleInput } from './hooks/useAngleInput';
const AngleInput = ({ onChange, onPointerDown, onPointerUp, onFocus, onBlur, dataHook, value, disabled = false, step = 1, }) => {
const { rootRef, handlePointerDown, handlePointerUp, handlePointerMove, handleInputChange, handleKeyboardEvent, handleFocus, handleBlur, } = useAngleInput({
onChange,
onPointerDown,
onPointerUp,
onFocus,
onBlur,
step,
});
return (React.createElement("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: st(classes.root, { disabled }), "data-hook": dataHook, "aria-disabled": disabled, ref: rootRef },
React.createElement("div", { className: classes.track, "data-hook": dataHooks.track },
React.createElement("div", { className: st(classes.knobWrapper), "data-hook": dataHooks.knobWrapper, style: {
transform: `rotate(${value}deg)`,
} },
React.createElement("div", { className: st(classes.knob), "data-hook": dataHooks.knob },
React.createElement("input", { type: "range", value: value, className: classes.visuallyHiddenInput, onChange: handleInputChange, onKeyDown: handleKeyboardEvent, onFocus: handleFocus, step: step, onBlur: handleBlur, min: angleLimits.min, max: angleLimits.max, disabled: disabled, "data-hook": dataHooks.input }))),
React.createElement("div", { className: classes.arm, style: {
transform: `rotate(${value}deg)`,
} }))));
};
AngleInput.displayName = 'AngleInput';
AngleInput.propTypes = {
onChange: PropTypes.any,
onPointerDown: PropTypes.any,
onPointerUp: PropTypes.any,
onFocus: PropTypes.any,
onBlur: PropTypes.any,
dataHook: PropTypes.any,
value: PropTypes.any,
disabled: PropTypes.any,
step: PropTypes.any,
};
export default AngleInput;
//# sourceMappingURL=AngleInput.js.map