增加quickapp组件目录，先移植button进行测试

src/quickapp/components/button/__test__/button.test.js

@@ -0,0 +1,72 @@
+import Nerv from 'nervjs'
+import { renderIntoDocument, Simulate } from 'nerv-test-utils'
+import Button from '../index'
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+const hoverStartTime = 20
+const hoverStayTime = 70
+
+describe('Button', () => {
+  it('render Button', () => {
+    const component = renderIntoDocument(<Button>Button</Button>)
+    expect(component.props.disabled).toBeFalsy()
+  })
+
+  it('render Button disabled', () => {
+    const component = renderIntoDocument(<Button disabled>Button</Button>)
+    expect(component.props.disabled).toBeTruthy()
+  })
+
+  it('show loading Botton', () => {
+    const component = renderIntoDocument(<Button loading>Button</Button>)
+    expect(component.props.loading).toBeTruthy()
+  })
+
+  it('should trigger touchStart and  touchEnd', async () => {
+    const hoverClass = 'hoverclass'
+    const onTouchStart = jest.fn()
+    const onTouchEnd = jest.fn()
+    let btnIns
+    const view = <Button ref={c => (btnIns = c)} hoverClass={hoverClass} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}> Button</Button>
+    const component = renderIntoDocument(view)
+    const dom = Nerv.findDOMNode(component)
+
+    Simulate.touchStart(dom)
+    expect(onTouchStart).toHaveBeenCalled()
+
+    Simulate.touchEnd(dom)
+    await delay(hoverStartTime)
+    expect(dom.getAttribute('class')).not.toContain(hoverClass)
+
+    Simulate.touchStart(dom)
+    await delay(hoverStartTime)
+    expect(btnIns.state.touch).toBeTruthy()
+    expect(dom.getAttribute('class')).toContain(hoverClass)
+
+    Simulate.touchEnd(dom)
+    expect(onTouchEnd).toHaveBeenCalled()
+
+    Simulate.touchStart(dom)
+    await delay(hoverStayTime)
+    expect(dom.getAttribute('class')).toContain(hoverClass)
+
+    Simulate.touchEnd(dom)
+    await delay(hoverStayTime)
+    expect(dom.getAttribute('class')).not.toContain(hoverClass)
+  })
+
+  it('should not execute set hoverClass when hoverClass is undefined', async () => {
+    let btnIns
+    const view = <Button className='class' ref={c => (btnIns = c)}>Button</Button>
+    const component = renderIntoDocument(view)
+    const dom = Nerv.findDOMNode(component)
+    Simulate.touchStart(dom)
+    expect(btnIns.state.touch).toBeFalsy()
+    await delay(hoverStartTime)
+    expect(btnIns.state.hover).toBeTruthy()
+
+    Simulate.touchEnd(dom)
+    await delay(hoverStayTime)
+    expect(btnIns.state.hover).toBeFalsy()
+  })
+})

src/quickapp/components/button/index.js

@@ -0,0 +1,94 @@
+import 'weui'
+import Nerv from 'nervjs'
+import omit from 'omit.js'
+import classNames from 'classnames'
+
+import '../../../style/components-qa/button.scss'
+
+class Button extends Nerv.Component {
+  constructor () {
+    super(...arguments)
+    this.state = {
+      hover: false,
+      touch: false
+    }
+  }
+
+  render () {
+    const {
+      children,
+      disabled,
+      className,
+      style,
+      onClick,
+      onTouchStart,
+      onTouchEnd,
+      hoverClass = 'button-hover',
+      hoverStartTime = 20,
+      hoverStayTime = 70,
+      size,
+      plain,
+      loading = false,
+      type = 'default'
+    } = this.props
+    const cls = className || classNames(
+      'weui-btn',
+      {
+        [`${hoverClass}`]: this.state.hover && !disabled,
+        [`weui-btn_plain-${type}`]: plain,
+        [`weui-btn_${type}`]: !plain && type,
+        'weui-btn_mini': size === 'mini',
+        'weui-btn_loading': loading,
+        'weui-btn_disabled': disabled
+      }
+    )
+
+    const _onTouchStart = e => {
+      this.setState(() => ({
+        touch: true
+      }))
+      if (hoverClass && !disabled) {
+        setTimeout(() => {
+          if (this.state.touch) {
+            this.setState(() => ({
+              hover: true
+            }))
+          }
+        }, hoverStartTime)
+      }
+      onTouchStart && onTouchStart(e)
+    }
+    const _onTouchEnd = e => {
+      this.setState(() => ({
+        touch: false
+      }))
+      if (hoverClass && !disabled) {
+        setTimeout(() => {
+          if (!this.state.touch) {
+            this.setState(() => ({
+              hover: false
+            }))
+          }
+        }, hoverStayTime)
+      }
+      onTouchEnd && onTouchEnd(e)
+    }
+
+    return (
+      <button
+        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd'])}
+        className={cls}
+        style={style}
+        onClick={onClick}
+        disabled={disabled}
+        onTouchStart={_onTouchStart}
+        onTouchEnd={_onTouchEnd}
+      >
+        {loading && <i class='weui-loading' />}
+        {children}
+      </button>
+    )
+  }
+}
+
+export default Button

src/quickapp/components/button/index.md

