@razorpay/blade
Version:
The Design System that powers Razorpay
74 lines (71 loc) • 2.67 kB
JavaScript
import React__default from 'react';
import '../Box/BaseBox/index.js';
import '../Button/index.js';
import '../Divider/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Divider } from '../Divider/Divider.js';
import Button from '../Button/Button/Button.js';
import { MAKE_ANALYTICS_CONSTANTS } from '../../utils/makeAnalyticsAttribute/makeAnalyticsConstants.js';
var CalendarFooter = function CalendarFooter(_ref) {
var onApply = _ref.onApply,
onCancel = _ref.onCancel,
isButtonDisabled = _ref.isButtonDisabled,
footer = _ref.footer,
selectionType = _ref.selectionType;
var isMobile = useIsMobile();
var isSingleSelectionOrMobile = isMobile || selectionType === 'single';
var footerMaxWidth = React__default.useMemo(function () {
if (isMobile) return '100%';
return selectionType === 'single' ? '280px' : '390px';
}, [isMobile, selectionType]);
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
children: [isMobile ? null : /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: isSingleSelectionOrMobile ? 'column' : 'row',
gap: isSingleSelectionOrMobile ? 'spacing.5' : 'spacing.6',
justifyContent: "space-between",
padding: {
m: 'spacing.6',
s: 'spacing.0'
},
children: [footer ? /*#__PURE__*/jsx(BaseBox, {
maxWidth: footerMaxWidth,
children: footer
}) : null, /*#__PURE__*/jsx(BaseBox, {
width: {
base: '100%',
m: 'auto'
},
marginLeft: "auto",
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
gap: isMobile ? 'spacing.5' : 'spacing.3',
children: [/*#__PURE__*/jsx(Button, {
isFullWidth: isMobile,
variant: "tertiary",
size: "medium",
onClick: onCancel,
"data-analytics-name": MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.CANCEL_BUTTON,
children: "Cancel"
}), /*#__PURE__*/jsx(Button, {
isDisabled: isButtonDisabled,
isFullWidth: isMobile,
variant: "primary",
size: "medium",
onClick: onApply,
"data-analytics-name": MAKE_ANALYTICS_CONSTANTS.DATE_PICKER.APPLY_BUTTON,
children: "Apply"
})]
})
})]
})]
});
};
export { CalendarFooter };
//# sourceMappingURL=CalendarFooter.web.js.map