@zohodesk/components/es/DateTime/DateTimePopupHeader.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

/* eslint-disable react/forbid-component-props */

/** ** Libraries *** */
import React, { PureComponent } from 'react';
import { DateTimePopupHeader_propTypes } from "./props/propTypes";
/** ** Components *** */

import { Container, Box } from "../Layout";
import { Icon } from '@zohodesk/icons';
import Heading from "../Heading/Heading";
/** ** CSS *** */

import style from "./DateTime.module.css";

class Span extends React.PureComponent {
  constructor(props) {
    super(props);
    this.modifyCalendarChild = this.modifyCalendarChild.bind(this);
  }

  modifyCalendarChild() {
    const {
      modifyCalendar,
      type
    } = this.props;
    modifyCalendar(type);
  }

  render() {
    const {
      dataTitle,
      children,
      dataId,
      className = '',
      ariaLabel
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      "data-title": dataTitle,
      dataId: dataId,
      className: `${style.thArrow} ${style.grid} ${className}`,
      onClick: this.modifyCalendarChild,
      "aria-label": ariaLabel,
      tabindex: "0"
    }, children);
  }

}

export default class DateTimePopupHeader extends PureComponent {
  render() {
    const {
      onOpenYearView,
      showMonthTxt,
      isYearView,
      prevMonthTitleText,
      nextMonthTitleText,
      onModifyCalendar
    } = this.props;
    return /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      align: "both",
      className: style.header
    }, /*#__PURE__*/React.createElement(Box, {
      className: style.dateText,
      dataId: "selectYear",
      onClick: onOpenYearView
    }, /*#__PURE__*/React.createElement(Heading, {
      className: style.thMonYear,
      title: showMonthTxt,
      tagName: "h2",
      a11y: {
        tabindex: '0'
      }
    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-GN-dropdown",
      size: "12",
      iconClass: style.downArrow
    }))), /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
      dataTitle: prevMonthTitleText,
      dataId: "prevMonth",
      modifyCalendar: onModifyCalendar,
      type: "previousMonth",
      ariaLabel: "prevMonth",
      tabindex: "0"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-arrowLeft3",
      isBold: true
    })), /*#__PURE__*/React.createElement(Span, {
      dataTitle: nextMonthTitleText,
      dataId: "nextMonth",
      modifyCalendar: onModifyCalendar,
      type: "nextMonth",
      className: style.navigation,
      ariaLabel: "nextMonth",
      tabindex: "0"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-arrowRight3",
      isBold: true
    }))) : null);
  }

}
DateTimePopupHeader.propTypes = DateTimePopupHeader_propTypes;