@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
103 lines (102 loc) • 4.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TableDateRangePicker", {
enumerable: true,
get: function() {
return TableDateRangePicker;
}
});
var _instanceof = require("@swc/helpers/_/_instanceof");
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 _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
var _react = require("react");
var _daterangepicker = require("../../date-range-picker");
var _Table = require("../Table");
var _TableContext = require("../TableContext");
var defaultProps = {
presets: {}
};
var TableDateRangePicker = (0, _core.factory)(function(props, ref) {
var _useTableContext = (0, _TableContext.useTableContext)(), store = _useTableContext.store, getStyles = _useTableContext.getStyles;
var _useProps = (0, _core.useProps)('PlasmaTableDateRangePicker', defaultProps, props), presets = _useProps.presets, rangeCalendarProps = _useProps.rangeCalendarProps, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
"presets",
"rangeCalendarProps",
"classNames",
"className",
"styles",
"style",
"vars"
]);
var _useState = _sliced_to_array._((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
var onApply = function(dates) {
store.setDateRange(dates);
store.setPagination({
pageIndex: 0,
pageSize: store.state.pagination.pageSize
});
setOpened(false);
};
var onCancel = function() {
setOpened(false);
};
var formatDate = function(date) {
return (0, _dayjs.default)(date).format('MMM DD, YYYY');
};
var formattedRange = "".concat(formatDate(store.state.dateRange[0]), " - ").concat(formatDate(store.state.dateRange[1]));
var dateRangeInitialized = store.state.dateRange.every(function(date) {
return _instanceof._(date, Date);
});
var stylesApiProps = {
classNames: classNames,
styles: styles
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
span: "content",
order: _Table.TableComponentsOrder.DateRangePicker,
ref: ref
}, getStyles('dateRangeRoot', _object_spread._({
className: className,
style: style
}, stylesApiProps)), others), {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
withinPortal: true,
opened: opened,
onChange: setOpened,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.InputBase, {
component: "button",
leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CalendarSize16Px, {
height: 16
}),
miw: 220,
onClick: function() {
return setOpened(true);
},
children: dateRangeInitialized ? formattedRange : 'Select date range'
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
p: 0,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_daterangepicker.DateRangePickerInlineCalendar, {
initialRange: store.state.dateRange,
onApply: onApply,
onCancel: onCancel,
presets: presets,
rangeCalendarProps: rangeCalendarProps
})
})
]
})
}));
});
//# sourceMappingURL=TableDateRangePicker.js.map