feat(Fab): 重构 Float Button 组件

src/components/fab/__snapshots__/index.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtFab Snap render AtFab -- default props 1`] = `"<div class=\\"at-fab at-fab--normal\\">按钮</div>"`;
+
+exports[`AtFab Snap render AtFab -- size 50 1`] = `"<div class=\\"at-fab at-fab--50\\">按钮</div>"`;

src/components/fab/index.js

@@ -0,0 +1,36 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import AtComponent from '../../common/component'
+
+export default class AtFab extends AtComponent {
+  onClick () {
+    this.props.onClick && this.props.onClick(...arguments)
+  }
+
+  render () {
+    const { size } = this.props
+
+    const rootClass = classNames('at-fab', {
+      [`at-fab--${size}`]: size
+    })
+
+    return (
+      <View
+        className={rootClass}
+        onClick={this.onClick.bind(this)}
+      >{this.props.children}</View>
+    )
+  }
+}
+
+AtFab.propTypes = {
+  size: PropTypes.oneOf(['normal', 'small']),
+  onClick: PropTypes.func,
+}
+
+AtFab.defaultProps = {
+  size: 'normal',
+  onClick: () => {},
+}

src/components/fab/index.test.js

@@ -0,0 +1,26 @@
+import Nerv, { findDOMNode } from 'nervjs'
+import { renderToString } from 'nerv-server'
+import { Simulate, renderIntoDocument } from 'nerv-test-utils'
+import AtFab from '../../../.temp/components/fab/index'
+
+describe('AtFab Snap', () => {
+  it('render AtFab -- default props', () => {
+    const component = renderToString(<AtFab>按钮</AtFab>)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtFab -- size 50', () => {
+    const component = renderToString(<AtFab size={50}>按钮</AtFab>)
+    expect(component).toMatchSnapshot()
+  })
+})
+
+describe('AtFab Event', () => {
+  it('AtFab onClick', () => {
+    const onClick = jest.fn()
+    const component = renderIntoDocument(<AtFab onClick={onClick}>按钮</AtFab>)
+    const componentDom = findDOMNode(component, 'at-fab')
+    Simulate.click(componentDom)
+    expect(onClick).toBeCalled()
+  })
+})

src/index.js

@@ -55,7 +55,7 @@ export { default as AtImagePicker } from './components/image-picker'
 export { default as AtRange } from './components/range'
 export { default as AtIndexes } from './components/indexes'
 export { default as AtCalendar } from './components/calendar'
-export { default as AtFloatButton } from './components/float-button'
+export { default as AtFab } from './components/fab'
 
 /* 私有的组件  */
 export { default as AtLoading } from './components/loading'

src/pages/basic/button/index.js

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro'
-import { View, Form } from '@tarojs/components'
-import { AtButton, AtForm, AtFloatButton } from 'taro-ui'
+import { View, Form, Text } from '@tarojs/components'
+import { AtButton, AtForm, AtFab } from 'taro-ui'
 import DocsHeader from '../../components/doc-header'
 import './index.scss'
 
@@ -17,8 +17,8 @@ export default class ButtonPage extends Taro.Component {
   onButtonClick () {
     const content = [...arguments].find(item => typeof item === 'string')
     const ENV = Taro.getEnv()
-    if (ENV === 'WEAPP') Taro.showModal({ content: content || '您点击了！', showCancel: false })
-    else if (ENV === 'WEB') alert(content || '您点击了！')
+    if (ENV === 'WEAPP') Taro.showModal({ content: content || '您点击了按钮！', showCancel: false })
+    else if (ENV === 'WEB') alert(content || '您点击了按钮！')
   }
 
   onShareAppMessage () {
@@ -200,15 +200,18 @@ export default class ButtonPage extends Taro.Component {
             </View>
           </View>
 
-          {/* 支付宝尚未测试 */}
+          {/* 浮动按钮 */}
           {!isALIPAY && <View className='panel'>
             <View className='panel__title'>浮动按钮</View>
             <View className='panel__content'>
               <View className='at-article__p'>
-              浮着呢😊试一下拖动❓
+              右侧是浮动操作按钮👉
+              </View>
+              <View className='btn-demo-fab'>
+                <AtFab onClick={this.onButtonClick.bind(this)}>
+                  <Text className='at-fab__icon at-icon at-icon-menu'></Text>
+                </AtFab>
               </View>
-              <AtFloatButton onClick={this.onButtonClick.bind(this)}>
-              </AtFloatButton>
             </View>
           </View>
           }

src/pages/basic/button/index.scss

@@ -9,6 +9,13 @@
     }
   }
 
+  .btn-demo-fab {
+    position: fixed;
+    right: 32px;
+    bottom: 32px;
+    z-index: 1100;
+  }
+
   .btn-item {
     margin-bottom: 20px;
 

src/style/components/fab.scss

@@ -0,0 +1,38 @@
+@import '../variables/default.scss';
+@import '../mixins/index.scss';
+
+.at-fab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: $at-fab-size;
+  height: $at-fab-size;
+  color: $color-white;
+  font-size: $font-size-base;
+  line-height: $line-height-zh;
+  text-align: center;
+  border-radius: 50%;
+  background: $at-fab-bg-color;
+  box-shadow: $at-fab-box-shadow;
+  box-sizing: border-box;
+
+  &:active {
+    background: $at-fab-bg-color-active;
+    box-shadow: $at-fab-box-shadow-active;
+  }
+
+  /* elements */
+  &__icon,
+  .at-icon {
+    width: $at-fab-icon-size;
+    height: $at-fab-icon-size;
+    font-size: $at-fab-icon-size;
+  }
+
+  /* modifiers */
+  &--small {
+    width: $at-fab-size-sm;
+    height: $at-fab-size-sm;
+  }
+}

src/style/components/index.scss

@@ -18,7 +18,7 @@
 @import './curtain.scss';
 @import './divider.scss';
 @import './drawer.scss';
-@import './float-button.scss';
+@import './fab.scss';
 @import './float-layout.scss';
 @import './form.scss';
 @import './grid.scss';