@@ -0,0 +1,20 @@
+button
+
+## API
+
+|     | 属性                   | 类型    | 默认值       | 说明                                                                                        |
+| --- | ---------------------- | ------- | ------------ | ------------------------------------------------------------------------------------------- |
+| √   | type                   | String  | default      | 按钮的样式类型                                                                              |
+| √   | size                   | String  | default      | 按钮的大小 px                                                                               |
+| √   | plain                  | Boolean | false        | 按钮是否镂空，背景色透明                                                                    |
+| √   | disabled               | Boolean | false        | 是否禁用                                                                                    |
+| √   | loading                | Boolean | false        | 名称前是否带 loading 图标                                                                   |
+|     | form-type              | String  |              | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件                                |
+|     | open-type              | String  |              | 微信开放能力                                                                                |
+|     | app-parameter          | String  |              | 打开 APP 时，向 APP 传递的参数                                                              |
+| √   | hover-class            | String  | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果                            |
+|     | hover-stop-propagation | Boolean | false        | 指定是否阻止本节点的祖先节点出现点击态                                                      |
+| √   | hover-start-time       | Number  | 20           | 按住后多久出现点击态，单位毫秒                                                              |
+| √   | hover-stay-time        | Number  | 70           | 手指松开后点击态保留时间，单位毫秒                                                          |
+|     | bindgetuserinfo        | Handler |              | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo |
+|     | lang                   | String  | en           | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。                           |

src/quickapp/index.js

@@ -0,0 +1 @@
+export { default as Button } from './components/button'

src/quickapp/utils/hoverable.js

@@ -0,0 +1,114 @@
+import Taro from '@tarojs/taro-h5'
+import Nerv from 'nervjs'
+import omit from 'omit.js'
+
+/**
+ * 添加touch能力
+ * @param {Object} Options hoverable的默认配置
+ * @param {String} [Options.hoverClass] 指定点击时的样式类，当hover-class="none"时，没有点击态效果
+ * @param {Boolean} [Options.hoverStopPropergation] 指定是否阻止本节点的祖先节点出现点击态
+ * @param {Number} [Options.hoverStartTime] 按住后多久出现点击态，单位毫秒
+ * @param {Number} [Options.hoverStayTime] 手指松开后点击态保留时间，单位毫秒
+ */
+const hoverable = ({
+  hoverClass,
+  hoverStopPropergation,
+  hoverStartTime,
+  hoverStayTime
+}) => {
+  return ComponentClass => {
+    return class HoverableComponent extends Taro.Component {
+      static defaultProps = {
+        hoverClass,
+        hoverStopPropergation,
+        hoverStartTime,
+        hoverStayTime
+      }
+      constructor (props, ctx) {
+        super(props, ctx)
+        this.state = this.getInitState(this.props)
+      }
+
+      touchStartTimer = null
+      touchEndTimer = null
+
+      state = {
+        isHover: false,
+        onTouchStart: null,
+        onTouchEnd: null
+      }
+
+      getInitState = ({ hoverClass, hoverStartTime, hoverStayTime, hoverStopPropergation, onTouchStart, onTouchEnd }) => {
+        if (hoverClass === 'none') return {}
+        return {
+          onTouchStart: this.getOnTouchStart({ hoverStartTime, hoverStopPropergation, onTouchStart }),
+          onTouchEnd: this.getOnTouchEnd({ hoverStayTime, hoverStopPropergation, onTouchEnd })
+        }
+      }
+      getOnTouchStart = ({ hoverStartTime, hoverStopPropergation, onTouchStart }) => {
+        return e => {
+          onTouchStart && onTouchStart(e)
+          hoverStopPropergation && e.stopPropergation()
+          this.touchStartTimer && clearTimeout(this.touchStartTimer)
+          this.touchEndTimer && clearTimeout(this.touchEndTimer)
+          this.touchStartTimer = setTimeout(() => {
+            this.setState({
+              isHover: true
+            })
+          }, hoverStartTime)
+        }
+      }
+      getOnTouchEnd = ({ hoverStayTime, hoverStopPropergation, onTouchEnd }) => {
+        return e => {
+          onTouchEnd && onTouchEnd(e)
+          hoverStopPropergation && e.stopPropergation()
+          this.touchStartTimer && clearTimeout(this.touchStartTimer)
+          this.touchEndTimer && clearTimeout(this.touchEndTimer)
+          this.touchEndTimer = setTimeout(() => {
+            this.setState({
+              isHover: false
+            })
+          }, hoverStayTime)
+        }
+      }
+      reset = () => {
+        this.setState({
+          isHover: false
+        })
+      }
+      componentWillMount () {
+        document.body.addEventListener('touchstart', this.reset)
+      }
+      componentWillReceiveProps (nProps, nCtx) {
+        if (
+          nProps.hoverClass !== this.props.hoverClass ||
+          nProps.hoverStopPropergation !== this.props.hoverStopPropergation ||
+          nProps.hoverStartTime !== this.props.hoverStartTime ||
+          nProps.hoverStayTime !== this.props.hoverStayTime
+        ) {
+          const stateObj = this.getInitState(nProps)
+          this.setState(stateObj)
+        }
+      }
+      componentWillUnmount () {
+        document.body.removeEventListener('touchstart', this.reset)
+      }
+      render () {
+        const { isHover, onTouchStart, onTouchEnd } = this.state
+        const props = {
+          ...omit(this.props, [
+            'hoverStopPropergation',
+            'hoverStartTime',
+            'hoverStayTime'
+          ]),
+          isHover,
+          onTouchStart,
+          onTouchEnd
+        }
+        return <ComponentClass {...props} />
+      }
+    }
+  }
+}
+
+export default hoverable