@trail-ui/react
Version:
172 lines (170 loc) • 8.61 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/slider/slider.tsx
var slider_exports = {};
__export(slider_exports, {
MultiSlider: () => MultiSlider,
Slider: () => Slider
});
module.exports = __toCommonJS(slider_exports);
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_stately = require("react-stately");
var import_react_aria = require("react-aria");
var import_jsx_runtime = require("react/jsx-runtime");
function Slider({ label, formatOptions, name, classNames, ...props }) {
const slots = (0, import_react.useMemo)(() => (0, import_theme.slider)(), []);
let trackRef = (0, import_react.useRef)(null);
let numberFormatter = (0, import_react_aria.useNumberFormatter)(formatOptions);
let state = (0, import_react_stately.useSliderState)({ ...props, numberFormatter });
let { groupProps, trackProps, labelProps, outputProps } = (0, import_react_aria.useSlider)(props, state, trackRef);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...groupProps, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...labelProps, children: label }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })} ${state.isDisabled && slots.disableMouseEvents({ class: classNames == null ? void 0 : classNames.disableMouseEvents })}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
...trackProps,
ref: trackRef,
className: slots.trackWrapper({ class: classNames == null ? void 0 : classNames.trackWrapper }),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.track({ class: classNames == null ? void 0 : classNames.track })} ${state.isDisabled && slots.disableTrack({ class: classNames == null ? void 0 : classNames.disableTrack })}`
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.fillTrack({ class: classNames == null ? void 0 : classNames.fillTrack })} ${state.isDisabled && slots.disableFillTrack({ class: classNames == null ? void 0 : classNames.disableFillTrack })}`,
style: { width: state.getThumbPercent(0) * 100 + "%" }
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, { index: 0, state, trackRef, name })
]
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("output", { ...outputProps, children: [
state.getThumbValueLabel(0),
"%"
] })
}
)
]
}
)
] });
}
function Thumb(props) {
const slots = (0, import_react.useMemo)(() => (0, import_theme.slider)(), []);
let inputRef = (0, import_react.useRef)(null);
let { state, trackRef, index, name } = props;
let { thumbProps, inputProps } = (0, import_react_aria.useSliderThumb)(
{
index,
trackRef,
inputRef,
name
},
state
);
let { focusProps, isFocusVisible } = (0, import_react_aria.useFocusRing)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
...thumbProps,
className: `${slots.sliderThumb()} ${state.isDisabled && slots.disableFillTrack()} ${isFocusVisible && slots.focusRing()}`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: inputRef, ...(0, import_react_aria.mergeProps)(inputProps, focusProps) }) })
}
);
}
function MultiSlider({ label, formatOptions, name, classNames, ...props }) {
let trackRef = (0, import_react.useRef)(null);
const slots = (0, import_react.useMemo)(() => (0, import_theme.slider)(), []);
let numberFormatter = (0, import_react_aria.useNumberFormatter)(formatOptions);
let state = (0, import_react_stately.useSliderState)({ ...props, numberFormatter });
let { groupProps, trackProps, labelProps, outputProps } = (0, import_react_aria.useSlider)(props, state, trackRef);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...groupProps, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...labelProps, children: label }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })} ${state.isDisabled && slots.disableMouseEvents({ class: classNames == null ? void 0 : classNames.disableMouseEvents })}`,
children: [
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { ...outputProps, children: state.getThumbValueLabel(0) })
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
...trackProps,
ref: trackRef,
className: slots.trackWrapper({ class: classNames == null ? void 0 : classNames.trackWrapper }),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.track({ class: classNames == null ? void 0 : classNames.track })} ${state.isDisabled && slots.disableTrack({ class: classNames == null ? void 0 : classNames.disableTrack })}`
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.fillTrack({ class: classNames == null ? void 0 : classNames.fillTrack })} ${state.isDisabled && slots.disableFillTrack({ class: classNames == null ? void 0 : classNames.disableFillTrack })}`,
style: {
left: `${state.getThumbPercent(0) * 100}%`,
width: `${(state.getThumbPercent(1) - state.getThumbPercent(0)) * 100}%`
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, { index: 0, state, trackRef, name }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, { index: 1, state, trackRef, name })
]
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { ...outputProps, children: state.getThumbValueLabel(1) })
}
)
]
}
)
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MultiSlider,
Slider
});