github/Sword
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎉 1.0.0-RC2

Browse Source
This commit is contained in:
smallchill 2019-01-18 22:40:20 +08:00
parent 53f8528b9e
commit 96c65c8b94
14 changed files with 200 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Charts/TimelineChart/index.js
View File

@ -17,15 +17,11 @@ class TimelineChart extends React.Component {
y2: 'y2',
},
borderWidth = 2,
data = [
{
x: 0,
y1: 0,
y2: 0,
},
],
data: sourceData,
} = this.props;
const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
data.sort((a, b) => a.x - b.x);
let max;

2
src/components/Ellipsis/index.d.ts vendored
View File

@ -16,6 +16,6 @@ export interface IEllipsisProps {
}
export function getStrFullLength(str: string): number;
export function cutStrByFullLength(str: string, maxLength: number): number;
export function cutStrByFullLength(str: string, maxLength: number): string;
export default class Ellipsis extends React.Component<IEllipsisProps, any> {}

28
src/components/GlobalHeader/RightContent.js
View File

@ -63,13 +63,30 @@ export default class GlobalHeaderRight extends PureComponent {
});
};
fetchMoreNotices = tabProps => {
const { list, name } = tabProps;
const { dispatch, notices = [] } = this.props;
const lastItemId = notices[notices.length - 1].id;
dispatch({
type: 'global/fetchMoreNotices',
payload: {
lastItemId,
type: name,
offset: list.length,
},
});
};
render() {
const {
currentUser,
fetchingMoreNotices,
fetchingNotices,
loadedAllNotices,
onNoticeVisibleChange,
onMenuClick,
onNoticeClear,
skeletonCount,
theme,
} = this.props;
const menu = (
@ -94,6 +111,11 @@ export default class GlobalHeaderRight extends PureComponent {
</Menu.Item>
</Menu>
);
const loadMoreProps = {
skeletonCount,
loadedAll: loadedAllNotices,
loading: fetchingMoreNotices,
};
const noticeData = this.getNoticeData();
const unreadMsg = this.getUnreadData(noticeData);
let className = styles.right;
@ -137,8 +159,11 @@ export default class GlobalHeaderRight extends PureComponent {
locale={{
emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
clear: formatMessage({ id: 'component.noticeIcon.clear' }),
loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
}}
onClear={onNoticeClear}
onLoadMore={this.fetchMoreNotices}
onPopupVisibleChange={onNoticeVisibleChange}
loading={fetchingNotices}
clearClose
@ -150,6 +175,7 @@ export default class GlobalHeaderRight extends PureComponent {
name="notification"
emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
{...loadMoreProps}
/>
<NoticeIcon.Tab
count={unreadMsg.message}
@ -158,6 +184,7 @@ export default class GlobalHeaderRight extends PureComponent {
name="message"
emptyText={formatMessage({ id: 'component.globalHeader.message.empty' })}
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
{...loadMoreProps}
/>
<NoticeIcon.Tab
count={unreadMsg.event}
@ -166,6 +193,7 @@ export default class GlobalHeaderRight extends PureComponent {
name="event"
emptyText={formatMessage({ id: 'component.globalHeader.event.empty' })}
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
{...loadMoreProps}
/>
</NoticeIcon>
{currentUser.name ? (

7
src/components/HeaderSearch/index.js
View File

@ -11,6 +11,7 @@ export default class HeaderSearch extends PureComponent {
className: PropTypes.string,
placeholder: PropTypes.string,
onSearch: PropTypes.func,
onChange: PropTypes.func,
onPressEnter: PropTypes.func,
defaultActiveFirstOption: PropTypes.bool,
dataSource: PropTypes.array,
@ -22,6 +23,7 @@ export default class HeaderSearch extends PureComponent {
defaultActiveFirstOption: false,
onPressEnter: () => {},
onSearch: () => {},
onChange: () => {},
className: '',
placeholder: '',
dataSource: [],
@ -61,8 +63,11 @@ export default class HeaderSearch extends PureComponent {
};
onChange = value => {
const { onChange } = this.props;
const { onSearch, onChange } = this.props;
this.setState({ value });
if (onSearch) {
onSearch(value);
}
if (onChange) {
onChange(value);
}

14
src/components/NoticeIcon/NoticeIconTab.d.ts vendored
View File

@ -1,4 +1,6 @@
import { SkeletonProps } from 'antd/lib/skeleton';
import * as React from 'react';
export interface INoticeIconData {
avatar?: string | React.ReactNode;
title?: React.ReactNode;
@ -9,14 +11,18 @@ export interface INoticeIconData {
}
export interface INoticeIconTabProps {
list?: INoticeIconData[];
count?: number;
title?: string;
name?: string;
emptyText?: React.ReactNode;
emptyImage?: string;
style?: React.CSSProperties;
list?: INoticeIconData[];
loadedAll?: boolean;
loading?: boolean;
name?: string;
showClear?: boolean;
skeletonCount?: number;
skeletonProps?: SkeletonProps;
style?: React.CSSProperties;
title?: string;
}
export default class NoticeIconTab extends React.Component<INoticeIconTabProps, any> {}

79
src/components/NoticeIcon/NoticeList.js
View File

@ -1,8 +1,10 @@
import React from 'react';
import { Avatar, List } from 'antd';
import { Avatar, List, Skeleton } from 'antd';
import classNames from 'classnames';
import styles from './NoticeList.less';
let ListElement = null;
export default function NoticeList({
data = [],
onClick,
@ -11,7 +13,14 @@ export default function NoticeList({
locale,
emptyText,
emptyImage,
loading,
onLoadMore,
visible,
loadedAll = true,
scrollToLoad = true,
showClear = true,
skeletonCount = 5,
skeletonProps = {},
}) {
if (data.length === 0) {
return (
@ -21,10 +30,36 @@ export default function NoticeList({
</div>
);
}
const loadingList = Array.from({ length: loading ? skeletonCount : 0 }).map(() => ({ loading }));
const LoadMore = loadedAll ? (
<div className={classNames(styles.loadMore, styles.loadedAll)}>
<span>{locale.loadedAll}</span>
</div>
) : (
<div className={styles.loadMore} onClick={onLoadMore}>
<span>{locale.loadMore}</span>
</div>
);
const onScroll = event => {
if (!scrollToLoad || loading || loadedAll) return;
if (typeof onLoadMore !== 'function') return;
const { currentTarget: t } = event;
if (t.scrollHeight - t.scrollTop - t.clientHeight <= 40) {
onLoadMore(event);
ListElement = t;
}
};
if (!visible && ListElement) {
try {
ListElement.scrollTo(null, 0);
} catch (err) {
ListElement = null;
}
}
return (
<div>
<List className={styles.list}>
{data.map((item, i) => {
<List className={styles.list} loadMore={LoadMore} onScroll={onScroll}>
{[...data, ...loadingList].map((item, i) => {
const itemCls = classNames(styles.item, {
[styles.read]: item.read,
});
@ -33,30 +68,32 @@ export default function NoticeList({
typeof item.avatar === 'string' ? (
<Avatar className={styles.avatar} src={item.avatar} />
) : (
item.avatar
<span className={styles.iconElement}>{item.avatar}</span>
)
) : null;
return (
<List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
<List.Item.Meta
className={styles.meta}
avatar={<span className={styles.iconElement}>{leftIcon}</span>}
title={
<div className={styles.title}>
{item.title}
<div className={styles.extra}>{item.extra}</div>
</div>
}
description={
<div>
<div className={styles.description} title={item.description}>
{item.description}
<Skeleton avatar title={false} active {...skeletonProps} loading={item.loading}>
<List.Item.Meta
className={styles.meta}
avatar={leftIcon}
title={
<div className={styles.title}>
{item.title}
<div className={styles.extra}>{item.extra}</div>
</div>
<div className={styles.datetime}>{item.datetime}</div>
</div>
}
/>
}
description={
<div>
<div className={styles.description} title={item.description}>
{item.description}
</div>
<div className={styles.datetime}>{item.datetime}</div>
</div>
}
/>
</Skeleton>
</List.Item>
);
})}

13
src/components/NoticeIcon/NoticeList.less
View File

@ -3,6 +3,9 @@
.list {
max-height: 400px;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.item {
transition: all 0.3s;
overflow: hidden;
@ -52,6 +55,16 @@
margin-top: -1.5px;
}
}
.loadMore {
padding: 8px 0;
cursor: pointer;
color: @primary-6;
text-align: center;
&.loadedAll {
cursor: unset;
color: rgba(0, 0, 0, 0.25);
}
}
}
.notFound {

8
src/components/NoticeIcon/index.d.ts vendored
View File

@ -8,11 +8,17 @@ export interface INoticeIconProps {
loading?: boolean;
onClear?: (tabName: string) => void;
onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void;
onLoadMore?: (tabProps: INoticeIconProps) => void;
onTabChange?: (tabTile: string) => void;
style?: React.CSSProperties;
onPopupVisibleChange?: (visible: boolean) => void;
popupVisible?: boolean;
locale?: { emptyText: string; clear: string };
locale?: {
emptyText: string;
clear: string;
loadedAll: string;
loadMore: string;
};
clearClose?: boolean;
}

32
src/components/NoticeIcon/index.en-US.md
View File

@ -13,32 +13,40 @@ Property | Description | Type | Default
----|------|-----|------
count | Total number of messages | number | -
bell | Change the bell Icon | ReactNode | `<Icon type='bell' />`
loading | Popup card loading status | boolean | false
onClear | Click to clear button the callback | function(tabName) | -
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) | -
onLoadMore | Callback of click for loading more | function(tabProps, event) | -
onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | -
onTabChange | Switching callbacks for tabs | function(tabTitle) | -
popupVisible | Popup card display state | boolean | -
locale | Default message text | Object | `{ emptyText: '暂无数据', clear: '清空' }`
locale | Default message text | Object | `{ emptyText: 'No notifications', clear: 'Clear', loadedAll: 'Loaded', loadMore: 'Loading more' }`
clearClose | Close menu after clear | boolean | `false`
### NoticeIcon.Tab
Property | Description | Type | Default
----|------|-----|------
title | header for message Tab | string | -
name | identifier for message Tab | string | -
count | Unread messages count of this tab | number | list.length
emptyText | Message text when list is empty | ReactNode | -
emptyImage | Image when list is empty | string | -
list | List data, format refer to the following table | Array | `[]`
showClear | Clear button display status | boolean | true
emptyText | message text when list is empty | ReactNode | -
emptyImage | image when list is empty | string | -
loadedAll | All messages have been loaded | boolean | `true`
loading | Loading status of this tab | boolean | `false`
name | identifier for message Tab | string | -
scrollToLoad | Scroll to load | boolean | `true`
skeletonCount | Number of skeleton when tab is loading | number | `5`
skeletonProps | Props of skeleton | SkeletonProps | `{}`
showClear | Clear button display status | boolean | `true`
title | header for message Tab | string | -
### Tab data
Property | Description | Type | Default
----|------|-----|------
avatar | avatar img url | string \| ReactNode | -
avatar | avatar img url | string \| ReactNode | -
title | title | ReactNode | -
description | description info | ReactNode | -
datetime | Timestamps | ReactNode | -
extra |Additional information in the upper right corner of the list item | ReactNode | -
extra | Additional information in the upper right corner of the list item | ReactNode | -
clickClose | Close menu after clicking list item | boolean | `false`

40
src/components/NoticeIcon/index.js
View File

@ -21,6 +21,8 @@ export default class NoticeIcon extends PureComponent {
locale: {
emptyText: 'No notifications',
clear: 'Clear',
loadedAll: 'Loaded',
loadMore: 'Loading more',
},
emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
};
@ -51,25 +53,53 @@ export default class NoticeIcon extends PureComponent {
onTabChange(tabType);
};
onLoadMore = (tabProps, event) => {
const { onLoadMore } = this.props;
onLoadMore(tabProps, event);
};
getNotificationBox() {
const { visible } = this.state;
const { children, loading, locale } = this.props;
if (!children) {
return null;
}
const panes = React.Children.map(children, child => {
const { list, title, name, count } = child.props;
const {
list,
title,
name,
count,
emptyText,
emptyImage,
showClear,
loadedAll,
scrollToLoad,
skeletonCount,
skeletonProps,
loading: tabLoading,
} = child.props;
const len = list && list.length ? list.length : 0;
const msgCount = count || count === 0 ? count : len;
const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
return (
<TabPane tab={tabTitle} key={name}>
<List
{...child.props}
data={list}
onClick={item => this.onItemClick(item, child.props)}
onClear={() => this.onClear(name)}
title={title}
emptyImage={emptyImage}
emptyText={emptyText}
loadedAll={loadedAll}
loading={tabLoading}
locale={locale}
onClear={() => this.onClear(name)}
onClick={item => this.onItemClick(item, child.props)}
onLoadMore={event => this.onLoadMore(child.props, event)}
scrollToLoad={scrollToLoad}
showClear={showClear}
skeletonCount={skeletonCount}
skeletonProps={skeletonProps}
title={title}
visible={visible}
/>
</TabPane>
);

2
src/components/NoticeIcon/index.less
View File

@ -20,7 +20,7 @@
text-align: center;
}
.ant-tabs-bar {
margin-bottom: 4px;
margin-bottom: 0;
}
}
}

26
src/components/NoticeIcon/index.zh-CN.md
View File

@ -13,26 +13,32 @@ order: 9
----|------|-----|------
count | 图标上的消息总数 | number | -
bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />`
loading | 弹出卡片加载状态 | boolean | false
loading | 弹出卡片加载状态 | boolean | `false`
onClear | 点击清空按钮的回调 | function(tabName) | -
onItemClick | 点击列表项的回调 | function(item, tabProps) | -
onTabChange | 切换页签的回调 | function(tabTitle) | -
onLoadMore | 加载更多的回调 | function(tabProps, event) | -
onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
onTabChange | 切换页签的回调 | function(tabTitle) | -
popupVisible | 控制弹层显隐 | boolean | -
locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }`
clearClose | 点击清空按钮后关闭通知菜单 | boolean | false
locale | 默认文案 | Object | `{ emptyText: 'No notifications', clear: 'Clear', loadedAll: 'Loaded', loadMore: 'Loading more' }`
clearClose | 点击清空按钮后关闭通知菜单 | boolean | `false`
### NoticeIcon.Tab
参数 | 说明 | 类型 | 默认值
----|------|-----|------
title | 消息分类的页签标题 | string | -
name | 消息分类的标识符 | string | -
list | 列表数据，格式参照下表 | Array | `[]`
showClear | 是否显示清空按钮 | boolean | true
count | 当前 Tab 未读消息数量 | number | list.length
emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
emptyImage | 针对每个 Tab 定制空数据图片 | string | -
list | 列表数据，格式参照下表 | Array | `[]`
loadedAll | 已加载完所有消息 | boolean | `true`
loading | 当前 Tab 的加载状态 | boolean | `false`
name | 消息分类的标识符 | string | -
scrollToLoad | 允许滚动自加载 | boolean | `true`
skeletonCount | 加载时占位骨架的数量 | number | `5`
skeletonProps | 加载时占位骨架的属性 | SkeletonProps | `{}`
showClear | 是否显示清空按钮 | boolean | `true`
title | 消息分类的页签标题 | string | -
### Tab data
@ -43,4 +49,4 @@ title | 标题 | ReactNode | -
description | 描述信息 | ReactNode | -
datetime | 时间戳 | ReactNode | -
extra | 额外信息，在列表项右上角 | ReactNode | -
clickClose | 点击列表项关闭通知菜单 | boolean | false
clickClose | 点击列表项关闭通知菜单 | boolean | `false`

2
src/components/SiderMenu/SiderMenu.js
View File

@ -68,7 +68,7 @@ export default class SiderMenu extends PureComponent {
<div className={styles.logo} id="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>Sword</h1>
<h1>Sword Admin</h1>
</Link>
</div>
<Suspense fallback={<PageLoading />}>

2
src/components/TopNavHeader/index.js
View File

@ -32,7 +32,7 @@ export default class TopNavHeader extends PureComponent {
<div className={styles.logo} key="logo" id="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>Sword</h1>
<h1>Sword Admin</h1>
</Link>
</div>
<div