Skip to content

Commit

Permalink
Merge branch 'master' into hotfix/checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@sivan
sivan authored Dec 11, 2018
2 parents f7ba064 + ec4e09e commit 3ad66af
Show file tree
Hide file tree
Showing 9 changed files with 178 additions and 84 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
> 1. 修订号：当你做了向下兼容的问题修正。
> 先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
## 1.1.1
- 修改：修复 <Button /> 在使用旧版 api 时的样式兼容；
- 修改：修复 <Checkbox /> 占据整行及点击区域的 bug。

## 1.1.0
- 修改：按钮组件 `<Button />` API 调整，向前兼容；
- 修改：修改 `<Notification />` 回调改为非必填项，关闭按钮可配置；
Expand Down
17 changes: 17 additions & 0 deletions components/_util/deprecatedPropsCheck.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
function deprecatedWarning (componentName, propName, propValue) {
console.warn(
`Deprecated Warning: Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`
)
}

export default function deprecatedPropsCheck (deprecatedProps, props, componentName) {
for (const propName in deprecatedProps) {
if (deprecatedProps.hasOwnProperty(propName)) {
if (deprecatedProps[propName].includes(props[propName])) {
deprecatedWarning(componentName, propName, props[propName])
}
}
}
}

export { deprecatedWarning }
9 changes: 9 additions & 0 deletions components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Provider from '../context'
import deprecatedPropsCheck from '../_util/deprecatedPropsCheck'

class Button extends Component {
static propTypes = {
Expand All @@ -16,6 +17,11 @@ class Button extends Component {
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])
}

deprecatedProps = {
type: ['info'],
appearance: ['line']
}

