@payfit/unity-components
Version:
93 lines (92 loc) • 2.83 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Spinner as t } from "../../spinner/Spinner.js";
import { CircularIconButton as n } from "../../icon-button/CircularIconButton.js";
import { dateInput as r, dateSegment as i } from "../../date-picker/parts/DateInput.js";
import { useContext as a } from "react";
import { uyTv as o } from "@payfit/unity-themes";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
import { DateInput as u, DateRangePickerStateContext as d, DateSegment as f } from "react-aria-components/DateRangePicker";
//#region src/components/date-range-picker/parts/DateRangeInput.tsx
var p = o({
base: "uy:px-50 uy:flex uy:items-center",
variants: { isDisabled: {
true: "uy:text-content-form-disabled",
false: ["uy:theme-legacy:text-content-neutral-lowest-enabled", "uy:theme-rebrand:text-content-neutral-lowest"]
} }
});
function m({ isLoading: o, isInvalid: m, isReadOnly: h, isDisabled: g, onClearButtonPress: _ }) {
let v = l(), y = a(d), { value: b } = y, { base: x, input: S, state: C } = r({
isInvalid: !!m,
isReadOnly: !!h,
isDisabled: !!g
}), w = b?.start && b?.end && !o && !h && !g;
return /* @__PURE__ */ c("div", {
className: x(),
children: [/* @__PURE__ */ c("div", {
className: S(),
children: [
/* @__PURE__ */ s(u, {
slot: "start",
className: "uy:flex uy:gap-25",
children: (e) => /* @__PURE__ */ s(f, {
segment: e,
className: i({
isPlaceholder: e.isPlaceholder,
isLiteral: e.type === "literal"
})
})
}),
/* @__PURE__ */ s("span", {
className: p({ isDisabled: !!g }),
children: "→"
}),
/* @__PURE__ */ s(u, {
slot: "end",
className: "uy:flex uy:gap-25",
children: (e) => /* @__PURE__ */ s(f, {
segment: e,
className: i({
isPlaceholder: e.isPlaceholder,
isLiteral: e.type === "literal"
})
})
})
]
}), /* @__PURE__ */ c("div", {
className: C(),
children: [
o && /* @__PURE__ */ s(t, {
color: "inherit",
size: "small",
label: v.formatMessage({
id: "unity:component:common:loading:label",
defaultMessage: "Loading..."
})
}),
m && /* @__PURE__ */ s(e, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
alt: v.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
}),
w && /* @__PURE__ */ s(n, {
slot: null,
title: v.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
icon: "CloseOutlined",
onPress: () => {
y?.setValue(null), _?.();
}
})
]
})]
});
}
m.displayName = "DateRangeInput";
//#endregion
export { m as DateRangeInput };