design-system-simplefi/build/src/components/RangeSlider/RangeSlider.js

Design System for SimpleFi Applications

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useEffect, useState } from 'react';
import styled, { css } from 'styled-components';
import { getColor } from '../../utils';
var RangeSliderContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 15px 0;\n  position: relative;\n\n  .slider {\n    -webkit-appearance: none;\n    width: 100%;\n    position: absolute;\n    outline: none;\n    height: 6px;\n    border-radius: 4px;\n    border: 1px solid ", ";\n    background-color: ", ";\n  }\n\n  .slider input {\n    pointer-events: none;\n    position: absolute;\n    overflow: hidden;\n    left: 25%;\n    top: 14px;\n    width: 50%;\n    outline: none;\n    height: 18px;\n    margin: 0;\n    padding: 0;\n  }\n\n  .slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    box-sizing: border-box;\n    height: 18px;\n    width: 18px;\n    border: 1px solid ", ";\n    background-color: ", ";\n    border-radius: 40px;\n    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n    cursor: pointer;\n\n    pointer-events: all;\n    position: relative;\n    z-index: 1;\n    outline: 0;\n  }\n\n  .slider::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    background: ", ";\n    cursor: pointer;\n\n    pointer-events: all;\n    position: relative;\n    z-index: 10;\n    -moz-appearance: none;\n    width: 9px;\n  }\n\n  .slider input::-moz-range-track {\n    position: relative;\n    z-index: -1;\n    border: 0;\n  }\n  .slider input:last-of-type::-moz-range-track {\n    -moz-appearance: none;\n    background: none transparent;\n    border: 0;\n  }\n  .slider input[type='range']::-moz-focus-outer {\n    border: 0;\n  }\n"], ["\n  padding: 15px 0;\n  position: relative;\n\n  .slider {\n    -webkit-appearance: none;\n    width: 100%;\n    position: absolute;\n    outline: none;\n    height: 6px;\n    border-radius: 4px;\n    border: 1px solid ", ";\n    background-color: ", ";\n  }\n\n  .slider input {\n    pointer-events: none;\n    position: absolute;\n    overflow: hidden;\n    left: 25%;\n    top: 14px;\n    width: 50%;\n    outline: none;\n    height: 18px;\n    margin: 0;\n    padding: 0;\n  }\n\n  .slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    box-sizing: border-box;\n    height: 18px;\n    width: 18px;\n    border: 1px solid ", ";\n    background-color: ", ";\n    border-radius: 40px;\n    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n    cursor: pointer;\n\n    pointer-events: all;\n    position: relative;\n    z-index: 1;\n    outline: 0;\n  }\n\n  .slider::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    background: ", ";\n    cursor: pointer;\n\n    pointer-events: all;\n    position: relative;\n    z-index: 10;\n    -moz-appearance: none;\n    width: 9px;\n  }\n\n  .slider input::-moz-range-track {\n    position: relative;\n    z-index: -1;\n    border: 0;\n  }\n  .slider input:last-of-type::-moz-range-track {\n    -moz-appearance: none;\n    background: none transparent;\n    border: 0;\n  }\n  .slider input[type='range']::-moz-focus-outer {\n    border: 0;\n  }\n"])), getColor('lightGrey'), getColor('white'), getColor('white'), getColor('white'), getColor('neonGreen'));
var Slider = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 20px;\n  margin-bottom: 5px;\n"], ["\n  height: 20px;\n  margin-bottom: 5px;\n"])));
var RangeBar = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  height: 8px;\n  border-radius: 4px;\n  background-color: ", ";\n  width: ", "%;\n  left: ", "%;\n"], ["\n  position: absolute;\n  height: 8px;\n  border-radius: 4px;\n  background-color: ", ";\n  width: ", "%;\n  left: ", "%;\n"])), getColor('neonGreen'), function (_a) {
    var width = _a.width;
    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", "%;\n    "], ["\n      ", "%;\n    "])), width);
}, function (_a) {
    var margin = _a.margin;
    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", "%;\n    "], ["\n      ", "%;\n    "])), margin);
});
var SliderInfo = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 100;\n"], ["\n  font-size: 16px;\n  font-weight: 100;\n"])));
var RangeSlider = function (_a) {
    var _b, _c;
    var minValue = _a.minValue, maxValue = _a.maxValue, value = _a.value, step = _a.step, onChange = _a.onChange;
    var _d = useState(null), mouseState = _d[0], setMouseState = _d[1];
    var _e = useState({
        min: 0,
        max: 0,
    }), rangeValues = _e[0], setRangeValues = _e[1];
    var inputProps = {
        min: minValue,
        max: maxValue,
        className: 'slider',
        type: 'range',
    };
    useEffect(function () {
        setRangeValues({
            min: value.min,
            max: value.max,
        });
    }, [value]);
    useEffect(function () {
        if (mouseState === 'up') {
            onChange({
                min: rangeValues.min,
                max: rangeValues.max,
            });
        }
    }, [mouseState]);
    var getSliderValue = function (e) {
        return Math.ceil(parseInt(e.target.value, 10) / step) * step;
    };
    var handleMinChange = function (e) {
        var min = getSliderValue(e);
        if (min >= rangeValues.max || rangeValues.min === min)
            return;
        setRangeValues(__assign(__assign({}, rangeValues), { min: min }));
    };
    var handleMaxChange = function (e) {
        var max = getSliderValue(e);
        if (max <= rangeValues.min || rangeValues.max === max)
            return;
        setRangeValues(__assign(__assign({}, rangeValues), { max: max }));
    };
    var renderRangeBar = function () {
        var rangeBarWidth = (rangeValues.max - rangeValues.min) / (maxValue - minValue);
        var rangeBarMargin = (rangeValues.min - minValue) / (maxValue - minValue);
        return (React.createElement(RangeBar, { margin: rangeBarMargin * 100, width: rangeBarWidth * 100 }));
    };
    return (React.createElement(RangeSliderContainer, null,
        React.createElement(Slider, null,
            React.createElement("input", __assign({}, inputProps, { value: rangeValues.min, onChange: handleMinChange, onMouseDown: function () { return setMouseState('down'); }, onMouseUp: function () { return setMouseState('up'); } })),
            React.createElement("input", __assign({}, inputProps, { value: rangeValues.max, onChange: handleMaxChange, onMouseDown: function () { return setMouseState('down'); }, onMouseUp: function () { return setMouseState('up'); } })),
            renderRangeBar()),
        React.createElement(SliderInfo, null,
            ((_b = rangeValues.min) === null || _b === void 0 ? void 0 : _b.toLocaleString()) || 0,
            " -",
            ' ',
            ((_c = rangeValues.max) === null || _c === void 0 ? void 0 : _c.toLocaleString()) || 0)));
};
export default RangeSlider;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=RangeSlider.js.map