@vimeo/iris/components/inputs/Slider/Handle.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var components_inputs_Slider_Slider_style = require('./Slider.style.js');
var utils_css = require('../../../utils/css.js');
require('../../../tslib.es6-3ec409b7.js');
require('styled-components');
require('polished');
require('./SliderInputArrow.js');
require('../../../color/colors.js');
require('../../../tokens/core.js');
require('../../../tokens/color/index.js');
require('../../../tokens/color/background/background.js');
require('../../../tokens/util/readToken.js');
require('../../../tokens/util/clamp.js');
require('../../../tokens/color/format/format.js');
require('../../../tokens/color/format/primary.js');
require('../../../tokens/color/format/secondary.js');
require('../../../tokens/color/format/tertiary.js');
require('../../../tokens/color/rainbow/rainbow.js');
require('../../../tokens/color/rainbow/conic/index.js');
require('../../../tokens/color/rainbow/conic/sm.js');
require('../../../tokens/color/rainbow/conic/xl.js');
require('../../../tokens/color/rainbow/linear/index.js');
require('../../../tokens/color/rainbow/linear/sm.js');
require('../../../tokens/color/rainbow/linear/xl.js');
require('../../../tokens/color/livestream/livestream.js');
require('../../../tokens/color/status/status.js');
require('../../../tokens/color/status/caution.js');
require('../../../tokens/color/status/negative.js');
require('../../../tokens/color/status/positive.js');
require('../../../tokens/color/stroke/stroke.js');
require('../../../tokens/color/surface/surface.js');
require('../../../tokens/color/text/text.js');
require('../../../tokens/util/round.js');
require('../../../tokens/color/upsell/upsell.js');
require('../../../tokens/color/upsell/sm.js');
require('../../../tokens/color/upsell/xl.js');
require('../../../tokens/color/upsell/new.js');
require('../../../tokens/edge/edge.js');
require('../../../tokens/space/space.js');
require('../../../tokens/typography/index.js');
require('../../../tokens/typography/size/size.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Handle = React__default["default"].forwardRef(function (_a, ref) {
    var disabled = _a.disabled, handle = _a.handle, min = _a.min, max = _a.max, setDragging = _a.setDragging, setFocus = _a.setFocus, value = _a.value;
    return (React__default["default"].createElement(components_inputs_Slider_Slider_style.HandleStyled, { style: { left: (value / max) * 100 + '%' }, "aria-label": handle, onMouseDown: function () {
            !disabled && setDragging(handle);
        } },
        React__default["default"].createElement(components_inputs_Slider_Slider_style.Hidden, { min: min, max: max, value: value, onFocus: function () {
                setFocus(handle);
            }, onBlur: function () {
                setFocus(null);
            }, ref: ref, readOnly: true }),
        React__default["default"].createElement(utils_css.Focus, { parent: components_inputs_Slider_Slider_style.Hidden, radius: 50, isKeyboardOnly: true })));
});

exports.Handle = Handle;