From 8e80ada985f429d3653d876a6b4c542e21bd3439 Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Thu, 6 Dec 2018 05:40:13 -0300 Subject: [PATCH] NoticeIcon: using Dropdown instead of Popover. (#3057) * NoticeIcon: using Dropdown instead of Popover. * NoticeIcon: using 100% width on mobile * New component `HeaderDropdown` * Using PureComponent because of refs --- src/components/GlobalHeader/RightContent.js | 8 ++-- src/components/GlobalHeader/index.less | 4 +- src/components/HeaderDropdown/index.js | 13 ++++++ src/components/HeaderDropdown/index.less | 16 +++++++ src/components/NoticeIcon/demo/popover.md | 1 - src/components/NoticeIcon/index.d.ts | 9 ---- src/components/NoticeIcon/index.en-US.md | 1 - src/components/NoticeIcon/index.js | 47 +++++++++++++-------- src/components/NoticeIcon/index.less | 3 -- src/components/NoticeIcon/index.zh-CN.md | 1 - src/components/SelectLang/index.js | 7 +-- src/components/SelectLang/index.less | 2 +- src/layouts/Header.js | 6 +-- 13 files changed, 72 insertions(+), 46 deletions(-) create mode 100644 src/components/HeaderDropdown/index.js create mode 100644 src/components/HeaderDropdown/index.less diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js index e916fb83..80ccba0b 100644 --- a/src/components/GlobalHeader/RightContent.js +++ b/src/components/GlobalHeader/RightContent.js @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react'; import { FormattedMessage, formatMessage } from 'umi/locale'; -import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd'; +import { Spin, Tag, Menu, Icon, Avatar, Tooltip } from 'antd'; import moment from 'moment'; import groupBy from 'lodash/groupBy'; import NoticeIcon from '../NoticeIcon'; import HeaderSearch from '../HeaderSearch'; +import HeaderDropdown from '../HeaderDropdown'; import SelectLang from '../SelectLang'; import styles from './index.less'; @@ -139,7 +140,6 @@ export default class GlobalHeaderRight extends PureComponent { onClear={onNoticeClear} onPopupVisibleChange={onNoticeVisibleChange} loading={fetchingNotices} - popupAlign={{ offset: [20, -16] }} clearClose > {currentUser.name ? ( - + {currentUser.name} - + ) : ( )} diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less index db11b783..83a4151e 100644 --- a/src/components/GlobalHeader/index.less +++ b/src/components/GlobalHeader/index.less @@ -61,7 +61,7 @@ &:hover { background: @pro-header-hover-bg; } - :global(&.ant-popover-open) { + &:global(.opened) { background: @pro-header-hover-bg; } } @@ -90,7 +90,7 @@ color: rgba(255, 255, 255, 0.85); } &:hover, - &:global(.ant-popover-open) { + &:global(.opened) { background: @primary-color; } :global(.ant-badge) { diff --git a/src/components/HeaderDropdown/index.js b/src/components/HeaderDropdown/index.js new file mode 100644 index 00000000..a19c471a --- /dev/null +++ b/src/components/HeaderDropdown/index.js @@ -0,0 +1,13 @@ +import React, { PureComponent } from 'react'; +import { Dropdown } from 'antd'; +import classNames from 'classnames'; +import styles from './index.less'; + +export default class HeaderDropdown extends PureComponent { + render() { + const { overlayClassName, ...props } = this.props; + return ( + + ); + } +} diff --git a/src/components/HeaderDropdown/index.less b/src/components/HeaderDropdown/index.less new file mode 100644 index 00000000..f27901be --- /dev/null +++ b/src/components/HeaderDropdown/index.less @@ -0,0 +1,16 @@ +@import '~antd/lib/style/themes/default.less'; + +.container > *:global(:not(.ant-dropdown-menu)) { + background-color: #fff; + box-shadow: @shadow-1-down; + border-radius: 4px; +} + +@media screen and (max-width: @screen-xs) { + .container { + width: 100% !important; + } + .container > * { + border-radius: 0 !important; + } +} diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index d128e4c4..e49e2a2f 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -149,7 +149,6 @@ ReactDOM.render( count={5} onItemClick={onItemClick} onClear={onClear} - popupAlign={{ offset: [20, -16] }} > void; onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void; onTabChange?: (tabTile: string) => void; - popupAlign?: { - points?: [string, string]; - offset?: [number, number]; - targetOffset?: [number, number]; - overflow?: any; - useCssRight?: boolean; - useCssBottom?: boolean; - useCssTransform?: boolean; - }; style?: React.CSSProperties; onPopupVisibleChange?: (visible: boolean) => void; popupVisible?: boolean; diff --git a/src/components/NoticeIcon/index.en-US.md b/src/components/NoticeIcon/index.en-US.md index 5352ce6c..c4990b64 100644 --- a/src/components/NoticeIcon/index.en-US.md +++ b/src/components/NoticeIcon/index.en-US.md @@ -17,7 +17,6 @@ loading | Popup card loading status | boolean | false onClear | Click to clear button the callback | function(tabName) | - onItemClick | Click on the list item's callback | function(item, tabProps) | - onTabChange | Switching callbacks for tabs | function(tabTitle) | - -popupAlign | Popup card location configuration | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | - onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | - popupVisible | Popup card display state | boolean | - locale | Default message text | Object | `{ emptyText: '暂无数据', clear: '清空' }` diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js index 21a5eb7c..ad21287c 100644 --- a/src/components/NoticeIcon/index.js +++ b/src/components/NoticeIcon/index.js @@ -1,7 +1,8 @@ -import React, { PureComponent } from 'react'; +import React, { PureComponent, Fragment } from 'react'; import ReactDOM from 'react-dom'; -import { Popover, Icon, Tabs, Badge, Spin } from 'antd'; +import { Icon, Tabs, Badge, Spin } from 'antd'; import classNames from 'classnames'; +import HeaderDropdown from '../HeaderDropdown'; import List from './NoticeList'; import styles from './index.less'; @@ -24,6 +25,10 @@ export default class NoticeIcon extends PureComponent { emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg', }; + state = { + visible: false, + }; + onItemClick = (item, tabProps) => { const { onItemClick } = this.props; const { clickClose } = item; @@ -70,21 +75,30 @@ export default class NoticeIcon extends PureComponent { ); }); return ( - - - {panes} - - + + + + {panes} + + + ); } + handleVisibleChange = visible => { + const { onPopupVisibleChange } = this.props; + this.setState({ visible }); + onPopupVisibleChange(visible); + }; + render() { - const { className, count, popupAlign, popupVisible, onPopupVisibleChange, bell } = this.props; + const { className, count, popupVisible, bell } = this.props; + const { visible } = this.state; const noticeButtonClass = classNames(className, styles.noticeButton); const notificationBox = this.getNotificationBox(); const NoticeBellIcon = bell || ; const trigger = ( - + {NoticeBellIcon} @@ -98,19 +112,18 @@ export default class NoticeIcon extends PureComponent { popoverProps.visible = popupVisible; } return ( - (this.popover = ReactDOM.findDOMNode(node))} // eslint-disable-line > {trigger} - + ); } } diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less index 794376b5..55eb9294 100644 --- a/src/components/NoticeIcon/index.less +++ b/src/components/NoticeIcon/index.less @@ -2,9 +2,6 @@ .popover { width: 336px; - :global(.ant-popover-inner-content) { - padding: 0; - } } .noticeButton { diff --git a/src/components/NoticeIcon/index.zh-CN.md b/src/components/NoticeIcon/index.zh-CN.md index 3c78dba1..65b2db71 100644 --- a/src/components/NoticeIcon/index.zh-CN.md +++ b/src/components/NoticeIcon/index.zh-CN.md @@ -17,7 +17,6 @@ loading | 弹出卡片加载状态 | boolean | false onClear | 点击清空按钮的回调 | function(tabName) | - onItemClick | 点击列表项的回调 | function(item, tabProps) | - onTabChange | 切换页签的回调 | function(tabTitle) | - -popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | - onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | - popupVisible | 控制弹层显隐 | boolean | - locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }` diff --git a/src/components/SelectLang/index.js b/src/components/SelectLang/index.js index ab006bf9..69e56fe3 100644 --- a/src/components/SelectLang/index.js +++ b/src/components/SelectLang/index.js @@ -1,7 +1,8 @@ import React, { PureComponent } from 'react'; import { formatMessage, setLocale, getLocale } from 'umi/locale'; -import { Menu, Icon, Dropdown } from 'antd'; +import { Menu, Icon } from 'antd'; import classNames from 'classnames'; +import HeaderDropdown from '../HeaderDropdown'; import styles from './index.less'; export default class SelectLang extends PureComponent { @@ -41,11 +42,11 @@ export default class SelectLang extends PureComponent { ); return ( - + - + ); } } diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less index e7f12ab3..971ef2aa 100644 --- a/src/components/SelectLang/index.less +++ b/src/components/SelectLang/index.less @@ -5,7 +5,7 @@ margin-right: 8px; } :global(.ant-dropdown-menu-item) { - width: 160px; + min-width: 160px; } } diff --git a/src/layouts/Header.js b/src/layouts/Header.js index 4e35cf6f..9763982e 100644 --- a/src/layouts/Header.js +++ b/src/layouts/Header.js @@ -98,13 +98,11 @@ class HeaderView extends PureComponent { this.setState({ visible: true, }); - } - else if (scrollTop > 300 && visible) { + } else if (scrollTop > 300 && visible) { this.setState({ visible: false, }); - } - else if (scrollTop < 300 && !visible) { + } else if (scrollTop < 300 && !visible) { this.setState({ visible: true, }); -- GitLab