@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
165 lines (164 loc) • 6.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DateRangePicker", {
enumerable: true,
get: function() {
return DateRangePicker;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _jsxruntime = require("react/jsx-runtime");
var _plasmareacticons = require("@coveord/plasma-react-icons");
var _core = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
var _useurlsyncedstate = require("../../hooks/use-url-synced-state");
var _DateRangemodulecss = /*#__PURE__*/ _interop_require_default._(require("./DateRange.module.css"));
var _DateRangePickerInlineCalendar = require("./DateRangePickerInlineCalendar");
var serialization = function serialization(input) {
return Object.freeze(input);
};
var DATE_RANGE_SERIALIZATION = serialization({
serializer: function serializer(param) {
var _param = _sliced_to_array._(param, 2), from = _param[0], to = _param[1];
return [
[
'from',
from ? new Date(from).toISOString() : '',
true
],
[
'to',
to ? new Date(to).toISOString() : '',
true
]
];
},
deserializer: function deserializer(params, initial) {
return [
params.get('from') ? params.get('from') : initial[0],
params.get('to') ? params.get('to') : initial[1]
];
}
});
var defaultProps = {
placeholder: 'Select date range',
formatter: function formatter(time) {
return (0, _dayjs.default)(time).format('MMM D, YYYY');
}
};
var DateRangePicker = (0, _core.factory)(function(props, ref) {
var _useProps = (0, _core.useProps)('PlasmaDateRangePicker', defaultProps, props), defaultValue = _useProps.defaultValue, value = _useProps.value, opened = _useProps.opened, defaultOpened = _useProps.defaultOpened, onOpenedChange = _useProps.onOpenedChange, onClick = _useProps.onClick, onCancel = _useProps.onCancel, onChange = _useProps.onChange, presets = _useProps.presets, startProps = _useProps.startProps, endProps = _useProps.endProps, rangeCalendarProps = _useProps.rangeCalendarProps, formatter = _useProps.formatter, placeholder = _useProps.placeholder, syncWithUrl = _useProps.syncWithUrl, error = _useProps.error, className = _useProps.className, classNames = _useProps.classNames, style = _useProps.style, styles = _useProps.styles, vars = _useProps.vars, unstyled = _useProps.unstyled, others = _object_without_properties._(_useProps, [
"defaultValue",
"value",
"opened",
"defaultOpened",
"onOpenedChange",
"onClick",
"onCancel",
"onChange",
"presets",
"startProps",
"endProps",
"rangeCalendarProps",
"formatter",
"placeholder",
"syncWithUrl",
"error",
"className",
"classNames",
"style",
"styles",
"vars",
"unstyled"
]);
var getStyles = (0, _core.useStyles)({
name: 'DateRangePicker',
classes: _DateRangemodulecss.default,
props: props,
className: className,
classNames: classNames,
style: style,
styles: styles,
unstyled: unstyled,
vars: vars
});
var stylesApiProps = {
classNames: classNames,
styles: styles
};
var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
value: opened,
defaultValue: defaultOpened,
finalValue: false,
onChange: onOpenedChange
}), 2), _opened = _useUncontrolled[0], setOpened = _useUncontrolled[1];
var _useUrlSyncedState = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)(_object_spread_props._(_object_spread._({}, DATE_RANGE_SERIALIZATION), {
initialState: defaultValue !== undefined ? defaultValue : [
null,
null
],
sync: !!syncWithUrl
})), 2), dateRange = _useUrlSyncedState[0], setDateRange = _useUrlSyncedState[1];
var handleApply = function handleApply(dates) {
if (value === undefined) {
setDateRange(dates);
}
onChange === null || onChange === void 0 ? void 0 : onChange(dates);
setOpened(false);
};
var handleClick = function handleClick() {
setOpened(true);
onClick === null || onClick === void 0 ? void 0 : onClick();
};
var handleCancel = function handleCancel() {
setOpened(false);
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
var _value = value !== null && value !== void 0 ? value : dateRange;
var formattedRange = "".concat(formatter(_value[0]), " - ").concat(formatter(_value[1]));
var dateRangeInitialized = _value.every(function(date) {
return typeof date === 'string' && date !== '';
});
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
opened: _opened,
onChange: setOpened,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.InputBase, _object_spread_props._(_object_spread._({
ref: ref,
component: "button",
leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconCalendar, {
height: 16
}),
onClick: handleClick,
error: error
}, getStyles('input', _object_spread._({
className: className,
style: style
}, stylesApiProps)), others), {
children: dateRangeInitialized ? formattedRange : placeholder
}))
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
p: 0,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateRangePickerInlineCalendar.DateRangePickerInlineCalendar, {
initialRange: _value,
onApply: handleApply,
onCancel: handleCancel,
presets: presets,
rangeCalendarProps: rangeCalendarProps,
startProps: startProps,
endProps: endProps
})
})
]
});
});
//# sourceMappingURL=DateRangePicker.js.map