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

package/legacy/ClockPicker/ClockPicker.js

@@ -0,0 +1,454 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { unstable_useId as useId } from '@mui/utils';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { Clock } from './Clock';
+import { pipe } from '../internals/utils/utils';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
+import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
+import { useViews } from '../internals/hooks/useViews';
+import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
+import { getClockPickerUtilityClass } from './clockPickerClasses';
+import { PickerViewRoot } from '../internals/components/PickerViewRoot';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    arrowSwitcher: ['arrowSwitcher']
+  };
+  return composeClasses(slots, getClockPickerUtilityClass, classes);
+};
+
+var ClockPickerRoot = styled(PickerViewRoot, {
+  name: 'MuiClockPicker',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+var ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
+  name: 'MuiClockPicker',
+  slot: 'ArrowSwitcher',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.arrowSwitcher;
+  }
+})({
+  position: 'absolute',
+  right: 12,
+  top: 15
+});
+
+var defaultGetClockLabelText = function defaultGetClockLabelText(view, time, adapter) {
+  return "Select ".concat(view, ". ").concat(time === null ? 'No time selected' : "Selected time is ".concat(adapter.format(time, 'fullTime')));
+};
+
+var defaultGetMinutesClockNumberText = function defaultGetMinutesClockNumberText(minutes) {
+  return "".concat(minutes, " minutes");
+};
+
+var defaultGetHoursClockNumberText = function defaultGetHoursClockNumberText(hours) {
+  return "".concat(hours, " hours");
+};
+
+var defaultGetSecondsClockNumberText = function defaultGetSecondsClockNumberText(seconds) {
+  return "".concat(seconds, " seconds");
+};
+
+/**
+ *
+ * API:
+ *
+ * - [ClockPicker API](https://mui.com/api/clock-picker/)
+ */
+export var ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(inProps, ref) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockPicker'
+  });
+  var _props$ampm = props.ampm,
+      ampm = _props$ampm === void 0 ? false : _props$ampm,
+      _props$ampmInClock = props.ampmInClock,
+      ampmInClock = _props$ampmInClock === void 0 ? false : _props$ampmInClock,
+      autoFocus = props.autoFocus,
+      components = props.components,
+      componentsProps = props.componentsProps,
+      date = props.date,
+      _props$disableIgnorin = props.disableIgnoringDatePartForTimeValidation,
+      disableIgnoringDatePartForTimeValidation = _props$disableIgnorin === void 0 ? false : _props$disableIgnorin,
+      _props$getClockLabelT = props.getClockLabelText,
+      getClockLabelText = _props$getClockLabelT === void 0 ? defaultGetClockLabelText : _props$getClockLabelT,
+      _props$getHoursClockN = props.getHoursClockNumberText,
+      getHoursClockNumberText = _props$getHoursClockN === void 0 ? defaultGetHoursClockNumberText : _props$getHoursClockN,
+      _props$getMinutesCloc = props.getMinutesClockNumberText,
+      getMinutesClockNumberText = _props$getMinutesCloc === void 0 ? defaultGetMinutesClockNumberText : _props$getMinutesCloc,
+      _props$getSecondsCloc = props.getSecondsClockNumberText,
+      getSecondsClockNumberText = _props$getSecondsCloc === void 0 ? defaultGetSecondsClockNumberText : _props$getSecondsCloc,
+      _props$leftArrowButto = props.leftArrowButtonText,
+      leftArrowButtonText = _props$leftArrowButto === void 0 ? 'open previous view' : _props$leftArrowButto,
+      maxTime = props.maxTime,
+      minTime = props.minTime,
+      _props$minutesStep = props.minutesStep,
+      minutesStep = _props$minutesStep === void 0 ? 1 : _props$minutesStep,
+      _props$rightArrowButt = props.rightArrowButtonText,
+      rightArrowButtonText = _props$rightArrowButt === void 0 ? 'open next view' : _props$rightArrowButt,
+      shouldDisableTime = props.shouldDisableTime,
+      showViewSwitcher = props.showViewSwitcher,
+      onChange = props.onChange,
+      view = props.view,
+      _props$views = props.views,
+      views = _props$views === void 0 ? ['hours', 'minutes'] : _props$views,
+      openTo = props.openTo,
+      onViewChange = props.onViewChange,
+      className = props.className;
+
+  var _useViews = useViews({
+    view: view,
+    views: views,
+    openTo: openTo,
+    onViewChange: onViewChange,
+    onChange: onChange
+  }),
+      openView = _useViews.openView,
+      setOpenView = _useViews.setOpenView,
+      nextView = _useViews.nextView,
+      previousView = _useViews.previousView,
+      handleChangeAndOpenNext = _useViews.handleChangeAndOpenNext;
+
+  var now = useNow();
+  var utils = useUtils();
+  var midnight = utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0);
+  var dateOrMidnight = date || midnight;
+
+  var _useMeridiemMode = useMeridiemMode(dateOrMidnight, ampm, handleChangeAndOpenNext),
+      meridiemMode = _useMeridiemMode.meridiemMode,
+      handleMeridiemChange = _useMeridiemMode.handleMeridiemChange;
+
+  var isTimeDisabled = React.useCallback(function (rawValue, viewType) {
+    if (date === null) {
+      return false;
+    }
+
+    var validateTimeValue = function validateTimeValue(getRequestedTimePoint) {
+      var isAfterComparingFn = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
+      return Boolean(minTime && isAfterComparingFn(minTime, getRequestedTimePoint('end')) || maxTime && isAfterComparingFn(getRequestedTimePoint('start'), maxTime) || shouldDisableTime && shouldDisableTime(rawValue, viewType));
+    };
+
+    switch (viewType) {
+      case 'hours':
+        {
+          var hoursWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
+          return validateTimeValue(function (when) {
+            return pipe(function (currentDate) {
+              return utils.setHours(currentDate, hoursWithMeridiem);
+            }, function (dateWithHours) {
+              return utils.setMinutes(dateWithHours, when === 'start' ? 0 : 59);
+            }, function (dateWithMinutes) {
+              return utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59);
+            })(date);
+          });
+        }
+
+      case 'minutes':
+        return validateTimeValue(function (when) {
+          return pipe(function (currentDate) {
+            return utils.setMinutes(currentDate, rawValue);
+          }, function (dateWithMinutes) {
+            return utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59);
+          })(date);
+        });
+
+      case 'seconds':
+        return validateTimeValue(function () {
+          return utils.setSeconds(date, rawValue);
+        });
+
+      default:
+        throw new Error('not supported');
+    }
+  }, [ampm, date, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, shouldDisableTime, utils]);
+  var selectedId = useId();
+  var viewProps = React.useMemo(function () {
+    switch (openView) {
+      case 'hours':
+        {
+          var handleHoursChange = function handleHoursChange(value, isFinish) {
+            var valueWithMeridiem = convertValueToMeridiem(value, meridiemMode, ampm);
+            handleChangeAndOpenNext(utils.setHours(dateOrMidnight, valueWithMeridiem), isFinish);
+          };
+
+          return {
+            onChange: handleHoursChange,
+            value: utils.getHours(dateOrMidnight),
+            children: getHourNumbers({
+              date: date,
+              utils: utils,
+              ampm: ampm,
+              onChange: handleHoursChange,
+              getClockNumberText: getHoursClockNumberText,
+              isDisabled: function isDisabled(value) {
+                return isTimeDisabled(value, 'hours');
+              },
+              selectedId: selectedId
+            })
+          };
+        }
+
+      case 'minutes':
+        {
+          var minutesValue = utils.getMinutes(dateOrMidnight);
+
+          var handleMinutesChange = function handleMinutesChange(value, isFinish) {
+            handleChangeAndOpenNext(utils.setMinutes(dateOrMidnight, value), isFinish);
+          };
+
+          return {
+            value: minutesValue,
+            onChange: handleMinutesChange,
+            children: getMinutesNumbers({
+              utils: utils,
+              value: minutesValue,
+              onChange: handleMinutesChange,
+              getClockNumberText: getMinutesClockNumberText,
+              isDisabled: function isDisabled(value) {
+                return isTimeDisabled(value, 'minutes');
+              },
+              selectedId: selectedId
+            })
+          };
+        }
+
+      case 'seconds':
+        {
+          var secondsValue = utils.getSeconds(dateOrMidnight);
+
+          var handleSecondsChange = function handleSecondsChange(value, isFinish) {
+            handleChangeAndOpenNext(utils.setSeconds(dateOrMidnight, value), isFinish);
+          };
+
+          return {
+            value: secondsValue,
+            onChange: handleSecondsChange,
+            children: getMinutesNumbers({
+              utils: utils,
+              value: secondsValue,
+              onChange: handleSecondsChange,
+              getClockNumberText: getSecondsClockNumberText,
+              isDisabled: function isDisabled(value) {
+                return isTimeDisabled(value, 'seconds');
+              },
+              selectedId: selectedId
+            })
+          };
+        }
+
+      default:
+        throw new Error('You must provide the type for ClockView');
+    }
+  }, [openView, utils, date, ampm, getHoursClockNumberText, getMinutesClockNumberText, getSecondsClockNumberText, meridiemMode, handleChangeAndOpenNext, dateOrMidnight, isTimeDisabled, selectedId]);
+  var ownerState = props;
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(ClockPickerRoot, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    children: [showViewSwitcher && /*#__PURE__*/_jsx(ClockPickerArrowSwitcher, {
+      className: classes.arrowSwitcher,
+      leftArrowButtonText: leftArrowButtonText,
+      rightArrowButtonText: rightArrowButtonText,
+      components: components,
+      componentsProps: componentsProps,
+      onLeftClick: function onLeftClick() {
+        return setOpenView(previousView);
+      },
+      onRightClick: function onRightClick() {
+        return setOpenView(nextView);
+      },
+      isLeftDisabled: !previousView,
+      isRightDisabled: !nextView,
+      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(Clock, _extends({
+      autoFocus: autoFocus,
+      date: date,
+      ampmInClock: ampmInClock,
+      type: openView,
+      ampm: ampm,
+      getClockLabelText: getClockLabelText,
+      minutesStep: minutesStep,
+      isTimeDisabled: isTimeDisabled,
+      meridiemMode: meridiemMode,
+      handleMeridiemChange: handleMeridiemChange,
+      selectedId: selectedId
+    }, viewProps))]
+  });
+});
+process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default false
+   */
+  ampm: PropTypes.bool,
+
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default false
+   */
+  ampmInClock: PropTypes.bool,
+
+  /**
+   * Set to `true` if focus should be moved to clock picker.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   */
+  components: PropTypes.object,
+
+  /**
+   * The props used for each slot inside.
+   */
+  componentsProps: PropTypes.object,
+
+  /**
+   * Selected date @DateIOType.
+   */
+  date: PropTypes.any,
+
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation: PropTypes.bool,
+
+  /**
+   * Accessible text that helps user to understand which time and view is selected.
+   * @param {ClockPickerView} view The current view rendered.
+   * @param {TDate | null} time The current time.
+   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
+   * @returns {string} The clock label.
+   * @default <TDate extends any>(
+   *   view: ClockView,
+   *   time: TDate | null,
+   *   adapter: MuiPickersAdapter<TDate>,
+   * ) =>
+   *   `Select ${view}. ${
+   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
+   *   }`
+   */
+  getClockLabelText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for hours.
+   * @param {string} hours The hours to format.
+   * @returns {string} the formatted hours text.
+   * @default (hours: string) => `${hours} hours`
+   */
+  getHoursClockNumberText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for minutes.
+   * @param {string} minutes The minutes to format.
+   * @returns {string} the formatted minutes text.
+   * @default (minutes: string) => `${minutes} minutes`
+   */
+  getMinutesClockNumberText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for seconds.
+   * @param {string} seconds The seconds to format.
+   * @returns {string} the formatted seconds text.
+   * @default (seconds: string) => `${seconds} seconds`
+   */
+  getSecondsClockNumberText: PropTypes.func,
+
+  /**
+   * Left arrow icon aria-label text.
+   * @default 'open previous view'
+   */
+  leftArrowButtonText: PropTypes.string,
+
+  /**
+   * Max time acceptable time.
+   * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+   */
+  maxTime: PropTypes.any,
+
+  /**
+   * Min time acceptable time.
+   * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+   */
+  minTime: PropTypes.any,
+
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep: PropTypes.number,
+
+  /**
+   * On change callback @DateIOType.
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Callback fired on view change.
+   * @param {ClockPickerView} view The new view.
+   */
+  onViewChange: PropTypes.func,
+
+  /**
+   * Initially open view.
+   * @default 'hours'
+   */
+  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+
+  /**
+   * Right arrow icon aria-label text.
+   * @default 'open next view'
+   */
+  rightArrowButtonText: PropTypes.string,
+
+  /**
+   * Dynamically check if time is disabled or not.
+   * If returns `false` appropriate time point will ot be acceptable.
+   * @param {number} timeValue The value to check.
+   * @param {ClockPickerView} clockType The clock type of the timeValue.
+   * @returns {boolean} Returns `true` if the time should be disabled
+   */
+  shouldDisableTime: PropTypes.func,
+  showViewSwitcher: PropTypes.bool,
+
+  /**
+   * Controlled open view.
+   */
+  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+
+  /**
+   * Views for calendar picker.
+   * @default ['hours', 'minutes']
+   */
+  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
+} : void 0;

