Remove HourMark and MinuteMark components

Author: wojtekmaj

packages/react-clock/src/Clock.spec.tsx

@@ -99,7 +99,7 @@ describe('Clock', () => {
       });
     });
 
-    it('passes formatHour to HourMark components', () => {
+    it('uses formatHour properly if given', () => {
       const formatHour = () => 'H';
       const { container } = render(<Clock formatHour={formatHour} renderNumbers />);
 

packages/react-clock/src/Clock.tsx

@@ -2,10 +2,9 @@ import clsx from 'clsx';
 import { getHours, getMilliseconds, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
 
 import Hand from './Hand.js';
-import MinuteMark from './MinuteMark.js';
-import HourMark from './HourMark.js';
+import Mark from './Mark.js';
 
-import type { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
+import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
 
 import type {
   ClassName,
@@ -192,7 +191,7 @@ export type ClockProps = {
  */
 export default function Clock({
   className,
-  formatHour,
+  formatHour = defaultFormatHour,
   hourHandLength = 50,
   hourHandOppositeLength,
   hourHandWidth = 4,
@@ -227,7 +226,7 @@ export default function Clock({
 
       if (!isHourMark) {
         minuteMarks.push(
-          <MinuteMark
+          <Mark
             key={`minute_${i}`}
             angle={i * 6}
             length={minuteMarksLength}
@@ -248,14 +247,12 @@ export default function Clock({
     const hourMarks = [];
     for (let i = 1; i <= 12; i += 1) {
       hourMarks.push(
-        <HourMark
+        <Mark
           key={`hour_${i}`}
           angle={i * 30}
-          formatHour={formatHour}
           length={hourMarksLength}
-          locale={locale}
           name="hour"
-          number={renderNumbers ? i : undefined}
+          number={renderNumbers ? formatHour(locale, i) : undefined}
           width={hourMarksWidth}
         />,
       );

packages/react-clock/src/HourMark.spec.tsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import type { MarkLength, MarkWidth } from './shared/types.js';
 
 type MarkProps = {
@@ -8,7 +10,7 @@ type MarkProps = {
   width?: MarkWidth;
 };
 
-export default function Mark({
+const Mark: React.FC<MarkProps> = memo(function Mark({
   angle = 0,
   length = 10,
   name,
@@ -43,4 +45,6 @@ export default function Mark({
       ) : null}
     </div>
   );
-}
+});
+
+export default Mark;