feat(divider): 新增 divider 组件

@types/divider.d.ts

@@ -0,0 +1,18 @@
+import { MouseEvent, ComponentClass } from 'react'
+import AtComponent from './base'
+
+export interface AtDividerProps extends AtComponent{
+  content?: string
+
+  height?: number | string
+
+  fontColor?: string
+
+  fontSize?: number | string
+
+  lineColor?: string
+}
+
+declare const AtDivider: ComponentClass<AtDividerProps>
+
+export default AtDivider

@types/index.d.ts

@@ -36,6 +36,7 @@ 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 { default as AtDivider } from './divider'
 
 export declare const AtModalHeader: ComponentClass
 export declare const AtModalAction: ComponentClass

src/app.js

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

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtDivider Snap render AtDivider -- props childen 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\">test</div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props className 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider test\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props content 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\">content</div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props customStyle 1`] = `"<div style=\\"height:2.3894rem;color:red;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props fontColor 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#fff;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props fontSize 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:1.1947rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props height 1`] = `"<div style=\\"height:2.56rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render AtDivider -- props lineColor 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#fff;\\" class=\\"at-divider__line\\"></div></div>"`;
+
+exports[`AtDivider Snap render initial AtDivider 1`] = `"<div style=\\"height:2.3894rem;\\" class=\\"at-divider\\"><div style=\\"color:#6190E8;font-size:0.6827rem;\\" class=\\"at-divider__content\\"></div><div style=\\"background-color:#CCC;\\" class=\\"at-divider__line\\"></div></div>"`;

src/components/divider/index.js

@@ -0,0 +1,89 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import AtComponent from '../../common/component'
+import './index.scss'
+
+export default class AtDivider extends AtComponent {
+  static defaultProps = {
+    isTest: false,
+    content: '',
+    height: 112,
+    fontColor: '#6190E8',
+    fontSize: 32,
+    lineColor: '#CCC',
+  }
+
+  static propTypes = {
+    customStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]),
+    className: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.string
+    ]),
+    content: PropTypes.string,
+    height: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
+    fontColor: PropTypes.string,
+    fontSize: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
+    lineColor: PropTypes.string
+  }
+
+  render () {
+    const {
+      isTest,
+      className,
+      customStyle,
+      content,
+      height,
+      fontColor,
+      fontSize,
+      lineColor
+    } = this.props
+
+    if (isTest) {
+      Taro.initPxTransform({ designWidth: 750 })
+    }
+
+    const rootStyle = {
+      height: `${Taro.pxTransform(height)}`
+    }
+
+    const fontStyle = {
+      'color': fontColor,
+      'font-size': `${Taro.pxTransform(fontSize)}`
+    }
+
+    const lineStyle = {
+      'background-color': lineColor
+    }
+
+    return (
+      <View
+        className={classNames('at-divider', className)}
+        style={this.mergeStyle(rootStyle, customStyle)}
+      >
+        <View
+          className='at-divider__content'
+          style={fontStyle}
+        >
+          {
+            content === ''
+              ? this.props.children
+              : content
+          }
+        </View>
+        <View className='at-divider__line' style={lineStyle}></View>
+      </View>
+    )
+  }
+}

src/components/divider/index.scss

@@ -0,0 +1,31 @@
+@import '../../style/theme/default.scss';
+@import "../../style/mixins/index.scss";
+
+.at-divider {
+  width: 100%;
+  height: 112px;
+  text-align: center;
+  font-size: $font-size-base;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__content {
+    background: $color-bg;
+    position: relative;
+    display: inline-block;
+    z-index: $zindex-divider + 1;
+    padding: 0 $spacing-h-lg;
+  }
+
+  &__line {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    background-color: $color-brand;
+    top: 50%;
+    z-index: $zindex-divider;
+  }
+}

src/components/divider/index.test.js

@@ -0,0 +1,51 @@
+import Nerv from 'nervjs'
+import { renderToString } from 'nerv-server'
+
+import AtDivider from '../../../.temp/components/divider/index'
+
+describe('AtDivider Snap', () => {
+  it('render initial AtDivider', () => {
+    const component = renderToString(<AtDivider isTest />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props customStyle', () => {
+    const component = renderToString(<AtDivider isTest customStyle='color:red;' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props className', () => {
+    const component = renderToString(<AtDivider isTest className='test' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props content', () => {
+    const component = renderToString(<AtDivider isTest content='content' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props height', () => {
+    const component = renderToString(<AtDivider isTest height='120' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props fontColor', () => {
+    const component = renderToString(<AtDivider isTest fontColor='#fff' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props fontSize', () => {
+    const component = renderToString(<AtDivider isTest fontSize='56' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props lineColor', () => {
+    const component = renderToString(<AtDivider isTest lineColor='#fff' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtDivider -- props childen', () => {
+    const component = renderToString(<AtDivider isTest>test</AtDivider>)
+    expect(component).toMatchSnapshot()
+  })
+})

src/index.js

@@ -47,6 +47,8 @@ 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 AtDivider } from './components/divider'
+
 /* 私有的组件  */
 export { default as AtLoading } from './components/loading'
 export { default as AtComponent } from './common/component'

src/pages/panel/index.js

@@ -96,6 +96,10 @@ export default class PanelBasic extends Component {
           {
             id: 'Load-More',
             name: '页面提示'
+          },
+          {
+            id: 'Divider',
+            name: '分割线'
           }
         ],
         action: [

src/pages/view/divider/index.js

@@ -0,0 +1,56 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import AtDivider from '../../../components/divider/index'
+import AtIcon from '../../../components/icon/index'
+import DocsHeader from '../../components/doc-header'
+
+import './index.scss'
+
+export default class LoadMorePage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  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'>
+              <AtDivider content='分割线' />
+            </View>
+          </View>
+
+          {/* 自定义颜色 */}
+          <View className='panel'>
+            <View className='panel__title'>自定义颜色</View>
+            <View className='panel__content no-padding'>
+              <AtDivider content='没有更多了' fontColor='#ed3f14' lineColor='#ed3f14' />
+              <AtDivider content='没有更多了' fontColor='#ff9900' lineColor='#ff9900' />
+              <AtDivider content='没有更多了' color='#2d8cf0' lineColor='#2d8cf0' />
+            </View>
+          </View>
+
+          {/* 自定义内容 */}
+          <View className='panel'>
+            <View className='panel__title'>自定义内容</View>
+            <View className='panel__content no-padding'>
+              <AtDivider>
+                <AtIcon value='check-circle'></AtIcon>
+              </AtDivider>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
+      </View>
+    )
+  }
+}

src/pages/view/divider/index.scss

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

src/style/theme/default.scss

@@ -107,6 +107,7 @@ $icon-size-md: 22px * $hd;
 $icon-size-lg: 36px * $hd;
 
 /* z-index */
+$zindex-divider: 100;
 $zindex-tab: 600;
 $zindex-form: 700;
 $zindex-nav: 800;