@material-ui/lab/node/YearPicker/PickersYear.js

Material-UI Lab - Incubator for Material-UI React components.

"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.styles = void 0;

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

var React = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _utils = require("@material-ui/core/utils");

var _styles = require("@material-ui/core/styles");

var _utils2 = require("../internal/pickers/utils");

var _useCanAutoFocus = require("../internal/pickers/hooks/useCanAutoFocus");

var _WrapperVariantContext = require("../internal/pickers/wrappers/WrapperVariantContext");

const styles = theme => (0, _styles.createStyles)({
  root: {
    flexBasis: '33.3%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  modeDesktop: {
    flexBasis: '25%'
  },
  yearButton: (0, _extends2.default)({
    color: 'unset',
    backgroundColor: 'transparent',
    border: 'none',
    outline: 0
  }, theme.typography.subtitle1, {
    margin: '8px 0',
    height: 36,
    width: 72,
    borderRadius: 16,
    cursor: 'pointer',
    '&:focus, &:hover': {
      backgroundColor: (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
    },
    '&$disabled': {
      color: theme.palette.text.secondary
    },
    '&$selected': {
      color: theme.palette.primary.contrastText,
      backgroundColor: theme.palette.primary.main,
      '&:focus, &:hover': {
        backgroundColor: theme.palette.primary.dark
      }
    }
  }),
  disabled: {},
  selected: {}
});

exports.styles = styles;

/**
 * @ignore - internal component.
 */
const PickersYear = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
  const {
    allowKeyboardControl,
    classes,
    children,
    disabled,
    focused,
    onSelect,
    selected,
    value
  } = props;
  const ref = React.useRef(null);
  const refHandle = (0, _utils.useForkRef)(ref, forwardedRef);
  const canAutoFocus = (0, _useCanAutoFocus.useCanAutoFocus)();
  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
  React.useEffect(() => {
    if (canAutoFocus && focused && ref.current && !disabled && allowKeyboardControl) {
      ref.current.focus();
    }
  }, [allowKeyboardControl, canAutoFocus, disabled, focused]);
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(classes.root, wrapperVariant === 'desktop' && classes.modeDesktop)
  }, /*#__PURE__*/React.createElement("button", {
    ref: refHandle,
    disabled: disabled,
    type: "button",
    tabIndex: selected ? 0 : -1,
    onClick: () => onSelect(value),
    onKeyDown: (0, _utils2.onSpaceOrEnter)(() => onSelect(value)),
    className: (0, _clsx.default)(classes.yearButton, disabled && classes.disabled, selected && classes.selected)
  }, children));
});

var _default = (0, _styles.withStyles)(styles, {
  name: 'MuiPickersYear'
})(PickersYear);

exports.default = _default;