@yamada-ui/calendar
Version:
Yamada UI calendar component
240 lines (238 loc) • 6.8 kB
JavaScript
"use client"
import {
useMultiDatePicker
} from "./chunk-MSRNKBM7.mjs";
import {
DatePickerClearIcon,
DatePickerIcon
} from "./chunk-2IG6CI7K.mjs";
import {
DatePickerProvider,
useDatePickerContext
} from "./chunk-C27PTBDA.mjs";
import {
Calendar
} from "./chunk-FICMIEAE.mjs";
import {
isSameDate
} from "./chunk-BPJGE3HG.mjs";
// src/multi-date-picker.tsx
import {
forwardRef,
omitThemeProps,
ui,
useComponentMultiStyle
} from "@yamada-ui/core";
import { Popover, PopoverContent, PopoverTrigger } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import { cx, mergeRefs, runIfFunc } from "@yamada-ui/utils";
import { cloneElement, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var MultiDatePicker = forwardRef(
(props, ref) => {
const [styles, mergedProps] = useComponentMultiStyle(
"MultiDatePicker",
props
);
const {
className,
children,
isClearable = true,
clearable = isClearable,
color,
component,
h,
height = h,
keepPlaceholder = false,
minH,
minHeight = minH,
separator,
clearIconProps,
containerProps,
contentProps,
fieldProps,
iconProps,
inputProps,
portalProps = { disabled: true },
...computedProps
} = omitThemeProps(mergedProps);
const {
dateToString,
open,
setValue,
value,
getCalendarProps,
getContainerProps,
getFieldProps,
getIconProps,
getInputProps,
getPopoverProps,
onClose
} = useMultiDatePicker(computedProps);
const css = {
color,
h: "fit-content",
w: "100%",
...styles.container
};
return /* @__PURE__ */ jsx(DatePickerProvider, { value: styles, children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-multi-date-picker", className),
__css: css,
...getContainerProps(containerProps),
children: [
/* @__PURE__ */ jsxs(
ui.div,
{
className: "ui-multi-date-picker__inner",
__css: { position: "relative", ...styles.inner },
children: [
/* @__PURE__ */ jsx(
MultiDatePickerField,
{
component,
dateToString,
keepPlaceholder,
open,
separator,
setValue,
value,
...getFieldProps({ height, minHeight, ...fieldProps }, ref),
inputProps: getInputProps(inputProps)
}
),
clearable && !!value.length ? /* @__PURE__ */ jsx(
DatePickerClearIcon,
{
...getIconProps({ clear: true, ...clearIconProps })
}
) : /* @__PURE__ */ jsx(
DatePickerIcon,
{
...getIconProps({ clear: false, ...iconProps })
}
)
]
}
),
/* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
PopoverContent,
{
as: "div",
className: "ui-multi-date-picker__content",
__css: { ...styles.content },
...contentProps,
children: [
/* @__PURE__ */ jsx(
Calendar,
{
className: "ui-multi-date-picker__calendar",
...getCalendarProps()
}
),
runIfFunc(children, { value, onClose })
]
}
) })
]
}
) }) });
}
);
MultiDatePicker.displayName = "MultiDatePicker";
MultiDatePicker.__ui__ = "MultiDatePicker";
var MultiDatePickerField = forwardRef(
({
className,
component,
dateToString,
keepPlaceholder,
open,
separator = ",",
setValue,
value = [],
inputProps,
...rest
}, ref) => {
const styles = useDatePickerContext();
const inputRef = useRef(null);
const {
ref: inputPropRef,
placeholder,
...computedInputProps
} = inputProps != null ? inputProps : {};
const cloneChildren = useMemo(() => {
if (component) {
return value.map((date, index) => {
const onRemove = (ev) => {
var _a;
ev.stopPropagation();
setValue((prev) => prev.filter((value2) => !isSameDate(value2, date)));
(_a = inputRef.current) == null ? void 0 : _a.focus();
};
const el = component({
index,
label: dateToString(date),
value: date,
onRemove
});
const style = {
marginBlockEnd: "0.125rem",
marginBlockStart: "0.125rem",
marginInlineEnd: "0.25rem"
};
return el ? cloneElement(el, { key: index, style }) : null;
});
} else {
return value.map((date, index) => {
const last = value.length === index + 1;
return /* @__PURE__ */ jsxs(ui.span, { display: "inline-block", me: "0.25rem", children: [
dateToString(date),
!last || open ? separator : null
] }, index);
});
}
}, [component, setValue, dateToString, open, separator, value]);
const css = {
alignItems: "center",
display: "flex",
flexWrap: "wrap",
pe: "2rem",
...styles.field
};
return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-multi-date-picker__field", className),
__css: css,
...rest,
children: [
cloneChildren,
/* @__PURE__ */ jsx(
ui.input,
{
ref: mergeRefs(ref, inputPropRef, inputRef),
className: "ui-multi-date-picker__field__input",
"aria-label": "Input date value",
display: "inline-block",
flex: "1",
marginBlockEnd: "0.125rem",
marginBlockStart: "0.125rem",
overflow: "hidden",
placeholder: !value.length || keepPlaceholder && open ? placeholder : void 0,
...computedInputProps
}
)
]
}
) });
}
);
MultiDatePickerField.displayName = "MultiDatePickerField";
MultiDatePickerField.__ui__ = "MultiDatePickerField";
export {
MultiDatePicker,
MultiDatePickerField
};
//# sourceMappingURL=chunk-HXD5IRPA.mjs.map