react-base-guide/lib/components/range/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const container_1 = require("./container");
const input_1 = __importDefault(require("./input"));
const progress_1 = __importDefault(require("./progress"));
const thumb_1 = __importDefault(require("./thumb"));
const Text_1 = __importDefault(require("./Text"));
const getProgressWidth = ({ min, max, value }) => {
    let numbersInRange = +max - +min;
    let valueInRange = +value - +min;
    let percent = (100 * valueInRange) / numbersInRange;
    if (percent > 100) {
        return "100%";
    }
    if (percent <= 0) {
        return 0;
    }
    return percent + "%";
};
const Range = (props) => {
    const percent = getProgressWidth(props);
    return ((0, jsx_runtime_1.jsxs)(container_1.RangeRoot, Object.assign({ className: props.className, "$styled": props.styled }, { children: [(0, jsx_runtime_1.jsxs)(container_1.Container, { children: [(0, jsx_runtime_1.jsx)(input_1.default, { value: props.value, onChange: props.onChange, disabled: props.disabled, min: props.min, max: props.max, step: props.step || 1, type: "range" }), (0, jsx_runtime_1.jsx)(progress_1.default, { width: percent, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(thumb_1.default, { left: percent, disabled: props.disabled })] }), props.count && (0, jsx_runtime_1.jsx)(Text_1.default, { children: props.value ? props.value.toString() : "0" })] })));
};
exports.default = Range;
//# sourceMappingURL=index.js.map