@material-ui/lab/modern/ClockPicker/ClockNumbers.js

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

import * as React from 'react';
import ClockNumber from './ClockNumber';

/**
 * @ignore - internal component.
 */
export const getHourNumbers = ({
  ampm,
  date,
  getClockNumberText,
  isDisabled,
  onChange,
  utils
}) => {
  const currentHours = date ? utils.getHours(date) : null;
  const hourNumbers = [];
  const startHour = ampm ? 1 : 0;
  const endHour = ampm ? 12 : 23;

  const 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 (let hour = startHour; hour <= endHour; hour += 1) {
    let label = hour.toString();

    if (hour === 0) {
      label = '00';
    }

    const isInner = !ampm && (hour === 0 || hour > 12);
    hourNumbers.push( /*#__PURE__*/React.createElement(ClockNumber, {
      key: hour,
      index: hour,
      isInner: isInner,
      selected: isSelected(hour),
      disabled: isDisabled(hour),
      label: utils.formatNumber(label),
      onSelect: () => onChange(hour, 'finish'),
      getClockNumberText: getClockNumberText
    }));
  }

  return hourNumbers;
};
export const getMinutesNumbers = ({
  utils,
  value,
  onChange,
  isDisabled,
  getClockNumberText
}) => {
  const 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(([numberValue, label], index) => /*#__PURE__*/React.createElement(ClockNumber, {
    key: numberValue,
    label: label,
    index: index + 1,
    disabled: isDisabled(numberValue),
    selected: numberValue === value,
    onSelect: isFinish => onChange(numberValue, isFinish),
    getClockNumberText: getClockNumberText
  }));
};