@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
96 lines (95 loc) • 3.24 kB
JavaScript
"use client";
import { HiddenDatesInput } from "../HiddenDatesInput/HiddenDatesInput.mjs";
import PickerInputBase_module_default from "./PickerInputBase.module.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import cx from "clsx";
import { Input, Modal, Popover, factory, useInputProps } from "@mantine/core";
//#region packages/@mantine/dates/src/components/PickerInputBase/PickerInputBase.tsx
const PickerInputBase = factory((_props) => {
const { inputProps, wrapperProps, placeholder, classNames, styles, unstyled, popoverProps, modalProps, dropdownType, children, formattedValue, dropdownHandlers, dropdownOpened, onClick, clearable, clearSectionMode, onClear, clearButtonProps, rightSection, shouldClear, readOnly, disabled, value, name, form, type, onDropdownClose, withTime, ...others } = useInputProps("PickerInputBase", { size: "sm" }, _props);
const clearButton = /* @__PURE__ */ jsx(Input.ClearButton, {
onClick: onClear,
unstyled,
...clearButtonProps
});
const handleClose = () => {
if (type === "range" && Array.isArray(value) && value[0] && !value[1]) onClear();
dropdownHandlers.close();
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
dropdownType === "modal" && !readOnly && /* @__PURE__ */ jsx(Modal, {
opened: dropdownOpened,
onClose: handleClose,
withCloseButton: false,
size: "auto",
"data-dates-modal": true,
unstyled,
...modalProps,
children
}),
/* @__PURE__ */ jsx(Input.Wrapper, {
...wrapperProps,
children: /* @__PURE__ */ jsxs(Popover, {
position: "bottom-start",
opened: dropdownOpened,
trapFocus: true,
returnFocus: false,
unstyled,
onClose: onDropdownClose,
...popoverProps,
disabled: popoverProps?.disabled || dropdownType === "modal" || readOnly,
onChange: (_opened) => {
if (!_opened) {
popoverProps?.onClose?.();
handleClose();
}
},
children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Input, {
"data-dates-input": true,
"data-read-only": readOnly || void 0,
disabled,
component: "button",
type: "button",
multiline: true,
onClick: (event) => {
onClick?.(event);
dropdownHandlers.toggle();
},
__clearSection: clearButton,
__clearable: clearable && shouldClear && !readOnly && !disabled,
__clearSectionMode: clearSectionMode,
rightSection,
...inputProps,
classNames: {
...classNames,
input: cx(PickerInputBase_module_default.input, classNames?.input)
},
...others,
children: formattedValue || /* @__PURE__ */ jsx(Input.Placeholder, {
error: inputProps.error,
unstyled,
classNames,
styles,
__staticSelector: inputProps.__staticSelector,
children: placeholder
})
}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
"data-dates-dropdown": true,
children
})]
})
}),
/* @__PURE__ */ jsx(HiddenDatesInput, {
value,
name,
form,
type,
withTime
})
] });
});
PickerInputBase.classes = PickerInputBase_module_default;
PickerInputBase.displayName = "@mantine/dates/PickerInputBase";
//#endregion
export { PickerInputBase };
//# sourceMappingURL=PickerInputBase.mjs.map