UNPKG

synapse-react-client

Version:

[![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synapse-react-client) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettie

72 lines (71 loc) 1.92 kB
import { jsxs as i, jsx as o } from "react/jsx-runtime"; import { useState as h } from "react"; import { Box as u, Typography as b, Slider as f, Button as p, Tooltip as g } from "@mui/material"; function v(e) { const { children: n, value: a } = e; return /* @__PURE__ */ o(g, { enterTouchDelay: 0, placement: "top", title: a, children: n }); } function y(e, n) { return [ e.min ? Number(e.min) : Number(n[0]), e.max ? Number(e.max) : Number(n[1]) ]; } function T(e) { const { onApplyClicked: n, onChange: a, step: s } = e, c = (l) => l.map((r) => Number(r)), [t, d] = h( () => y(e.initialValues, e.domain) ), m = c(e.domain), x = (l) => { d([...l]), a && a({ min: l[0], max: l[1] }); }; return /* @__PURE__ */ i(u, { sx: { ml: 1 }, children: [ /* @__PURE__ */ i(b, { variant: "smallText1", children: [ t[0], " - ", t[1] ] }), /* @__PURE__ */ i( u, { sx: { display: "flex", gap: 3, ml: 1 }, children: [ /* @__PURE__ */ o( f, { marks: [ { value: m[0], label: e.domain[0] }, { value: m[1], label: e.domain[1] } ], min: m[0], max: m[1], value: t, onChange: (l, r) => x(r), step: s, valueLabelDisplay: "auto", slots: { valueLabel: v } } ), n && /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o( p, { size: "small", variant: "outlined", onClick: () => n({ min: t[0], max: t[1] }), sx: { fontSize: 16 }, children: "Apply" } ) }) ] } ) ] }); } export { T as default }; //# sourceMappingURL=RangeSlider.js.map