fix: use shared ControllerButton, prevent submitting form

zhihu · Sep 18, 2021 · c490426 · c490426
1 parent 406af3c
commit c490426
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 58 deletions.
diff --git a/packages/griffith/src/components/Controller.styles.ts b/packages/griffith/src/components/Controller.styles.ts
@@ -82,12 +82,12 @@ export default StyleSheet.create({
     color: 'rgba(255, 255, 255, 0.9)',
   },
 
-  qualityButton: {
+  labelButton: {
     width: 'auto',
     lineHeight: 1.5,
   },
 
-  qualityButtonText: {
+  labelButtonText: {
     fontSize: '0.875em',
   },
 

diff --git a/packages/griffith/src/components/Controller.tsx b/packages/griffith/src/components/Controller.tsx
@@ -34,7 +34,7 @@ type ControllerProps = {
   onVolumeChange?: (volume: number) => void
   onToggleFullScreen?: () => void
   onTogglePageFullScreen: (...args: void[]) => void
-  onTogglePip?: (...args: void[]) => void
+  onTogglePip?: (...args: any[]) => void
   onProgressDotHover?: (...args: any[]) => any
   onProgressDotLeave?: (...args: any[]) => any
   show?: boolean
@@ -333,7 +333,7 @@ class Controller extends Component<ControllerProps, State> {
           <div className={css(styles.rootBottomLeft)}>
             {!hiddenPlayButton && (
               <PlayButtonItem
-                isPlaying={isPlaying}
+                isPlaying={isPlaying!}
                 onClick={() => this.handleToggle('button')}
               />
             )}
@@ -354,7 +354,7 @@ class Controller extends Component<ControllerProps, State> {
             {/* TODO: 网页全屏暂时删除 */}
             {!hiddenFullScreenButton && (
               <FullScreenButtonItem
-                isFullScreen={isFullScreen}
+                isFullScreen={isFullScreen!}
                 onClick={onToggleFullScreen}
               />
             )}

diff --git a/packages/griffith/src/components/items/CombinedTimeItem.tsx b/packages/griffith/src/components/items/CombinedTimeItem.tsx
@@ -5,7 +5,7 @@ import Time from '../Time'
 
 const CombinedTimeItem = ({isFullScreen, currentTime, duration}: any) => (
   <div className={css(styles.time, isFullScreen && styles.fullScreenedTime)}>
-    <div className={css((styles as any).timeText)}>
+    <div>
       <Time value={currentTime} />
       {' / '}
       <Time value={duration} />

diff --git a/packages/griffith/src/components/items/ControllerButton.tsx b/packages/griffith/src/components/items/ControllerButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import {css} from 'aphrodite/no-important'
+import Icon from '../Icon'
+import styles from '../Controller.styles'
+
+type OwnProps = {
+  icon?: JSX.Element
+  label?: JSX.Element | string
+}
+
+const ControllerButton: React.FC<
+  OwnProps & React.HTMLAttributes<HTMLButtonElement>
+> = ({icon, label, ...props}) => {
+  return (
+    <button
+      {...props}
+      className={css(styles.button, label ? styles.labelButton : null)}
+      type="button"
+    >
+      {icon && <Icon icon={icon} />}
+      {label && <span className={css(styles.labelButtonText)}>{label}</span>}
+    </button>
+  )
+}
+
+export default ControllerButton
diff --git a/packages/griffith/src/components/items/FullScreenButtonItem.tsx b/packages/griffith/src/components/items/FullScreenButtonItem.tsx
@@ -2,20 +2,24 @@ import React from 'react'
 import {css} from 'aphrodite/no-important'
 import {ua} from 'griffith-utils'
 import styles from '../Controller.styles'
-import Icon from '../Icon'
 import * as icons from '../icons/controller'
 import Tooltip from '../Tooltip'
 import Hover from '../Hover'
+import ControllerButton from './ControllerButton'
 
 const {isMobile} = ua
 
-const FullScreenButtonItem = ({isFullScreen, onClick}: any) => (
+const FullScreenButtonItem: React.FC<{
+  isFullScreen: boolean
+  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
+}> = ({isFullScreen, onClick}) => (
   <Hover className={css(styles.menuContainer)}>
     {(isFullScreenHovered: any) => (
-      <React.Fragment>
-        <button className={css(styles.button)} onClick={onClick}>
-          <Icon icon={isFullScreen ? icons.smallscreen : icons.fullscreen} />
-        </button>
+      <>
+        <ControllerButton
+          icon={isFullScreen ? icons.smallscreen : icons.fullscreen}
+          onClick={onClick}
+        />
         <div
           className={css(
             styles.fullScreenTooltip,
@@ -34,7 +38,7 @@ const FullScreenButtonItem = ({isFullScreen, onClick}: any) => (
             />
           )}
         </div>
-      </React.Fragment>
+      </>
     )}
   </Hover>
 )

diff --git a/packages/griffith/src/components/items/PageFullScreenButtonItem.tsx b/packages/griffith/src/components/items/PageFullScreenButtonItem.tsx
@@ -2,22 +2,24 @@ import React from 'react'
 import {css} from 'aphrodite/no-important'
 import {ua} from 'griffith-utils'
 import styles from '../Controller.styles'
-import Icon from '../Icon'
 import * as icons from '../icons/controller'
 import Tooltip from '../Tooltip'
 import Hover from '../Hover'
+import ControllerButton from './ControllerButton'
 
 const {isMobile} = ua
 
-const PageFullScreenButtonItem = ({isFullScreen, onClick}: any) => (
+const PageFullScreenButtonItem: React.FC<{
+  isFullScreen: boolean
+  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
+}> = ({isFullScreen, onClick}) => (
   <Hover className={css(styles.menuContainer)}>
     {(isFullScreenHovered) => (
-      <React.Fragment>
-        <button className={css(styles.button)} onClick={onClick}>
-          <Icon
-            icon={isFullScreen ? icons.exitPageScreen : icons.enterPageScreen}
-          />
-        </button>
+      <>
+        <ControllerButton
+          icon={isFullScreen ? icons.exitPageScreen : icons.enterPageScreen}
+          onClick={onClick}
+        />
         <div
           className={css(
             styles.fullScreenTooltip,
@@ -36,7 +38,7 @@ const PageFullScreenButtonItem = ({isFullScreen, onClick}: any) => (
             />
           )}
         </div>
-      </React.Fragment>
+      </>
     )}
   </Hover>
 )

diff --git a/packages/griffith/src/components/items/PipButtonItem.tsx b/packages/griffith/src/components/items/PipButtonItem.tsx
@@ -2,20 +2,24 @@ import React from 'react'
 import {css} from 'aphrodite/no-important'
 import {ua} from 'griffith-utils'
 import styles from '../Controller.styles'
-import Icon from '../Icon'
 import * as icons from '../icons/controller'
 import Tooltip from '../Tooltip'
 import Hover from '../Hover'
+import ControllerButton from './ControllerButton'
 
 const {isMobile} = ua
 
-const PipButtonItem = ({isPip, onClick}: any) => (
+const PipButtonItem: React.FC<{
+  isPip: boolean
+  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
+}> = ({isPip, onClick}) => (
   <Hover className={css(styles.menuContainer)}>
     {(isPipHovered) => (
-      <React.Fragment>
-        <button className={css(styles.button)} onClick={onClick}>
-          <Icon icon={isPip ? icons.exitPip : icons.pip} />
-        </button>
+      <>
+        <ControllerButton
+          icon={isPip ? icons.exitPip : icons.pip}
+          onClick={onClick}
+        />
         <div
           className={css(
             styles.pipTooltip,
@@ -27,7 +31,7 @@ const PipButtonItem = ({isPip, onClick}: any) => (
             <Tooltip content={isPip ? 'action-exit-pip' : 'action-enter-pip'} />
           )}
         </div>
-      </React.Fragment>
+      </>
     )}
   </Hover>
 )

diff --git a/packages/griffith/src/components/items/PlayButtonItem.tsx b/packages/griffith/src/components/items/PlayButtonItem.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import {css} from 'aphrodite/no-important'
-import styles from '../Controller.styles'
-import Icon from '../Icon'
 import * as icons from '../icons/controller'
+import ControllerButton from './ControllerButton'
 
-const PlayButtonItem = ({isPlaying, onClick}: any) => (
-  <div className={css((styles as any).toggle)}>
-    <button className={css(styles.button)} onClick={onClick}>
-      <Icon icon={isPlaying ? icons.pause : icons.play} />
-    </button>
+const PlayButtonItem: React.FC<{
+  isPlaying: boolean
+  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
+}> = ({isPlaying, onClick}) => (
+  <div>
+    <ControllerButton
+      icon={isPlaying ? icons.pause : icons.play}
+      onClick={onClick}
+    />
   </div>
 )
 

diff --git a/packages/griffith/src/components/items/PlaybackRateMenuItem.tsx b/packages/griffith/src/components/items/PlaybackRateMenuItem.tsx
@@ -4,6 +4,7 @@ import VideoSourceContext from '../../contexts/VideoSourceContext'
 import reverseArray from '../../utils/reverseArray'
 import styles from '../Controller.styles'
 import TranslatedText from '../TranslatedText'
+import ControllerButton from './ControllerButton'
 
 type State = {
   isPlaybackRateHovered: boolean
@@ -36,15 +37,15 @@ class PlaybackRateMenuItem extends React.PureComponent<
               onMouseEnter={this.handlePlaybackRatePointerEnter}
               onMouseLeave={this.handlePlaybackRatePointerLeave}
             >
-              <button className={css(styles.button, styles.qualityButton)}>
-                <span className={css(styles.qualityButtonText)}>
-                  {currentPlaybackRate.value === 1.0 ? (
+              <ControllerButton
+                label={
+                  currentPlaybackRate.value === 1.0 ? (
                     <TranslatedText name={'playback-rate'} />
                   ) : (
                     `${currentPlaybackRate.text}`
-                  )}
-                </span>
-              </button>
+                  )
+                }
+              />
               <div
                 className={css(
                   styles.menu,

diff --git a/packages/griffith/src/components/items/QualityMenuItem.tsx b/packages/griffith/src/components/items/QualityMenuItem.tsx
@@ -4,7 +4,7 @@ import {Quality} from '../../types'
 import VideoSourceContext from '../../contexts/VideoSourceContext'
 import reverseArray from '../../utils/reverseArray'
 import TranslatedText from '../TranslatedText'
-
+import ControllerButton from './ControllerButton'
 import styles from '../Controller.styles'
 
 const QUALITIES: Record<Quality, `quality-${Quality}`> = {
@@ -43,11 +43,9 @@ class QualityMenuItem extends React.PureComponent<QualityMenuItemProps, State> {
               onMouseEnter={this.handleQualityPointerEnter}
               onMouseLeave={this.handleQualityPointerLeave}
             >
-              <button className={css(styles.button, styles.qualityButton)}>
-                <span className={css(styles.qualityButtonText)}>
-                  <TranslatedText name={QUALITIES[currentQuality]} />
-                </span>
-              </button>
+              <ControllerButton
+                label={<TranslatedText name={QUALITIES[currentQuality]} />}
+              />
               <div
                 className={css(
                   styles.menu,

diff --git a/packages/griffith/src/components/items/VolumeItem.tsx b/packages/griffith/src/components/items/VolumeItem.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import {css} from 'aphrodite/no-important'
 import VolumeSlider from '../VolumeSlider'
-import Icon from '../Icon'
 import * as icons from '../icons/controller'
 import styles from '../Controller.styles'
+import ControllerButton from './ControllerButton'
 
 const VolumeItem = ({
   volume,
@@ -20,9 +20,10 @@ const VolumeItem = ({
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
   >
-    <button className={css(styles.button)} onClick={onToggleMuted}>
-      <Icon icon={volume === 0 ? icons.muted : icons.volume} />
-    </button>
+    <ControllerButton
+      icon={volume === 0 ? icons.muted : icons.volume}
+      onClick={onToggleMuted}
+    />
     <div className={css(styles.menu, menuShown && styles.menuShown)}>
       <VolumeSlider
         value={volume}

diff --git a/packages/griffith/src/components/items/__tests__/ControllerButton.spec.tsx b/packages/griffith/src/components/items/__tests__/ControllerButton.spec.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import {render, fireEvent, screen} from '@testing-library/react'
+import ControllerButton from '../ControllerButton'
+
+describe('ControllerButton', () => {
+  it('get ControllerButton component', () => {
+    const onSubmit = jest.fn()
+    const onClick = jest.fn()
+    render(
+      <form onSubmit={onSubmit}>
+        <ControllerButton onClick={onClick} />
+      </form>
+    )
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toBeCalled()
+    expect(onSubmit).not.toBeCalled()
+  })
+})
diff --git a/...ages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap b/...ages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CombinedTimeItem get CombinedTimeItem component 1`] = `
 <div>
   <div class="time_kviad4-o_O-fullScreenedTime_1xxtrer">
-    <div class=""><span>00:06</span> / <span>03:02</span></div>
+    <div><span>00:06</span> / <span>03:02</span></div>
   </div>
 </div>
 

diff --git a/.../griffith/src/components/items/__tests__/__snapshots__/FullScreenButtonItem.spec.tsx.snap b/.../griffith/src/components/items/__tests__/__snapshots__/FullScreenButtonItem.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FullScreenButtonItem get FullScreenButtonItem component 1`] = `
 <div>
   <div class="menuContainer_e296pg">
-    <button class="button_1j0k413">
+    <button class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path

diff --git a/packages/griffith/src/components/items/__tests__/__snapshots__/PlayButtonItem.spec.tsx.snap b/packages/griffith/src/components/items/__tests__/__snapshots__/PlayButtonItem.spec.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`PlayButtonItem get PlayButtonItem component 1`] = `
 <div>
-  <div class="">
-    <button class="button_1j0k413">
+  <div>
+    <button class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path

diff --git a/packages/griffith/src/components/items/__tests__/__snapshots__/VolumeItem.spec.tsx.snap b/packages/griffith/src/components/items/__tests__/__snapshots__/VolumeItem.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VolumeItem get VolumeItem component 1`] = `
 <div>
   <div class="menuContainer_e296pg">
-    <button class="button_1j0k413">
+    <button class="button_1j0k413" type="button">
       <span class="root_s9vkyf"
         ><svg viewBox="0 0 24 24" class="svg_11u3rwe">
           <path