Feature/carousel

components/carousel/index.js

@@ -0,0 +1,177 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Icon from '../icon'
+import classNames from 'classnames'
+import './style/index'
+
+// const url = 'http://i1.mifile.cn/f/i/hiui/docs/'
+class Carousel extends Component {
+  constructor (props) {
+    super(props)
+    this.rootRef = React.createRef()
+    const defaultActive = props.defaultActive
+    this.state = {
+      rootWidth: 0,
+      showArrow: false,
+      active: (defaultActive >= props.children.length || defaultActive < 0) ? 0 : defaultActive
+    }
+    this.timer = null
+  }
+
+  componentDidMount () {
+    this.setState({
+      rootWidth: this.rootRef.current.clientWidth
+    }, () => {
+      if (this.props.duration) {
+        this.autoPage()
+      }
+    })
+  }
+
+  goTo (page) {
+    if (page > this.props.children.length || page < 0) {
+      return
+    }
+    this.setState({
+      active: page
+    })
+  }
+  componentWillUnmount () {
+    this.timer && window.clearInterval(this.timer)
+  }
+
+  autoPage () {
+    this.timer = window.setInterval(() => {
+      this.preNextEvent(1)
+    }, this.props.duration)
+  }
+
+  pageEvent (active) {
+    this.setState({
+      active
+    })
+  }
+
+  preNextEvent (val) {
+    let active = this.state.active + val
+    if (active >= this.props.children.length) {
+      active = 0
+    }
+    this.setState({
+      active
+    })
+  }
+
+  renderDot (type, key, index, active) {
+    if (type === 'sign') {
+      return <li className='hi-carousel__dot hi-carousel__dot--sign' />
+    } else {
+      const cls = classNames(
+        'hi-carousel__dot',
+        active === index && 'hi-carousel__dot--active'
+      )
+      return (
+        <li
+          className={cls}
+          key={index}
+          onClick={this.pageEvent.bind(this, index)}
+        />
+      )
+    }
+  }
+
+  mouseEvent (type) {
+    let showArrow = true
+    if (type === 'over') {
+      this.timer && window.clearInterval(this.timer)
+    } else {
+      showArrow = false
+      this.props.duration && this.autoPage()
+    }
+    this.setState({showArrow})
+  }
+  render () {
+    const { rootWidth, active, showArrow } = this.state
+    const { showDots, showArrows } = this.props
+    const children = React.Children.toArray(this.props.children)
+    const arrowCls = classNames(
+      'hi-carousel__arrows',
+      showArrow && 'hi-carousel__arrows--show'
+    )
+    return <div
+      className='hi-carousel'
+      ref={this.rootRef}
+      onMouseOver={this.mouseEvent.bind(this, 'over')}
+      onMouseOut={this.mouseEvent.bind(this, 'out')}>
+      <div
+        className='hi-carousel__container'
+        style={{
+          width: rootWidth * children.length
+        }}
+      >
+        {
+          children.map((child, index) => {
+            return React.cloneElement(child, {
+              key: index,
+              style: {
+                position: 'relative',
+                opacity: active === index ? 1 : 0,
+                transition: 'opacity 300ms ease 0s',
+                left: -(rootWidth * index),
+                width: rootWidth,
+                display: 'inline-block',
+                fontSize: 24,
+                ...child.props.style
+              }
+            })
+          })
+        }
+      </div>
+      {
+        showArrows && <ul className={arrowCls}>
+          <li className='hi-carousel__arrow' onClick={this.preNextEvent.bind(this, -1)}>
+            <Icon name='left' />
+          </li>
+          <li className='hi-carousel__arrow' onClick={this.preNextEvent.bind(this, 1)}>
+            <Icon name='right' />
+          </li>
+        </ul>
+      }
+      {
+        showDots && <ul className='hi-carousel__dots'>
+          {
+            children.map((_, index) => {
+              const cls = classNames('hi-carousel__dot', active === index && 'hi-carousel__dot--active')
+              return <li
+                className={cls}
+                key={index}
+                onClick={this.pageEvent.bind(this, index)}
+              />
+            })
+          }
+        </ul>
+      }
+    </div>
+  }
+}
+
+Carousel.propTypes = {
+  duration: PropTypes.number,
+  onClick: PropTypes.func,
+  beforeChange: PropTypes.func,
+  afterChange: PropTypes.func,
+  showDots: PropTypes.bool,
+  showArrows: PropTypes.bool,
+  defaultActive: PropTypes.number
+}
+Carousel.defaultProps = {
+  duration: 0,
+  onClick: () => {},
+  beforeChange: () => {},
+  afterChange: () => {},
+  showDots: true,
+  showArrows: true,
+  defaultActive: 0
+}
+
+export default Carousel

components/carousel/style/index.js

@@ -0,0 +1 @@
+import './index.scss'

components/carousel/style/index.scss

