feat(components): 现有组件改写为hooks形式

lsqy · Mar 18, 2020 · 2b1aae4 · 2b1aae4
1 parent 9e8b56c
commit 2b1aae4
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 169 deletions.
diff --git a/src/components/CMusic/index.tsx b/src/components/CMusic/index.tsx
@@ -1,4 +1,4 @@
-import Taro, { Component } from '@tarojs/taro'
+import Taro, { useState } from '@tarojs/taro'
 import { View, Image } from '@tarojs/components'
 import { AtIcon, AtFloatLayout } from 'taro-ui'
 import classnames from 'classnames'
@@ -10,116 +10,97 @@ type Props = {
   onUpdatePlayStatus: (object) => any
 }
 
-type State = {
-  isOpened: boolean
-}
-
 const backgroundAudioManager = Taro.getBackgroundAudioManager()
 
-
-export default class CMusic extends Component<Props, State> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpened: false
-    }
-  }
-  goDetail() {
-    const { id } = this.props.songInfo.currentSongInfo
+const CMusic = (props: Props) => {
+  const { currentSongInfo, isPlaying, canPlayList } = props.songInfo
+  const [ isOpened, setIsOpened ] = useState(false)
+  if (!currentSongInfo.name) return <View></View>
+  function goDetail() {
+    const { id } = props.songInfo.currentSongInfo
     Taro.navigateTo({
       url: `/pages/songDetail/index?id=${id}`
     })
   }
 
-  switchPlayStatus() {
-    const { isPlaying } = this.props.songInfo
+  function switchPlayStatus() {
+    const { isPlaying } = props.songInfo
     if (isPlaying) {
       backgroundAudioManager.pause()
-      this.props.onUpdatePlayStatus({
+      props.onUpdatePlayStatus({
         isPlaying: false
       })
     } else {
       backgroundAudioManager.play()
-      this.props.onUpdatePlayStatus({
+      props.onUpdatePlayStatus({
         isPlaying: true
       })
     }
   }
 
-  showPlayList() {
-    this.setState({
-      isOpened: true
-    })
-  }
-
-  closePlayList() {
-    this.setState({
-      isOpened: false
-    })
-  }
-
-  playSong(id) {
+  function playSong(id) {
     Taro.navigateTo({
       url: `/pages/songDetail/index?id=${id}`
     })
   }
-
-  removeSong() {
-
-  }
-
-  render() {
-    if (!this.props.songInfo) return
-    const { currentSongInfo, isPlaying, canPlayList } = this.props.songInfo
-    const { isOpened } = this.state
-    if (!currentSongInfo.name) return <View></View>
-    return (
-      <View className={
-        classnames({
-          music_components: true,
-          isHome: this.props.isHome
-        })
-      }>
-        <Image 
-          className={
-            classnames({
-              music__pic: true,
-              'z-pause': false,
-              circling: isPlaying
-            })
-          }
-          src={currentSongInfo.al.picUrl}
-        />
-        <View className="music__info" onClick={this.goDetail.bind(this)}>
-          <View className='music__info__name'>
-            {currentSongInfo.name}
-          </View>
-          <View className='music__info__desc'>
-            {currentSongInfo.ar[0] ? currentSongInfo.ar[0].name : ''}  - {currentSongInfo.al.name}
-          </View>
+
+  return (
+    <View className={
+      classnames({
+        music_components: true,
+        isHome: props.isHome
+      })
+    }>
+      <Image 
+        className={
+          classnames({
+            music__pic: true,
+            'z-pause': false,
+            circling: isPlaying
+          })
+        }
+        src={currentSongInfo.al.picUrl}
+      />
+      <View className="music__info" onClick={() => goDetail()}>
+        <View className='music__info__name'>
+          {currentSongInfo.name}
         </View>
-        <View className='music__icon--play'>
-          <AtIcon value={isPlaying ? 'pause' : 'play'} size='30' color='#FFF' onClick={this.switchPlayStatus.bind(this)}></AtIcon>
+        <View className='music__info__desc'>
+          {currentSongInfo.ar[0] ? currentSongInfo.ar[0].name : ''}  - {currentSongInfo.al.name}
         </View>
-        <AtIcon value='playlist' size='30' color='#FFF' className="icon_playlist" onClick={this.showPlayList.bind(this)}></AtIcon>
-        <AtFloatLayout isOpened={isOpened} title="播放列表" scrollY onClose={this.closePlayList.bind(this)}>
-          <View className='music__playlist'>
-            {
-              canPlayList.map((item) => <View key={item.id} className={classnames({
-                music__playlist__item: true,
-                current: item.current
-              })}>
-              <View className='music__playlist__item__info' onClick={this.playSong.bind(this, item.id)}>
-                {`${item.name} - ${item.ar[0] ? item.ar[0].name : ''}`}
-              </View>
-              <View className='music__playlist__item__close'>
-                <AtIcon value='chevron-right' size='16' color='#ccc' />
-              </View>
-            </View>)
-            }
-          </View>
-        </AtFloatLayout>
       </View>
-    )
+      <View className='music__icon--play'>
+        <AtIcon value={isPlaying ? 'pause' : 'play'} size='30' color='#FFF' onClick={() => switchPlayStatus()}></AtIcon>
+      </View>
+      <AtIcon value='playlist' size='30' color='#FFF' className="icon_playlist" onClick={() => setIsOpened(true)}></AtIcon>
+      <AtFloatLayout isOpened={isOpened} title="播放列表" scrollY onClose={() => setIsOpened(false)}>
+        <View className='music__playlist'>
+          {
+            canPlayList.map((item) => <View key={item.id} className={classnames({
+              music__playlist__item: true,
+              current: item.current
+            })}>
+            <View className='music__playlist__item__info' onClick={() => playSong(item.id)}>
+              {`${item.name} - ${item.ar[0] ? item.ar[0].name : ''}`}
+            </View>
+            <View className='music__playlist__item__close'>
+              <AtIcon value='chevron-right' size='16' color='#ccc' />
+            </View>
+          </View>)
+          }
+        </View>
+      </AtFloatLayout>
+    </View>
+  )
+}
+
+CMusic.defaultProps = {
+  songInfo: {
+    currentSongInfo: {
+      name: ''
+    }
   }
 }
+
+export default CMusic
+
diff --git a/src/components/CSlider/index.tsx b/src/components/CSlider/index.tsx
@@ -1,4 +1,4 @@
-import Taro, { Component } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import { View, Slider } from '@tarojs/components'
 
 import './index.scss'
@@ -9,17 +9,11 @@ type Props = {
   onChanging: (object) => any
 }
 
-export default class CSlider extends Component<Props, {}> {
-
-  componentWillMount() {
-  }
-
-  render() {
-    const { percent } = this.props
-    return (
-      <View className='slider_components'>
-        <Slider value={percent} blockSize={15} activeColor='#d43c33' onChange={(e) => this.props.onChange(e)} onChanging={(e) => this.props.onChanging(e) } />
-      </View>
-    )
-  }
+export default function CSlider (props: Props) {
+  const { percent } = props
+  return (
+    <View className='slider_components'>
+      <Slider value={percent} blockSize={15} activeColor='#d43c33' onChange={(e) => this.props.onChange(e)} onChanging={(e) => this.props.onChanging(e) } />
+    </View>
+  )
 }
diff --git a/src/components/CTitle/index.tsx b/src/components/CTitle/index.tsx
@@ -1,4 +1,4 @@
-import Taro, { Component } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import classnames from 'classnames'
 import { View, Image } from '@tarojs/components'
 
@@ -8,18 +8,15 @@ type Props = {
 }
 
 
-export default class CTitle extends Component<Props, {}> {
-
-  render() {
-    const { isFixed } = this.props
-    const cls = classnames({
-        title_components: true,
-        fixed: isFixed
-    })
-    return (
-        <View className={cls}>
-            <Image className='title_components__logo' src={require('../../assets/images/logo.png')} />
-        </View>
-    )
-  }
+export default function CTitle (props: Props) {
+  const { isFixed } = props
+  const cls = classnames({
+      title_components: true,
+      fixed: isFixed
+  })
+  return (
+      <View className={cls}>
+          <Image className='title_components__logo' src={require('../../assets/images/logo.png')} />
+      </View>
+  )
 }
diff --git a/src/components/CUserListItem/index.tsx b/src/components/CUserListItem/index.tsx
@@ -1,4 +1,4 @@
-import Taro, { Component } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import { AtIcon } from 'taro-ui'
 import { View, Image } from '@tarojs/components'
 
@@ -15,39 +15,32 @@ type Props = {
   clickFunc?: (number) => any
 }
 
-export default class CUserListItem extends Component<Props, {}> {
-
-  componentWillMount() {
-  }
-
-  goDetail() {
-    if (this.props.clickFunc) {
-      this.props.clickFunc(this.props.userInfo.userId)
+export default function CUserListItem (props: Props) {
+  const { userInfo, clickFunc } = props
+  function goDetail() {
+    if (clickFunc) {
+      clickFunc(userInfo.userId)
     }
   }
-
-  render() {
-    const { userInfo } = this.props
-    if (!userInfo) return null
-    return (
-        <View className='userListItem_components' onClick={this.goDetail.bind(this)}>
-            <Image 
-							src={`${userInfo.avatarUrl}?imageView&thumbnail=250x0`}
-							className='userListItem__avatar'
-            />
-            <View className='userListItem__info'>
-            <View className='userListItem__info__name'>
-              {userInfo.nickname}
-              {
-                userInfo.gender === 1 ? <AtIcon prefixClass='fa' value='mars' size='12' color='#5cb8e7' className='userListItem__info__icon'></AtIcon> : ''
-              }
-              {
-                userInfo.gender === 2 ? <AtIcon prefixClass='fa' value='venus' size='12' color='#f88fb8' className='userListItem__info__icon venus'></AtIcon> : ''
-              }
-            </View>
-            <View className='userListItem__info__signature'>{userInfo.signature || ''}</View>
-            </View>
-        </View>
-    )
-  }
+  if (!userInfo) return null
+  return (
+      <View className='userListItem_components' onClick={() => goDetail()}>
+          <Image 
+            src={`${userInfo.avatarUrl}?imageView&thumbnail=250x0`}
+            className='userListItem__avatar'
+          />
+          <View className='userListItem__info'>
+          <View className='userListItem__info__name'>
+            {userInfo.nickname}
+            {
+              userInfo.gender === 1 ? <AtIcon prefixClass='fa' value='mars' size='12' color='#5cb8e7' className='userListItem__info__icon'></AtIcon> : ''
+            }
+            {
+              userInfo.gender === 2 ? <AtIcon prefixClass='fa' value='venus' size='12' color='#f88fb8' className='userListItem__info__icon venus'></AtIcon> : ''
+            }
+          </View>
+          <View className='userListItem__info__signature'>{userInfo.signature || ''}</View>
+          </View>
+      </View>
+  )
 }
diff --git a/src/components/CWhiteSpace/index.tsx b/src/components/CWhiteSpace/index.tsx
@@ -1,4 +1,4 @@
-import Taro, { Component } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import classnames from 'classnames'
 import { View } from '@tarojs/components'
 
@@ -9,22 +9,18 @@ type Props = {
 }
 
 
-export default class CWhiteSpace extends Component<Props, {}> {
-
-  render() {
-    const { size, color } = this.props
-    const cls = classnames({
-      whiteSpace_components: true,
-      xs: size === 'xs',
-      sm: size === 'sm',
-      md: size === 'md',
-      lg: size === 'lg',
-      xl: size === 'xl'
-    })
-    return (
-        <View className={cls} style={{ 'backgroundColor': color}}>
-
-        </View>
-    )
-  }
+export default function CWhiteSpace (props: Props) {
+  const { size, color } = props
+  const cls = classnames({
+    whiteSpace_components: true,
+    xs: size === 'xs',
+    sm: size === 'sm',
+    md: size === 'md',
+    lg: size === 'lg',
+    xl: size === 'xl'
+  })
+  return (
+      <View className={cls} style={{ 'backgroundColor': color}}>
+      </View>
+  )
 }