@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
207 lines (206 loc) • 8.21 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);
var DateInput_exports = {};
__export(DateInput_exports, {
DateInput: () => DateInput
});
module.exports = __toCommonJS(DateInput_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_InputPart = require("./InputPart");
var import_react = require("react");
var import_XBox = require("../../layout/XBox");
var import_YBox = require("../../layout/YBox");
var import_Text = require("../../typography/Text");
var import_form = require("../../styles/form");
var import_styled = require("@crossed/styled");
var import_useDateInput = require("./useDateInput");
var import_useFloating = require("./useFloating");
var import_Calendar = require("./Calendar");
var import_flex = require("../../styles/flex");
var import_core = require("@crossed/core");
var import_useMedia = require("../../useMedia");
var import_Form = require("../Form");
const convertToDate = (e) => {
if ((e == null ? void 0 : e.year) === void 0 || (e == null ? void 0 : e.month) === void 0 || (e == null ? void 0 : e.day) === void 0)
return void 0;
const dateArray = [e == null ? void 0 : e.year, (e == null ? void 0 : e.month) - 1, e == null ? void 0 : e.day];
const args = dateArray.filter((l) => typeof l === "number");
const date = args.length > 0 ? new Date(...args) : void 0;
if (!date || isNaN(date.getTime()))
return void 0;
return date;
};
const DateInput = (0, import_react.memo)(
({
value: valueProps,
onChange: onChangeProps,
format = "yyyy-mm-dd",
locale = "en",
picker,
placeholder = {},
minDate,
maxDate,
availableDates,
firstDayOfWeek,
events,
monthsToDisplay,
floatingProps,
id: idProps,
style,
label,
description,
extra,
formFieldStyle
}) => {
const { refs, floatingStyles } = (0, import_useFloating.useFloating)();
const calendarRef = (0, import_react.useRef)(null);
const id = (0, import_react.useId)();
const isFocus = (0, import_react.useRef)(false);
const [valueBridge, setValueBridge] = (0, import_core.useUncontrolled)({
value: valueProps,
onChange: onChangeProps
});
const { inputs, separator, setWithDate, value, containerProps } = (0, import_useDateInput.useDateInput)({
locale,
format,
defaultValue: valueBridge && valueBridge instanceof Date ? {
day: valueBridge.getDate(),
month: valueBridge.getMonth() + 1,
year: valueBridge.getFullYear()
} : void 0,
placeholder,
onChange: (e) => {
const args = [e.year, e.month - 1, e.day];
const date = /* @__PURE__ */ new Date();
date.setFullYear(...args);
if (e.month > 0 && date.toString() !== "Invalid Date") {
setValueBridge == null ? void 0 : setValueBridge(date);
}
}
});
const { md } = (0, import_useMedia.useMedia)();
const showFloating = import_styled.isWeb && md;
const handleFocusInput = (0, import_react.useCallback)(
(e) => {
var _a, _b, _c, _d;
isFocus.current = true;
!showFloating && ((_b = (_a = e.target) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a));
if (picker && !((_c = calendarRef.current) == null ? void 0 : _c.isOpen())) {
picker && ((_d = calendarRef.current) == null ? void 0 : _d.open());
}
},
[picker]
);
const handleBlurInput = (0, import_react.useCallback)(() => {
isFocus.current = false;
}, [picker]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Form.FormField, { ...(0, import_styled.composeStyles)(import_flex.growStyles.on, formFieldStyle).rnw(), children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_XBox.XBox, { alignItems: "center", space: "xs", children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Form.FormLabel, { children: label }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { style: import_form.form.labelDescription, children: description }),
!!extra && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { style: import_form.form.labelExtra, textAlign: "right", children: extra })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_YBox.YBox,
{
pressable: true,
onPress: !showFloating ? () => {
var _a;
(_a = calendarRef.current) == null ? void 0 : _a.open();
} : !isFocus.current ? containerProps.onPress : void 0,
id: idProps,
ref: refs.setReference,
style: (0, import_styled.composeStyles)(
import_form.form.input,
(0, import_styled.inlineStyle)(() => ({
base: {
justifyContent: "flex-start",
paddingVertical: 0,
flex: void 0
}
})),
style
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_XBox.XBox,
{
style: (0, import_styled.composeStyles)(import_flex.growStyles.on, import_flex.shrinkStyles.on),
alignItems: "stretch",
children: inputs.map(({ key, ...item }, i, a) => {
const Comp = i === 0 ? import_Form.FormControl : import_react.Fragment;
return [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_InputPart.InputPart,
{
...item,
onBlur: handleBlurInput,
onFocus: handleFocusInput
},
`${id}-${key}`
) }, `${id}-${key}-control`),
i + 1 !== a.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Text.Text,
{
style: (0, import_styled.composeStyles)(
import_form.form.placeholder,
(0, import_styled.inlineStyle)(() => ({
base: { marginTop: 1, alignSelf: "center" }
}))
),
children: separator
},
`${id}-${key}-separator`
) : null
];
})
}
),
picker && format === "yyyy-mm-dd" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Calendar.Calendar,
{
ref: calendarRef,
selectedDate: convertToDate(value),
onDateSelected: (e) => {
setWithDate(e.date);
},
floatingStyles,
setFloating: refs.setFloating,
locale,
minDate,
maxDate,
availableDates,
firstDayOfWeek,
events,
monthsToDisplay,
floatingProps,
shards: [refs.reference]
}
)
]
}
)
] });
}
);
DateInput.displayName = "DateInput";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
DateInput
});
//# sourceMappingURL=DateInput.js.map