@@ -0,0 +1,74 @@
+.hi-carousel {
+  width: 100%;
+  color: rgba(153, 153, 153, 1);
+  overflow: hidden;
+  position: relative;
+
+  &__container {
+    height: 100%;
+    transition: all 500ms;
+  }
+
+  &__dots {
+    position: absolute;
+    bottom: 24px;
+    margin: 0;
+    padding: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &__dot {
+    width: 24px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 2px;
+    display: inline-block;
+    margin-left: 4px;
+    cursor: pointer;
+    transition: all 1s;
+
+    &--active:not(.hi-carousel__dot--sign) {
+      background: rgba(255, 255, 255, 1);
+      width: 48px;
+    }
+
+    &--sign {
+      width: 24px;
+    }
+  }
+
+  &__arrows {
+    position: absolute;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    top: 50%;
+    transform: translateY(-28px);
+    display: flex;
+    justify-content: space-between;
+    visibility: hidden;
+
+    &--show {
+      visibility: visible;
+    }
+  }
+
+  &__arrow {
+    width: 56px;
+    height: 56px;
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    text-align: center;
+    line-height: 56px;
+    color: #fff;
+    font-size: 32px;
+    margin-left: 24px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 24px;
+    }
+  }
+}

components/index.js

@@ -42,4 +42,5 @@ export { default as Rate } from './rate'
 export { default as Message } from './message'
 export { default as Tag } from './tag'
 export { default as Breadcrumb } from './breadcrumb'
+export { default as Carousel } from './carousel'
 export { ThemeContext, LocaleContext } from './context'

docs/demo/breadcrumb/section-base.jsx

@@ -3,7 +3,7 @@ import DocViewer from '../../../libs/doc-viewer'
 import Breadcrumb from '../../../components/breadcrumb'
 const prefix = 'alert-base'
 const code = `import React from 'react'
-import Alert from '@hi-ui/hiui/es/alert'\n
+import Breadcrumb from '@hi-ui/hiui/es/breadcrumb'\n
 class Demo extends React.Component {
   render () {
     const data = [{

docs/demo/carousel/section-base.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import DocViewer from '../../../libs/doc-viewer'
+import Carousel from '../../../components/carousel'
+const prefix = 'carousel-base'
+const code = `import React from 'react'
+import Carousel from '@hi-ui/hiui/es/carousel'\n
+class Demo extends React.Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+    return (
+      <div style={{width: 800}}>
+        <Carousel
+          defaultActive={2}
+        >
+          {
+            data.map((item) => {
+              return <div style={{height: 300, textAlign: 'center', lineHeight: '300px', background: '#428ef5', color: '#fff'}}>{item}</div>
+            })
+          }
+        </Carousel>
+      </div>
+    )
+  }
+}`
+
+const DemoBase = () => <DocViewer code={code} scope={{ Carousel }} prefix={prefix} />
+export default DemoBase

docs/demo/carousel/section-icon.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import DocViewer from '../../../libs/doc-viewer'
+import Carousel from '../../../components/carousel'
+const prefix = 'carousel-base'
+const code = `import React from 'react'
+import Carousel from '@hi-ui/hiui/es/carousel'\n
+class Demo extends React.Component {
+  render () {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8]
+    return (
+      <div style={{width: 800}}>
+        <Carousel
+          duration={2000}
+        >
+          {
+            data.map((item, index) => {
+              return <img src={'http://i1.mifile.cn/f/i/hiui/docs/pic_'+item+'.png'} style={{height: 300}} />
+            })
+          }
+        </Carousel>
+      </div>
+    )
+  }
+}`
+
+const DemoBase = () => <DocViewer code={code} scope={{ Carousel }} prefix={prefix} />
+export default DemoBase

docs/zh-CN/components/carousel.mdx

@@ -0,0 +1,22 @@
+# Carousel 走马灯
+
+## 基础用法
+
+import DemoBase from '../../demo/carousel/section-base.jsx'
+
+<DemoBase />
+
+## 图片展示
+
+import DemoImage from '../../demo/carousel/section-icon.jsx'
+
+<DemoImage />
+
+## Props
+
+| 参数           | 说明                                              | 类型                        | 可选值        | 默认值                                                  |
+| -------------- | ------------------------------------------------- | --------------------------- | ------------- | ------------------------------------------------------- |
+| duration       | 自动切换间隔，默认不自动切换                      | number                      | -             | 0                                                       |
+| showDots       | 是否显示分页指示器                                | boolean                     | -             | false                                                   |
+| showArrows     | 是否显示箭头指示器                                | boolean                     | -             | false                                                   |
+| defaultActive  | 默认激活索引，从0开始                             | number                      | -             | 0                                                       |

site/locales/zh-CN.js

@@ -51,7 +51,8 @@ module.exports = {
     transfer: 'Transfer 穿梭框',
     switch: 'Switch 开关',
     rate: 'Rate 评分',
-    breadcrumb: 'Breadcrumb 面包屑'
+    breadcrumb: 'Breadcrumb 面包屑',
+    carousel: 'Carousel 走马灯'
   },
   designs: {
     summarize: '概述',

site/pages/components/index.js

@@ -51,7 +51,8 @@ export default {
       popover: components['popover'],
       progress: components['progress'],
       card: components['card'],
-      timeline: components['timeline']
+      timeline: components['timeline'],
+      carousel: components['carousel']
     },
     'group-tips': {
       modal: components['modal'],