@codecademy/gamut
68.2.268.2.3-alpha.6d52f4.0
dist/DatePicker/Calendar/CalendarFooter.js+
dist/DatePicker/Calendar/CalendarFooter.jsNew file+35
Index: package/dist/DatePicker/Calendar/CalendarFooter.js
===================================================================
--- package/dist/DatePicker/Calendar/CalendarFooter.js
+++ package/dist/DatePicker/Calendar/CalendarFooter.js
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { FlexBox } from '../../Box';
+import { TextButton } from '../../Button';
+import { DEFAULT_DATE_PICKER_TRANSLATIONS } from '../utils/translations';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarFooter = ({
+ onClearDate,
+ clearText = DEFAULT_DATE_PICKER_TRANSLATIONS.clearText,
+ disabled,
+ showClearButton,
+ quickActions = []
+}) => {
+ // if there are no quick actions and the clear button is not shown, don't render anything
+ if (quickActions.length === 0 && !showClearButton) return null;
+ const actions = quickActions.slice(0, 3);
+ return /*#__PURE__*/_jsxs(FlexBox, {
+ alignItems: "center",
+ borderTop: 1,
+ justifyContent: "space-between",
+ p: 12,
+ children: [showClearButton && /*#__PURE__*/_jsx(TextButton, {
+ disabled: disabled,
+ onClick: () => onClearDate?.(),
+ children: clearText
+ }), /*#__PURE__*/_jsx(FlexBox, {
+ gap: 8,
+ children: actions.map((action, index) => /*#__PURE__*/_jsx(TextButton
+ // eslint-disable-next-line react/no-array-index-key -- displayText may duplicate
+ , {
+ onClick: action.onClick,
+ children: action.displayText
+ }, `${action.displayText}-${index}`))
+ })]
+ });
+};
\ No newline at end of file