synapse-react-client/dist/containers/widgets/RangeSlider.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RangeSlider = exports.Tick = exports.Track = exports.Handle = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_compound_slider_1 = require("react-compound-slider");
var react_1 = require("react");
var Handle = function (_a) {
    var _b = _a.domain, min = _b[0], max = _b[1], _c = _a.handle, id = _c.id, value = _c.value, percent = _c.percent, getHandleProps = _a.getHandleProps;
    return (React.createElement("div", (0, tslib_1.__assign)({ role: "slider", className: "RangeSlider__handle", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, style: {
            left: percent + "%",
        } }, getHandleProps(id))));
};
exports.Handle = Handle;
var Track = function (_a) {
    var source = _a.source, target = _a.target, getTrackProps = _a.getTrackProps;
    return (React.createElement("div", (0, tslib_1.__assign)({ className: "RangeSlider__track", style: {
            left: source.percent + "%",
            width: target.percent - source.percent + "%",
        } }, getTrackProps())));
};
exports.Track = Track;
var Tick = function (_a) {
    var tick = _a.tick, count = _a.count, _b = _a.mode, mode = _b === void 0 ? 'SHOWMINMAX' : _b;
    return (React.createElement("div", null,
        React.createElement("div", { className: "RangeSlider__tick", style: {
                left: tick.percent + "%",
            } }),
        React.createElement("div", { className: "RangeSlider__tickInner", style: {
                marginLeft: -(100 / count) / 2 + "%",
                width: 100 / count + "%",
                left: tick.percent + "%",
            } }, (mode === 'SHOWALL' ||
            (mode === 'SHOWMINMAX' &&
                (tick.percent == 0 || tick.percent == 100))) &&
            tick.value)));
};
exports.Tick = Tick;
function getInitialValues(initialValues, domain) {
    var result = [
        initialValues.min ? Number(initialValues.min) : Number(domain[0]),
        initialValues.max ? Number(initialValues.max) : Number(domain[1]),
    ];
    return result;
}
var RangeSlider = function (_a) {
    var _b = _a.doUpdateOnApply, doUpdateOnApply = _b === void 0 ? true : _b, props = (0, tslib_1.__rest)(_a, ["doUpdateOnApply"]);
    var stringArrToNumArr = function (inputArr) {
        return inputArr.map(function (value) { return Number(value); });
    };
    var _c = (0, react_1.useState)(function () {
        return getInitialValues(props.initialValues, props.domain);
    }), values = _c[0], setValues = _c[1];
    var numDomain = stringArrToNumArr(props.domain);
    var handleSliderChange = function (values, callbackFn) {
        setValues((0, tslib_1.__spreadArray)([], values, true));
        if (callbackFn) {
            callbackFn({ min: values[0], max: values[1] });
        }
    };
    var ticksCount = numDomain[1] - numDomain[0];
    if (props.maxTickCount && ticksCount > props.maxTickCount) {
        ticksCount = props.maxTickCount;
    }
    return (React.createElement("div", { className: "RangeSlider" },
        React.createElement("div", { className: "RangeSlider__values" },
            values[0],
            " - ",
            values[1]),
        React.createElement("div", { className: "RangeSlider__wrapper" + (doUpdateOnApply ? '--flex' : '--block') },
            React.createElement(react_compound_slider_1.Slider, { mode: 1, step: props.step, domain: stringArrToNumArr(props.domain), className: "RangeSlider__slider", onChange: function (values) {
                    return handleSliderChange(values, doUpdateOnApply ? undefined : props.onChange);
                }, values: getInitialValues(props.initialValues, props.domain) },
                React.createElement(react_compound_slider_1.Rail, null, function (_a) {
                    var getRailProps = _a.getRailProps;
                    return (React.createElement("div", (0, tslib_1.__assign)({ className: "RangeSlider__rail" }, getRailProps())));
                }),
                React.createElement(react_compound_slider_1.Handles, null, function (_a) {
                    var handles = _a.handles, getHandleProps = _a.getHandleProps;
                    return (React.createElement("div", { className: "slider-handles" }, handles.map(function (handle) { return (React.createElement(exports.Handle, { key: handle.id + handle.percent, handle: handle, domain: stringArrToNumArr(props.domain), getHandleProps: getHandleProps })); })));
                }),
                React.createElement(react_compound_slider_1.Tracks, { left: true, right: true }, function (_a) {
                    var tracks = _a.tracks, getTrackProps = _a.getTrackProps;
                    return (React.createElement("div", null, tracks.map(function (_a) {
                        var id = _a.id, source = _a.source, target = _a.target;
                        return (React.createElement(exports.Track, { key: id, source: source, target: target, getTrackProps: getTrackProps }));
                    })));
                }),
                React.createElement(react_compound_slider_1.Ticks, { count: ticksCount }, function (_a) {
                    var ticks = _a.ticks;
                    return (React.createElement("div", null, ticks.map(function (tick) { return (React.createElement(exports.Tick, { key: tick.id, tick: tick, count: ticks.length })); })));
                })),
            doUpdateOnApply && (React.createElement("button", { className: "RangeSlider__btnApply", onClick: function () { return props.onChange({ min: values[0], max: values[1] }); } }, "Apply")))));
};
exports.RangeSlider = RangeSlider;
//# sourceMappingURL=RangeSlider.js.map