package/legacy/ClockPicker/ClockPointer.js

@@ -0,0 +1,130 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["className", "hasSelected", "isInner", "type", "value"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ClockPointerRoot = styled('div')(function (_ref) {
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  return _extends({
+    width: 2,
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    left: 'calc(50% - 1px)',
+    bottom: '50%',
+    transformOrigin: 'center bottom 0px'
+  }, ownerState.toAnimateTransform && {
+    transition: theme.transitions.create(['transform', 'height'])
+  });
+});
+var ClockPointerThumb = styled('div')(function (_ref2) {
+  var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
+  return _extends({
+    width: 4,
+    height: 4,
+    backgroundColor: theme.palette.primary.contrastText,
+    borderRadius: '50%',
+    position: 'absolute',
+    top: -21,
+    left: "calc(50% - ".concat(CLOCK_HOUR_WIDTH / 2, "px)"),
+    border: "".concat((CLOCK_HOUR_WIDTH - 4) / 2, "px solid ").concat(theme.palette.primary.main),
+    boxSizing: 'content-box'
+  }, ownerState.hasSelected && {
+    backgroundColor: theme.palette.primary.main
+  });
+});
+/**
+ * @ignore - internal component.
+ * TODO: Remove class
+ */
+
+export var ClockPointer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClockPointer, _React$Component);
+
+  var _super = _createSuper(ClockPointer);
+
+  function ClockPointer() {
+    var _this;
+
+    _classCallCheck(this, ClockPointer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      toAnimateTransform: false,
+      previousType: undefined
+    };
+    return _this;
+  }
+
+  _createClass(ClockPointer, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          className = _this$props.className,
+          hasSelected = _this$props.hasSelected,
+          isInner = _this$props.isInner,
+          type = _this$props.type,
+          value = _this$props.value,
+          other = _objectWithoutProperties(_this$props, _excluded);
+
+      var ownerState = _extends({}, this.props, this.state);
+
+      var getAngleStyle = function getAngleStyle() {
+        var max = type === 'hours' ? 12 : 60;
+        var angle = 360 / max * value;
+
+        if (type === 'hours' && value > 12) {
+          angle -= 360; // round up angle to max 360 degrees
+        }
+
+        return {
+          height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
+          transform: "rotateZ(".concat(angle, "deg)")
+        };
+      };
+
+      return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
+        style: getAngleStyle(),
+        className: className,
+        ownerState: ownerState
+      }, other, {
+        children: /*#__PURE__*/_jsx(ClockPointerThumb, {
+          ownerState: ownerState
+        })
+      }));
+    }
+  }]);
+
+  return ClockPointer;
+}(React.Component);
+
+ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
+  if (nextProps.type !== state.previousType) {
+    return {
+      toAnimateTransform: true,
+      previousType: nextProps.type
+    };
+  }
+
+  return {
+    toAnimateTransform: false,
+    previousType: nextProps.type
+  };
+};

