@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
214 lines (213 loc) • 7.6 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 Calendar_exports = {};
__export(Calendar_exports, {
Calendar: () => Calendar
});
module.exports = __toCommonJS(Calendar_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_styled = require("@crossed/styled");
var import_overlay = require("../../overlay");
var import_unicons = require("@crossed/unicons");
var import_react_native_reanimated = require("react-native-reanimated");
var import_react = require("react");
var import_Calendar = require("../Calendar");
var import_Box = require("../../layout/Box");
var import_useMedia = require("../../useMedia");
var import_core = require("@crossed/core");
var import_Focus = require("./Focus");
var import_layout = require("../../layout");
const duration = 100;
const styles = (0, import_styled.createStyles)(({ colors, space, boxShadow }) => ({
dynamic: (e) => {
const transform = [];
if (e.transform) {
const [x, y] = e.transform.replace("translate(", "").replace(")", "").replaceAll("px", "").replaceAll(" ", "").split(",");
transform.push({ translateX: Number(x) }, { translateY: Number(y) });
}
return Object.assign({}, e, { transform });
},
calendar: {
base: {
backgroundColor: colors.background.secondary,
borderWidth: 1,
borderColor: colors.border.secondary,
padding: space.md,
borderRadius: 16,
boxShadow,
position: "absolute",
width: 432
}
}
}));
const Calendar = (0, import_react.forwardRef)(
({
onDateSelected,
setFloating,
floatingStyles,
locale,
events,
firstDayOfWeek,
maxDate,
minDate,
monthsToDisplay,
selectedDate,
availableDates,
floatingProps,
shards
}, ref) => {
const [, setTransition] = (0, import_react.useTransition)();
const { colors } = (0, import_styled.useTheme)();
const { md } = (0, import_useMedia.useMedia)();
const open = (0, import_react.useRef)(false);
(0, import_react.useImperativeHandle)(
ref,
() => ({
open: () => {
var _a, _b;
(_a = floatingRef.current) == null ? void 0 : _a.open();
(_b = sheetRef.current) == null ? void 0 : _b.show();
},
close: () => {
var _a, _b;
(_a = floatingRef.current) == null ? void 0 : _a.close();
(_b = sheetRef.current) == null ? void 0 : _b.hide();
},
isOpen() {
return open.current;
}
}),
[]
);
const floatingRef = (0, import_react.useRef)(null);
const sheetRef = (0, import_react.useRef)(null);
const toggleOpen = (0, import_react.useCallback)((e) => {
open.current = e;
}, []);
const handleDateSelected = (0, import_react.useCallback)(
(e) => {
var _a, _b;
setTransition(() => {
onDateSelected == null ? void 0 : onDateSelected(e);
});
(_a = floatingRef.current) == null ? void 0 : _a.close();
(_b = sheetRef.current) == null ? void 0 : _b.hide();
},
[onDateSelected]
);
const handleClose = (0, import_react.useCallback)((e) => {
var _a;
if (e instanceof PointerEvent || e instanceof KeyboardEvent && e.key === "Escape") {
(_a = floatingRef.current) == null ? void 0 : _a.close();
}
}, []);
(0, import_react.useEffect)(() => {
if (import_styled.isWeb && open.current) {
document.addEventListener("click", handleClose);
document.addEventListener("keyup", handleClose);
return () => {
document.removeEventListener("click", handleClose);
document.removeEventListener("keyup", handleClose);
};
}
return () => {
};
}, [open.current]);
const showFloating = import_styled.isWeb && md;
const renderCalendar = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Calendar.Calendar,
{
locale,
firstDayOfWeek,
availableDates,
events,
maxDate,
minDate,
monthsToDisplay,
selectedDate,
onDateSelected: handleDateSelected,
ref: setFloating,
style: (0, import_styled.composeStyles)(
showFloating && styles.calendar,
showFloating && styles.dynamic(floatingStyles)
)
}
);
const renderIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.XBox, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_unicons.ChevronDown, { color: colors.text.secondary }) });
return showFloating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_overlay.Floating,
{
...floatingProps,
ref: floatingRef,
onChange: (0, import_core.composeEventHandlers)(toggleOpen, floatingProps == null ? void 0 : floatingProps.onChange),
children: [
renderIcon,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlay.Floating.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Focus.Focus,
{
onEscapeKey: handleClose,
onClickOutside: handleClose,
shards,
returnFocus: false,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_overlay.Floating.Content,
{
exiting: import_react_native_reanimated.FadeOut.duration(duration),
entering: import_react_native_reanimated.FadeIn.duration(duration),
style: (0, import_styled.composeStyles)(
(0, import_styled.inlineStyle)(({ boxShadow }) => ({
base: { zIndex: 100, position: "absolute" },
web: { base: { boxShadow } }
}))
),
children: renderCalendar
}
)
}
) })
]
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_overlay.Sheet, { ref: sheetRef, onOpenChange: toggleOpen, children: [
renderIcon,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_overlay.Sheet.Content,
{
containerStyle: (0, import_styled.inlineStyle)(() => ({ base: { height: void 0 } })),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Box.Box,
{
style: (0, import_styled.inlineStyle)(({ space }) => ({
base: {
height: void 0,
paddingHorizontal: space.xs,
paddingVertical: space.md
}
})),
children: renderCalendar
}
)
}
)
] });
}
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Calendar
});
//# sourceMappingURL=Calendar.js.map