@vimeo/iris/components/inputs/Slider/SliderEditableInput.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');
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 SliderEditableInput = function (_a) {
    var disabled = _a.disabled, onArrowUpClick = _a.onArrowUpClick, onArrowDownClick = _a.onArrowDownClick, onChange = _a.onChange, onFocus = _a.onFocus, role = _a.role, value = _a.value;
    return (React__default["default"].createElement(components_inputs_Slider_Slider_style.LabelInputContainer, null,
        React__default["default"].createElement(components_inputs_Slider_Slider_style.LabelInput, { value: value, disabled: disabled, onFocus: onFocus, onChange: onChange, role: role }),
        React__default["default"].createElement(components_inputs_Slider_Slider_style.ArrowsContainer, null,
            React__default["default"].createElement(components_inputs_Slider_Slider_style.SliderInputArrowStyled, { role: "arrow-up", onClick: onArrowUpClick }),
            React__default["default"].createElement(components_inputs_Slider_Slider_style.SliderInputArrowStyled, { role: "arrow-down", onClick: onArrowDownClick, style: {
                    transform: 'rotate(180deg)',
                } }))));
};

exports.SliderEditableInput = SliderEditableInput;