@douyinfe/semi-ui/lib/es/datePicker/navigation.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import _noop from "lodash/noop";
import React, { PureComponent } from 'react';
// import cls from 'classnames';
import PropTypes from 'prop-types';
import IconButton from '../iconButton';
import Button from '../button';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
import { IconChevronLeft, IconChevronRight, IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-icons';
const prefixCls = cssClasses.NAVIGATION;
export default class Navigation extends PureComponent {
  constructor(props) {
    super(props);
    this.navRef = /*#__PURE__*/React.createRef();
  }
  render() {
    const {
      forwardRef,
      monthText,
      onMonthClick,
      onNextMonth,
      onPrevMonth,
      onPrevYear,
      onNextYear,
      density,
      shouldBimonthSwitch,
      panelType
    } = this.props;
    const btnTheme = 'borderless';
    const iconBtnSize = density === 'compact' ? 'default' : 'large';
    const btnNoHorizontalPadding = true;
    const buttonSize = density === 'compact' ? 'small' : 'default';
    const isLeftPanel = panelType === strings.PANEL_TYPE_LEFT;
    const isRightPanel = panelType === strings.PANEL_TYPE_RIGHT;
    // syncSwitchMonth and the current panel is the left
    const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel;
    // syncSwitchMonth and the current panel is the right
    const hiddenRightPanelLeftButtons = shouldBimonthSwitch && isRightPanel;
    // `visibility: hidden` will keep the icon in position
    const leftButtonStyle = {};
    const rightButtonStyle = {};
    if (hiddenRightPanelLeftButtons) {
      leftButtonStyle.visibility = 'hidden';
    }
    if (hiddenLeftPanelRightButtons) {
      rightButtonStyle.visibility = 'hidden';
    }
    const ref = forwardRef || this.navRef;
    return /*#__PURE__*/React.createElement("div", {
      className: prefixCls,
      ref: ref
    }, /*#__PURE__*/React.createElement(IconButton, {
      key: "double-chevron-left",
      "aria-label": "Previous year",
      icon: /*#__PURE__*/React.createElement(IconDoubleChevronLeft, {
        "aria-hidden": true,
        size: iconBtnSize
      }),
      size: buttonSize,
      theme: btnTheme,
      noHorizontalPadding: btnNoHorizontalPadding,
      onClick: onPrevYear,
      style: leftButtonStyle
    }), /*#__PURE__*/React.createElement(IconButton, {
      key: "chevron-left",
      "aria-label": "Previous month",
      icon: /*#__PURE__*/React.createElement(IconChevronLeft, {
        "aria-hidden": true,
        size: iconBtnSize
      }),
      size: buttonSize,
      onClick: onPrevMonth,
      theme: btnTheme,
      noHorizontalPadding: btnNoHorizontalPadding,
      style: leftButtonStyle
    }), /*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-month`
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: onMonthClick,
      theme: btnTheme,
      size: buttonSize
    }, /*#__PURE__*/React.createElement("span", null, monthText))), /*#__PURE__*/React.createElement(IconButton, {
      key: "chevron-right",
      "aria-label": "Next month",
      icon: /*#__PURE__*/React.createElement(IconChevronRight, {
        "aria-hidden": true,
        size: iconBtnSize
      }),
      size: buttonSize,
      onClick: onNextMonth,
      theme: btnTheme,
      noHorizontalPadding: btnNoHorizontalPadding,
      style: rightButtonStyle
    }), /*#__PURE__*/React.createElement(IconButton, {
      key: "double-chevron-right",
      "aria-label": "Next year",
      icon: /*#__PURE__*/React.createElement(IconDoubleChevronRight, {
        "aria-hidden": true,
        size: iconBtnSize
      }),
      size: buttonSize,
      theme: btnTheme,
      noHorizontalPadding: btnNoHorizontalPadding,
      onClick: onNextYear,
      style: rightButtonStyle
    }));
  }
}
Navigation.propTypes = {
  monthText: PropTypes.string,
  density: PropTypes.string,
  onMonthClick: PropTypes.func,
  onNextMonth: PropTypes.func,
  onPrevMonth: PropTypes.func,
  onNextYear: PropTypes.func,
  onPrevYear: PropTypes.func,
  navPrev: PropTypes.node,
  navNext: PropTypes.node,
  // Whether to switch synchronously for two panels
  shouldBimonthSwitch: PropTypes.bool,
  // Panel type, divided into left panel and right panel
  panelType: PropTypes.oneOf([strings.PANEL_TYPE_LEFT, strings.PANEL_TYPE_RIGHT])
};
Navigation.defaultProps = {
  monthText: '',
  onMonthClick: _noop,
  onNextMonth: _noop,
  onPrevMonth: _noop,
  onNextYear: _noop,
  onPrevYear: _noop
};