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

Vimeo Design System

'use strict';

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

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var polished = require('polished');
var components_inputs_ColorSelect2_Slider_style = require('./Slider.style.js');
require('../../../color/colors.js');

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

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

function HueSlider(props) {
    return React__default["default"].createElement(Slider, tslib_es6.__assign({ kind: "hue", max: "36000", step: "100" }, props));
}
function Slider(_a) {
    var dragging = _a.dragging, kind = _a.kind, colorMeta = _a.colorMeta, props = tslib_es6.__rest(_a, ["dragging", "kind", "colorMeta"]);
    var HEX = colorMeta.HEX, HSL = colorMeta.HSL;
    var style = {
        display: 'flex',
        alignItems: 'center',
        marginTop: dragging ? '-6.5rem' : '1.5rem',
        padding: '0 1.5rem',
    };
    return (React__default["default"].createElement("div", { style: style },
        React__default["default"].createElement(Dot, { style: { background: HEX }, "aria-label": "color preview", color: HEX }),
        React__default["default"].createElement(Wrapper, { kind: kind, HSL: HSL },
            React__default["default"].createElement(components_inputs_ColorSelect2_Slider_style.SliderStyled, tslib_es6.__assign({ type: "range", min: "0.01" }, props)))));
}
var Dot = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  margin: 0 1rem 0 0;\n  display: inline-flex;\n"], ["\n  border-radius: 50%;\n  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  margin: 0 1rem 0 0;\n  display: inline-flex;\n"])));
var Wrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  height: 1.9rem;\n  width: calc(100% - 1.5rem);\n  border-radius: 0.25rem;\n  margin: 0;\n  position: relative;\n  display: inline-flex;\n  ", ";\n"], ["\n  height: 1.9rem;\n  width: calc(100% - 1.5rem);\n  border-radius: 0.25rem;\n  margin: 0;\n  position: relative;\n  display: inline-flex;\n  ", ";\n"])), sliderBackground);
function sliderBackground(_a) {
    var kind = _a.kind, HSL = _a.HSL;
    switch (kind) {
        case 'hue':
            return styled.css(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n        background: linear-gradient(\n          to right,\n          #f00 0%,\n          #ff0 17%,\n          #0f0 33%,\n          #0ff 50%,\n          #00f 67%,\n          #f0f 83%,\n          #f00 100%\n        );\n      "], ["\n        background: linear-gradient(\n          to right,\n          #f00 0%,\n          #ff0 17%,\n          #0f0 33%,\n          #0ff 50%,\n          #00f 67%,\n          #f0f 83%,\n          #f00 100%\n        );\n      "])));
        case 'sat':
            return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n        background: linear-gradient(\n          to right,\n          ", " 0%,\n          ", " 100%\n        );\n      "], ["\n        background: linear-gradient(\n          to right,\n          ", " 0%,\n          ", " 100%\n        );\n      "])), polished.hsl(HSL.hue, 0, 0.5), polished.hsl(HSL.hue, 1, 0.5));
        case 'lit':
            return styled.css(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n        background: linear-gradient(to right, #000 0%, #fff 100%);\n      "], ["\n        background: linear-gradient(to right, #000 0%, #fff 100%);\n      "])));
    }
}
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

exports.Dot = Dot;
exports.HueSlider = HueSlider;
exports.Slider = Slider;