feat(NavBar): 添加 leftIconType，rightFirstIconType，rightFirstIconType 支…

…持自行扩展字体图标
jd-opensource · Mar 20, 2019 · 1693a07 · 1693a07
1 parent 6c53d97
commit 1693a07
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 42 deletions.
diff --git a/@types/nav-bar.d.ts b/@types/nav-bar.d.ts
@@ -1,9 +1,9 @@
 import { MouseEvent, ComponentClass } from 'react'
 import { CommonEventFunction } from '@tarojs/components/types/common'
 
-import AtComponent from './base'
+import AtComponent, { AtIconBaseProps } from './base'
 
-export interface AtNavBarProps extends AtComponent{
+export interface AtNavBarProps extends AtComponent {
   title?: string
 
   fixed?: boolean
@@ -12,13 +12,13 @@ export interface AtNavBarProps extends AtComponent{
 
   color?: string
 
-  leftIconType?: string
+  leftIconType?: string | AtIconBaseProps
 
   leftText?: string
 
-  rightFirstIconType?: string
+  rightFirstIconType?: string | AtIconBaseProps
 
-  rightSecondIconType?: string
+  rightSecondIconType?: string | AtIconBaseProps
 
   onClickLeftIcon?: CommonEventFunction
 

diff --git a/docs/markdown/navbar.md b/docs/markdown/navbar.md
@@ -48,11 +48,11 @@ import { AtNavBar } from 'taro-ui'
 | color | 链接文字跟图标颜色，不包括标题 | String  | - | `#6190E8` |
 | fixed | 是否固定顶部  | Boolean | - | false |
 | border | 是否显示下划线(v1.4.0 新增)  | Boolean | - | true |
-| leftIconType  | 左边图标类型，图标类型请看`AtIcon`文档  | String | - | 'chevron-left' |
+| leftIconType  | 左边图标类型，图标类型请看`AtIcon`文档  | String \| Object | - | 'chevron-left' |
 | leftText | 左边文字 | String  | - | - |
 | title | 标题文字 | String  | - | - |
-| rightFirstIconType | 从右到左，第一个图标类型，图标类型请看`AtIcon`文档 | String  | - | - |
-| rightSecondIconType | 从右到左第二个图标类型，图标类型请看`AtIcon`文档 | String  | - | - |
+| rightFirstIconType | 从右到左，第一个图标类型，图标类型请看`AtIcon`文档 | String \| Object  | - | - |
+| rightSecondIconType | 从右到左第二个图标类型，图标类型请看`AtIcon`文档 | String \| Object  | - | - |
 
 ## 事件
 

diff --git a/src/components/nav-bar/__snapshots__/index.test.js.snap b/src/components/nav-bar/__snapshots__/index.test.js.snap
@@ -8,15 +8,21 @@ exports[`AtNavBar Snap render AtNavBar -- props customStyle 1`] = `"<div style=\
 
 exports[`AtNavBar Snap render AtNavBar -- props fixed 1`] = `"<div class=\\"at-nav-bar at-nav-bar--fixed\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
-exports[`AtNavBar Snap render AtNavBar -- props leftIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-icon at-icon-test\\"></span><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
+exports[`AtNavBar Snap render AtNavBar -- props leftIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span style=\\"color:;font-size:1.024rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
+
+exports[`AtNavBar Snap render AtNavBar -- props leftIconType 2`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span style=\\"color:red;font-size:1.536rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
 exports[`AtNavBar Snap render AtNavBar -- props leftText 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\">test</span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
 exports[`AtNavBar Snap render AtNavBar -- props leftText 2`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\">test</span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
-exports[`AtNavBar Snap render AtNavBar -- props rightFirstIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span class=\\"taro-text at-icon at-icon-test\\"></span></div></div></div>"`;
+exports[`AtNavBar Snap render AtNavBar -- props rightFirstIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span style=\\"color:;font-size:1.024rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span></div></div></div>"`;
+
+exports[`AtNavBar Snap render AtNavBar -- props rightFirstIconType 2`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span style=\\"color:red;font-size:1.536rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span></div></div></div>"`;
+
+exports[`AtNavBar Snap render AtNavBar -- props rightSecondIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span style=\\"color:;font-size:1.024rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
-exports[`AtNavBar Snap render AtNavBar -- props rightSecondIconType 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span class=\\"taro-text at-icon at-icon-test\\"></span></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
+exports[`AtNavBar Snap render AtNavBar -- props rightSecondIconType 2`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\"></div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container\\"><span style=\\"color:red;font-size:1.536rem;\\" class=\\"taro-text at-icon at-icon-test\\"></span></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 
 exports[`AtNavBar Snap render AtNavBar -- props title 1`] = `"<div class=\\"at-nav-bar\\"><div style=\\"color:;\\" class=\\"at-nav-bar__left-view\\"><span class=\\"taro-text at-nav-bar__text\\"></span></div><div class=\\"at-nav-bar__title\\">test</div><div class=\\"at-nav-bar__right-view\\"><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div><div style=\\"color:;\\" class=\\"at-nav-bar__container at-nav-bar__container--hide\\"></div></div></div>"`;
 

diff --git a/src/components/nav-bar/index.js b/src/components/nav-bar/index.js
@@ -2,9 +2,17 @@ import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import isObject from 'lodash/isObject'
 import AtComponent from '../../common/component'
 
 export default class AtNavBar extends AtComponent {
+  constructor () {
+    super(...arguments)
+    if (process.env.NODE_ENV === 'test') {
+      Taro.initPxTransform({ designWidth: 750 })
+    }
+  }
+
   handleClickLeftView () {
     this.props.onClickLeftIcon(...arguments)
   }
@@ -17,6 +25,7 @@ export default class AtNavBar extends AtComponent {
     this.props.onClickRgIconNd(...arguments)
   }
 
+
   render () {
     const {
       customStyle,
@@ -32,15 +41,35 @@ export default class AtNavBar extends AtComponent {
     } = this.props
     const linkStyle = { color }
 
-    const leftIconClass = classNames('at-icon', {
-      [`at-icon-${leftIconType}`]: leftIconType
-    })
-    const rightFirstIconClass = classNames('at-icon', {
-      [`at-icon-${rightFirstIconType}`]: rightFirstIconType
-    })
-    const rightSecondIconClass = classNames('at-icon', {
-      [`at-icon-${rightSecondIconType}`]: rightSecondIconType
-    })
+    const defaultIconInfo = {
+      customStyle: '',
+      className: '',
+      prefixClass: 'at-icon',
+      value: '',
+      color: '',
+      size: 24,
+    }
+
+    const leftIconInfo = isObject(leftIconType) ?
+      { ...defaultIconInfo, ...leftIconType } :
+      { ...defaultIconInfo, value: leftIconType }
+    const leftIconClass = classNames(leftIconInfo.prefixClass, {
+      [`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: leftIconInfo.value
+    }, leftIconInfo.className)
+
+    const rightFirstIconInfo = isObject(rightFirstIconType) ?
+      { ...defaultIconInfo, ...rightFirstIconType } :
+      { ...defaultIconInfo, value: rightFirstIconType }
+    const rightFirstIconClass = classNames(rightFirstIconInfo.prefixClass, {
+      [`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: rightFirstIconInfo.value
+    }, rightFirstIconInfo.className)
+
+    const rightSecondIconInfo = isObject(rightSecondIconType) ?
+      { ...defaultIconInfo, ...rightSecondIconType } :
+      { ...defaultIconInfo, value: rightSecondIconType }
+    const rightSecondIconClass = classNames(rightSecondIconInfo.prefixClass, {
+      [`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: rightSecondIconInfo.value
+    }, rightSecondIconInfo.className)
 
     return <View
       className={
@@ -57,7 +86,16 @@ export default class AtNavBar extends AtComponent {
         onClick={this.handleClickLeftView.bind(this)}
         style={linkStyle}
       >
-        {leftIconType && <Text className={leftIconClass}></Text>}
+        {leftIconType && <Text
+          className={leftIconClass}
+          style={this.mergeStyle(
+            {
+              color: leftIconInfo.color,
+              fontSize: `${Taro.pxTransform(parseInt(leftIconInfo.size) * 2)}`
+            },
+            leftIconInfo.customStyle
+          )}
+        ></Text>}
         <Text className='at-nav-bar__text'>{leftText}</Text>
       </View>
       <View className='at-nav-bar__title'>{title}</View>
@@ -72,7 +110,16 @@ export default class AtNavBar extends AtComponent {
           style={linkStyle}
           onClick={this.handleClickNd.bind(this)}
         >
-          {rightSecondIconType && <Text className={rightSecondIconClass}></Text>}
+          {rightSecondIconType && <Text
+            className={rightSecondIconClass}
+            style={this.mergeStyle(
+              {
+                color: rightSecondIconInfo.color,
+                fontSize: `${Taro.pxTransform(parseInt(rightSecondIconInfo.size) * 2)}`
+              },
+              rightSecondIconInfo.customStyle
+            )}
+          ></Text>}
         </View>
         <View
           className={
@@ -84,7 +131,16 @@ export default class AtNavBar extends AtComponent {
           style={linkStyle}
           onClick={this.handleClickSt.bind(this)}
         >
-          {rightFirstIconType && <Text className={rightFirstIconClass}></Text>}
+          {rightFirstIconType && <Text
+            className={rightFirstIconClass}
+            style={this.mergeStyle(
+              {
+                color: rightFirstIconInfo.color,
+                fontSize: `${Taro.pxTransform(parseInt(rightFirstIconInfo.size) * 2)}`
+              },
+              rightFirstIconInfo.customStyle
+            )}
+          ></Text>}
         </View>
       </View>
     </View>
@@ -102,9 +158,9 @@ AtNavBar.defaultProps = {
   title: '',
   rightFirstIconType: '',
   rightSecondIconType: '',
-  onClickLeftIcon: () => {},
-  onClickRgIconSt: () => {},
-  onClickRgIconNd: () => {},
+  onClickLeftIcon: () => { },
+  onClickRgIconSt: () => { },
+  onClickRgIconNd: () => { },
 }
 
 AtNavBar.propTypes = {
@@ -119,11 +175,11 @@ AtNavBar.propTypes = {
   fixed: PropTypes.bool,
   border: PropTypes.bool,
   color: PropTypes.string,
-  leftIconType: PropTypes.string,
+  leftIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   leftText: PropTypes.string,
   title: PropTypes.string,
-  rightFirstIconType: PropTypes.string,
-  rightSecondIconType: PropTypes.string,
+  rightFirstIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  rightSecondIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClickLeftIcon: PropTypes.func,
   onClickRgIconSt: PropTypes.func,
   onClickRgIconNd: PropTypes.func,

diff --git a/src/components/nav-bar/index.test.js b/src/components/nav-bar/index.test.js
@@ -34,6 +34,11 @@ describe('AtNavBar Snap', () => {
     expect(component).toMatchSnapshot()
   })
 
+  it('render AtNavBar -- props leftIconType', () => {
+    const component = renderToString(<AtNavBar leftIconType={{ value: 'test', color: 'red', size: 36 }} />)
+    expect(component).toMatchSnapshot()
+  })
+
   it('render AtNavBar -- props leftText', () => {
     const component = renderToString(<AtNavBar leftText='test' />)
     expect(component).toMatchSnapshot()
@@ -54,8 +59,18 @@ describe('AtNavBar Snap', () => {
     expect(component).toMatchSnapshot()
   })
 
+  it('render AtNavBar -- props rightFirstIconType', () => {
+    const component = renderToString(<AtNavBar rightFirstIconType={{ value: 'test', color: 'red', size: 36 }} />)
+    expect(component).toMatchSnapshot()
+  })
+
   it('render AtNavBar -- props rightSecondIconType', () => {
     const component = renderToString(<AtNavBar rightSecondIconType='test' />)
     expect(component).toMatchSnapshot()
   })
+
+  it('render AtNavBar -- props rightSecondIconType', () => {
+    const component = renderToString(<AtNavBar rightSecondIconType={{ value: 'test', color: 'red', size: 36 }} />)
+    expect(component).toMatchSnapshot()
+  })
 })
diff --git a/src/pages/basic/color/index.js b/src/pages/basic/color/index.js
@@ -135,20 +135,18 @@ export default class BasicColor extends Taro.Component {
               <View className='panel__title'>{item.type}</View>
               <View className='panel__content'>
                 <View className='color-list'>
-                  {item.data.map(color => {
-                    return (
-                      <View className='color-item' key={color.hex}>
-                        <View className='color-item__circle' style={`background: ${color.hex}`}>
-                          <View className='inner-circle-1'></View>
-                          <View className='inner-circle-2' style={`border-color: ${color.hex}`}></View>
-                        </View>
-                        <View className='color-item__info'>
-                          <Text className='name'>{color.name}</Text>
-                          <Text className='hex' selectable>{color.hex}</Text>
-                        </View>
+                  {item.data.map(color => (
+                    <View className='color-item' key={color.hex}>
+                      <View className='color-item__circle' style={`background: ${color.hex}`}>
+                        <View className='inner-circle-1'></View>
+                        <View className='inner-circle-2' style={`border-color: ${color.hex}`}></View>
                       </View>
-                    )
-                  })}
+                      <View className='color-item__info'>
+                        <Text className='name'>{color.name}</Text>
+                        <Text className='hex' selectable>{color.hex}</Text>
+                      </View>
+                    </View>
+                  ))}
                 </View>
               </View>
             </View>

diff --git a/src/pages/navigation/navbar/index.js b/src/pages/navigation/navbar/index.js
@@ -116,6 +116,23 @@ export default class Index extends Taro.Component {
             </View>
           </View>
 
+          {/* 自定义图标样式 */}
+          <View className='panel'>
+            <View className='panel__title'>自定义图标样式</View>
+            <View className='panel__content no-padding'>
+              <AtNavBar
+                onClickRgIconSt={this.clickList.bind(this)}
+                onClickRgIconNd={this.clickMy.bind(this)}
+                onClickLeftIcon={this.clickReturn.bind(this)}
+                color='#333'
+                title='NavBar 导航栏示例'
+                leftText='返回'
+                rightFirstIconType='bullet-list'
+                rightSecondIconType={{ value: 'user', size: 36, color: 'red' }}
+              />
+            </View>
+          </View>
+
           {/* 无下划线 */}
           <View className='panel'>
             <View className='panel__title'>无下划线</View>