@wix/design-system
Version:
@wix/design-system
132 lines (131 loc) • 3.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AngleInput = require("./AngleInput.constants");
var _AngleInputSt = require("./AngleInput.st.css.js");
var _useAngleInput = require("./hooks/useAngleInput");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AngleInput/AngleInput.tsx";
var AngleInput = _ref => {
var {
onChange,
onPointerDown,
onPointerUp,
onFocus,
onBlur,
dataHook,
value,
disabled = false,
step = 1
} = _ref;
var {
rootRef,
handlePointerDown,
handlePointerUp,
handlePointerMove,
handleInputChange,
handleKeyboardEvent,
handleFocus,
handleBlur
} = (0, _useAngleInput.useAngleInput)({
onChange,
onPointerDown,
onPointerUp,
onFocus,
onBlur,
step
});
return /*#__PURE__*/_react.default.createElement("div", {
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: handlePointerUp,
className: (0, _AngleInputSt.st)(_AngleInputSt.classes.root, {
disabled
}),
"data-hook": dataHook,
"aria-disabled": disabled,
ref: rootRef,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AngleInputSt.classes.track,
"data-hook": _AngleInput.dataHooks.track,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AngleInputSt.st)(_AngleInputSt.classes.knobWrapper),
"data-hook": _AngleInput.dataHooks.knobWrapper,
style: {
transform: "rotate(".concat(value, "deg)")
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _AngleInputSt.st)(_AngleInputSt.classes.knob),
"data-hook": _AngleInput.dataHooks.knob,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("input", {
type: "range",
value: value,
className: _AngleInputSt.classes.visuallyHiddenInput,
onChange: handleInputChange,
onKeyDown: handleKeyboardEvent,
onFocus: handleFocus,
step: step,
onBlur: handleBlur,
min: _AngleInput.angleLimits.min,
max: _AngleInput.angleLimits.max,
disabled: disabled,
"data-hook": _AngleInput.dataHooks.input,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 13
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: _AngleInputSt.classes.arm,
style: {
transform: "rotate(".concat(value, "deg)")
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 9
}
})));
};
AngleInput.displayName = 'AngleInput';
AngleInput.propTypes = {
onChange: _propTypes.default.any,
onPointerDown: _propTypes.default.any,
onPointerUp: _propTypes.default.any,
onFocus: _propTypes.default.any,
onBlur: _propTypes.default.any,
dataHook: _propTypes.default.any,
value: _propTypes.default.any,
disabled: _propTypes.default.any,
step: _propTypes.default.any
};
var _default = exports.default = AngleInput;
//# sourceMappingURL=AngleInput.js.map