Skip to content

Commit

Permalink
Merge pull request #1403 from XiaoMi/develop
Browse files Browse the repository at this point in the history
3.2.0
  • Loading branch information
solarjoker authored Dec 3, 2020
2 parents f90a556 + aedf062 commit ee16ce6
Show file tree
Hide file tree
Showing 157 changed files with 3,185 additions and 1,722 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = {
browser: true,
es2021: true
},
parser: 'babel-eslint',
extends: ['plugin:react/recommended', 'standard', 'prettier'],
parserOptions: {
ecmaFeatures: {
Expand Down
33 changes: 31 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,36 @@
# 更新日志

## 3.2.0

- 新增 HiUI 基础样式 css 文件 [#1338](https://github.com/XiaoMi/hiui/issues/1338)
- 新增 `Table` expandedRowKeys,onExpand 扩展内嵌式表格的展开操作 [#1378](https://github.com/XiaoMi/hiui/issues/1378)
- 修复 `List` 组件导出问题 [#1314](https://github.com/XiaoMi/hiui/issues/1314)
- 修复 `Tabs` Tabs.Pane 组件中 tabTitle 属性传入 ReactNode 报错问题 [#1320](https://github.com/XiaoMi/hiui/issues/1320)
- 修复 `Upload` onRemove 的问题 [#1322](https://github.com/XiaoMi/hiui/issues/1322)
- 修复 `DatePicker` 受控无法选中值问题 [#1326](https://github.com/XiaoMi/hiui/issues/1326)
- 修复 `Table` 列操作 icon 丢失问题 [#1336](https://github.com/XiaoMi/hiui/issues/1336)
- 修复 `Table` 表头吸顶层级显示问题 [#1318](https://github.com/XiaoMi/hiui/issues/1318)
- 修复 `Table` 内嵌式设置列宽不正确的问题 [#1325](https://github.com/XiaoMi/hiui/issues/1325)
- 修复 `SelectTree` 下拉选择上滑动显示异常 [#1351](https://github.com/XiaoMi/hiui/issues/1351)
- 修复 `Form` 包裹 Select 设置 searchable 属性时候,显示异常 [#1343](https://github.com/XiaoMi/hiui/issues/1343)
- 修复 `Form` Form.List 和 Form.Item 同一级混用显示异常问题 [#1345](https://github.com/XiaoMi/hiui/issues/1345)
- 修复 `DatePicker` weekOffset 为 1 时 周与日对照显示异常 [#1352](https://github.com/XiaoMi/hiui/issues/1352)
- 修复 `Input` type 等于 amount 时,数据初始化展示问题 [#1346](https://github.com/XiaoMi/hiui/pull/1346)
- 修复 `Input` 添加前后置节点聚焦问题 [#1342](https://github.com/XiaoMi/hiui/pull/1342)
- 修复 `Select` 异步多选下拉数据显示问题 [#1364](https://github.com/XiaoMi/hiui/issues/1364)
- 修复 `SelectTree` 异步加载子节点数据显示位置错误以及国际化适配等问题 [#1386](https://github.com/XiaoMi/hiui/issues/1386)
- 修复 `Progress` placement 为 inside 时,字显示折行问题 [#1385](https://github.com/XiaoMi/hiui/issues/1385)
- 优化 `Select` 下拉框展开收起,输入框内容存在显示差异[#1380](https://github.com/XiaoMi/hiui/issues/1380)
- 修复 `Select` 滚动报错问题[#1390](https://github.com/XiaoMi/hiui/issues/1390)
- 优化 `Search` 后置元素应该收起下拉选项 [#1341](https://github.com/XiaoMi/hiui/issues/1341)
- 优化 `Form` 组件 label 内容显示折行行高以及间距 [#1376](https://github.com/XiaoMi/hiui/issues/1376)
- 优化 `Pagination` 国际化翻译 [#1381](https://github.com/XiaoMi/hiui/issues/1381)
- 修复 `Table` rowSelection 存在时的列冻结异常 [#1393](https://github.com/XiaoMi/hiui/issues/1393)
- 修复 `Table` 国际化问题 [#1397](https://github.com/XiaoMi/hiui/issues/1397)
- 优化 `Table` 树形表格 children 为空数组时的展示问题 [#1370](https://github.com/XiaoMi/hiui/issues/1370)
- 优化 `Tree` 内部计算逻辑,提升多条数据的渲染性能 [#1369](https://github.com/XiaoMi/hiui/issues/1369)
- 优化 `Modal` 当屏幕高度小于 Moadal 高度的交互效果 [#1348](https://github.com/XiaoMi/hiui/issues/1348)

## 3.1.0

- 新增 `Card` bordered 属性配置是否显示边框 [#1296](https://github.com/XiaoMi/hiui/issues/1296)
Expand All @@ -16,8 +47,6 @@
- 修复 `Table` data 为 undefined 时的报错问题 [#1265](https://github.com/XiaoMi/hiui/issues/1265)
- 修复 `Loading` 显示不正确的问题 [#1265](https://github.com/XiaoMi/hiui/issues/1268)
- 优化 `SelectTree` 样式问题 [#1272](https://github.com/XiaoMi/hiui/issues/1272)
- 修复 `Table` data 为 undefined 时的报错问题 [#1273](https://github.com/XiaoMi/hiui/issues/1265)
- 修复 `Loading` 显示不正确的问题 [#1268](https://github.com/XiaoMi/hiui/issues/1268)
- 修复 `Tag` 闪烁问题 [#1273](https://github.com/XiaoMi/hiui/issues/1273)
- 修复 `Timeline` 折断样式问题 [#1276](https://github.com/XiaoMi/hiui/issues/1276)
- 修复 `Timeline` 只有一条数据时的样式问题 [#1277](https://github.com/XiaoMi/hiui/issues/1277)
Expand Down
1 change: 1 addition & 0 deletions components/base-css/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './style/index.js'
1 change: 1 addition & 0 deletions components/base-css/style/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './index.scss'
11 changes: 11 additions & 0 deletions components/base-css/style/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@import '../../core-css/index.scss';

:root {
@include get-vars();
}

@each $color in map-keys($palette-primary) {
.theme__#{$color} {
@include get-vars(get-color($palette-primary, #{$color}));
}
}
101 changes: 101 additions & 0 deletions components/collapse/Panel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useCallback } from 'react'
import classNames from 'classnames'
import Icon from '../icon'
import _ from 'lodash'

const Panel = ({
key,
arrow,
header,
disabled = false,
isActive,
children,
onClickPanel,
showArrow,
panels,
panelContainer,
idx: panelIndex
}) => {
const _panels = React.Children.toArray(panels)
const classnames = classNames('collapse-item', {
'collapse-item--show': isActive,
'collapse-item--disabled': disabled
})
const onKeyDown = useCallback(
(e) => {
if ([13, 32].includes(e.keyCode)) {
e.preventDefault()
onClickPanel(key)
}

// home: 36 end: 35
if (e.keyCode === 36) {
e.preventDefault()
const idx = _.findIndex(_panels, (p) => {
return !p.props.disabled
})
panelContainer.current && panelContainer.current.querySelectorAll('.collapse-item__head')[idx].focus()
}
if (e.keyCode === 35) {
e.preventDefault()
const idx = _.findLastIndex(_panels, (p) => {
return !p.props.disabled
})
panelContainer.current && panelContainer.current.querySelectorAll('.collapse-item__head')[idx].focus()
}
// 方向键
if ([38, 40].includes(e.keyCode)) {
e.preventDefault()
const prevArr = []
const nextArr = []
_panels.forEach((p, idx) => {
if (!p.props.disabled) {
if (idx < panelIndex) {
prevArr.push(idx)
}
if (idx > panelIndex) {
nextArr.push(idx)
}
}
})

let prev
let next
if (prevArr.length > 0) {
prev = prevArr[prevArr.length - 1]
} else if (prevArr.length === 0 && nextArr.length > 0) {
prev = nextArr[nextArr.length - 1]
}
if (nextArr.length > 0) {
next = nextArr[0]
} else if (nextArr.length === 0 && prevArr.length > 0) {
next = prevArr[0]
}
if (e.keyCode === 38 && prev !== undefined) {
panelContainer.current && panelContainer.current.querySelectorAll('.collapse-item__head')[prev].focus()
}
if (e.keyCode === 40 && next !== undefined) {
panelContainer.current && panelContainer.current.querySelectorAll('.collapse-item__head')[next].focus()
}
}
},
[panels, panelContainer, panelIndex]
)
return (
<div className={classnames}>
<div
className="collapse-item__head"
onClick={() => onClickPanel(key)}
tabIndex={disabled ? -1 : 0}
onKeyDown={onKeyDown}
>
{showArrow && arrow === 'left' && <Icon name="down" className="collapse-item__icon" />}
<div className="collapse-item__title">{header}</div>
{showArrow && arrow === 'right' && <Icon name="down" className="collapse-item__icon" />}
</div>
<div className="collapse-item__content">{children}</div>
</div>
)
}

export default Panel
58 changes: 11 additions & 47 deletions components/collapse/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Component, Children } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import _ from 'lodash'
import Icon from '../icon'
import Panel from './Panel'
import './style/index'

const noop = () => {}
Expand Down Expand Up @@ -34,7 +34,10 @@ class Collapse extends Component {
this.state = {
activeId: Array.isArray(_activeId) ? _activeId : [_activeId]
}
this.panelContainer = React.createRef(null)
}


static getDerivedStateFromProps (nextProps, prevState) {
if (
!_.isEqual(nextProps.activeId !== prevState.activeId) &&
Expand Down Expand Up @@ -76,6 +79,7 @@ class Collapse extends Component {
if (!child) return
const key = child.props.id || child.key || String(index)
const { header, disabled, title } = child.props

let isActive = accordion ? activeKey[0] === key : activeKey.includes(key)
const props = {
key,
Expand All @@ -85,7 +89,10 @@ class Collapse extends Component {
arrow: arrowPlacement !== 'left' ? arrowPlacement : arrow,
showArrow,
children: child.props.children,
onClickPanel: disabled ? noop : () => this.onClickPanel(key)
onClickPanel: disabled ? noop : () => this.onClickPanel(key),
panels: children,
panelContainer: this.panelContainer,
idx: index
}
newChildren.push(React.cloneElement(child, props))
})
Expand All @@ -94,54 +101,11 @@ class Collapse extends Component {
render () {
const { prefixCls, type } = this.props
let classnames = classNames(prefixCls, type && `${prefixCls}__${type}`)
return <div className={classnames}>{this.renderPanels()}</div>
return <div className={classnames} ref={this.panelContainer}>{this.renderPanels()}</div>
}
}

class CollapsePanel extends Component {
static propTypes = {
header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
disabled: PropTypes.bool,
isActive: PropTypes.bool,
arrow: PropTypes.string,
showArrow: PropTypes.bool,
onClickPanel: PropTypes.func
}
static defaultProps = {
disabled: false
}

render () {
const {
key,
arrow,
header,
disabled,
isActive,
children,
onClickPanel,
showArrow
} = this.props
let classnames = classNames('collapse-item', {
'collapse-item--show': isActive,
'collapse-item--disabled': disabled
})
return (
<div className={classnames}>
<div className='collapse-item__head' onClick={() => onClickPanel(key)}>
{showArrow && arrow === 'left' && (
<Icon name='down' className='collapse-item__icon' />
)}
<div className='collapse-item__title'>{header}</div>
{showArrow && arrow === 'right' && (
<Icon name='down' className='collapse-item__icon' />
)}
</div>
<div className='collapse-item__content'>{children}</div>
</div>
)
}
}
Collapse.Panel = CollapsePanel
Collapse.Panel = Panel

export default Collapse
4 changes: 4 additions & 0 deletions components/collapse/style/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
color: rgba(0, 0, 0, 0.85);
cursor: pointer;

&:focus {
outline: none;
}

.collapse-item__title {
flex: auto;
line-height: 1;
Expand Down
38 changes: 38 additions & 0 deletions components/counter/Counter.js
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,44 @@ class Counter extends React.Component {

this.update(value)
}}
onKeyDown={e=> {
if(e.keyCode === 38) {
e.preventDefault()
let value = new Decimal(valueTrue).plus(step).valueOf()
if (isAddDisabled) {
return
}
if (step > 0) {
if (this.willReachMax) {
value = max
}
} else {
if (this.willReachMin) {
value = min
}
}
this.update(value)
}
if(e.keyCode === 40) {
e.preventDefault()
let value = new Decimal(this.getInputNumber())
.minus(step)
.valueOf()
if (isMinusDisabled) {
return
}
if (step > 0) {
if (this.willReachMin) {
value = min
}
} else {
if (this.willReachMax) {
value = max
}
}
this.update(value)
}
}}
/>
<span
className={`hi-counter-plus hi-counter-sign ${
Expand Down
4 changes: 4 additions & 0 deletions components/counter/style/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,5 +69,9 @@ $counter: 'hi-counter' !default;
color: use-color('gray-80');
outline: none;
box-sizing: border-box;

&:focus {
border: 1px solid use-color('primary');
}
}
}
12 changes: 7 additions & 5 deletions components/date-picker/BasePicker.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,14 @@ const BasePicker = ({
locale
})
const isLarge = altCalendar || altCalendarPreset || dateMarkRender || dateMarkPreset
const [showPanel, setShowPanel] = useState(false)
const [altCalendarPresetData, dateMarkPresetData] = useAltData({
altCalendar,
altCalendarPreset,
dateMarkRender,
dateMarkPreset
dateMarkPreset,
showPanel
})
const [showPanel, setShowPanel] = useState(false)
const inputChangeEvent = (val, dir) => {
if (val.isValid()) {
const oData = _.cloneDeep(outDate)
Expand Down Expand Up @@ -96,28 +97,28 @@ const BasePicker = ({
onChange(returnDate, returnDateStr)
}
const onPick = (dates, isShowPanel) => {
!value && changeOutDate([].concat(dates))
setTimeout(() => {
setShowPanel(isShowPanel)
}, 0)
if (!isShowPanel) {
setInputFocus(false)
callback(dates)
}
changeOutDate([].concat(dates))
}

const clickOutsideEvent = useCallback(() => {
const outDateValue = outDate[0]
const isValid = moment(outDateValue).isValid()
const { startDate, endDate } = isValid && getInRangeDate(outDate[0], outDate[1], max, min)
const _outDate = isValid ? [moment(startDate), moment(endDate)] : [null]
changeOutDate(_outDate)
resetStatus()
_outDate.forEach((od, index) => {
if (od && !od.isSame(cacheDate.current[index])) {
callback(_outDate)
}
})
changeOutDate(_outDate)
}, [outDate])
const onClear = () => {
resetStatus()
Expand Down Expand Up @@ -167,7 +168,8 @@ const BasePicker = ({
hourStep,
minuteStep,
secondStep,
inputReadOnly
inputReadOnly,
value
}}
>
<Root
Expand Down
Loading

0 comments on commit ee16ce6

Please sign in to comment.