material-ui-pickers-fork/DateTimePicker/DateTimePickerHeader.js

React components, that implements material design pickers for material-ui v1

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DateTimePickerHeader = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _PickerToolbar = _interopRequireDefault(require("../_shared/PickerToolbar"));

var _ToolbarButton = _interopRequireDefault(require("../_shared/ToolbarButton"));

var _WithUtils = _interopRequireDefault(require("../_shared/WithUtils"));

var viewType = _interopRequireWildcard(require("../constants/date-picker-view"));

var DateTimePickerHeader = function DateTimePickerHeader(props) {
  var date = props.date,
      classes = props.classes,
      openView = props.openView,
      meridiemMode = props.meridiemMode,
      onOpenViewChange = props.onOpenViewChange,
      setMeridiemMode = props.setMeridiemMode,
      theme = props.theme,
      utils = props.utils,
      ampm = props.ampm;

  var changeOpenView = function changeOpenView(view) {
    return function () {
      return onOpenViewChange(view);
    };
  };

  var rtl = theme.direction === 'rtl';
  var hourMinuteClassName = rtl ? classes.hourMinuteLabelReverse : classes.hourMinuteLabel;
  return _react.default.createElement(_PickerToolbar.default, {
    className: classes.toolbar
  }, _react.default.createElement("div", {
    className: classes.dateHeader
  }, _react.default.createElement(_ToolbarButton.default, {
    variant: "subheading",
    onClick: changeOpenView(viewType.YEAR),
    selected: openView === viewType.YEAR,
    label: utils.getYearText(date)
  }), _react.default.createElement(_ToolbarButton.default, {
    variant: "display1",
    onClick: changeOpenView(viewType.DATE),
    selected: openView === viewType.DATE,
    label: utils.getDateTimePickerHeaderText(date)
  })), _react.default.createElement("div", {
    className: classes.timeHeader
  }, _react.default.createElement("div", {
    className: hourMinuteClassName
  }, _react.default.createElement(_ToolbarButton.default, {
    variant: "display2",
    onClick: changeOpenView(viewType.HOUR),
    selected: openView === viewType.HOUR,
    label: utils.getHourText(date, ampm)
  }), _react.default.createElement(_ToolbarButton.default, {
    variant: "display2",
    label: ":",
    selected: false,
    className: classes.separator
  }), _react.default.createElement(_ToolbarButton.default, {
    variant: "display2",
    onClick: changeOpenView(viewType.MINUTES),
    selected: openView === viewType.MINUTES,
    label: utils.getMinuteText(date)
  })), ampm && _react.default.createElement("div", {
    className: classes.ampmSelection
  }, _react.default.createElement(_ToolbarButton.default, {
    className: classes.ampmLabel,
    selected: meridiemMode === 'am',
    type: "subheading",
    label: utils.getMeridiemText('am'),
    onClick: setMeridiemMode('am')
  }), _react.default.createElement(_ToolbarButton.default, {
    className: classes.ampmLabel,
    selected: meridiemMode === 'pm',
    type: "subheading",
    label: utils.getMeridiemText('pm'),
    onClick: setMeridiemMode('pm')
  }))));
};

exports.DateTimePickerHeader = DateTimePickerHeader;
DateTimePickerHeader.propTypes = {
  date: _propTypes.default.object.isRequired,
  classes: _propTypes.default.object.isRequired,
  theme: _propTypes.default.object.isRequired,
  meridiemMode: _propTypes.default.string.isRequired,
  openView: _propTypes.default.string.isRequired,
  onOpenViewChange: _propTypes.default.func.isRequired,
  setMeridiemMode: _propTypes.default.func.isRequired,
  utils: _propTypes.default.object.isRequired,
  ampm: _propTypes.default.bool
};
DateTimePickerHeader.defaultProps = {
  ampm: true
};

var styles = function styles() {
  return {
    toolbar: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingLeft: 16,
      paddingRight: 16,
      justifyContent: 'space-around'
    },
    separator: {
      margin: '0 4px 0 2px',
      cursor: 'default'
    },
    ampmSelection: {
      marginLeft: 10,
      marginRight: -10
    },
    ampmLabel: {
      fontSize: 18
    },
    hourMinuteLabel: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'flex-end'
    },
    hourMinuteLabelReverse: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'flex-end',
      flexDirection: 'row-reverse'
    },
    dateHeader: {
      height: 65
    },
    timeHeader: {
      height: 65,
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'flex-end'
    }
  };
};

var _default = (0, _withStyles.default)(styles, {
  withTheme: true
})((0, _WithUtils.default)()(DateTimePickerHeader));

exports.default = _default;