Merge pull request #576 from XiaoMi/develop

release:2.1.0

.stylelintrc

@@ -1,7 +1,7 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
   "rules": {
-    "max-nesting-depth": 5,
+    "max-nesting-depth": 9,
     "string-quotes": "single",
     "declaration-colon-space-after": "always",
     "declaration-colon-space-before": "never",

CHANGELOG.md

@@ -1,18 +1,26 @@
 # 更新日志
 
+## 2.1.0
+
+- 新增 `<Breadcrumb />` 面包屑组件 [#573](https://github.com/XiaoMi/hiui/issues/573)
+- 新增 `<Tree />` 线型展示模式 [#541](https://github.com/XiaoMi/hiui/issues/541)
+- 修复 `<Upload />` 中的自定义上传同一个文件失败的问题 [#567](https://github.com/XiaoMi/hiui/issues/567)
+- 修复 `<Switch />` 重复渲染问题 [#565](https://github.com/XiaoMi/hiui/issues/565)
+- 修复 `<Collapse />` activeId 无效的问题 [#560](https://github.com/XiaoMi/hiui/issues/560)
+
 ## 2.0.5
 
 - 修复 `<Tooltip />` hover 的闪烁问题 [#522](https://github.com/XiaoMi/hiui/issues/522)
-- 修复 `<Upload />` maxCount 结合 onChange return false的计算错误问题 [#549](https://github.com/XiaoMi/hiui/issues/549)
+- 修复 `<Upload />` maxCount 结合 onChange return false 的计算错误问题 [#549](https://github.com/XiaoMi/hiui/issues/549)
 - 修复 `<Dropdown />` 部分区域点击无效的问题 [#555](https://github.com/XiaoMi/hiui/issues/555)
 - 修复 `<Menu />` 高亮项计算错误的问题 [#556](https://github.com/XiaoMi/hiui/issues/556)
 
 ## 2.0.4
 
-- 修复：`DatePicker.format` 方法丢失的问题  [#540](https://github.com/XiaoMi/hiui/issues/540)
-- 修复：`<Radio />` 垂直布局的问题  [#545](https://github.com/XiaoMi/hiui/issues/545)
-- 修复：`<Card />` 增加默认背景色  [#546](https://github.com/XiaoMi/hiui/issues/546)
-- 优化：过滤`<Input />` 、 `<Counter />` 无关属性  [#547](https://github.com/XiaoMi/hiui/issues/547)
+- 修复：`DatePicker.format` 方法丢失的问题 [#540](https://github.com/XiaoMi/hiui/issues/540)
+- 修复：`<Radio />` 垂直布局的问题 [#545](https://github.com/XiaoMi/hiui/issues/545)
+- 修复：`<Card />` 增加默认背景色 [#546](https://github.com/XiaoMi/hiui/issues/546)
+- 优化：过滤`<Input />` 、 `<Counter />` 无关属性 [#547](https://github.com/XiaoMi/hiui/issues/547)
 
 ## 2.0.2
 

components/alert/__tests__/index.test.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import { mount, shallow } from 'enzyme'
+import { spy, fake } from 'sinon'
+import Alert from '../alert'
+
+describe('Alert', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  describe('Lifecycle', () => {
+    it('componentDidMount', () => {
+      const componentDidMountSpy = spy(Alert.prototype, 'componentDidMount')
+      const wrapper = mount(<Alert />)
+
+      expect(wrapper.instance()).toBeInstanceOf(Alert)
+
+      expect(componentDidMountSpy.callCount).toEqual(1)
+      componentDidMountSpy.restore()
+
+      expect(wrapper.find('.icon-info-circle-o')).toHaveLength(1)
+      expect(wrapper.find('.close-btn')).toHaveLength(1)
+    })
+  })
+
+  describe('PropTypes', () => {
+    it('type', () => {
+      const wrapper = mount(
+        <div>
+          <Alert type='info' />
+          <Alert type='error' />
+          <Alert type='success' />
+          <Alert type='warning' />
+        </div>
+      )
+
+      // NOTE 缺少 type 对应唯一标识
+      expect(wrapper.find('.icon-info-circle-o')).toHaveLength(2)
+      expect(wrapper.find('.icon-close-circle-o')).toHaveLength(1)
+      expect(wrapper.find('.icon-check-circle-o')).toHaveLength(1)
+    })
+
+    it('onClose', () => {
+      const callback = fake()
+      const wrapper = shallow(
+        <Alert onClose={callback} />
+      )
+
+      wrapper.find('.close-btn').first().simulate('click')
+      expect(callback.callCount).toEqual(1)
+    })
+
+    it('content', () => {
+      const content = 'text-content'
+      const wrapper = shallow(
+        <Alert {...{content}} />
+      )
+
+      expect(wrapper.text()).toEqual(expect.stringMatching(content))
+    })
+
+    it('title', () => {
+      const title = 'text-title'
+      const wrapper = shallow(
+        <Alert {...{title}} />
+      )
+
+      expect(wrapper.text()).toEqual(expect.stringMatching(title))
+    })
+
+    it('duration', () => {
+      const duration = 100
+      const wrapper = shallow(
+        <Alert {...{duration}} />
+      )
+      const handleCloseSpy = spy(Alert.prototype, 'handleClose')
+
+      expect(handleCloseSpy.callCount).toEqual(0)
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), duration)
+
+      jest.runAllTimers()
+      expect(handleCloseSpy.callCount).toEqual(1)
+      handleCloseSpy.restore()
+    })
+  })
+})

components/badge/__tests__/index.test.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import { mount, shallow } from 'enzyme'
+import Badge from '../Badge'
+
+describe('Badge', () => {
+  describe('Lifecycle', () => {
+    // FIXME #34 typeof +content === 'number' always be true
+    it('componentDidMount', () => {
+      const wrapper = mount(<Badge />)
+
+      expect(wrapper.instance()).toBeInstanceOf(Badge)
+
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-base`)).toHaveLength(1)
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-value`)).toHaveLength(1)
+    })
+  })
+
+  describe('PropTypes', () => {
+    it('type', () => {
+      const wrapper = mount(
+        <div>
+          <Badge type='bubble' />
+          <Badge type='dot' />
+        </div>
+      )
+
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-dot`)).toHaveLength(1)
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-value`)).toHaveLength(1)
+    })
+
+    it('content', () => {
+      const content = 'test-content'
+      const contentNumber1 = 1
+      const contentNumber2 = 100
+      const wrapper = shallow(
+        <Badge {...{content}} />
+      )
+
+      expect(wrapper.text()).toEqual(expect.stringMatching(content))
+
+      wrapper.setProps({ content: contentNumber1 })
+      expect(wrapper.text()).toEqual(expect.stringMatching(`${contentNumber1}`))
+
+      wrapper.setProps({ content: contentNumber2 })
+      expect(wrapper.text()).toEqual(expect.stringMatching(`${Badge.defaultProps.max}+`))
+    })
+
+    it('max', () => {
+      const props = {
+        max: 33,
+        content: 1
+      }
+      const wrapper = shallow(
+        <Badge {...props} />
+      )
+
+      expect(wrapper.text()).toEqual(expect.stringMatching(`${props.content}`))
+
+      wrapper.setProps({ content: 34 })
+      expect(wrapper.text()).toEqual(expect.stringMatching(`${props.max}+`))
+    })
+
+    it('visible', () => {
+      const wrapper = mount(
+        <div>
+          <Badge type='bubble' visible={false} />
+          <Badge type='dot' visible={false} />
+        </div>
+      )
+
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-dot.hi-hide`)).toHaveLength(1)
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-value.hi-hide`)).toHaveLength(1)
+    })
+
+    it('style', () => {
+      const style = {
+        color: '#ffff00'
+      }
+      const wrapper = shallow(
+        <Badge {...{style}} />
+      )
+
+      expect(wrapper.find(`.${Badge.defaultProps.prefixCls}-base`).prop('style')).toMatchObject(style)
+    })
+  })
+})

components/breadcrumb/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Icon from '../icon'
+import './style/index'
+
+class Breadcrumb extends Component {
+  render () {
+    const { separator, data, onClick } = this.props
+    return <div className='hi-breadcrumb'>
+      {
+        data.map((item, index) => {
+          return <span key={index} className='hi-breadcrumb__item'>
+            <span className='hi-breadcrumb__content' onClick={() => { onClick(item.path) }}>{item.icon && <Icon name={item.icon} />}{item.content}</span>
+            <span className='hi-breadcrumb__separator'>{separator}</span>
+          </span>
+        })
+      }
+    </div>
+  }
+}
+
+Breadcrumb.propTypes = {
+  separator: PropTypes.string,
+  data: PropTypes.array,
+  onClick: PropTypes.func
+}
+Breadcrumb.defaultProps = {
+  separator: '|',
+  data: [],
+  onClick: () => {}
+}
+export default Breadcrumb

components/breadcrumb/style/index.js

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

components/breadcrumb/style/index.scss

@@ -0,0 +1,33 @@
+.hi-breadcrumb {
+  color: rgba(153, 153, 153, 1);
+
+  &__content {
+    cursor: pointer;
+
+    &:hover {
+      color: #4284f5;
+    }
+
+    .hi-icon {
+      margin: 0 4px;
+    }
+  }
+
+  &__separator {
+    margin: 0 10px;
+  }
+
+  &__item:last-child {
+    .hi-breadcrumb__content {
+      cursor: text;
+
+      &:hover {
+        color: rgba(153, 153, 153, 1);
+      }
+    }
+
+    .hi-breadcrumb__separator {
+      display: none;
+    }
+  }
+}