synapse-react-client/dist/components/widgets/Range.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as d, Fragment as x, jsx as a } from "react/jsx-runtime";
import { useState as f } from "react";
import r from "dayjs";
import { DatePicker as c } from "@mui/x-date-pickers";
import { Box as n, TextField as u, Button as M } from "@mui/material";
import { AdapterDayjs as p } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider as h } from "@mui/x-date-pickers/LocalizationProvider";
function S(t) {
  const b = "Min value should be less than max value", [g, o] = f(!1), [l, m] = f(
    () => t.type === "number" && t.initialValues ? t.initialValues : t.initialValues && {
      min: r(t.initialValues.min).format("YYYY-MM-DD"),
      max: r(t.initialValues.max).format("YYYY-MM-DD")
    } || {
      min: void 0,
      max: void 0
    }
  ), v = ({ min: e, max: i }, s = "number") => {
    if (e == null || i === null || i === void 0)
      return o(!1), !0;
    if (s === "number") {
      if (Number(e) > Number(i))
        return o(!0), !1;
    } else if (Date.parse(e) > Date.parse(i))
      return o(!0), !1;
    return o(!1), !0;
  }, Y = (e, i, s = "number") => {
    v(e, s) && i(e);
  };
  return /* @__PURE__ */ d(
    n,
    {
      sx: {
        display: "flex",
        flexWrap: "wrap",
        flex: "1 0",
        marginRight: "10px",
        gap: "10px",
        "& .MuiInputBase-root": {
          minWidth: "150px"
        },
        "& .MuiInputBase-root,.MuiButton-root": {
          height: "38px"
        },
        "& .MuiInputLabel-root": {
          color: "grey.700",
          fontWeight: 400
        }
      },
      children: [
        t.type === "date" ? /* @__PURE__ */ d(x, { children: [
          /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(h, { dateAdapter: p, children: /* @__PURE__ */ a(
            c,
            {
              enableAccessibleFieldDOMStructure: !1,
              label: "From",
              slots: {
                textField: u
              },
              slotProps: {
                textField: {
                  inputProps: {
                    "aria-label": "min"
                  }
                }
              },
              value: l.min ? r(l.min) : null,
              onChange: (e) => m({
                min: e ? r(e).format("YYYY-MM-DD") : void 0,
                max: l.max
              })
            }
          ) }) }, "range_min"),
          /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(h, { dateAdapter: p, children: /* @__PURE__ */ a(
            c,
            {
              enableAccessibleFieldDOMStructure: !1,
              label: "To",
              slots: {
                textField: u
              },
              slotProps: {
                textField: {
                  inputProps: {
                    "aria-label": "max"
                  }
                }
              },
              value: l.max ? r(l.max) : null,
              onChange: (e) => m({
                max: e ? r(e).format("YYYY-MM-DD") : void 0,
                min: l.min
              })
            }
          ) }) }, "range_max")
        ] }) : /* @__PURE__ */ d(x, { children: [
          /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(
            u,
            {
              label: "From",
              type: "number",
              value: l.min ?? "",
              onChange: (e) => m({
                min: e.target.value,
                max: l.max
              }),
              slotProps: {
                htmlInput: { "aria-label": "min" }
              }
            }
          ) }, "range_min"),
          /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(
            u,
            {
              label: "To",
              type: "number",
              value: l.max ?? "",
              onChange: (e) => m({
                max: e.target.value,
                min: l.min
              }),
              slotProps: {
                htmlInput: { "aria-label": "max" }
              }
            }
          ) }, "range_max")
        ] }),
        /* @__PURE__ */ a(
          M,
          {
            size: "small",
            variant: "outlined",
            onClick: () => Y(l, t.onApplyClicked, t.type),
            sx: {
              alignSelf: "flex-end",
              fontSize: 16
            },
            children: "Apply"
          }
        ),
        g && /* @__PURE__ */ a("div", { className: "SRC-danger-color", children: t.errorText || b })
      ]
    }
  );
}
export {
  S as Range
};
//# sourceMappingURL=Range.js.map