feat(load-more): 新增 load-more 组件

@types/index.d.ts

@@ -35,6 +35,7 @@ export { default as AtToast } from './toast'
 export { default as AtTabsPane } from './tabs-pane'
 export { default as AtSwipeAction } from './swipe-action'
 export { default as AtAccordion } from './accordion'
+export { default as AtLoadMore } from './load-more'
 
 export declare const AtModalHeader: ComponentClass
 export declare const AtModalAction: ComponentClass

@types/load-more.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent, ComponentClass } from 'react'
+import { BaseEventFunction } from '@tarojs/components/types/common'
+
+import AtComponent from './base'
+
+export interface AtLoadMoreProps extends AtComponent{
+  status?: 'more' | 'loading' | 'noMore'
+
+  loadingText?: string
+
+  moreText?: string
+
+  noMoreText?: string
+
+  onClick?: BaseEventFunction
+}
+
+declare const AtLoadMore: ComponentClass<AtLoadMoreProps>
+
+export default AtLoadMore

src/app.js

@@ -19,6 +19,7 @@ class App extends Component {
       'pages/view/article/index',
       'pages/view/timeline/index',
       'pages/view/swiper/index',
+      'pages/view/load-more/index',
       'pages/action/toast/index',
       'pages/action/modal/index',
       'pages/action/progress/index',

src/components/load-more/__snapshots__/index.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtLoadMore Snap render AtLoadMore -- props className 1`] = `"<div class=\\"at-load-more test\\"><div class=\\"at-button at-button--normal at-button--full\\">undefinedundefined<div class=\\"at-button__text\\">查看更多</div></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props customStyle 1`] = `"<div style=\\"color:red;\\" class=\\"at-load-more\\"><div class=\\"at-button at-button--normal at-button--full\\">undefinedundefined<div class=\\"at-button__text\\">查看更多</div></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props loadingText  1`] = `"<div class=\\"at-load-more\\"><div class=\\"at-activity-indicator at-activity-indicator--center\\"><div class=\\"at-activity-indicator__body\\"><div style=\\"width:24px;height:24px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div></div></div><span class=\\"taro-text at-activity-indicator__content\\">loadingText</span></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props moreText  1`] = `"<div class=\\"at-load-more\\"><div class=\\"at-button at-button--normal at-button--full\\">undefinedundefined<div class=\\"at-button__text\\">moreText</div></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props noMoreText  1`] = `"<div class=\\"at-load-more\\"><span class=\\"taro-text at-load-more__tip\\">noMoreText</span></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props status === loading 1`] = `"<div class=\\"at-load-more\\"><div class=\\"at-activity-indicator at-activity-indicator--center\\"><div class=\\"at-activity-indicator__body\\"><div style=\\"width:24px;height:24px;\\" class=\\"at-loading\\"><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div><div style=\\"border:1px solid #6190E8;border-color:#6190E8 transparent transparent transparent;width:24px;height:24px;\\" class=\\"at-loading__ring\\"></div></div></div><span class=\\"taro-text at-activity-indicator__content\\">加载中</span></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props status === more 1`] = `"<div class=\\"at-load-more\\"><div class=\\"at-button at-button--normal at-button--full\\">undefinedundefined<div class=\\"at-button__text\\">查看更多</div></div></div>"`;
+
+exports[`AtLoadMore Snap render AtLoadMore -- props status === noMore 1`] = `"<div class=\\"at-load-more\\"><span class=\\"taro-text at-load-more__tip\\">没有更多</span></div>"`;
+
+exports[`AtLoadMore Snap render initial AtLoadMore 1`] = `"<div class=\\"at-load-more\\"><div class=\\"at-button at-button--normal at-button--full\\">undefinedundefined<div class=\\"at-button__text\\">查看更多</div></div></div>"`;

src/components/load-more/index.js

@@ -0,0 +1,68 @@
+import Taro from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import AtActivityIndicator from '../../components/activity-indicator/index'
+import AtButton from '../../components/button/index'
+import AtComponent from '../../common/component'
+import './index.scss'
+
+export default class AtLoadMore extends AtComponent {
+  static defaultProps = {
+    status: 'more',
+    loadingText: '加载中',
+    moreText: '查看更多',
+    noMoreText: '没有更多',
+    onClick: () => {}
+  }
+
+  static propTypes = {
+    customStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]),
+    className: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.string
+    ]),
+    status: PropTypes.oneOf(['more', 'loading', 'noMore']),
+    loadingText: PropTypes.string,
+    moreText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    onClick: PropTypes.func
+  }
+
+  onClick () {
+    this.props.onClick(...arguments)
+  }
+
+  render () {
+    const {
+      className,
+      customStyle,
+      loadingText,
+      moreText,
+      status,
+      noMoreText
+    } = this.props
+
+    let component = null
+    if (status === 'loading') {
+      component = <AtActivityIndicator mode='center' content={loadingText} />
+    } else if (status === 'more') {
+      component = <AtButton onClick={this.onClick.bind(this)} full>{moreText}</AtButton>
+    } else {
+      component = <Text className='at-load-more__tip'>{noMoreText}</Text>
+    }
+
+    return (
+      <View
+        className={classNames('at-load-more', className)}
+        style={customStyle}
+      >
+        {component}
+      </View>
+    )
+  }
+}