static defaultProps = {
prefixCls: 'hi-btn',
type: 'default',
Expand Down Expand Up @@ -59,6 +65,9 @@ class Button extends Component {
)

const disabledBool = !!disabled

deprecatedPropsCheck(this.deprecatedProps, this.props, 'Button')

return (
href
? <a
Expand Down
3 changes: 2 additions & 1 deletion components/button/style/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@
}

// Common Styles
&--type--default {
&--type--default,
&--type--info {
background-color: $white;
border-color: $gray;
color: $black;
Expand Down
10 changes: 4 additions & 6 deletions components/checkbox/style/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
.label-checkbox {
span {
font-size: 12px;
padding: 0 5px;
}
}
@import '@hi-ui/core-css/index.scss';

.hi-checkbox {
display: inline-block;
cursor: pointer;

@include component-reset();

&:hover {
.hi-checkbox-input {
border: 1px solid #4284f5;
Expand Down
204 changes: 138 additions & 66 deletions components/table/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import prifix from './prefix'
import Checkbox from '../checkbox'
import Pagination from '../pagination'
import Icon from '../icon'

import '../style'
import '../checkbox/style'
import '../pagination/style'
import '../icon/style'
import {setKey, scrollTop, getStyle} from './tool'
import './style/index'

export default class Table extends Component {
static propTypes = {
Expand Down Expand Up @@ -54,6 +56,9 @@ export default class Table extends Component {

runMemory () {
let {name} = this.props
if (!name) {
return
}
let {dataSource} = this.state
let {columns, headerColumns, highlightCols} = this.state
let col = window.localStorage.getItem(name + '-col')
Expand Down Expand Up @@ -141,6 +146,7 @@ export default class Table extends Component {
})
},
hideCol: (key) => {
console.log(key, 'hide')
let {columns, headerColumns} = this.state
columns.map(item => {
if (item.key === key) {
Expand Down Expand Up @@ -199,24 +205,27 @@ export default class Table extends Component {
},

rowClick: (text, record, index) => {
let { rowSelection } = this.props
let { dataSource } = this.state
// let { rowSelection } = this.props
// let { dataSource } = this.state

// 点击行的时候如果配置了分页
if (rowSelection) {
let {selectedRowKeys} = this.state
let {onChange} = rowSelection
let selected = selectedRowKeys.includes(record.key)
if (selected) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1)
} else {
selectedRowKeys.push(record.key)
}

this.setState({selectedRowKeys}, () => {
onChange(selectedRowKeys, dataSource.filter(item => selectedRowKeys.includes(item.key)))
})
}
// if (rowSelection) {
// let {selectedRowKeys} = this.state
// let {onChange, getCheckboxProps = (record) => ({ disabled: false, dataName: record.key })} = rowSelection
// let selected = selectedRowKeys.includes(record.key)
// if (getCheckboxProps(record).disabled) {
// return
// }
// if (selected) {
// selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1)
// } else {
// selectedRowKeys.push(record.key)
// }
//
// this.setState({selectedRowKeys}, () => {
// onChange(selectedRowKeys, dataSource.filter(item => selectedRowKeys.includes(item.key)))
// })
// }
}
}

Expand Down Expand Up @@ -365,9 +374,30 @@ export default class Table extends Component {
return <div className='hi-table-placeholder'>{text}</div>
}

componentDidUpdate () {
let leftFixTable = this.refs.dom.querySelectorAll('.hi-table-fixed-left table tr')
let rightFixTable = this.refs.dom.querySelectorAll('.hi-table-fixed-right table tr')
let scrollTable = this.refs.dom.querySelectorAll('.hi-table-scroll table tr')

// if(fixTable && scrollTable){
// console.log(fixTable,scrollTable,'fix-scroll')

// }
if (scrollTable) {
scrollTable.forEach((tr, index) => {
if (leftFixTable.length > index) {
leftFixTable[index].style.height = getStyle(tr, 'height')
}
if (rightFixTable.length > index) {
rightFixTable[index].style.height = getStyle(tr, 'height')
}
})
}
}

render () {
// 多选配置
let {pagination} = this.props
let {pagination, name} = this.props
let {scroll, columnMenu} = this.state

let content
Expand Down Expand Up @@ -409,48 +439,49 @@ export default class Table extends Component {
</div> : null
}
</div>

<div className={prifix('table-setting')} ref={'setting'}>
<Icon name='menu' style={{color: '#4284F5', fontSize: '24px'}} onClick={this.showColumsPanel} />
{
columnMenu
? <ClickOutside onClickOutside={(e) => this.setState({columnMenu: false})} >
<div className={prifix('table-setting-menu column-menu')} >
{
columns.map(item => (
<div key={item.key}>
<div>
{
(function () {
if (item.type === 'select') {
return '多选'
}
if (item.type === 'expand') {
return '展开'
}
if (typeof item.title === 'function') {
return item.title()
}
return item.title
}())
}
</div>
<div>
<Checkbox checked={!item.hide} onChange={(e) => this.cbs.hideCol(item.key)} />
{ name
? <div className={prifix('table-setting')} ref={'setting'}>
<Icon name='menu' style={{color: '#4284F5', fontSize: '24px'}} onClick={this.showColumsPanel} />
{
columnMenu
? <ClickOutside onClickOutside={(e) => this.setState({columnMenu: false})} >
<div className={prifix('table-setting-menu column-menu')} >
{
columns.map(item => (
<div key={item.key}>
<div>
{
(function () {
if (item.type === 'select') {
return '多选'
}
if (item.type === 'expand') {
return '展开'
}
if (typeof item.title === 'function') {
return item.title()
}
return item.title
}())
}
</div>
<div>
<Checkbox checked={!item.hide} onChange={(e) => this.cbs.hideCol(item.key)} />
</div>
</div>
</div>
))
}
</div>
</ClickOutside> : null
}
</div>
))
}
</div>
</ClickOutside> : null
}
</div> : null
}
</div>
)
}

xscroll () {
let { fixTop } = this.props
let {fixTop, name} = this.props
if (typeof fixTop === 'boolean') {
fixTop = 0
} else {
Expand All @@ -463,23 +494,26 @@ export default class Table extends Component {
th.style.display = 'table-header-group'
let h = (dom.offsetTop - scrollTop() - fixTop) * -1
th.style.transform = `translate(0,${h}px)`
this.refs.setting.style.transform = `translate(0,${h}px)`
if (name) {
this.refs.setting.style.transform = `translate(0,${h}px)`
}
})
} else {
thead.forEach(th => {
th.style.transform = `translate(0,0)`
this.refs.setting.style.transform = `translate(0,0)`
if (name) {
this.refs.setting.style.transform = `translate(0,0)`
}
})
}
}

componentDidMount () {
let {fixTop, scroll} = this.props
let {fixTop, scroll, name} = this.props

let dom = ReactDOM.findDOMNode(this.refs['dom'])
let thead = dom.querySelectorAll('thead')
this.refs.setting.style.lineHeight = parseInt(getStyle(thead[0], 'height')) - 10 + 'px'
this.refs.setting.style.marginTop = '5px'

if (fixTop) {
// 吸顶逻辑
document.addEventListener('scroll', () => {
Expand All @@ -502,6 +536,12 @@ export default class Table extends Component {
this.setState({
...columnsDetail
})

// 操作记忆设置
if (name) {
this.refs.setting.style.lineHeight = parseInt(getStyle(thead[0], 'height')) - 10 + 'px'
this.refs.setting.style.marginTop = '5px'
}
setTimeout(() => {
this.runMemory()
}, 0)
Expand Down Expand Up @@ -608,18 +648,36 @@ export default class Table extends Component {
let rightFixColumns = []
let [headerColumns, columns] = this.getHeaderGroup(props.columns)
let {rowSelection, scroll, name} = props
let {data} = props
let dataSource = data
let that = this
if (rowSelection) {
let {selectedRowKeys} = this.state
let {onChange} = rowSelection
let { dataSource } = this.state

// 点击行的时候如果配置了分页
// if (rowSelection) {
// let {selectedRowKeys} = this.state
// let {onChange, getCheckboxProps = (record) => ({ disabled: false, dataName: record.key })} = rowSelection
// let selected = selectedRowKeys.includes(record.key)
// if (getCheckboxProps(record).disabled) {
// return
// }
// if (selected) {
// selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1)
// } else {
// selectedRowKeys.push(record.key)
// }
//
// this.setState({selectedRowKeys}, () => {
// onChange(selectedRowKeys, dataSource.filter(item => selectedRowKeys.includes(item.key)))
// })
// }

columns.unshift({
width: '50',
type: 'select',
key: 'hi-table-select-' + name,
title: () => {
let {getCheckboxProps = (record) => ({ disabled: false, dataName: record.key })} = rowSelection
let {getCheckboxProps = (record) => ({ disabled: false, dataName: record.key }), onChange} = rowSelection
let data = dataSource.filter(record => !getCheckboxProps(record).disabled)
return (
<Checkbox type='checkbox'
Expand Down Expand Up @@ -647,13 +705,27 @@ export default class Table extends Component {
)
},
render: (text, record, index) => {
let {getCheckboxProps = (record) => ({ disabled: false, dataName: record.key })} = rowSelection
// todo dataName 是干嘛的不明白 参考ant-design api
let {getCheckboxProps = (record) => ({ disabled: false, dataName: record.key }), onChange} = rowSelection
// todo dataName 是干嘛的不明白
let {disabled} = getCheckboxProps(record)
let data = dataSource.filter(record => !getCheckboxProps(record).disabled)
return (
<Checkbox
onClick={(e) => e.preventDefault()}
checked={selectedRowKeys.includes(record.key)}
onChange={(e) => {
if (e.checked) {
selectedRowKeys.push(record.key)
} else {
selectedRowKeys = selectedRowKeys.filter(key => record.key !== key)
}

that.setState({
selectedRowKeys
}, () => {
onChange(selectedRowKeys, data.filter(record => selectedRowKeys.includes(record.key)))
})
}}
disabled={disabled}
key={record.key}
/>
Expand Down
Loading

0 comments on commit 3ad66af

Please sign in to comment.