@wix/design-system
Version:
@wix/design-system
46 lines • 2.5 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import TableToolbar from '../TableToolbar';
import Calendar from '../Calendar';
import Button from '../Button';
import Box from '../Box';
const isSelectedDaysRange = (selectedDays) => {
return !(selectedDays instanceof Date);
};
const getSelectedDaysString = (selectedDaysRaw, dateToString) => {
if (!selectedDaysRaw) {
return '';
}
const selectedDays = Calendar.parseValue(selectedDaysRaw);
if (isSelectedDaysRange(selectedDays)) {
const toSuffix = selectedDays.to ? ` ${dateToString(selectedDays.to)}` : '';
return `${dateToString(selectedDays.from)} -${toSuffix}`;
}
return dateToString(selectedDays);
};
const CalendarPanelFooter = ({ dataHook, dateToString, secondaryActionLabel, primaryActionLabel, selectedDays, primaryActionDisabled, primaryActionOnClick, secondaryActionOnClick, }) => {
return (React.createElement("div", { "data-hook": dataHook },
React.createElement(TableToolbar, null,
React.createElement(TableToolbar.ItemGroup, { position: "start" },
React.createElement(TableToolbar.Item, null,
React.createElement(Text, { size: "small", weight: "thin", secondary: true, dataHook: "selected-days-text" }, getSelectedDaysString(selectedDays, dateToString)))),
React.createElement(TableToolbar.ItemGroup, { position: "end" },
React.createElement(Box, null,
React.createElement(Button, { size: "small", priority: "secondary", dataHook: "secondary-action-button", onClick: secondaryActionOnClick }, secondaryActionLabel),
React.createElement(Box, { margin: "0 6px" }),
React.createElement(Button, { size: "small", disabled: primaryActionDisabled, dataHook: "primary-action-button", onClick: primaryActionOnClick }, primaryActionLabel))))));
};
CalendarPanelFooter.displayName = 'CalendarPanelFooter';
CalendarPanelFooter.propTypes = {
dataHook: PropTypes.string,
primaryActionLabel: PropTypes.string.isRequired,
secondaryActionLabel: PropTypes.string.isRequired,
primaryActionDisabled: PropTypes.bool.isRequired,
primaryActionOnClick: PropTypes.func.isRequired,
secondaryActionOnClick: PropTypes.func.isRequired,
selectedDays: PropTypes.any,
dateToString: PropTypes.func.isRequired,
};
export default CalendarPanelFooter;
//# sourceMappingURL=CalendarPanelFooter.js.map