wix-style-react
Version:
wix-style-react
68 lines • 3.61 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';
class CalendarPanelFooter extends React.PureComponent {
render() {
const { dataHook, dateToString, secondaryActionLabel, primaryActionLabel, selectedDays: selectedDaysProp, primaryActionDisabled, primaryActionOnClick, secondaryActionOnClick, } = this.props;
function getSelectedDaysString(selectedDaysRaw) {
if (!selectedDaysRaw) {
return '';
}
const selectedDays = Calendar.parseValue(selectedDaysRaw);
if (Calendar.isRangeValue(selectedDays)) {
const toSuffix = selectedDays.to
? ` ${dateToString(selectedDays.to)}`
: '';
return `${dateToString(selectedDays.from)} -${toSuffix}`;
}
else {
return dateToString(selectedDays);
}
}
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(selectedDaysProp)))),
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 = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Defines primary (submit) action label */
primaryActionLabel: PropTypes.string.isRequired,
/** Defines secondary (cancel) action label */
secondaryActionLabel: PropTypes.string.isRequired,
/** Specifies whether primary action is disabled */
primaryActionDisabled: PropTypes.bool.isRequired,
/** Defines a callback function which is called every time primary button is clicked */
primaryActionOnClick: PropTypes.func.isRequired,
/** Defines a callback function which is called every time secondary button is clicked */
secondaryActionOnClick: PropTypes.func.isRequired,
/** Defines an active date or a date range selection */
selectedDays: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
PropTypes.shape({
from: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]),
to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
}),
]),
/** Formats date into a string for displaying the current selected days. Receives a Date instance (not undefined). */
dateToString: PropTypes.func.isRequired,
};
export default CalendarPanelFooter;
//# sourceMappingURL=CalendarPanelFooter.js.map