refactor(HourMinuteInput): Respond to PR comments

Author: philip-cline

lib/editor/components/HourMinuteInput.js

@@ -27,8 +27,9 @@ export default class HourMinuteInput extends Component<Props, State> {
     // Move to minute field when colon is typed
     if (key === ':') {
       evt.preventDefault()
+      const focusElement = evt.currentTarget.id === 'hours' ? 'minutes' : 'seconds'
       // $FlowFixMe this is a terrible hack, but unless we upgrade to react 17 and use modern refs, this is not possible otherwise
-      document.getElementById('minutes').select()
+      document.getElementById(focusElement).select()
       return
     }
 
@@ -75,6 +76,15 @@ export default class HourMinuteInput extends Component<Props, State> {
     const {hours, minutes, seconds} = this.state
 
     const defaultValue = typeof minutes === 'undefined' && typeof hours === 'undefined' ? '' : '00'
+    const separatorStyle = {zIndex: 9, position: 'relative', left: -2.5, fontWeight: 900}
+    const minuteSecondInputStyle = {
+      borderBottomRightRadius: standaloneInput ? 3 : 0,
+      borderLeft: 'none',
+      borderRadius: 0,
+      borderTopRightRadius: standaloneInput ? 3 : 0,
+      marginLeft: -5,
+      ...style
+    }
 
     return (
       <span style={{display: 'flex', alignItems: 'baseline'}}>
@@ -94,43 +104,27 @@ export default class HourMinuteInput extends Component<Props, State> {
           }}
           value={hours && hours < 10 ? `0${hours}` : hours || defaultValue}
         />
-        <span style={{zIndex: 9, position: 'relative', left: -2.5, fontWeight: 900}}>:</span>
+        <span style={separatorStyle}>:</span>
         <FormControl
           {...otherProps}
           id='minutes'
           onKeyDown={this._onKeyDown}
           onChange={this._onChange}
           onFocus={this._onFocus}
           placeholder={'mm'}
-          style={{
-            borderBottomRightRadius: standaloneInput ? 3 : 0,
-            borderLeft: 'none',
-            borderRadius: 0,
-            borderTopRightRadius: standaloneInput ? 3 : 0,
-            marginLeft: -5,
-            width: '6.5ch',
-            ...style
-          }}
+          style={{...minuteSecondInputStyle, width: '6.5ch'}}
           value={minutes && minutes < 10 ? `0${minutes}` : minutes || defaultValue}
         />
         {showSeconds && <>
-          <span style={{zIndex: 9, position: 'relative', left: -2.5, fontWeight: 900}}>:</span>
+          <span style={separatorStyle}>:</span>
           <FormControl
             {...otherProps}
             id='seconds'
             onKeyDown={this._onKeyDown}
             onChange={this._onChange}
             onFocus={this._onFocus}
             placeholder={'ss'}
-            style={{
-              borderBottomRightRadius: standaloneInput ? 3 : 0,
-              borderLeft: 'none',
-              borderRadius: 0,
-              borderTopRightRadius: standaloneInput ? 3 : 0,
-              marginLeft: -5,
-              width: '5.5ch',
-              ...style
-            }}
+            style={{...minuteSecondInputStyle, width: '5.5ch'}}
             value={seconds || defaultValue}
           />
         </>