@mui/x-date-pickers 5.0.0-alpha.0

package/legacy/ClockPicker/Clock.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { ClockPointer } from './ClockPointer';
+import { useUtils } from '../internals/hooks/useUtils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { getHours, getMinutes } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ClockRoot = styled('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(2)
+  };
+});
+var ClockClock = styled('div')({
+  backgroundColor: 'rgba(0,0,0,.07)',
+  borderRadius: '50%',
+  height: 220,
+  width: 220,
+  flexShrink: 0,
+  position: 'relative',
+  pointerEvents: 'none'
+});
+var ClockSquareMask = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'auto',
+  outline: 0,
+  // Disable scroll capabilities.
+  touchAction: 'none',
+  userSelect: 'none',
+  '@media (pointer: fine)': {
+    cursor: 'pointer',
+    borderRadius: '50%'
+  },
+  '&:active': {
+    cursor: 'move'
+  }
+});
+var ClockPin = styled('div')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: 6,
+    height: 6,
+    borderRadius: '50%',
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  };
+});
+var ClockAmButton = styled(IconButton)(function (_ref3) {
+  var theme = _ref3.theme,
+      ownerState = _ref3.ownerState;
+  return _extends({
+    zIndex: 1,
+    position: 'absolute',
+    bottom: ownerState.ampmInClock ? 64 : 8,
+    left: 8
+  }, ownerState.meridiemMode === 'am' && {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light
+    }
+  });
+});
+var ClockPmButton = styled(IconButton)(function (_ref4) {
+  var theme = _ref4.theme,
+      ownerState = _ref4.ownerState;
+  return _extends({
+    zIndex: 1,
+    position: 'absolute',
+    bottom: ownerState.ampmInClock ? 64 : 8,
+    right: 8
+  }, ownerState.meridiemMode === 'pm' && {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light
+    }
+  });
+});
+/**
+ * @ignore - internal component.
+ */
+
+export function Clock(props) {
+  var ampm = props.ampm,
+      ampmInClock = props.ampmInClock,
+      autoFocus = props.autoFocus,
+      children = props.children,
+      date = props.date,
+      getClockLabelText = props.getClockLabelText,
+      handleMeridiemChange = props.handleMeridiemChange,
+      isTimeDisabled = props.isTimeDisabled,
+      meridiemMode = props.meridiemMode,
+      _props$minutesStep = props.minutesStep,
+      minutesStep = _props$minutesStep === void 0 ? 1 : _props$minutesStep,
+      onChange = props.onChange,
+      selectedId = props.selectedId,
+      type = props.type,
+      value = props.value;
+  var ownerState = props;
+  var utils = useUtils();
+  var wrapperVariant = React.useContext(WrapperVariantContext);
+  var isMoving = React.useRef(false);
+  var isSelectedTimeDisabled = isTimeDisabled(value, type);
+  var isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
+
+  var handleValueChange = function handleValueChange(newValue, isFinish) {
+    if (isTimeDisabled(newValue, type)) {
+      return;
+    }
+
+    onChange(newValue, isFinish);
+  };
+
+  var setTime = function setTime(event, isFinish) {
+    var _ref5 = event,
+        offsetX = _ref5.offsetX,
+        offsetY = _ref5.offsetY;
+
+    if (offsetX === undefined) {
+      var rect = event.target.getBoundingClientRect();
+      offsetX = event.changedTouches[0].clientX - rect.left;
+      offsetY = event.changedTouches[0].clientY - rect.top;
+    }
+
+    var newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
+    handleValueChange(newSelectedValue, isFinish);
+  };
+
+  var handleTouchMove = function handleTouchMove(event) {
+    isMoving.current = true;
+    setTime(event, 'shallow');
+  };
+
+  var handleTouchEnd = function handleTouchEnd(event) {
+    if (isMoving.current) {
+      setTime(event, 'finish');
+      isMoving.current = false;
+    }
+  };
+
+  var handleMouseMove = function handleMouseMove(event) {
+    // event.buttons & PRIMARY_MOUSE_BUTTON
+    if (event.buttons > 0) {
+      setTime(event.nativeEvent, 'shallow');
+    }
+  };
+
+  var handleMouseUp = function handleMouseUp(event) {
+    if (isMoving.current) {
+      isMoving.current = false;
+    }
+
+    setTime(event.nativeEvent, 'finish');
+  };
+
+  var hasSelected = React.useMemo(function () {
+    if (type === 'hours') {
+      return true;
+    }
+
+    return value % 5 === 0;
+  }, [type, value]);
+  var keyboardControlStep = type === 'minutes' ? minutesStep : 1;
+  var listboxRef = React.useRef(null); // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+
+  useEnhancedEffect(function () {
+    if (autoFocus) {
+      // The ref not being resolved would be a bug in MUI.
+      listboxRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  var handleKeyDown = function handleKeyDown(event) {
+    // TODO: Why this early exit?
+    if (isMoving.current) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'Home':
+        // annulate both hours and minutes
+        handleValueChange(0, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'End':
+        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowUp':
+        handleValueChange(value + keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        handleValueChange(value - keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      default: // do nothing
+
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(ClockRoot, {
+    children: [/*#__PURE__*/_jsxs(ClockClock, {
+      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onMouseUp: handleMouseUp,
+        onMouseMove: handleMouseMove
+      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {}), date && /*#__PURE__*/_jsx(ClockPointer, {
+          type: type,
+          value: value,
+          isInner: isPointerInner,
+          hasSelected: hasSelected
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        "aria-activedescendant": selectedId,
+        "aria-label": getClockLabelText(type, date, utils),
+        ref: listboxRef,
+        role: "listbox",
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        children: children
+      })]
+    }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(ClockAmButton, {
+        onClick: function onClick() {
+          return handleMeridiemChange('am');
+        },
+        disabled: meridiemMode === null,
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "AM"
+        })
+      }), /*#__PURE__*/_jsx(ClockPmButton, {
+        disabled: meridiemMode === null,
+        onClick: function onClick() {
+          return handleMeridiemChange('pm');
+        },
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "PM"
+        })
+      })]
+    })]
+  });
+}

