@material-ui/lab/node/ClockPicker/Clock.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 _propTypes = _interopRequireDefault(require("prop-types"));

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

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

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

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

var _ClockPointer = _interopRequireDefault(require("./ClockPointer"));

var _useUtils = require("../internal/pickers/hooks/useUtils");

var _dimensions = require("../internal/pickers/constants/dimensions");

var _timeUtils = require("../internal/pickers/time-utils");

var _useKeyDown = require("../internal/pickers/hooks/useKeyDown");

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

const styles = theme => (0, _styles.createStyles)({
  root: {
    display: 'flex',
    justifyContent: 'center',
    position: 'relative',
    minHeight: _dimensions.VIEW_HEIGHT,
    alignItems: 'center'
  },
  clock: {
    backgroundColor: 'rgba(0,0,0,.07)',
    borderRadius: '50%',
    height: 260,
    width: 260,
    position: 'relative',
    pointerEvents: 'none'
  },
  squareMask: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    pointerEvents: 'auto',
    outline: 'none',
    touchActions: 'none',
    userSelect: 'none',
    '&:active': {
      cursor: 'move'
    }
  },
  pin: {
    width: 6,
    height: 6,
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.main,
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)'
  },
  amButton: {
    zIndex: 1,
    left: 8,
    position: 'absolute',
    bottom: 8
  },
  pmButton: {
    zIndex: 1,
    position: 'absolute',
    bottom: 8,
    right: 8
  },
  meridiemButtonSelected: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.primary.light
    }
  }
});

exports.styles = styles;

var _ref = /*#__PURE__*/React.createElement(_Typography.default, {
  variant: "caption"
}, "AM");

var _ref2 = /*#__PURE__*/React.createElement(_Typography.default, {
  variant: "caption"
}, "PM");

/**
 * @ignore - internal component.
 */
function Clock(props) {
  const {
    allowKeyboardControl,
    ampm,
    ampmInClock = false,
    children: numbersElementsArray,
    classes,
    date,
    handleMeridiemChange,
    isTimeDisabled,
    meridiemMode,
    minutesStep = 1,
    onChange,
    type,
    value,
    getClockLabelText
  } = props;
  const utils = (0, _useUtils.useUtils)();
  const isStatic = React.useContext(_WrapperVariantContext.IsStaticVariantContext);
  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
  const isMoving = React.useRef(false);
  const isSelectedTimeDisabled = isTimeDisabled(value, type);
  const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);

  const handleValueChange = (newValue, isFinish) => {
    if (isTimeDisabled(newValue, type)) {
      return;
    }

    onChange(newValue, isFinish);
  };

  const setTime = (e, isFinish) => {
    let {
      offsetX,
      offsetY
    } = e;

    if (typeof offsetX === 'undefined') {
      const rect = e.target.getBoundingClientRect();
      offsetX = e.changedTouches[0].clientX - rect.left;
      offsetY = e.changedTouches[0].clientY - rect.top;
    }

    const newSelectedValue = type === 'seconds' || type === 'minutes' ? (0, _timeUtils.getMinutes)(offsetX, offsetY, minutesStep) : (0, _timeUtils.getHours)(offsetX, offsetY, Boolean(ampm));
    handleValueChange(newSelectedValue, isFinish);
  };

  const handleTouchMove = e => {
    isMoving.current = true;
    setTime(e, 'shallow');
  };

  const handleTouchEnd = e => {
    if (isMoving.current) {
      setTime(e, 'finish');
      isMoving.current = false;
    }
  };

  const handleMouseMove = e => {
    e.preventDefault();
    e.stopPropagation(); // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari

    const isButtonPressed = // tslint:disable-next-line deprecation
    typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;

    if (isButtonPressed) {
      setTime(e.nativeEvent, 'shallow');
    }
  };

  const handleMouseUp = e => {
    if (isMoving.current) {
      isMoving.current = false;
    }

    setTime(e.nativeEvent, 'finish');
  };

  const hasSelected = React.useMemo(() => {
    if (type === 'hours') {
      return true;
    }

    return value % 5 === 0;
  }, [type, value]);
  const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
  (0, _useKeyDown.useGlobalKeyDown)(Boolean(allowKeyboardControl !== null && allowKeyboardControl !== void 0 ? allowKeyboardControl : !isStatic) && !isMoving.current, {
    [_useKeyDown.keycode.Home]: () => handleValueChange(0, 'partial'),
    // annulate both hours and minutes
    [_useKeyDown.keycode.End]: () => handleValueChange(type === 'minutes' ? 59 : 23, 'partial'),
    [_useKeyDown.keycode.ArrowUp]: () => handleValueChange(value + keyboardControlStep, 'partial'),
    [_useKeyDown.keycode.ArrowDown]: () => handleValueChange(value - keyboardControlStep, 'partial')
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.clock
  }, /*#__PURE__*/React.createElement("div", {
    role: "menu",
    tabIndex: -1,
    className: classes.squareMask,
    onTouchMove: handleTouchMove,
    onTouchEnd: handleTouchEnd,
    onMouseUp: handleMouseUp,
    onMouseMove: handleMouseMove
  }), !isSelectedTimeDisabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classes.pin
  }), date && /*#__PURE__*/React.createElement(_ClockPointer.default, {
    type: type,
    value: value,
    isInner: isPointerInner,
    hasSelected: hasSelected,
    "aria-live": "polite",
    "aria-label": getClockLabelText(type, date, utils)
  })), numbersElementsArray), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_IconButton.default, {
    onClick: () => handleMeridiemChange('am'),
    disabled: meridiemMode === null,
    className: (0, _clsx.default)(classes.amButton, meridiemMode === 'am' && classes.meridiemButtonSelected)
  }, _ref), /*#__PURE__*/React.createElement(_IconButton.default, {
    disabled: meridiemMode === null,
    onClick: () => handleMeridiemChange('pm'),
    className: (0, _clsx.default)(classes.pmButton, meridiemMode === 'pm' && classes.meridiemButtonSelected)
  }, _ref2)));
}

process.env.NODE_ENV !== "production" ? Clock.propTypes = {
  ampm: _propTypes.default.bool,
  minutesStep: _propTypes.default.number
} : void 0;

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

exports.default = _default;