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

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

import * as React from 'react';
import clsx from 'clsx';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';
import { createStyles, withStyles, alpha } from '@material-ui/core/styles';
import { onSpaceOrEnter } from '../internal/pickers/utils';
import { useCanAutoFocus } from '../internal/pickers/hooks/useCanAutoFocus';
var 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]
};
export var styles = function styles(theme) {
  var size = 32;
  var clockNumberColor = theme.palette.mode === 'light' ? theme.palette.text.primary : theme.palette.text.secondary;
  return createStyles({
    root: {
      outline: 0,
      width: size,
      height: size,
      userSelect: 'none',
      position: 'absolute',
      left: "calc((100% - ".concat(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: alpha(clockNumberColor, 0.2)
    }
  });
};

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

export default withStyles(styles, {
  name: 'MuiClockNumber'
})(ClockNumber);