@material-ui/lab/node/ClockPicker/ClockNumber.js

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

"use strict";

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

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

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

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

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

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));

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

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

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

const positions = {
  0: [0, 40],
  1: [55, 19.6],
  2: [94.4, 59.5],
  3: [109, 114],
  4: [94.4, 168.5],
  5: [54.5, 208.4],
  6: [0, 223],
  7: [-54.5, 208.4],
  8: [-94.4, 168.5],
  9: [-109, 114],
  10: [-94.4, 59.5],
  11: [-54.5, 19.6],
  12: [0, 5],
  13: [36.9, 49.9],
  14: [64, 77],
  15: [74, 114],
  16: [64, 151],
  17: [37, 178],
  18: [0, 188],
  19: [-37, 178],
  20: [-64, 151],
  21: [-74, 114],
  22: [-64, 77],
  23: [-37, 50]
};

const styles = theme => {
  const size = 32;
  const clockNumberColor = theme.palette.mode === 'light' ? theme.palette.text.primary : theme.palette.text.secondary;
  return (0, _styles.createStyles)({
    root: {
      outline: 0,
      width: size,
      height: size,
      userSelect: 'none',
      position: 'absolute',
      left: `calc((100% - ${size}px) / 2)`,
      display: 'inline-flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: '50%',
      color: clockNumberColor,
      '&:focused': {
        backgroundColor: theme.palette.background.paper
      }
    },
    clockNumberSelected: {
      color: theme.palette.primary.contrastText
    },
    clockNumberDisabled: {
      pointerEvents: 'none',
      color: (0, _styles.alpha)(clockNumberColor, 0.2)
    }
  });
};

exports.styles = styles;

/**
 * @ignore - internal component.
 */
const ClockNumber = props => {
  const {
    disabled,
    getClockNumberText,
    index,
    isInner,
    label,
    onSelect,
    selected,
    classes
  } = props;
  const canAutoFocus = (0, _useCanAutoFocus.useCanAutoFocus)();
  const ref = React.useRef(null);
  const className = (0, _clsx.default)(classes.root, selected && classes.clockNumberSelected, disabled && classes.clockNumberDisabled);
  const transformStyle = React.useMemo(() => {
    const position = positions[index];
    return {
      transform: `translate(${position[0]}px, ${position[1]}px`
    };
  }, [index]);
  React.useEffect(() => {
    if (canAutoFocus && selected && ref.current) {
      ref.current.focus();
    }
  }, [canAutoFocus, selected]);
  return /*#__PURE__*/React.createElement(_ButtonBase.default, {
    focusRipple: true,
    centerRipple: true,
    ref: ref,
    "aria-disabled": disabled,
    tabIndex: disabled ? -1 : 0,
    component: "span",
    className: className,
    style: transformStyle,
    "aria-label": getClockNumberText(label),
    onKeyDown: (0, _utils.onSpaceOrEnter)(() => onSelect('finish'))
  }, /*#__PURE__*/React.createElement(_Typography.default, {
    variant: isInner ? 'body2' : 'body1'
  }, label));
};

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

exports.default = _default;