fix table错行问题+feat menu默认折叠状态prop + fix treeSelect样式问题 (#699)

3.0.4changelog fix changelog Co-authored-by: zhangjuan <zhangjuan@DDZV1GGL414>
NewDadaFE · Aug 31, 2022 · 2f1dd75 · 2f1dd75
1 parent 6f4c79a
commit 2f1dd75
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 3.0.4
+
+- fix **Table** 错行问题
+- 新增 **Menu** defaultCollapsed 属性，控制默认折叠状态
+- fix **TreeSelect** 边框样式问题以及默认 switcherIcon
+
 ## 3.0.3
 
 - fix **Select、Navbar、Trigger** propTypes 参数

diff --git a/packages/react-impression/src/components/Menu/Menu.js b/packages/react-impression/src/components/Menu/Menu.js
@@ -23,8 +23,9 @@ function Menu({
  defaultOpenValues,
  defaultOpenAll,
  getItemContainer,
+ defaultCollapsed,
 }) {
- const [collapsed, setCollapsed] = useState(false)
+ const [collapsed, setCollapsed] = useState(defaultCollapsed)
  const [valuePath, setValuePath] = useState(defaultSelectedValues)
 
  const onCollapsedChange = () => {
@@ -139,6 +140,10 @@ Menu.propTypes = {
  * collapsed状态下，二级菜单弹框容器
  */
  getItemContainer: PropTypes.func,
+ /**
+ * defaultCollapsed，默认展开收起状态
+ */
+ defaultCollapsed: PropTypes.bool,
 }
 
 Menu.defaultProps = {
@@ -151,6 +156,7 @@ Menu.defaultProps = {
  defaultSelectedValues: [],
  defaultOpenValues: [],
  defaultOpenAll: false,
+ defaultCollapsed: false,
 }
 
 Menu.SubMenu = SubMenu

diff --git a/packages/react-impression/src/components/Table/Table.js b/packages/react-impression/src/components/Table/Table.js
@@ -5,6 +5,7 @@ import TableBody from '../TableBody'
 import TableHead from '../TableHead'
 import Pagination from '../Pagination'
 import * as R from 'ramda'
+import ResizeObserver from 'resize-observer-polyfill'
 
 export default class Table extends React.PureComponent {
  constructor(props, context) {
@@ -25,6 +26,7 @@ export default class Table extends React.PureComponent {
  checkAll: false,
  fixed: false,
  defaultSort: this.props.defaultSort || {},
+ isFullDispaly: false,
  }
 
  this.state = {
@@ -249,8 +251,25 @@ export default class Table extends React.PureComponent {
  }
  }
 
+ componentWillUnmount() {
+ const ro = this.state.ro
+ // 取消节点监听事件
+ if (ro && ro.disconnect) {
+ ro.disconnect()
+ }
+ }
+
  componentDidMount() {
  const { rowSelection } = this.props
+ let ro = new ResizeObserver(() => {
+ if (this.inner.scrollWidth <= this.scrollEl.offsetWidth) {
+ this.setState({ isFullDispaly: true })
+ } else {
+ this.setState({ isFullDispaly: false })
+ }
+ })
+ ro.observe(this.scrollEl)
+ this.setState({ ro })
  if (!rowSelection) return
  // 非受控组件
  if (!this.isPuppet) {
@@ -716,10 +735,12 @@ export default class Table extends React.PureComponent {
  checkAll,
  selectedRowKeys,
  defaultSort,
+ isFullDispaly,
  } = this.state
  const leftWidth = leftFixedWidth ? leftFixedWidth + 'px' : 60
  const rightWidth = rightFixedWidth ? rightFixedWidth + 'px' : ''
- const isNeedHide = !!fixLeftColumns.length || !!fixRightColumns.length
+ const isNeedHide =
+ (!!fixLeftColumns.length || !!fixRightColumns.length) && !isFullDispaly
  return (
  <div>
  <div
@@ -776,98 +797,102 @@ export default class Table extends React.PureComponent {
  />
  </div>
  </div>
- {(!!fixLeftColumns.length ||
- (rowSelection && rowSelection.fixed)) && (
- <div
- className={classnames(
- 'table-fixed-left',
- { 'table-border': border },
- { 'table-scroll': scroll && scroll.x },
- { 'table-shadow': !isStart },
- className
+ {!isFullDispaly && (
+ <>
+ {(!!fixLeftColumns.length ||
+ (rowSelection && rowSelection.fixed)) && (
+ <div
+ className={classnames(
+ 'table-fixed-left',
+ { 'table-border': border },
+ { 'table-scroll': scroll && scroll.x },
+ { 'table-shadow': !isStart },
+ className
+ )}
+ style={{ width: leftWidth }}
+ >
+ <TableHead
+ fixed
+ fixLeft
+ fixRight={false}
+ indeterminate={indeterminate}
+ checkAll={checkAll}
+ fixLeftColumns={fixLeftColumns}
+ fixRightColumns={fixRightColumns}
+ noFixColumns={noFixColumns}
+ rowSelection={rowSelection}
+ handleCheckOnSelectAll={this.handleCheckOnSelectAll}
+ defaultSort={defaultSort}
+ handleSort={this.handleDefaultSort}
+ />
+ <TableBody
+ handleToggleSelected={this.handleToggleSelected}
+ onClickTr={onClickTr}
+ data={data}
+ fixLeft
+ fixRight={false}
+ stripe={stripe}
+ pagination={pagination}
+ fixLeftColumns={fixLeftColumns}
+ fixRightColumns={fixRightColumns}
+ noFixColumns={noFixColumns}
+ onMouseEnter={this.handleHover}
+ rowSelection={rowSelection}
+ onMouseLeave={this.handleHoverLeave}
+ handleCheckOnSelect={this.handleCheckOnSelect}
+ selectedRowKeyList={selectedRowKeys}
+ fixed
+ />
+ </div>
  )}
- style={{ width: leftWidth }}
- >
- <TableHead
- fixed
- fixLeft
- fixRight={false}
- indeterminate={indeterminate}
- checkAll={checkAll}
- fixLeftColumns={fixLeftColumns}
- fixRightColumns={fixRightColumns}
- noFixColumns={noFixColumns}
- rowSelection={rowSelection}
- handleCheckOnSelectAll={this.handleCheckOnSelectAll}
- defaultSort={defaultSort}
- handleSort={this.handleDefaultSort}
- />
- <TableBody
- handleToggleSelected={this.handleToggleSelected}
- onClickTr={onClickTr}
- data={data}
- fixLeft
- fixRight={false}
- stripe={stripe}
- pagination={pagination}
- fixLeftColumns={fixLeftColumns}
- fixRightColumns={fixRightColumns}
- noFixColumns={noFixColumns}
- onMouseEnter={this.handleHover}
- rowSelection={rowSelection}
- onMouseLeave={this.handleHoverLeave}
- handleCheckOnSelect={this.handleCheckOnSelect}
- selectedRowKeyList={selectedRowKeys}
- fixed
- />
- </div>
- )}
- {!!fixRightColumns.length && (
- <div
- className={classnames(
- 'table-fixed-right',
- { 'table-border': border },
- { 'table-scroll': scroll && scroll.x },
- { 'table-shadow': !isEnd },
- className
+ {!!fixRightColumns.length && (
+ <div
+ className={classnames(
+ 'table-fixed-right',
+ { 'table-border': border },
+ { 'table-scroll': scroll && scroll.x },
+ { 'table-shadow': !isEnd },
+ className
+ )}
+ style={{ width: rightWidth }}
+ >
+ <TableHead
+ fixed
+ fixRight
+ fixLeft={false}
+ indeterminate={indeterminate}
+ checkAll={checkAll}
+ isShowSelection
+ fixLeftColumns={fixLeftColumns}
+ fixRightColumns={fixRightColumns}
+ noFixColumns={noFixColumns}
+ rowSelection={rowSelection}
+ handleCheckOnSelectAll={this.handleCheckOnSelectAll}
+ defaultSort={defaultSort}
+ handleSort={this.handleDefaultSort}
+ />
+ <TableBody
+ handleToggleSelected={this.handleToggleSelected}
+ onClickTr={onClickTr}
+ data={data}
+ fixRight
+ fixLeft={false}
+ fixLeftColumns={fixLeftColumns}
+ fixRightColumns={fixRightColumns}
+ noFixColumns={noFixColumns}
+ stripe={stripe}
+ pagination={pagination}
+ isShowSelection
+ onMouseEnter={this.handleHover}
+ rowSelection={rowSelection}
+ handleCheckOnSelect={this.handleCheckOnSelect}
+ onMouseLeave={this.handleHoverLeave}
+ selectedRowKeyList={selectedRowKeys}
+ fixed
+ />
+ </div>
  )}
- style={{ width: rightWidth }}
- >
- <TableHead
- fixed
- fixRight
- fixLeft={false}
- indeterminate={indeterminate}
- checkAll={checkAll}
- isShowSelection
- fixLeftColumns={fixLeftColumns}
- fixRightColumns={fixRightColumns}
- noFixColumns={noFixColumns}
- rowSelection={rowSelection}
- handleCheckOnSelectAll={this.handleCheckOnSelectAll}
- defaultSort={defaultSort}
- handleSort={this.handleDefaultSort}
- />
- <TableBody
- handleToggleSelected={this.handleToggleSelected}
- onClickTr={onClickTr}
- data={data}
- fixRight
- fixLeft={false}
- fixLeftColumns={fixLeftColumns}
- fixRightColumns={fixRightColumns}
- noFixColumns={noFixColumns}
- stripe={stripe}
- pagination={pagination}
- isShowSelection
- onMouseEnter={this.handleHover}
- rowSelection={rowSelection}
- handleCheckOnSelect={this.handleCheckOnSelect}
- onMouseLeave={this.handleHoverLeave}
- selectedRowKeyList={selectedRowKeys}
- fixed
- />
- </div>
+ </>
  )}
  {!data.length && (
  <p className='text-center table-no-data'>{placeholder}</p>

diff --git a/packages/react-impression/src/components/TreeSelect/TreeSelect.js b/packages/react-impression/src/components/TreeSelect/TreeSelect.js
@@ -609,7 +609,7 @@ const TreeSelect = props => {
  {loadingNode === id ? (
  <Ico type='rotate-right spin' />
  ) : (
- switcherIcon || <Ico type='angle-right' />
+ switcherIcon || <Ico type='caret-right' />
  )}
  </div>
  )

diff --git a/packages/react-impression/src/styles/modules/_treeSelect.scss b/packages/react-impression/src/styles/modules/_treeSelect.scss
@@ -6,6 +6,7 @@
  align-items: center;
  justify-content: space-between;
  position: relative;
+ border-radius: $border-radius;
  .dada-tree-select-icons {
  position: absolute;
  right: 5px;