package/legacy/ClockPicker/ClockNumber.js

@@ -0,0 +1,70 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
+var ClockNumberRoot = styled('span')(function (_ref) {
+  var _extends2;
+
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  return _extends((_extends2 = {
+    height: CLOCK_HOUR_WIDTH,
+    width: CLOCK_HOUR_WIDTH,
+    position: 'absolute',
+    left: "calc((100% - ".concat(CLOCK_HOUR_WIDTH, "px) / 2)"),
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    color: theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    '&:focused': {
+      backgroundColor: theme.palette.background.paper
+    }
+  }, _defineProperty(_extends2, "&.".concat(classes.selected), {
+    color: theme.palette.primary.contrastText
+  }), _defineProperty(_extends2, "&.".concat(classes.disabled), {
+    pointerEvents: 'none',
+    color: theme.palette.text.disabled
+  }), _extends2), ownerState.inner && _extends({}, theme.typography.body2, {
+    color: theme.palette.text.secondary
+  }));
+});
+/**
+ * @ignore - internal component.
+ */
+
+export function ClockNumber(props) {
+  var className = props.className,
+      disabled = props.disabled,
+      index = props.index,
+      inner = props.inner,
+      label = props.label,
+      selected = props.selected,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var ownerState = props;
+  var angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
+  var length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
+  var x = Math.round(Math.cos(angle) * length);
+  var y = Math.round(Math.sin(angle) * length);
+  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
+    className: clsx(className, selected && classes.selected, disabled && classes.disabled),
+    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": selected ? true : undefined,
+    role: "option",
+    style: {
+      transform: "translate(".concat(x, "px, ").concat(y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2, "px")
+    },
+    ownerState: ownerState
+  }, other, {
+    children: label
+  }));
+}

package/legacy/ClockPicker/ClockNumbers.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { ClockNumber } from './ClockNumber';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @ignore - internal component.
+ */
+export var getHourNumbers = function getHourNumbers(_ref) {
+  var ampm = _ref.ampm,
+      date = _ref.date,
+      getClockNumberText = _ref.getClockNumberText,
+      isDisabled = _ref.isDisabled,
+      selectedId = _ref.selectedId,
+      utils = _ref.utils;
+  var currentHours = date ? utils.getHours(date) : null;
+  var hourNumbers = [];
+  var startHour = ampm ? 1 : 0;
+  var endHour = ampm ? 12 : 23;
+
+  var isSelected = function isSelected(hour) {
+    if (currentHours === null) {
+      return false;
+    }
+
+    if (ampm) {
+      if (hour === 12) {
+        return currentHours === 12 || currentHours === 0;
+      }
+
+      return currentHours === hour || currentHours - 12 === hour;
+    }
+
+    return currentHours === hour;
+  };
+
+  for (var _hour = startHour; _hour <= endHour; _hour += 1) {
+    var label = _hour.toString();
+
+    if (_hour === 0) {
+      label = '00';
+    }
+
+    var inner = !ampm && (_hour === 0 || _hour > 12);
+    label = utils.formatNumber(label);
+    var selected = isSelected(_hour);
+    hourNumbers.push( /*#__PURE__*/_jsx(ClockNumber, {
+      id: selected ? selectedId : undefined,
+      index: _hour,
+      inner: inner,
+      selected: selected,
+      disabled: isDisabled(_hour),
+      label: label,
+      "aria-label": getClockNumberText(label)
+    }, _hour));
+  }
+
+  return hourNumbers;
+};
+export var getMinutesNumbers = function getMinutesNumbers(_ref2) {
+  var utils = _ref2.utils,
+      value = _ref2.value,
+      isDisabled = _ref2.isDisabled,
+      getClockNumberText = _ref2.getClockNumberText,
+      selectedId = _ref2.selectedId;
+  var f = utils.formatNumber;
+  return [[5, f('05')], [10, f('10')], [15, f('15')], [20, f('20')], [25, f('25')], [30, f('30')], [35, f('35')], [40, f('40')], [45, f('45')], [50, f('50')], [55, f('55')], [0, f('00')]].map(function (_ref3, index) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        numberValue = _ref4[0],
+        label = _ref4[1];
+
+    var selected = numberValue === value;
+    return /*#__PURE__*/_jsx(ClockNumber, {
+      label: label,
+      id: selected ? selectedId : undefined,
+      index: index + 1,
+      inner: false,
+      disabled: isDisabled(numberValue),
+      selected: selected,
+      "aria-label": getClockNumberText(label)
+    }, numberValue);
+  });
+};