wix-style-react/src/CalendarPanelFooter/CalendarPanelFooter.js

wix-style-react

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 {
  static displayName = 'CalendarPanelFooter';

  static 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,
  };

  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 (
      <div data-hook={dataHook}>
        <TableToolbar>
          <TableToolbar.ItemGroup position="start">
            <TableToolbar.Item>
              <Text
                size="small"
                weight="thin"
                secondary
                dataHook="selected-days-text"
              >
                {getSelectedDaysString(selectedDaysProp)}
              </Text>
            </TableToolbar.Item>
          </TableToolbar.ItemGroup>
          <TableToolbar.ItemGroup position="end">
            <Box>
              <Button
                size="small"
                priority="secondary"
                dataHook="secondary-action-button"
                onClick={secondaryActionOnClick}
              >
                {secondaryActionLabel}
              </Button>
              <Box margin="0 6px" />
              <Button
                size="small"
                disabled={primaryActionDisabled}
                dataHook="primary-action-button"
                onClick={primaryActionOnClick}
              >
                {primaryActionLabel}
              </Button>
            </Box>
          </TableToolbar.ItemGroup>
        </TableToolbar>
      </div>
    );
  }
}

export default CalendarPanelFooter;