package/legacy/ClockPicker/clockPickerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockPickerUtilityClass(slot) {
+  return generateUtilityClass('MuiClockPicker', slot);
+}
+export var clockPickerClasses = generateUtilityClasses('MuiClockPicker', ['root', 'arrowSwitcher']);

package/legacy/ClockPicker/index.js

@@ -0,0 +1,2 @@
+export { ClockPicker } from './ClockPicker';
+export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';

package/legacy/ClockPicker/shared.js

@@ -0,0 +1,61 @@
+export var CLOCK_WIDTH = 220;
+export var CLOCK_HOUR_WIDTH = 36;
+var clockCenter = {
+  x: CLOCK_WIDTH / 2,
+  y: CLOCK_WIDTH / 2
+};
+var baseClockPoint = {
+  x: clockCenter.x,
+  y: 0
+};
+var cx = baseClockPoint.x - clockCenter.x;
+var cy = baseClockPoint.y - clockCenter.y;
+
+var rad2deg = function rad2deg(rad) {
+  return rad * (180 / Math.PI);
+};
+
+var getAngleValue = function getAngleValue(step, offsetX, offsetY) {
+  var x = offsetX - clockCenter.x;
+  var y = offsetY - clockCenter.y;
+  var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
+  var deg = rad2deg(atan);
+  deg = Math.round(deg / step) * step;
+  deg %= 360;
+  var value = Math.floor(deg / step) || 0;
+  var delta = Math.pow(x, 2) + Math.pow(y, 2);
+  var distance = Math.sqrt(delta);
+  return {
+    value: value,
+    distance: distance
+  };
+};
+
+export var getMinutes = function getMinutes(offsetX, offsetY) {
+  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var angleStep = step * 6;
+
+  var _getAngleValue = getAngleValue(angleStep, offsetX, offsetY),
+      value = _getAngleValue.value;
+
+  value = value * step % 60;
+  return value;
+};
+export var getHours = function getHours(offsetX, offsetY, ampm) {
+  var _getAngleValue2 = getAngleValue(30, offsetX, offsetY),
+      value = _getAngleValue2.value,
+      distance = _getAngleValue2.distance;
+
+  var hour = value || 12;
+
+  if (!ampm) {
+    if (distance < CLOCK_WIDTH / 2 - CLOCK_HOUR_WIDTH) {
+      hour += 12;
+      hour %= 24;
+    }
+  } else {
+    hour %= 12;
+  }
+
+  return hour;
+};