src/components/load-more/index.scss

@@ -0,0 +1,18 @@
+@import '../../style/theme/default.scss';
+@import "../../style/mixins/index.scss";
+
+.at-load-more {
+  position: relative;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80PX;
+
+  &__tip {
+    text-align: center;
+    width: 100%;
+    color: $color-grey-1;
+    font-size: $font-size-lg;
+  }
+}

src/components/load-more/index.test.js

@@ -0,0 +1,51 @@
+import Nerv from 'nervjs'
+import { renderToString } from 'nerv-server'
+
+import AtLoadMore from '../../../.temp/components/load-more/index'
+
+describe('AtLoadMore Snap', () => {
+  it('render initial AtLoadMore', () => {
+    const component = renderToString(<AtLoadMore />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props customStyle', () => {
+    const component = renderToString(<AtLoadMore customStyle='color:red;' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props className', () => {
+    const component = renderToString(<AtLoadMore className='test' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props status === more', () => {
+    const component = renderToString(<AtLoadMore status='more' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props status === loading', () => {
+    const component = renderToString(<AtLoadMore status='loading' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props status === noMore', () => {
+    const component = renderToString(<AtLoadMore status='noMore' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props moreText ', () => {
+    const component = renderToString(<AtLoadMore moreText='moreText' status='more' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props loadingText ', () => {
+    const component = renderToString(<AtLoadMore loadingText='loadingText' status='loading' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtLoadMore -- props noMoreText ', () => {
+    const component = renderToString(<AtLoadMore noMoreText='noMoreText' status='noMore' />)
+    expect(component).toMatchSnapshot()
+  })
+})

src/index.js

@@ -46,7 +46,7 @@ export { default as AtAccordion } from './components/accordion'
 export { default as AtSlider } from './components/slider'
 export { default as AtSwipeAction } from './components/swipe-action'
 export { default as AtSearchBar } from './components/search-bar'
-
+export { default as AtLoadMore } from './components/load-more'
 /* 私有的组件  */
 export { default as AtLoading } from './components/loading'
 export { default as AtComponent } from './common/component'

src/pages/panel/index.js

@@ -92,6 +92,10 @@ export default class PanelBasic extends Component {
           {
             id: 'Swiper',
             name: '滑块视图容器'
+          },
+          {
+            id: 'Load-More',
+            name: '页面提示'
           }
         ],
         action: [

src/pages/view/load-more/index.js

@@ -0,0 +1,53 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import AtLoadMore from '../../../components/load-more/index'
+import DocsHeader from '../../components/doc-header'
+
+import './index.scss'
+
+export default class LoadMorePage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  constructor () {
+    super(...arguments)
+    this.state = {
+      status: 'more'
+    }
+  }
+
+  handleClick () {
+    this.setState({
+      status: 'loading'
+    })
+    setTimeout(() => {
+      this.setState({
+        status: 'noMore'
+      })
+    }, 2000)
+  }
+
+  render () {
+    return (
+      <View className='page'>
+        {/* S Header */}
+        <DocsHeader title='LoadMore 页面提示'></DocsHeader>
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 文字 */}
+          <View className='panel'>
+            <View className='panel__title'>一般用法</View>
+            <View className='panel__content no-padding'>
+              <AtLoadMore onClick={this.handleClick.bind(this)} status={this.state.status} />
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
+      </View>
+    )
+  }
+}

src/pages/view/load-more/index.scss

@@ -0,0 +1,9 @@
+.panel__content {
+  .bar-item {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}