From e6f56f6b4723b81de68ff03808b638b9eda3d347 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Wed, 5 May 2021 11:34:06 -0700 Subject: [PATCH] chore: address pr comments --- .../model3d/AnimationClipsControl.tsx | 30 +++++++------------ .../__tests__/AnimationControls-test.tsx | 6 ++-- .../viewers/controls/settings/Settings.tsx | 5 ++-- .../controls/settings/SettingsRadioItem.tsx | 2 +- .../settings/__tests__/Settings-test.tsx | 17 ++++++----- 5 files changed, 28 insertions(+), 32 deletions(-) diff --git a/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx b/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx index ca732a1b0..bd7f8ce2a 100644 --- a/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx +++ b/src/lib/viewers/controls/model3d/AnimationClipsControl.tsx @@ -15,24 +15,16 @@ export type Props = { onAnimationClipSelect: () => void; }; -export const padLeft = (x: number, width: number): string => { - return x.length >= width ? x : new Array(width - x.length + 1).join('0') + x; -}; - -export const formatDuration = (duration: number): string => { - let secondsLeft = Math.floor(duration); - const hours = Math.floor(secondsLeft / 3600); - const hoursStr = padLeft(hours.toString(), 2); - - secondsLeft -= hours * 3600; - const minutes = Math.floor(secondsLeft / 60); - const minutesStr = padLeft(minutes.toString(), 2); - - secondsLeft -= minutes * 60; - const secondsStr = padLeft(secondsLeft.toString(), 2); - - return `${hoursStr}:${minutesStr}:${secondsStr}`; -}; +export function formatDuration(time: number): string { + const hours = Math.floor(time / 3600); + const minutes = Math.floor((time % 3600) / 60); + const seconds = Math.floor((time % 3600) % 60); + const hour = hours < 10 ? `0${hours.toString()}` : hours.toString(); + const min = minutes < 10 ? `0${minutes.toString()}` : minutes.toString(); + const sec = seconds < 10 ? `0${seconds.toString()}` : seconds.toString(); + + return `${hour}:${min}:${sec}`; +} export default function AnimationClipsControl({ animationClips, @@ -40,7 +32,7 @@ export default function AnimationClipsControl({ onAnimationClipSelect, }: Props): JSX.Element { return ( - + {animationClips.map(({ duration, id, name }) => { return ( diff --git a/src/lib/viewers/controls/model3d/__tests__/AnimationControls-test.tsx b/src/lib/viewers/controls/model3d/__tests__/AnimationControls-test.tsx index 5b188e1b9..2c2f9c569 100644 --- a/src/lib/viewers/controls/model3d/__tests__/AnimationControls-test.tsx +++ b/src/lib/viewers/controls/model3d/__tests__/AnimationControls-test.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import AnimationClipsControl from '../AnimationClipsControl'; -import AnimationControls from '../AnimationControls'; +import AnimationControls, { Props as AnimationControlsProps } from '../AnimationControls'; import PlayPauseToggle from '../../media/PlayPauseToggle'; describe('AnimationControls', () => { - const getDefaults = (): AnimationClipsControlProps => ({ - animationClips: [{}], + const getDefaults = (): AnimationControlsProps => ({ + animationClips: [{ duration: 1, id: '1', name: 'one' }], currentAnimationClipId: '1', isPlaying: false, onAnimationClipSelect: jest.fn(), diff --git a/src/lib/viewers/controls/settings/Settings.tsx b/src/lib/viewers/controls/settings/Settings.tsx index fb4511fb9..288ef9b3d 100644 --- a/src/lib/viewers/controls/settings/Settings.tsx +++ b/src/lib/viewers/controls/settings/Settings.tsx @@ -11,13 +11,14 @@ import { decodeKeydown } from '../../../util'; export type Props = React.PropsWithChildren<{ className?: string; - icon?: React.ReactNode; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + toggle?: React.ComponentType; }>; export default function Settings({ children, className, - icon: ToggleIcon = SettingsToggle, + toggle: ToggleIcon = SettingsToggle, ...rest }: Props): JSX.Element | null { const [activeMenu, setActiveMenu] = React.useState(Menu.MAIN); diff --git a/src/lib/viewers/controls/settings/SettingsRadioItem.tsx b/src/lib/viewers/controls/settings/SettingsRadioItem.tsx index 2a463dd62..d0b973cd6 100644 --- a/src/lib/viewers/controls/settings/SettingsRadioItem.tsx +++ b/src/lib/viewers/controls/settings/SettingsRadioItem.tsx @@ -16,7 +16,7 @@ export type Value = boolean | number | string; function SettingsRadioItem(props: Props, ref: React.Ref): JSX.Element { const { className, isSelected, label, onChange, value } = props; - const displayedValue = label || value; + const displayedValue = label || value.toString(); const handleClick = (): void => { onChange(value); diff --git a/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx index a17e9800b..bc9695da1 100644 --- a/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx @@ -94,22 +94,25 @@ describe('Settings', () => { expect(wrapper.exists(SettingsToggle)).toBe(true); }); - describe('icon prop', () => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - function CustomIcon({ isOpen, ...rest }: object, ref: React.Ref): JSX.Element { - return
; + describe('toggle prop', () => { + function CustomIcon( + // eslint-disable-next-line @typescript-eslint/no-unused-vars + { isOpen, ...rest }: { isOpen: boolean; onClick: () => void }, + ref: React.Ref, + ): JSX.Element { + return
; } const CustomIconWithRef = React.forwardRef(CustomIcon); - test('should default to SettingsToggle icon', () => { + test('should default to SettingsToggle toggle', () => { const wrapper = getWrapper(); expect(wrapper.exists(SettingsToggle)).toBe(true); }); - test('should use provided icon', () => { - const wrapper = getWrapper({ icon: CustomIconWithRef }); + test('should use provided toggle', () => { + const wrapper = getWrapper({ toggle: CustomIconWithRef }); expect(wrapper.exists(SettingsToggle)).toBe(false); expect(wrapper.exists(CustomIconWithRef)).toBe(true);