@zohodesk/components/es/DateTime/YearView.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

/**** Libraries ****/
import React from 'react';
import { YearView_propTypes } from "./props/propTypes";
import { YearView_defaultProps } from "./props/defaultProps";
/**** Components ****/

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

import style from "./YearView.module.css";
/**** Methods ****/

import { getYearDetails } from "./dateFormatUtils";
const monthNamesData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function getYears() {
  const years = [];
  const {
    startPoint,
    endPoint
  } = getYearDetails();

  for (let i = startPoint; i <= endPoint; i++) {
    years.push(i);
  }

  return years;
}

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

  handleClick() {
    const {
      year,
      onClick
    } = this.props;
    onClick && onClick(year);
  }

  render() {
    const {
      year,
      isActive,
      isOpen
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      className: `${style.year} ${isActive ? style.isActive : ''}`,
      onClick: this.handleClick,
      dataId: isActive ? `yearAtv_${year}` : `year_${year}`
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      align: "vertical"
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(Heading, {
      className: style.yearText,
      title: year,
      a11y: {
        tabindex: '0'
      },
      tagName: "h4"
    })), /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-arrowDownSingle",
      size: "7",
      isBold: true,
      iconClass: isOpen ? `${style.arrow} ${style.arrowActive}` : style.arrow
    })));
  }

}

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

  handleClick() {
    const {
      month,
      onClick
    } = this.props;
    let monthIndex = monthNamesData.indexOf(month);
    monthIndex = monthIndex === -1 ? 0 : monthIndex;
    onClick && onClick(monthIndex);
  }

  render() {
    const {
      month,
      isActive,
      displayText,
      hoverText
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      dataId: `month_${month}`,
      className: `${style.month} ${isActive ? style.currentMonth : ''}`,
      onClick: this.handleClick,
      "data-title": hoverText,
      "aria-label": month
    }, displayText);
  }

}

export default class YearView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.renderListItem = this.renderListItem.bind(this);
    this.handleMonthClick = this.handleMonthClick.bind(this);
    this.handleYearClick = this.handleYearClick.bind(this);
    this.getPublicMethods = this.getPublicMethods.bind(this);
    this.handleScrollToYear = this.handleScrollToYear.bind(this);
    this.handleUpdateLocalYear = this.handleUpdateLocalYear.bind(this);
    this.years = getYears();
    this.state = {
      localYear: ''
    };
  }

  componentDidMount() {
    this.handleScrollToYear(this.props);
    this.handleUpdateLocalYear(this.props);
  }

  componentDidUpdate(prevProps) {
    let {
      viewedYear
    } = this.props;
    viewedYear = parseInt(viewedYear) || 0;
    let {
      viewedYear: oldViewedYear
    } = prevProps;
    oldViewedYear = parseInt(oldViewedYear) || 0;

    if (viewedYear !== oldViewedYear) {
      this.handleScrollToYear(this.props);
      this.handleUpdateLocalYear(this.props);
    }
  }

  handleUpdateLocalYear(props) {
    let {
      viewedYear
    } = props;
    viewedYear = parseInt(viewedYear) || 0;
    setTimeout(() => {
      this.setState({
        localYear: viewedYear
      });
    }, 150);
  }

  handleScrollToYear(props) {
    const {
      years = [],
      scrollToIndex
    } = this;
    let {
      viewedYear
    } = props;
    viewedYear = parseInt(viewedYear) || 0;
    const yearIndex = years.indexOf(viewedYear);
    yearIndex >= 0 && scrollToIndex && scrollToIndex(yearIndex, 0, {
      duration: 0
    });
  }

  getPublicMethods(methods) {
    const {
      scrollToIndex
    } = methods;
    this.scrollToIndex = scrollToIndex;
  }

  handleMonthClick(month) {
    const {
      onSelectMonth
    } = this.props;
    onSelectMonth && onSelectMonth(month);
  }

  handleYearClick(year) {
    const {
      onSelectYear
    } = this.props;
    onSelectYear && onSelectYear(year);
  }

  renderListItem({
    index,
    style: virtualizerStyle,
    ref
  }) {
    const {
      years
    } = this;
    const year = years[index];
    let {
      viewedYear,
      viewedMonth,
      monthNamesShort,
      isMonthOpen
    } = this.props;
    viewedYear = parseInt(viewedYear) || 0;
    let {
      localYear
    } = this.state;
    localYear = parseInt(localYear) || 0;
    return /*#__PURE__*/React.createElement(Container, {
      isCover: false,
      className: style.yearBox,
      eleRef: ref,
      style: virtualizerStyle
    }, /*#__PURE__*/React.createElement(Year, {
      year: year,
      onClick: this.handleYearClick,
      isActive: viewedYear === year,
      isOpen: isMonthOpen
    }), viewedYear === year && isMonthOpen ? /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      wrap: "wrap",
      align: "between",
      className: `${style.yearContainer} ${viewedYear !== localYear && viewedYear === year ? style.toggleYear : ''}`
    }, monthNamesData.map((month, index) => {
      const monthIndex = monthNamesData.indexOf(month);
      return /*#__PURE__*/React.createElement(Month, {
        key: month,
        month: month,
        onClick: this.handleMonthClick,
        isActive: monthIndex === viewedMonth,
        displayText: monthNamesShort[index] // hoverText={monthNames[index]}

      });
    }))) : null);
  }

  render() {
    const {
      years = []
    } = this;
    return /*#__PURE__*/React.createElement(Virtualizer, {
      elementRenderer: this.renderListItem,
      elementsCount: years.length,
      className: style.container,
      getExposedPublicMethods: this.getPublicMethods,
      isElementsFixedHeight: false,
      dataId: "yearList"
    });
  }

}
YearView.propTypes = YearView_propTypes;
YearView.defaultProps = YearView_defaultProps;