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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

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';

var CalendarPanelFooter = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(CalendarPanelFooter, _React$PureComponent);

  var _super = _createSuper(CalendarPanelFooter);

  function CalendarPanelFooter() {
    _classCallCheck(this, CalendarPanelFooter);

    return _super.apply(this, arguments);
  }

  _createClass(CalendarPanelFooter, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          dateToString = _this$props.dateToString,
          secondaryActionLabel = _this$props.secondaryActionLabel,
          primaryActionLabel = _this$props.primaryActionLabel,
          selectedDaysProp = _this$props.selectedDays,
          primaryActionDisabled = _this$props.primaryActionDisabled,
          primaryActionOnClick = _this$props.primaryActionOnClick,
          secondaryActionOnClick = _this$props.secondaryActionOnClick;

      function getSelectedDaysString(selectedDaysRaw) {
        if (!selectedDaysRaw) {
          return '';
        }

        var selectedDays = Calendar.parseValue(selectedDaysRaw);

        if (Calendar.isRangeValue(selectedDays)) {
          var toSuffix = selectedDays.to ? " ".concat(dateToString(selectedDays.to)) : '';
          return "".concat(dateToString(selectedDays.from), " -").concat(toSuffix);
        } else {
          return dateToString(selectedDays);
        }
      }

      return /*#__PURE__*/React.createElement("div", {
        "data-hook": dataHook
      }, /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement(TableToolbar.ItemGroup, {
        position: "start"
      }, /*#__PURE__*/React.createElement(TableToolbar.Item, null, /*#__PURE__*/React.createElement(Text, {
        size: "small",
        weight: "thin",
        secondary: true,
        dataHook: "selected-days-text"
      }, getSelectedDaysString(selectedDaysProp)))), /*#__PURE__*/React.createElement(TableToolbar.ItemGroup, {
        position: "end"
      }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
        size: "small",
        priority: "secondary",
        dataHook: "secondary-action-button",
        onClick: secondaryActionOnClick
      }, secondaryActionLabel), /*#__PURE__*/React.createElement(Box, {
        margin: "0 6px"
      }), /*#__PURE__*/React.createElement(Button, {
        size: "small",
        disabled: primaryActionDisabled,
        dataHook: "primary-action-button",
        onClick: primaryActionOnClick
      }, primaryActionLabel)))));
    }
  }]);

  return CalendarPanelFooter;
}(React.PureComponent);

_defineProperty(CalendarPanelFooter, "displayName", 'CalendarPanelFooter');

_defineProperty(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;