@codecademy/gamut
68.2.268.2.3-alpha.93a7da.0
dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js+
dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.jsNew file+63
Index: package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
===================================================================
--- package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
+++ package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
@@ -0,0 +1,63 @@
+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 = ({
+ clearButton,
+ quickActions = []
+}) => {
+ if (quickActions.length === 0 && !clearButton) return null;
+ const actions = quickActions.slice(0, 3);
+ return /*#__PURE__*/_jsxs(FlexBox, {
+ alignItems: {
+ _: 'flex-start',
+ xs: 'center'
+ },
+ borderTop: 1,
+ flexDirection: {
+ _: 'column',
+ xs: 'row'
+ },
+ gap: 12,
+ justifyContent: clearButton ? 'space-between' : 'flex-end',
+ p: 12,
+ children: [clearButton && /*#__PURE__*/_jsx(FlexBox, {
+ order: {
+ _: 2,
+ xs: 1
+ },
+ children: /*#__PURE__*/_jsx(TextButton, {
+ alignSelf: {
+ _: 'flex-start',
+ xs: 'center'
+ },
+ disabled: clearButton.disabled,
+ onClick: () => clearButton.onClick?.(),
+ children: clearButton.text ?? DEFAULT_DATE_PICKER_TRANSLATIONS.clearButtonText
+ })
+ }), /*#__PURE__*/_jsx(FlexBox, {
+ flexDirection: {
+ _: 'column',
+ xs: 'row'
+ },
+ gap: 8,
+ order: {
+ _: 1,
+ xs: 2
+ },
+ wrap: true,
+ children: actions.map((action, index) => /*#__PURE__*/_jsx(TextButton, {
+ alignSelf: {
+ _: 'flex-start',
+ xs: 'center'
+ }
+ // 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