@airplane/views/dist/components/slider/Slider.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { createStyles, Input, Slider as Slider$1 } from "@mantine/core";
import { forwardRef } from "react";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { useRegisterFormInput } from "../../state/components/form/useRegisterFormInput.js";
import { useInput } from "../../state/components/input/useInput.js";
import { useSliderState } from "../../state/components/number-input/useNumberInputState.js";
import { useComponentId } from "../../state/components/useId.js";
const DEFAULT_MIN = 0;
const DEFAULT_MAX = 100;
const DEFAULT_STEP = 1;
const DEFAULT_SIZE = "md";
const useStyles = createStyles((theme, params) => ({
  // TODO: replace with new spacing scale
  slider: {
    height: 36,
    paddingTop: 12,
    paddingBottom: params.hasMarks ? 24 : params.hasLabel ? 18 : 12
  },
  markLabel: {
    fontSize: theme.fontSizes.xs
  },
  label: {
    paddingLeft: theme.spacing.xs,
    paddingRight: theme.spacing.xs,
    // TODO: replace with new spacing scale
    top: params.hasMarks ? -32 : -34
  }
}));
const SliderComponent = /* @__PURE__ */ forwardRef(({
  valueLabelDisplay = "auto",
  min = DEFAULT_MIN,
  max = DEFAULT_MAX,
  step = DEFAULT_STEP,
  size = DEFAULT_SIZE,
  label,
  error,
  valueLabel,
  className,
  style,
  width,
  height,
  grow,
  ...props
}, ref) => {
  const {
    classes
  } = useStyles({
    hasMarks: props.marks !== void 0,
    hasLabel: label !== void 0
  });
  const {
    classes: layoutClasses,
    cx
  } = useCommonLayoutStyle({
    width,
    height,
    grow
  });
  return /* @__PURE__ */ jsx(Input.Wrapper, { id: "slider", label, withAsterisk: props.required, error, className: layoutClasses.style, children: /* @__PURE__ */ jsx(Slider$1, { className: cx(classes.slider, className), style, classNames: {
    markLabel: classes.markLabel,
    label: classes.label
  }, min, max, step, size, label: valueLabelDisplay === "off" ? null : valueLabel, labelAlwaysOn: valueLabelDisplay === "on", ...props, ref }) });
});
const Slider = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: DISPLAY_NAME, children: /* @__PURE__ */ jsx(SliderWithoutRef, { ...props, innerRef: ref }) }));
const SliderWithoutRef = (props) => {
  const id = useComponentId(props.id);
  const {
    state,
    dispatch
  } = useSliderState(id, {
    initialState: {
      disabled: props.disabled ?? props.defaultDisabled,
      // Default the initial value to the minimum if no default value is provided so reset works
      value: props.value ?? props.defaultValue ?? props.min ?? DEFAULT_MIN
    },
    focus,
    min: props.min ?? DEFAULT_MIN,
    max: props.max ?? DEFAULT_MAX
  });
  const {
    inputProps
  } = useInput(props, state, dispatch, (v) => v);
  useRegisterFormInput(id, "slider");
  const {
    innerRef: _,
    validate: __,
    onChange: ___,
    defaultDisabled: ____,
    defaultValue: _____,
    ...restProps
  } = props;
  return /* @__PURE__ */ jsx(SliderComponent, { ref: props.innerRef, ...inputProps, ...restProps });
};
SliderComponent.displayName = "SliderComponent";
const DISPLAY_NAME = "Slider";
Slider.displayName = DISPLAY_NAME;
export {
  Slider,
  SliderComponent,
  SliderWithoutRef,
  useStyles
};
//# sourceMappingURL=Slider.js.map