;
7 |
8 | export type IReactComponent =
9 | | React.StatelessComponent
10 | | React.ComponentClass
11 | | React.ClassicComponentClass
;
12 |
13 | interface Secured {
14 | (authority: authority, error?: React.ReactNode): (target: T) => T;
15 | }
16 |
17 | export interface AuthorizedRouteProps extends RouteProps {
18 | authority: authority;
19 | }
20 | export class AuthorizedRoute extends React.Component {}
21 |
22 | interface check {
23 | (
24 | authority: authority,
25 | target: T,
26 | Exception: S
27 | ): T | S;
28 | }
29 |
30 | interface AuthorizedProps {
31 | authority: authority;
32 | noMatch?: React.ReactNode;
33 | }
34 |
35 | export class Authorized extends React.Component {
36 | static Secured: Secured;
37 | static AuthorizedRoute: typeof AuthorizedRoute;
38 | static check: check;
39 | }
40 |
41 | declare function renderAuthorize(currentAuthority: string): typeof Authorized;
42 |
43 | export default renderAuthorize;
44 |
--------------------------------------------------------------------------------
/src/components/Authorized/index.js:
--------------------------------------------------------------------------------
1 | import Authorized from './Authorized';
2 | import AuthorizedRoute from './AuthorizedRoute';
3 | import Secured from './Secured';
4 | import check from './CheckPermissions.js';
5 | import renderAuthorize from './renderAuthorize';
6 |
7 | Authorized.Secured = Secured;
8 | Authorized.AuthorizedRoute = AuthorizedRoute;
9 | Authorized.check = check;
10 |
11 | export default renderAuthorize(Authorized);
12 |
--------------------------------------------------------------------------------
/src/components/Authorized/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Authorized
4 | zh-CN: Authorized
5 | subtitle: 权限
6 | cols: 1
7 | order: 15
8 | ---
9 |
10 | 权限组件，通过比对现有权限与准入权限，决定相关元素的展示。
11 |
12 | ## API
13 |
14 | ### RenderAuthorized
15 |
16 | `RenderAuthorized: (currentAuthority: string | () => string) => Authorized`
17 |
18 | 权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。
19 |
20 |
21 | ### Authorized
22 |
23 | 最基础的权限控制。
24 |
25 | | 参数 | 说明 | 类型 | 默认值 |
26 | |----------|------------------------------------------|-------------|-------|
27 | | children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - |
28 | | authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
29 | | noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - |
30 |
31 | ### Authorized.AuthorizedRoute
32 |
33 | | 参数 | 说明 | 类型 | 默认值 |
34 | |----------|------------------------------------------|-------------|-------|
35 | | authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
36 | | redirectPath | 权限异常时重定向的页面路由 | string | - |
37 |
38 | 其余参数与 `Route` 相同。
39 |
40 | ### Authorized.Secured
41 |
42 | 注解方式，`@Authorized.Secured(authority, error)`
43 |
44 | | 参数 | 说明 | 类型 | 默认值 |
45 | |----------|------------------------------------------|-------------|-------|
46 | | authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
47 | | error | 权限异常时渲染元素 | ReactNode | {
9 | constructor(props: IAvatarItemProps);
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/AvatarList/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基础样例
5 | en-US: Basic Usage
6 | ---
7 |
8 | Simplest of usage.
9 |
10 | ````jsx
11 | import AvatarList from 'ant-design-pro/lib/AvatarList';
12 |
13 | ReactDOM.render(
14 |
15 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import AvatarItem from './AvatarItem';
3 |
4 | export interface IAvatarListProps {
5 | size?: 'large' | 'small' | 'mini' | 'default';
6 | style?: React.CSSProperties;
7 | children: React.ReactElement | Array>;
8 | }
9 |
10 | export default class AvatarList extends React.Component {
11 | public static Item: typeof AvatarItem;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AvatarList
3 | order: 1
4 | cols: 1
5 | ---
6 |
7 | A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size.
8 |
9 | ## API
10 |
11 | ### AvatarList
12 |
13 | | Property | Description | Type | Default |
14 | |----------|------------------------------------------|-------------|-------|
15 | | size | size of list | `large`、`small` 、`mini`, `default` | `default` |
16 |
17 | ### AvatarList.Item
18 |
19 | | Property | Description | Type | Default |
20 | |----------|------------------------------------------|-------------|-------|
21 | | tips | title tips for avatar item | ReactNode\/string | - |
22 | | src | the address of the image for an image avatar | string | - |
23 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip, Avatar } from 'antd';
3 | import classNames from 'classnames';
4 |
5 | import styles from './index.less';
6 |
7 | const AvatarList = ({ children, size, ...other }) => {
8 | const childrenWithProps = React.Children.map(children, child =>
9 | React.cloneElement(child, {
10 | size,
11 | })
12 | );
13 |
14 | return (
15 |
18 | );
19 | };
20 |
21 | const Item = ({ src, size, tips, onClick = () => {} }) => {
22 | const cls = classNames(styles.avatarItem, {
23 | [styles.avatarItemLarge]: size === 'large',
24 | [styles.avatarItemSmall]: size === 'small',
25 | [styles.avatarItemMini]: size === 'mini',
26 | });
27 |
28 | return (
29 |
30 | {tips ? (
31 |
32 |
34 | ) : (
35 |
38 | );
39 | };
40 |
41 | AvatarList.Item = Item;
42 |
43 | export default AvatarList;
44 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .avatarList {
4 | display: inline-block;
5 | ul {
6 | display: inline-block;
7 | margin-left: 8px;
8 | font-size: 0;
9 | }
10 | }
11 |
12 | .avatarItem {
13 | display: inline-block;
14 | font-size: @font-size-base;
15 | margin-left: -8px;
16 | width: @avatar-size-base;
17 | height: @avatar-size-base;
18 | :global {
19 | .ant-avatar {
20 | border: 1px solid #fff;
21 | }
22 | }
23 | }
24 |
25 | .avatarItemLarge {
26 | width: @avatar-size-lg;
27 | height: @avatar-size-lg;
28 | }
29 |
30 | .avatarItemSmall {
31 | width: @avatar-size-sm;
32 | height: @avatar-size-sm;
33 | }
34 |
35 | .avatarItemMini {
36 | width: 20px;
37 | height: 20px;
38 | :global {
39 | .ant-avatar {
40 | width: 20px;
41 | height: 20px;
42 | line-height: 20px;
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AvatarList
3 | subtitle: 用户头像列表
4 | order: 1
5 | cols: 1
6 | ---
7 |
8 | 一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
9 |
10 | ## API
11 |
12 | ### AvatarList
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
17 |
18 | ### AvatarList.Item
19 |
20 | | 参数 | 说明 | 类型 | 默认值 |
21 | |----------|------------------------------------------|-------------|-------|
22 | | tips | 头像展示文案 | ReactNode\/string | - |
23 | | src | 头像图片连接 | string | - |
24 |
--------------------------------------------------------------------------------
/src/components/Charts/Bar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IBarProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | padding?: [number, number, number, number];
6 | height: number;
7 | data: Array<{
8 | x: string;
9 | y: number;
10 | }>;
11 | autoLabel?: boolean;
12 | style?: React.CSSProperties;
13 | }
14 |
15 | export default class Bar extends React.Component {}
16 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IChartCardProps {
3 | title: React.ReactNode;
4 | action?: React.ReactNode;
5 | total?: React.ReactNode | number | (() => React.ReactNode | number);
6 | footer?: React.ReactNode;
7 | contentHeight?: number;
8 | avatar?: React.ReactNode;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class ChartCard extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Card } from 'antd';
3 | import classNames from 'classnames';
4 |
5 | import styles from './index.less';
6 |
7 | const renderTotal = total => {
8 | let totalDom;
9 | switch (typeof total) {
10 | case 'undefined':
11 | totalDom = null;
12 | break;
13 | case 'function':
14 | totalDom = {total()}
;
15 | break;
16 | default:
17 | totalDom = {total}
;
18 | }
19 | return totalDom;
20 | };
21 |
22 | const ChartCard = ({
23 | loading = false,
24 | contentHeight,
25 | title,
26 | avatar,
27 | action,
28 | total,
29 | footer,
30 | children,
31 | ...rest
32 | }) => {
33 | const content = (
34 |
35 |
40 |
{avatar}
41 |
42 |
43 | {title}
44 | {action}
45 |
46 | {renderTotal(total)}
47 |
48 |
49 | {children && (
50 |
53 | )}
54 | {footer && (
55 |
60 | {footer}
61 |
62 | )}
63 |
68 | {content}
69 |
70 | );
71 | };
72 |
73 | export default ChartCard;
74 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .chartCard {
4 | position: relative;
5 | .chartTop {
6 | position: relative;
7 | overflow: hidden;
8 | width: 100%;
9 | }
10 | .chartTopMargin {
11 | margin-bottom: 12px;
12 | }
13 | .chartTopHasMargin {
14 | margin-bottom: 20px;
15 | }
16 | .metaWrap {
17 | float: left;
18 | }
19 | .avatar {
20 | position: relative;
21 | top: 4px;
22 | float: left;
23 | margin-right: 20px;
24 | img {
25 | border-radius: 100%;
26 | }
27 | }
28 | .meta {
29 | color: @text-color-secondary;
30 | font-size: @font-size-base;
31 | line-height: 22px;
32 | height: 22px;
33 | }
34 | .action {
35 | cursor: pointer;
36 | position: absolute;
37 | top: 0;
38 | right: 0;
39 | }
40 | .total {
41 | overflow: hidden;
42 | text-overflow: ellipsis;
43 | word-break: break-all;
44 | white-space: nowrap;
45 | color: @heading-color;
46 | margin-top: 4px;
47 | margin-bottom: 0;
48 | font-size: 30px;
49 | line-height: 38px;
50 | height: 38px;
51 | }
52 | .content {
53 | margin-bottom: 12px;
54 | position: relative;
55 | width: 100%;
56 | }
57 | .contentFixed {
58 | position: absolute;
59 | left: 0;
60 | bottom: 0;
61 | width: 100%;
62 | }
63 | .footer {
64 | border-top: 1px solid @border-color-split;
65 | padding-top: 9px;
66 | margin-top: 8px;
67 | & > * {
68 | position: relative;
69 | }
70 | }
71 | .footerMargin {
72 | margin-top: 20px;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IFieldProps {
3 | label: React.ReactNode;
4 | value: React.ReactNode;
5 | style?: React.CSSProperties;
6 | }
7 |
8 | export default class Field extends React.Component {}
9 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './index.less';
4 |
5 | const Field = ({ label, value, ...rest }) => (
6 |
7 | {label}
8 | {value}
9 |
10 | );
11 |
12 | export default Field;
13 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .field {
4 | white-space: nowrap;
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | margin: 0;
8 | span {
9 | font-size: @font-size-base;
10 | line-height: 22px;
11 | }
12 | span:last-child {
13 | margin-left: 8px;
14 | color: @heading-color;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Charts/Gauge/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IGaugeProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | height: number;
6 | bgColor?: number;
7 | percent: number;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class Gauge extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniArea/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | // g2已经更新到3.0
4 | // 不带的写了
5 |
6 | export interface IAxis {
7 | title: any;
8 | line: any;
9 | gridAlign: any;
10 | labels: any;
11 | tickLine: any;
12 | grid: any;
13 | }
14 |
15 | export interface IMiniAreaProps {
16 | color?: string;
17 | height: number;
18 | borderColor?: string;
19 | line?: boolean;
20 | animate?: boolean;
21 | xAxis?: IAxis;
22 | yAxis?: IAxis;
23 | data: Array<{
24 | x: number;
25 | y: number;
26 | }>;
27 | }
28 |
29 | export default class MiniArea extends React.Component {}
30 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniBar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IMiniBarProps {
3 | color?: string;
4 | height: number;
5 | data: Array<{
6 | x: number | string;
7 | y: number;
8 | }>;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class MiniBar extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniBar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Chart, Tooltip, Geom } from 'bizcharts';
3 | import autoHeight from '../autoHeight';
4 | import styles from '../index.less';
5 |
6 | @autoHeight()
7 | export default class MiniBar extends React.Component {
8 | render() {
9 | const { height, forceFit = true, color = '#1890FF', data = [] } = this.props;
10 |
11 | const scale = {
12 | x: {
13 | type: 'cat',
14 | },
15 | y: {
16 | min: 0,
17 | },
18 | };
19 |
20 | const padding = [36, 5, 30, 5];
21 |
22 | const tooltip = [
23 | 'x*y',
24 | (x, y) => ({
25 | name: x,
26 | value: y,
27 | }),
28 | ];
29 |
30 | // for tooltip not to be hide
31 | const chartHeight = height + 54;
32 |
33 | return (
34 |
35 |
36 |
43 |
46 |
47 |
{}
11 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniProgress/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip } from 'antd';
3 |
4 | import styles from './index.less';
5 |
6 | const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
7 |
8 |
9 |
10 |
13 |
14 |
24 |
{}
21 |
--------------------------------------------------------------------------------
/src/components/Charts/Pie/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .pie {
4 | position: relative;
5 | .chart {
6 | position: relative;
7 | }
8 | &.hasLegend .chart {
9 | width: ~'calc(100% - 240px)';
10 | }
11 | .legend {
12 | position: absolute;
13 | right: 0;
14 | min-width: 200px;
15 | top: 50%;
16 | transform: translateY(-50%);
17 | margin: 0 20px;
18 | list-style: none;
19 | padding: 0;
20 | li {
21 | cursor: pointer;
22 | margin-bottom: 16px;
23 | height: 22px;
24 | line-height: 22px;
25 | &:last-child {
26 | margin-bottom: 0;
27 | }
28 | }
29 | }
30 | .dot {
31 | border-radius: 8px;
32 | display: inline-block;
33 | margin-right: 8px;
34 | position: relative;
35 | top: -1px;
36 | height: 8px;
37 | width: 8px;
38 | }
39 | .line {
40 | background-color: @border-color-split;
41 | display: inline-block;
42 | margin-right: 8px;
43 | width: 1px;
44 | height: 16px;
45 | }
46 | .legendTitle {
47 | color: @text-color;
48 | }
49 | .percent {
50 | color: @text-color-secondary;
51 | }
52 | .value {
53 | position: absolute;
54 | right: 0;
55 | }
56 | .title {
57 | margin-bottom: 8px;
58 | }
59 | .total {
60 | position: absolute;
61 | left: 50%;
62 | top: 50%;
63 | text-align: center;
64 | max-height: 62px;
65 | transform: translate(-50%, -50%);
66 | & > h4 {
67 | color: @text-color-secondary;
68 | font-size: 14px;
69 | line-height: 22px;
70 | height: 22px;
71 | margin-bottom: 8px;
72 | font-weight: normal;
73 | }
74 | & > p {
75 | color: @heading-color;
76 | display: block;
77 | font-size: 1.2em;
78 | height: 32px;
79 | line-height: 32px;
80 | white-space: nowrap;
81 | }
82 | }
83 | }
84 |
85 | .legendBlock {
86 | &.hasLegend .chart {
87 | width: 100%;
88 | margin: 0 0 32px 0;
89 | }
90 | .legend {
91 | position: relative;
92 | transform: none;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/Charts/Radar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IRadarProps {
3 | title?: React.ReactNode;
4 | height: number;
5 | padding?: [number, number, number, number];
6 | hasLegend?: boolean;
7 | data: Array<{
8 | name: string;
9 | label: string;
10 | value: string;
11 | }>;
12 | style?: React.CSSProperties;
13 | }
14 |
15 | export default class Radar extends React.Component {}
16 |
--------------------------------------------------------------------------------
/src/components/Charts/Radar/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .radar {
4 | .legend {
5 | margin-top: 16px;
6 | .legendItem {
7 | position: relative;
8 | text-align: center;
9 | cursor: pointer;
10 | color: @text-color-secondary;
11 | line-height: 22px;
12 | p {
13 | margin: 0;
14 | }
15 | h6 {
16 | color: @heading-color;
17 | padding-left: 16px;
18 | font-size: 24px;
19 | line-height: 32px;
20 | margin-top: 4px;
21 | margin-bottom: 0;
22 | }
23 | &:after {
24 | background-color: @border-color-split;
25 | position: absolute;
26 | top: 8px;
27 | right: 0;
28 | height: 40px;
29 | width: 1px;
30 | content: '';
31 | }
32 | }
33 | > :last-child .legendItem:after {
34 | display: none;
35 | }
36 | .dot {
37 | border-radius: 6px;
38 | display: inline-block;
39 | margin-right: 6px;
40 | position: relative;
41 | top: -1px;
42 | height: 6px;
43 | width: 6px;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/Charts/TagCloud/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface ITagCloudProps {
3 | data: Array<{
4 | name: string;
5 | value: number;
6 | }>;
7 | height: number;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class TagCloud extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Charts/TagCloud/index.less:
--------------------------------------------------------------------------------
1 | .tagCloud {
2 | overflow: hidden;
3 | canvas {
4 | transform: scale(0.25);
5 | transform-origin: 0 0;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/Charts/TimelineChart/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface ITimelineChartProps {
3 | data: Array<{
4 | x: number;
5 | y1: number;
6 | y2?: number;
7 | }>;
8 | titleMap: { y1: string; y2?: string };
9 | padding?: [number, number, number, number];
10 | height?: number;
11 | style?: React.CSSProperties;
12 | }
13 |
14 | export default class TimelineChart extends React.Component {}
15 |
--------------------------------------------------------------------------------
/src/components/Charts/TimelineChart/index.less:
--------------------------------------------------------------------------------
1 | .timelineChart {
2 | background: #fff;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Charts/WaterWave/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IWaterWaveProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | height: number;
6 | percent: number;
7 | style?: React.CSSProperties;
8 | }
9 |
10 | export default class WaterWave extends React.Component {}
11 |
--------------------------------------------------------------------------------
/src/components/Charts/WaterWave/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .waterWave {
4 | display: inline-block;
5 | position: relative;
6 | transform-origin: left;
7 | .text {
8 | position: absolute;
9 | left: 0;
10 | top: 32px;
11 | text-align: center;
12 | width: 100%;
13 | span {
14 | color: @text-color-secondary;
15 | font-size: 14px;
16 | line-height: 22px;
17 | }
18 | h4 {
19 | color: @heading-color;
20 | line-height: 32px;
21 | font-size: 24px;
22 | }
23 | }
24 | .waterWaveCanvasWrapper {
25 | transform: scale(0.5);
26 | transform-origin: 0 0;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Charts/autoHeight.js:
--------------------------------------------------------------------------------
1 | /* eslint eqeqeq: 0 */
2 | import React from 'react';
3 |
4 | function computeHeight(node) {
5 | const totalHeight = parseInt(getComputedStyle(node).height, 10);
6 | const padding =
7 | parseInt(getComputedStyle(node).paddingTop, 10) +
8 | parseInt(getComputedStyle(node).paddingBottom, 10);
9 | return totalHeight - padding;
10 | }
11 |
12 | function getAutoHeight(n) {
13 | if (!n) {
14 | return 0;
15 | }
16 |
17 | let node = n;
18 |
19 | let height = computeHeight(node);
20 |
21 | while (!height) {
22 | node = node.parentNode;
23 | if (node) {
24 | height = computeHeight(node);
25 | } else {
26 | break;
27 | }
28 | }
29 |
30 | return height;
31 | }
32 |
33 | const autoHeight = () => WrappedComponent => {
34 | return class extends React.Component {
35 | state = {
36 | computedHeight: 0,
37 | };
38 |
39 | componentDidMount() {
40 | const { height } = this.props;
41 | if (!height) {
42 | const h = getAutoHeight(this.root);
43 | // eslint-disable-next-line
44 | this.setState({ computedHeight: h });
45 | }
46 | }
47 |
48 | handleRoot = node => {
49 | this.root = node;
50 | };
51 |
52 | render() {
53 | const { height } = this.props;
54 | const { computedHeight } = this.state;
55 | const h = height || computedHeight;
56 | return (
57 | {h > 0 &&
58 | );
59 | }
60 | };
61 | };
62 |
63 | export default autoHeight;
64 |
--------------------------------------------------------------------------------
/src/components/Charts/bizcharts.d.ts:
--------------------------------------------------------------------------------
1 | import * as BizChart from 'bizcharts';
2 |
3 | export = BizChart;
4 |
--------------------------------------------------------------------------------
/src/components/Charts/bizcharts.js:
--------------------------------------------------------------------------------
1 | import * as BizChart from 'bizcharts';
2 |
3 | export default BizChart;
4 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/bar.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 4
3 | title: 柱状图
4 | ---
5 |
6 | 通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
7 |
8 | ````jsx
9 | import { Bar } from 'ant-design-pro/lib/Charts';
10 |
11 | const salesData = [];
12 | for (let i = 0; i < 12; i += 1) {
13 | salesData.push({
14 | x: `${i + 1}月`,
15 | y: Math.floor(Math.random() * 1000) + 200,
16 | });
17 | }
18 |
19 | ReactDOM.render(
20 | (
42 | now.y + pre, 0))
45 | }}
46 | />
47 | )}
48 | data={salesPieData}
49 | valueFormat={val =>
57 |
63 | , mountNode);
64 | ````
65 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/tag-cloud.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 9
3 | title: 标签云
4 | ---
5 |
6 | 标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
7 |
8 | ````jsx
9 | import { TagCloud } from 'ant-design-pro/lib/Charts';
10 |
11 | const tags = [];
12 | for (let i = 0; i < 50; i += 1) {
13 | tags.push({
14 | name: `TagClout-Title-${i}`,
15 | value: Math.floor((Math.random() * 50)) + 20,
16 | });
17 | }
18 |
19 | ReactDOM.render(
20 |
13 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Charts/g2.js:
--------------------------------------------------------------------------------
1 | // 全局 G2 设置
2 | import { track, setTheme } from 'bizcharts';
3 |
4 | track(false);
5 |
6 | const config = {
7 | defaultColor: '#1089ff',
8 | shape: {
9 | interval: {
10 | fillOpacity: 1,
11 | },
12 | },
13 | };
14 |
15 | setTheme(config);
16 |
--------------------------------------------------------------------------------
/src/components/Charts/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as numeral from 'numeral';
2 | export { default as ChartCard } from './ChartCard';
3 | export { default as Bar } from './Bar';
4 | export { default as Pie } from './Pie';
5 | export { default as Radar } from './Radar';
6 | export { default as Gauge } from './Gauge';
7 | export { default as MiniArea } from './MiniArea';
8 | export { default as MiniBar } from './MiniBar';
9 | export { default as MiniProgress } from './MiniProgress';
10 | export { default as Field } from './Field';
11 | export { default as WaterWave } from './WaterWave';
12 | export { default as TagCloud } from './TagCloud';
13 | export { default as TimelineChart } from './TimelineChart';
14 |
15 | declare const yuan: (value: number | string) => string;
16 |
17 | export { yuan };
18 |
--------------------------------------------------------------------------------
/src/components/Charts/index.js:
--------------------------------------------------------------------------------
1 | import numeral from 'numeral';
2 | import './g2';
3 | import ChartCard from './ChartCard';
4 | import Bar from './Bar';
5 | import Pie from './Pie';
6 | import Radar from './Radar';
7 | import Gauge from './Gauge';
8 | import MiniArea from './MiniArea';
9 | import MiniBar from './MiniBar';
10 | import MiniProgress from './MiniProgress';
11 | import Field from './Field';
12 | import WaterWave from './WaterWave';
13 | import TagCloud from './TagCloud';
14 | import TimelineChart from './TimelineChart';
15 |
16 | const yuan = val => `¥ ${numeral(val).format('0,0')}`;
17 |
18 | const Charts = {
19 | yuan,
20 | Bar,
21 | Pie,
22 | Gauge,
23 | Radar,
24 | MiniBar,
25 | MiniArea,
26 | MiniProgress,
27 | ChartCard,
28 | Field,
29 | WaterWave,
30 | TagCloud,
31 | TimelineChart,
32 | };
33 |
34 | export {
35 | Charts as default,
36 | yuan,
37 | Bar,
38 | Pie,
39 | Gauge,
40 | Radar,
41 | MiniBar,
42 | MiniArea,
43 | MiniProgress,
44 | ChartCard,
45 | Field,
46 | WaterWave,
47 | TagCloud,
48 | TimelineChart,
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/Charts/index.less:
--------------------------------------------------------------------------------
1 | .miniChart {
2 | position: relative;
3 | width: 100%;
4 | .chartContent {
5 | position: absolute;
6 | bottom: -28px;
7 | width: 100%;
8 | > div {
9 | margin: 0 -5px;
10 | overflow: hidden;
11 | }
12 | }
13 | .chartLoading {
14 | position: absolute;
15 | top: 16px;
16 | left: 50%;
17 | margin-left: -7px;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/CountDown/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本
5 | en-US: Basic
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 简单的倒计时组件使用。
11 |
12 | ## en-US
13 |
14 | The simplest usage.
15 |
16 | ````jsx
17 | import CountDown from 'ant-design-pro/lib/CountDown';
18 |
19 | const targetTime = new Date().getTime() + 3900000;
20 |
21 | ReactDOM.render(
22 | {}
10 |
--------------------------------------------------------------------------------
/src/components/CountDown/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CountDown
3 | cols: 1
4 | order: 3
5 | ---
6 |
7 | Simple CountDown Component.
8 |
9 | ## API
10 |
11 | | Property | Description | Type | Default |
12 | |----------|------------------------------------------|-------------|-------|
13 | | format | Formatter of time | Function(time) | |
14 | | target | Target time | Date | - |
15 | | onEnd | Countdown to the end callback | funtion | -|
16 |
--------------------------------------------------------------------------------
/src/components/CountDown/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CountDown
3 | subtitle: 倒计时
4 | cols: 1
5 | order: 3
6 | ---
7 |
8 | 倒计时组件。
9 |
10 | ## API
11 |
12 | | 参数 | 说明 | 类型 | 默认值 |
13 | |----------|------------------------------------------|-------------|-------|
14 | | format | 时间格式化显示 | Function(time) | |
15 | | target | 目标时间 | Date | - |
16 | | onEnd | 倒计时结束回调 | funtion | -|
17 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/Description.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default class Description extends React.Component<
4 | {
5 | term: React.ReactNode;
6 | style?: React.CSSProperties;
7 | },
8 | any
9 | > {}
10 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/Description.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import { Col } from 'antd';
5 | import styles from './index.less';
6 | import responsive from './responsive';
7 |
8 | const Description = ({ term, column, className, children, ...restProps }) => {
9 | const clsString = classNames(styles.description, className);
10 | return (
11 | {term}
}
13 | {children !== null &&
14 | children !== undefined && {children}
}
15 |
16 | );
17 | };
18 |
19 | Description.defaultProps = {
20 | term: '',
21 | };
22 |
23 | Description.propTypes = {
24 | term: PropTypes.node,
25 | };
26 |
27 | export default Description;
28 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/DescriptionList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Row } from 'antd';
4 | import styles from './index.less';
5 |
6 | const DescriptionList = ({
7 | className,
8 | title,
9 | col = 3,
10 | layout = 'horizontal',
11 | gutter = 32,
12 | children,
13 | size,
14 | ...restProps
15 | }) => {
16 | const clsString = classNames(styles.descriptionList, styles[layout], className, {
17 | [styles.small]: size === 'small',
18 | [styles.large]: size === 'large',
19 | });
20 | const column = col > 4 ? 4 : col;
21 | return (
22 |
23 | {title ?
{title}
: null}
24 |
25 | {React.Children.map(
26 | children,
27 | child => (child ? React.cloneElement(child, { column }) : child)
28 | )}
29 |
30 |
23 |
24 | A free, open source, cross-platform,
25 | graphical web browser developed by the
26 | Mozilla Corporation and hundreds of
27 | volunteers.
28 |
29 |
30 | A free, open source, cross-platform,
31 | graphical web browser developed by the
32 | Mozilla Corporation and hundreds of
33 | volunteers.
34 |
35 |
36 | A free, open source, cross-platform,
37 | graphical web browser developed by the
38 | Mozilla Corporation and hundreds of
39 | volunteers.
40 |
41 |
42 | , mountNode);
43 | ````
44 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/demo/vertical.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 垂直型
5 | en-US: Vertical
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 垂直布局。
11 |
12 | ## en-US
13 |
14 | Vertical layout.
15 |
16 | ````jsx
17 | import DescriptionList from 'ant-design-pro/lib/DescriptionList';
18 |
19 | const { Description } = DescriptionList;
20 |
21 | ReactDOM.render(
22 |
23 |
24 | A free, open source, cross-platform,
25 | graphical web browser developed by the
26 | Mozilla Corporation and hundreds of
27 | volunteers.
28 |
29 |
30 | A free, open source, cross-platform,
31 | graphical web browser developed by the
32 | Mozilla Corporation and hundreds of
33 | volunteers.
34 |
35 |
36 | A free, open source, cross-platform,
37 | graphical web browser developed by the
38 | Mozilla Corporation and hundreds of
39 | volunteers.
40 |
41 |
42 | , mountNode);
43 | ````
44 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Description from './Description';
3 |
4 | export interface IDescriptionListProps {
5 | layout?: 'horizontal' | 'vertical';
6 | col?: number;
7 | title: React.ReactNode;
8 | gutter?: number;
9 | size?: 'large' | 'small';
10 | style?: React.CSSProperties;
11 | }
12 |
13 | export default class DescriptionList extends React.Component {
14 | public static Description: typeof Description;
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: DescriptionList
3 | cols: 1
4 | order: 4
5 | ---
6 |
7 | Groups display multiple read-only fields, which are common to informational displays on detail pages.
8 |
9 | ## API
10 |
11 | ### DescriptionList
12 |
13 | | Property | Description | Type | Default |
14 | |----------|------------------------------------------|-------------|---------|
15 | | layout | type of layout | Enum{'horizontal', 'vertical'} | 'horizontal' |
16 | | col | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules) | number(0 < col <= 4) | 3 |
17 | | title | title | ReactNode | - |
18 | | gutter | specify the distance between two items, unit is `px` | number | 32 |
19 | | size | size of list | Enum{'large', 'small'} | - |
20 |
21 | #### Responsive Rules
22 |
23 | | Window Width | Columns Number |
24 | |---------------------|---------------------------------------------|
25 | | `≥768px` | `col` |
26 | | `≥576px` | `col < 2 ? col : 2` |
27 | | `<576px` | `1` |
28 |
29 | ### DescriptionList.Description
30 |
31 | | Property | Description | Type | Default |
32 | |----------|------------------------------------------|-------------|-------|
33 | | term | item title | ReactNode | - |
34 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.js:
--------------------------------------------------------------------------------
1 | import DescriptionList from './DescriptionList';
2 | import Description from './Description';
3 |
4 | DescriptionList.Description = Description;
5 | export default DescriptionList;
6 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .descriptionList {
4 | // offset the padding-bottom of last row
5 | :global {
6 | .ant-row {
7 | margin-bottom: -16px;
8 | overflow: hidden;
9 | }
10 | }
11 |
12 | .title {
13 | font-size: 14px;
14 | color: @heading-color;
15 | font-weight: 500;
16 | margin-bottom: 16px;
17 | }
18 |
19 | .term {
20 | // Line-height is 22px IE dom height will calculate error
21 | line-height: 20px;
22 | padding-bottom: 16px;
23 | margin-right: 8px;
24 | color: @heading-color;
25 | white-space: nowrap;
26 | display: table-cell;
27 |
28 | &:after {
29 | content: ':';
30 | margin: 0 8px 0 2px;
31 | position: relative;
32 | top: -0.5px;
33 | }
34 | }
35 |
36 | .detail {
37 | line-height: 22px;
38 | width: 100%;
39 | padding-bottom: 16px;
40 | color: @text-color;
41 | display: table-cell;
42 | }
43 |
44 | &.small {
45 | // offset the padding-bottom of last row
46 | :global {
47 | .ant-row {
48 | margin-bottom: -8px;
49 | }
50 | }
51 | .title {
52 | margin-bottom: 12px;
53 | color: @text-color;
54 | }
55 | .term,
56 | .detail {
57 | padding-bottom: 8px;
58 | }
59 | }
60 |
61 | &.large {
62 | .title {
63 | font-size: 16px;
64 | }
65 | }
66 |
67 | &.vertical {
68 | .term {
69 | padding-bottom: 8px;
70 | display: block;
71 | }
72 |
73 | .detail {
74 | display: block;
75 | }
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: DescriptionList
3 | subtitle: 描述列表
4 | cols: 1
5 | order: 4
6 | ---
7 |
8 | 成组展示多个只读字段，常见于详情页的信息展示。
9 |
10 | ## API
11 |
12 | ### DescriptionList
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' |
17 | | col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
18 | | title | 列表标题 | ReactNode | - |
19 | | gutter | 列表项间距，单位为 `px` | number | 32 |
20 | | size | 列表型号 | Enum{'large', 'small'} | - |
21 |
22 | #### 响应式规则
23 |
24 | | 窗口宽度 | 展示列数 |
25 | |---------------------|---------------------------------------------|
26 | | `≥768px` | `col` |
27 | | `≥576px` | `col < 2 ? col : 2` |
28 | | `<576px` | `1` |
29 |
30 | ### DescriptionList.Description
31 |
32 | | 参数 | 说明 | 类型 | 默认值 |
33 | |----------|------------------------------------------|-------------|-------|
34 | | term | 列表项标题 | ReactNode | - |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/responsive.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 1: { xs: 24 },
3 | 2: { xs: 24, sm: 12 },
4 | 3: { xs: 24, sm: 12, md: 8 },
5 | 4: { xs: 24, sm: 12, md: 6 },
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/EditableItem/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Input, Icon } from 'antd';
3 | import styles from './index.less';
4 |
5 | export default class EditableItem extends PureComponent {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | value: props.value,
10 | editable: false,
11 | };
12 | }
13 |
14 | handleChange = e => {
15 | const { value } = e.target;
16 | this.setState({ value });
17 | };
18 |
19 | check = () => {
20 | this.setState({ editable: false });
21 | const { onChange } = this.props;
22 | const { value } = this.state;
23 | if (onChange) {
24 | onChange(value);
25 | }
26 | };
27 |
28 | edit = () => {
29 | this.setState({ editable: true });
30 | };
31 |
32 | render() {
33 | const { value, editable } = this.state;
34 | return (
35 |
36 | {editable ? (
37 |
38 |
41 | ) : (
42 |
43 | {value || ' '}
44 |
46 | )}
47 |
25 | {links.map(link =>
26 | createElement(
27 | linkElement,
28 | {
29 | key: `linkGroup-item-${link.id || link.title}`,
30 | to: link.href,
31 | href: link.href,
32 | },
33 | link.title
34 | )
35 | )}
36 | {
37 |
38 | 添加
39 |
40 | }
41 |
42 | );
43 | }
44 | }
45 |
46 | export default EditableLinkGroup;
47 |
--------------------------------------------------------------------------------
/src/components/EditableLinkGroup/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .linkGroup {
4 | padding: 20px 0 8px 24px;
5 | font-size: 0;
6 | & > a {
7 | color: @text-color;
8 | display: inline-block;
9 | font-size: @font-size-base;
10 | margin-bottom: 13px;
11 | width: 25%;
12 | &:hover {
13 | color: @primary-color;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/demo/line.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 按照行数省略
5 | en-US: Truncate according to the number of rows
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 通过设置 `lines` 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。
11 |
12 | 并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。
13 |
14 | ## en-US
15 |
16 | `lines` attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all children will be converted to plain text.
17 |
18 | Also note that, in this mode, the outer container needs to have a specified width (or set its own width).
19 |
20 |
21 | ````jsx
22 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
23 |
24 | const article = There were injuries alleged in three cases in 2015 , and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
;
25 |
26 | ReactDOM.render(
27 |
28 | {article}
29 |
30 | , mountNode);
31 | ````
32 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/demo/number.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 按照字符数省略
5 | en-US: Truncate according to the number of character
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 通过设置 `length` 属性指定文本最长长度，如果超过这个长度会自动截取。
11 |
12 | ## en-US
13 |
14 | `length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
15 |
16 | ````jsx
17 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
18 |
19 | const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
20 |
21 | ReactDOM.render(
22 |
23 | {article}
24 |
Show Tooltip
25 | {article}
26 |
27 | , mountNode);
28 | ````
29 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IEllipsisProps {
3 | tooltip?: boolean;
4 | length?: number;
5 | lines?: number;
6 | style?: React.CSSProperties;
7 | className?: string;
8 | fullWidthRecognition?: boolean;
9 | }
10 |
11 | export default class Ellipsis extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ellipsis
3 | cols: 1
4 | order: 10
5 | ---
6 |
7 | When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ----|------|-----|------
13 | tooltip | tooltip for showing the full text content when hovering over | boolean | -
14 | length | maximum number of characters in the text before being truncated | number | -
15 | lines | maximum number of rows in the text before being truncated | number | `1`
16 | fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | -
17 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.less:
--------------------------------------------------------------------------------
1 | .ellipsis {
2 | overflow: hidden;
3 | display: inline-block;
4 | word-break: break-all;
5 | width: 100%;
6 | }
7 |
8 | .lines {
9 | position: relative;
10 | .shadow {
11 | display: block;
12 | position: relative;
13 | color: transparent;
14 | opacity: 0;
15 | z-index: -999;
16 | }
17 | }
18 |
19 | .lineClamp {
20 | position: relative;
21 | overflow: hidden;
22 | text-overflow: ellipsis;
23 | display: -webkit-box;
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.test.js:
--------------------------------------------------------------------------------
1 | import { getStrFullLength, cutStrByFullLength } from './index.js';
2 |
3 | describe('test calculateShowLength', () => {
4 | it('get full length', () => {
5 | expect(getStrFullLength('一二，a,')).toEqual(8);
6 | });
7 | it('cut str by full length', () => {
8 | expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
9 | });
10 | it('cut str when length small', () => {
11 | expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ellipsis
3 | subtitle: 文本自动省略号
4 | cols: 1
5 | order: 10
6 | ---
7 |
8 | 文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
9 |
10 | ## API
11 |
12 | 参数 | 说明 | 类型 | 默认值
13 | ----|------|-----|------
14 | tooltip | 移动到文本展示完整内容的提示 | boolean | -
15 | length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
16 | lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1`
17 | fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
18 |
--------------------------------------------------------------------------------
/src/components/Exception/demo/403.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 403
5 | en-US: 403
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 403 页面，配合自定义操作。
11 |
12 | ## en-US
13 |
14 | 403 page with custom operations.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 | import { Button } from 'antd';
19 |
20 | const actions = (
21 |
22 | Home
23 | Detail
24 |
25 | );
26 | ReactDOM.render(
27 | {}
13 |
--------------------------------------------------------------------------------
/src/components/Exception/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exception
3 | cols: 1
4 | order: 5
5 | ---
6 |
7 | Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ---------|-------------|------|--------
13 | type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
14 | title | title | ReactNode | -
15 | desc | supplementary description | ReactNode | -
16 | img | the url of background image | string | -
17 | actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
18 | linkElement | to specify the element of link | string\|ReactElement | 'a'
--------------------------------------------------------------------------------
/src/components/Exception/index.js:
--------------------------------------------------------------------------------
1 | import React, { createElement } from 'react';
2 | import classNames from 'classnames';
3 | import { Button } from 'antd';
4 | import config from './typeConfig';
5 | import styles from './index.less';
6 |
7 | const Exception = ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
8 | const pageType = type in config ? type : '404';
9 | const clsString = classNames(styles.exception, className);
10 | return (
11 |
12 |
18 |
19 |
{title || config[pageType].title}
20 |
{desc || config[pageType].desc}
21 |
22 | {actions ||
23 | createElement(
24 | linkElement,
25 | {
26 | to: '/',
27 | href: '/',
28 | },
29 | 返回首页
30 | )}
31 |
32 |
33 |
23 |
Content Content Content Content
24 |
Content Content Content Content
25 |
Content Content Content Content
26 |
Content Content Content Content
27 |
Content Content Content Content
28 |
Content Content Content Content
29 |
Content Content Content Content
30 |
Content Content Content Content
31 |
Content Content Content Content
32 |
Content Content Content Content
33 |
Content Content Content Content
34 |
Content Content Content Content
35 |
Content Content Content Content
36 |
Content Content Content Content
37 |
Content Content Content Content
38 |
39 | Cancel
40 | Submit
41 |
42 |
{}
8 |
--------------------------------------------------------------------------------
/src/components/FooterToolbar/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FooterToolbar
3 | cols: 1
4 | order: 6
5 | ---
6 |
7 | A toolbar fixed at the bottom.
8 |
9 | ## Usage
10 |
11 | It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.
12 |
13 | ## API
14 |
15 | Property | Description | Type | Default
16 | ---------|-------------|------|--------
17 | children | toolbar content, align to the right | ReactNode | -
18 | extra | extra information, align to the left | ReactNode | -
--------------------------------------------------------------------------------
/src/components/FooterToolbar/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 |
6 | export default class FooterToolbar extends Component {
7 | static contextTypes = {
8 | isMobile: PropTypes.bool,
9 | };
10 |
11 | state = {
12 | width: undefined,
13 | };
14 |
15 | componentDidMount() {
16 | window.addEventListener('resize', this.resizeFooterToolbar);
17 | this.resizeFooterToolbar();
18 | }
19 |
20 | componentWillUnmount() {
21 | window.removeEventListener('resize', this.resizeFooterToolbar);
22 | }
23 |
24 | resizeFooterToolbar = () => {
25 | const sider = document.querySelector('.ant-layout-sider');
26 | if (sider == null) {
27 | return;
28 | }
29 | const { isMobile } = this.context;
30 | const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
31 | const { width: stateWidth } = this.state;
32 | if (stateWidth !== width) {
33 | this.setState({ width });
34 | }
35 | };
36 |
37 | render() {
38 | const { children, className, extra, ...restProps } = this.props;
39 | const { width } = this.state;
40 | return (
41 |
42 |
{extra}
43 |
{children}
44 |
Copyright
;
30 |
31 | ReactDOM.render(
32 |
36 | , mountNode);
37 | ````
38 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IGlobalFooterProps {
3 | links?: Array<{
4 | key?: string;
5 | title: React.ReactNode;
6 | href: string;
7 | blankTarget?: boolean;
8 | }>;
9 | copyright?: React.ReactNode;
10 | style?: React.CSSProperties;
11 | }
12 |
13 | export default class GlobalFooter extends React.Component {}
14 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './index.less';
4 |
5 | const GlobalFooter = ({ className, links, copyright }) => {
6 | const clsString = classNames(styles.globalFooter, className);
7 | return (
8 |
9 | {links && (
10 |
17 | )}
18 | {copyright &&
{copyright}
}
19 |
22 | {
26 | console.log('input', value); // eslint-disable-line
27 | }}
28 | onPressEnter={(value) => {
29 | console.log('enter', value); // eslint-disable-line
30 | }}
31 | />
32 |
33 | , mountNode);
34 | ````
35 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IHeaderSearchProps {
3 | placeholder?: string;
4 | dataSource?: string[];
5 | onSearch?: (value: string) => void;
6 | onChange?: (value: string) => void;
7 | onPressEnter?: (value: string) => void;
8 | style?: React.CSSProperties;
9 | className?: string;
10 | }
11 |
12 | export default class HeaderSearch extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .headerSearch {
4 | :global(.anticon-search) {
5 | cursor: pointer;
6 | font-size: 16px;
7 | }
8 | .input {
9 | transition: width 0.3s, margin-left 0.3s;
10 | width: 0;
11 | background: transparent;
12 | border-radius: 0;
13 | :global(.ant-select-selection) {
14 | background: transparent;
15 | }
16 | input {
17 | border: 0;
18 | padding-left: 0;
19 | padding-right: 0;
20 | box-shadow: none !important;
21 | }
22 | &,
23 | &:hover,
24 | &:focus {
25 | border-bottom: 1px solid @border-color-base;
26 | }
27 | &.show {
28 | width: 210px;
29 | margin-left: 8px;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: HeaderSearch
4 | zh-CN: HeaderSearch
5 | subtitle: 顶部搜索框
6 | cols: 1
7 | order: 8
8 | ---
9 |
10 | 通常作为全局搜索的入口，放置在导航工具条右侧。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | placeholder | 占位文字 | string | -
17 | dataSource | 当前提示内容列表 | string[] | -
18 | onSearch | 选择某项或按下回车时的回调 | function(value) | -
19 | onChange | 输入搜索字符的回调 | function(value) | -
20 | onPressEnter | 按下回车时的回调 | function(value) | -
21 | defaultOpen | 输入框首次显示是否打开 | boolean | false
22 |
--------------------------------------------------------------------------------
/src/components/Login/LoginSubmit.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Button, Form } from 'antd';
4 | import styles from './index.less';
5 |
6 | const FormItem = Form.Item;
7 |
8 | const LoginSubmit = ({ className, ...rest }) => {
9 | const clsString = classNames(styles.submit, className);
10 | return (
11 |
12 |
14 | );
15 | };
16 |
17 | export default LoginSubmit;
18 |
--------------------------------------------------------------------------------
/src/components/Login/LoginTab.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Tabs } from 'antd';
4 |
5 | const { TabPane } = Tabs;
6 |
7 | const generateId = (() => {
8 | let i = 0;
9 | return (prefix = '') => {
10 | i += 1;
11 | return `${prefix}${i}`;
12 | };
13 | })();
14 |
15 | export default class LoginTab extends Component {
16 | static __ANT_PRO_LOGIN_TAB = true;
17 |
18 | static contextTypes = {
19 | tabUtil: PropTypes.object,
20 | };
21 |
22 | constructor(props) {
23 | super(props);
24 | this.uniqueId = generateId('login-tab-');
25 | }
26 |
27 | componentWillMount() {
28 | const { tabUtil } = this.context;
29 | if (tabUtil) {
30 | tabUtil.addTab(this.uniqueId);
31 | }
32 | }
33 |
34 | render() {
35 | return {}
15 |
16 | export interface LoginItemProps {
17 | name?: string;
18 | rules?: any[];
19 | style?: React.CSSProperties;
20 | onGetCaptcha?: () => void;
21 | placeholder?: string;
22 | buttonText?: React.ReactNode;
23 | }
24 |
25 | export class LoginItem extends React.Component {}
26 |
27 | export default class Login extends React.Component {
28 | static Tab: typeof Tab;
29 | static UserName: typeof LoginItem;
30 | static Password: typeof LoginItem;
31 | static Mobile: typeof LoginItem;
32 | static Captcha: typeof LoginItem;
33 | static Submit: typeof Button;
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/Login/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Login
3 | cols: 1
4 | order: 15
5 | ---
6 |
7 | Support multiple common ways of login with built-in controls. You can choose your own combinations and use with your custom controls.
8 |
9 | ## API
10 |
11 | ### Login
12 |
13 | Property | Description | Type | Default
14 | ----|------|-----|------
15 | defaultActiveKey | default key to activate the tab panel | String | -
16 | onTabChange | callback on changing tabs | (key) => void | -
17 | onSubmit | callback on submit | (err, values) => void | -
18 |
19 | ### Login.Tab
20 |
21 | Property | Description | Type | Default
22 | ----|------|-----|------
23 | key | key of the tab | String | -
24 | tab | displayed text of the tab | ReactNode | -
25 |
26 | ### Login.UserName
27 |
28 | Property | Description | Type | Default
29 | ----|------|-----|------
30 | name | name of the control, also the key of the submitted data | String | -
31 | rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | -
32 |
33 | Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
34 |
35 | ### Login.Password, Login.Mobile are the same as Login.UserName
36 |
37 | ### Login.Captcha
38 |
39 | Property | Description | Type | Default
40 | ----|------|-----|------
41 | onGetCaptcha | callback on getting a new Captcha | () => void | -
42 | buttonText | text on getting a new Captcha | ReactNode | '获取验证码'
43 |
44 | Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
45 |
46 | ### Login.Submit
47 |
48 | Support all properties of _antd.Button_.
--------------------------------------------------------------------------------
/src/components/Login/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .login {
4 | .tabs {
5 | padding: 0 2px;
6 | margin: 0 -2px;
7 | :global {
8 | .ant-tabs-tab {
9 | font-size: 16px;
10 | line-height: 24px;
11 | }
12 | .ant-input-affix-wrapper .ant-input:not(:first-child) {
13 | padding-left: 34px;
14 | }
15 | }
16 | }
17 |
18 | :global {
19 | .ant-tabs .ant-tabs-bar {
20 | border-bottom: 0;
21 | margin-bottom: 24px;
22 | text-align: center;
23 | }
24 |
25 | .ant-form-item {
26 | margin-bottom: 24px;
27 | }
28 | }
29 |
30 | .prefixIcon {
31 | font-size: @font-size-base;
32 | color: @disabled-color;
33 | }
34 |
35 | .getCaptcha {
36 | display: block;
37 | width: 100%;
38 | }
39 |
40 | .submit {
41 | width: 100%;
42 | margin-top: 24px;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/Login/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Login
3 | subtitle: 登录
4 | cols: 1
5 | order: 15
6 | ---
7 |
8 | 支持多种登录方式切换，内置了几种常见的登录控件，可以灵活组合，也支持和自定义控件配合使用。
9 |
10 | ## API
11 |
12 | ### Login
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | defaultActiveKey | 默认激活 tab 面板的 key | String | -
17 | onTabChange | 切换页签时的回调 | (key) => void | -
18 | onSubmit | 点击提交时的回调 | (err, values) => void | -
19 |
20 | ### Login.Tab
21 |
22 | 参数 | 说明 | 类型 | 默认值
23 | ----|------|-----|------
24 | key | 对应选项卡的 key | String | -
25 | tab | 选项卡头显示文字 | ReactNode | -
26 |
27 | ### Login.UserName
28 |
29 | 参数 | 说明 | 类型 | 默认值
30 | ----|------|-----|------
31 | name | 控件标记，提交数据中同样以此为 key | String | -
32 | rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | -
33 |
34 | 除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，这些基础配置均可被覆盖。
35 | ## Login.Password、Login.Mobile 同 Login.UserName
36 |
37 | ### Login.Captcha
38 |
39 | 参数 | 说明 | 类型 | 默认值
40 | ----|------|-----|------
41 | onGetCaptcha | 点击获取校验码的回调 | () => void | -
42 | buttonText | 点击获取校验码的说明文字 | ReactNode | '获取验证码'
43 |
44 | 除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
45 |
46 | ### Login.Submit
47 |
48 | 支持 antd.Button 的所有属性。
49 |
--------------------------------------------------------------------------------
/src/components/Login/map.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Icon } from 'antd';
3 | import styles from './index.less';
4 |
5 | const map = {
6 | UserName: {
7 | component: Input,
8 | props: {
9 | size: 'large',
10 | prefix: {}
20 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/NoticeList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Avatar, List } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './NoticeList.less';
5 |
6 | export default function NoticeList({
7 | data = [],
8 | onClick,
9 | onClear,
10 | title,
11 | locale,
12 | emptyText,
13 | emptyImage,
14 | }) {
15 | if (data.length === 0) {
16 | return (
17 |
18 | {emptyImage ?
: null}
19 |
{emptyText || locale.emptyText}
20 |
25 |
26 | {data.map((item, i) => {
27 | const itemCls = classNames(styles.item, {
28 | [styles.read]: item.read,
29 | });
30 | return (
31 | onClick(item)}>
32 |
37 | {item.title}
38 |
{item.extra}
39 |
43 |
44 | {item.description}
45 |
46 |
{item.datetime}
47 |
51 | );
52 | })}
53 |
54 |
55 | {locale.clear}
56 | {title}
57 |
58 |
{
27 | public static Tab: typeof NoticeIconTab;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .popover {
4 | width: 336px;
5 | :global(.ant-popover-inner-content) {
6 | padding: 0;
7 | }
8 | }
9 |
10 | .noticeButton {
11 | cursor: pointer;
12 | display: inline-block;
13 | transition: all 0.3s;
14 | }
15 |
16 | .icon {
17 | font-size: 16px;
18 | padding: 4px;
19 | }
20 |
21 | .tabs {
22 | :global {
23 | .ant-tabs-nav-scroll {
24 | text-align: center;
25 | }
26 | .ant-tabs-bar {
27 | margin-bottom: 4px;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: NoticeIcon
4 | zh-CN: NoticeIcon
5 | subtitle: 通知菜单
6 | cols: 1
7 | order: 9
8 | ---
9 |
10 | 用在导航工具栏上，作为整个产品统一的通知中心。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | count | 图标上的消息总数 | number | -
17 | loading | 弹出卡片加载状态 | boolean | false
18 | onClear | 点击清空按钮的回调 | function(tabTitle) | -
19 | onItemClick | 点击列表项的回调 | function(item, tabProps) | -
20 | onTabChange | 切换页签的回调 | function(tabTitle) | -
21 | popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | -
22 | onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
23 | popupVisible | 控制弹层显隐 | boolean | -
24 | locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }`
25 |
26 | ### NoticeIcon.Tab
27 |
28 | 参数 | 说明 | 类型 | 默认值
29 | ----|------|-----|------
30 | title | 消息分类的页签标题 | string | -
31 | list | 列表数据，格式参照下表 | Array | `[]`
32 | emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
33 | emptyImage | 针对每个 Tab 定制空数据图片 | string | -
34 |
35 | ### Tab data
36 |
37 | 参数 | 说明 | 类型 | 默认值
38 | ----|------|-----|------
39 | avatar | 头像图片链接 | string | -
40 | title | 标题 | ReactNode | -
41 | description | 描述信息 | ReactNode | -
42 | datetime | 时间戳 | ReactNode | -
43 | extra | 额外信息，在列表项右上角 | ReactNode | -
44 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 演示
5 | en-US: Demo
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 各种数据文案的展现方式。
11 |
12 | ## en-US
13 |
14 | Used for presenting various numerical data.
15 |
16 | ````jsx
17 | import NumberInfo from 'ant-design-pro/lib/NumberInfo';
18 | import numeral from 'numeral';
19 |
20 | ReactDOM.render(
21 |
22 | Visits this week}
24 | total={numeral(12321).format('0,0')}
25 | status="up"
26 | subTotal={17.1}
27 | />
28 |
29 | , mountNode);
30 | ````
31 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface INumberInfoProps {
3 | title?: React.ReactNode | string;
4 | subTitle?: React.ReactNode | string;
5 | total?: React.ReactNode | string;
6 | status?: 'up' | 'down';
7 | theme?: string;
8 | gap?: number;
9 | subTotal?: number;
10 | style?: React.CSSProperties;
11 | }
12 |
13 | export default class NumberInfo extends React.Component {}
14 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: NumberInfo
3 | cols: 1
4 | order: 10
5 | ---
6 |
7 | Often used in data cards for highlighting the business data.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ----|------|-----|------
13 | title | title | ReactNode\|string | -
14 | subTitle | subtitle | ReactNode\|string | -
15 | total | total amount | ReactNode\|string | -
16 | subTotal | total amount of additional information | ReactNode\|string | -
17 | status | increase state | 'up \| down' | -
18 | theme | state style | string | 'light'
19 | gap | set the spacing (pixels) between numbers and descriptions | number | 8
20 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 |
6 | const NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
7 |
13 | {title &&
{title}
}
14 | {subTitle &&
{subTitle}
}
15 |
16 |
17 | {total}
18 | {suffix && {suffix} }
19 |
20 | {(status || subTotal) && (
21 |
22 | {subTotal}
23 | {status &&
25 | )}
26 |
27 |
13 |
段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
14 |
25 |
30 |
31 |
logo
}
32 | action={action
}
33 | content={content
}
34 | extraContent={extraContent
}
35 | breadcrumbList={breadcrumbList}
36 | tabList={tabList}
37 | tabActiveKey="1"
38 | />
39 |
40 | , mountNode);
41 | ````
42 |
43 |
69 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IPageHeaderProps {
3 | title?: React.ReactNode | string;
4 | logo?: React.ReactNode | string;
5 | action?: React.ReactNode | string;
6 | content?: React.ReactNode;
7 | extraContent?: React.ReactNode;
8 | routes?: any[];
9 | params?: any;
10 | breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>;
11 | tabList?: Array<{ key: string; tab: React.ReactNode }>;
12 | tabActiveKey?: string;
13 | tabDefaultActiveKey?: string;
14 | onTabChange?: (key: string) => void;
15 | tabBarExtraContent?: React.ReactNode;
16 | linkElement?: React.ReactNode;
17 | style?: React.CSSProperties;
18 | }
19 |
20 | export default class PageHeader extends React.Component {}
21 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: PageHeader
4 | zh-CN: PageHeader
5 | subtitle: 页头
6 | cols: 1
7 | order: 11
8 | ---
9 |
10 | 页头用来声明页面的主题，包含了用户所关注的最重要的信息，使用户可以快速理解当前页面是什么以及它的功能。
11 |
12 | ## API
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | title | title 区域 | ReactNode | - |
17 | | logo | logo区域 | ReactNode | - |
18 | | action | 操作区，位于 title 行的行尾 | ReactNode | - |
19 | | content | 内容区 | ReactNode | - |
20 | | extraContent | 额外内容区，位于content的右侧 | ReactNode | - |
21 | | breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
22 | | routes | 面包屑相关属性，router 的路由栈信息 | object[] | - |
23 | | params | 面包屑相关属性，路由的参数 | object | - |
24 | | location | 面包屑相关属性，当前的路由信息 | object | - |
25 | | breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - |
26 | | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - |
27 | | tabActiveKey | 当前高亮的 tab 项 | string | - |
28 | | tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 |
29 | | onTabChange | 切换面板的回调 | (key) => void | - |
30 | | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
31 |
32 | > 面包屑的配置方式有三种，一是直接配置 `breadcrumbList`，二是结合 `react-router@2` `react-router@3`，配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)，三是结合 `react-router@4`，配置 `location` `breadcrumbNameMap`，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中，组件会自动获取。
33 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.test.js:
--------------------------------------------------------------------------------
1 | import { getBreadcrumb } from './index';
2 | import { urlToList } from '../_utils/pathTools';
3 |
4 | const routerData = {
5 | '/dashboard/analysis': {
6 | name: '分析页',
7 | },
8 | '/userinfo': {
9 | name: '用户列表',
10 | },
11 | '/userinfo/:id': {
12 | name: '用户信息',
13 | },
14 | '/userinfo/:id/addr': {
15 | name: '收货订单',
16 | },
17 | };
18 | describe('test getBreadcrumb', () => {
19 | it('Simple url', () => {
20 | expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual('分析页');
21 | });
22 | it('Parameters url', () => {
23 | expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual('用户信息');
24 | });
25 | it('The middle parameter url', () => {
26 | expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual('收货订单');
27 | });
28 | it('Loop through the parameters', () => {
29 | const urlNameList = urlToList('/userinfo/2144/addr').map(url => {
30 | return getBreadcrumb(routerData, url).name;
31 | });
32 | expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']);
33 | });
34 |
35 | it('a path', () => {
36 | const urlNameList = urlToList('/userinfo').map(url => {
37 | return getBreadcrumb(routerData, url).name;
38 | });
39 | expect(urlNameList).toEqual(['用户列表']);
40 | });
41 | it('Secondary path', () => {
42 | const urlNameList = urlToList('/userinfo/2144').map(url => {
43 | return getBreadcrumb(routerData, url).name;
44 | });
45 | expect(urlNameList).toEqual(['用户列表', '用户信息']);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/src/components/Result/demo/error.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title: Failed
4 | ---
5 |
6 | 提交失败。
7 |
8 | ````jsx
9 | import Result from 'ant-design-pro/lib/Result';
10 | import { Button, Icon } from 'antd';
11 |
12 | const extra = (
13 |
14 |
15 | 您提交的内容有如下错误：
16 |
17 |
18 |
您的账户已被冻结
19 |
立即解冻
20 |
21 |
22 |
您的账户还不具备申请资格
23 |
立即升级
24 |
25 |
返回修改 ;
29 |
30 | ReactDOM.render(
31 | 标题}
15 | description={结果描述
}
16 | extra="其他补充信息，自带灰底效果"
17 | actions={操作建议，一般放置按钮组
}
18 | />
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Result/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IResultProps {
3 | type: 'success' | 'error';
4 | title: React.ReactNode;
5 | description?: React.ReactNode;
6 | extra?: React.ReactNode;
7 | actions?: React.ReactNode;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class Result extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Result/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Icon } from 'antd';
4 | import styles from './index.less';
5 |
6 | export default function Result({
7 | className,
8 | type,
9 | title,
10 | description,
11 | extra,
12 | actions,
13 | ...restProps
14 | }) {
15 | const iconMap = {
16 | error:
22 |
{iconMap[type]}
23 |
{title}
24 | {description &&
{description}
}
25 | {extra &&
{extra}
}
26 | {actions &&
{actions}
}
27 |
14 | {title && (
15 |
16 | {title}
17 |
18 | )}
19 |
{children}
20 |
{}
9 |
--------------------------------------------------------------------------------
/src/components/TagSelect/demo/expandable.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: 可展开和收起
4 | ---
5 |
6 | 使用 `expandable` 属性，让标签组可以收起，避免过高。
7 |
8 | ````jsx
9 | import TagSelect from 'ant-design-pro/lib/TagSelect';
10 |
11 | function handleFormSubmit(checkedValue) {
12 | console.log(checkedValue);
13 | }
14 |
15 | ReactDOM.render(
16 |
17 | 类目一
18 | 类目二
19 | 类目三
20 | 类目四
21 | 类目五
22 | 类目六
23 | 类目七
24 | 类目八
25 | 类目九
26 | 类目十
27 | 类目十一
28 | 类目十二
29 |
30 | , mountNode);
31 | ````
32 |
--------------------------------------------------------------------------------
/src/components/TagSelect/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 基础样例
4 | ---
5 |
6 | 结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
7 |
8 | ````jsx
9 | import TagSelect from 'ant-design-pro/lib/TagSelect';
10 |
11 | function handleFormSubmit(checkedValue) {
12 | console.log(checkedValue);
13 | }
14 |
15 | ReactDOM.render(
16 |
17 | 类目一
18 | 类目二
19 | 类目三
20 | 类目四
21 | 类目五
22 | 类目六
23 |
24 | , mountNode);
25 | ````
26 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TagSelectOption from './TagSelectOption';
3 |
4 | export interface ITagSelectProps {
5 | onChange?: (value: string[]) => void;
6 | expandable?: boolean;
7 | value?: string[] | number[];
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class TagSelect extends React.Component {
12 | public static Option: typeof TagSelectOption;
13 | private children:
14 | | React.ReactElement
15 | | Array>;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .tagSelect {
4 | user-select: none;
5 | margin-left: -8px;
6 | position: relative;
7 | overflow: hidden;
8 | max-height: 32px;
9 | line-height: 32px;
10 | transition: all 0.3s;
11 | :global {
12 | .ant-tag {
13 | padding: 0 8px;
14 | margin-right: 24px;
15 | font-size: @font-size-base;
16 | }
17 | }
18 | &.expanded {
19 | transition: all 0.3s;
20 | max-height: 200px;
21 | }
22 | .trigger {
23 | position: absolute;
24 | top: 0;
25 | right: 0;
26 | i {
27 | font-size: 12px;
28 | }
29 | }
30 | &.hasExpandTag {
31 | padding-right: 50px;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: TagSelect
4 | zh-CN: TagSelect
5 | subtitle: 标签选择器
6 | cols: 1
7 | order: 13
8 | ---
9 |
10 | 可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。
11 |
12 | ## API
13 |
14 | ### TagSelect
15 |
16 | | 参数 | 说明 | 类型 | 默认值 |
17 | |----------|------------------------------------------|-------------|-------|
18 | | value |选中的项 |string[] \| number[] | |
19 | | defaultValue |默认选中的项 |string[] \| number[] | |
20 | | onChange | 标签选择的回调函数 | Function(checkedTags) | |
21 | | expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
22 |
23 |
24 | ### TagSelectOption
25 |
26 | | 参数 | 说明 | 类型 | 默认值 |
27 | |----------|------------------------------------------|-------------|-------|
28 | | value | TagSelect的值 | string\| number | - |
29 | | children | tag的内容 | string \| ReactNode | - |
30 |
--------------------------------------------------------------------------------
/src/components/Trend/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 演示
4 | ---
5 |
6 | 在数值背后添加一个小图标来标识涨跌情况。
7 |
8 | ````jsx
9 | import Trend from 'ant-design-pro/lib/Trend';
10 |
11 | ReactDOM.render(
12 |
13 | 12%
14 | 11%
15 |
16 | , mountNode);
17 | ````
18 |
--------------------------------------------------------------------------------
/src/components/Trend/demo/reverse.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 颜色反转
4 | ---
5 |
6 | 在数值背后添加一个小图标来标识涨跌情况。
7 |
8 | ````jsx
9 | import Trend from 'ant-design-pro/lib/Trend';
10 |
11 | ReactDOM.render(
12 |
13 | 12%
14 | 11%
15 |
16 | , mountNode);
17 | ````
18 |
--------------------------------------------------------------------------------
/src/components/Trend/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface ITrendProps {
4 | colorful?: boolean;
5 | flag: 'up' | 'down';
6 | style?: React.CSSProperties;
7 | reverseColor?: boolean;
8 | }
9 |
10 | export default class Trend extends React.Component {}
11 |
--------------------------------------------------------------------------------
/src/components/Trend/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 |
6 | const Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => {
7 | const classString = classNames(
8 | styles.trendItem,
9 | {
10 | [styles.trendItemGrey]: !colorful,
11 | [styles.reverseColor]: reverseColor && colorful,
12 | },
13 | className
14 | );
15 | return (
16 |
17 | {children}
18 | {flag && (
19 |
20 |
22 | )}
23 |
24 | );
25 | };
26 |
27 | export default Trend;
28 |
--------------------------------------------------------------------------------
/src/components/Trend/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .trendItem {
4 | display: inline-block;
5 | font-size: @font-size-base;
6 | line-height: 22px;
7 |
8 | .up,
9 | .down {
10 | margin-left: 4px;
11 | position: relative;
12 | top: 1px;
13 | i {
14 | font-size: 12px;
15 | transform: scale(0.83);
16 | }
17 | }
18 | .up {
19 | color: @red-6;
20 | }
21 | .down {
22 | color: @green-6;
23 | top: -1px;
24 | }
25 |
26 | &.trendItemGrey .up,
27 | &.trendItemGrey .down {
28 | color: @text-color;
29 | }
30 |
31 | &.reverseColor .up {
32 | color: @green-6;
33 | }
34 | &.reverseColor .down {
35 | color: @red-6;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/Trend/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Trend
4 | zh-CN: Trend
5 | subtitle: 趋势标记
6 | cols: 1
7 | order: 14
8 | ---
9 |
10 | 趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
11 |
12 | ## API
13 |
14 | ```html
15 | 50%
16 | ```
17 |
18 | | 参数 | 说明 | 类型 | 默认值 |
19 | |----------|------------------------------------------|-------------|-------|
20 | | colorful | 是否彩色标记 | Boolean | true |
21 | | flag | 上升下降标识：`up|down` | string | - |
22 | | reverseColor | 颜色反转 | Boolean | false |
23 |
--------------------------------------------------------------------------------
/src/components/_utils/pathTools.js:
--------------------------------------------------------------------------------
1 | // /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
2 | export function urlToList(url) {
3 | const urllist = url.split('/').filter(i => i);
4 | return urllist.map((urlItem, index) => {
5 | return `/${urllist.slice(0, index + 1).join('/')}`;
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/_utils/pathTools.test.js:
--------------------------------------------------------------------------------
1 | import { urlToList } from './pathTools';
2 |
3 | describe('test urlToList', () => {
4 | it('A path', () => {
5 | expect(urlToList('/userinfo')).toEqual(['/userinfo']);
6 | });
7 | it('Secondary path', () => {
8 | expect(urlToList('/userinfo/2144')).toEqual(['/userinfo', '/userinfo/2144']);
9 | });
10 | it('Three paths', () => {
11 | expect(urlToList('/userinfo/2144/addr')).toEqual([
12 | '/userinfo',
13 | '/userinfo/2144',
14 | '/userinfo/2144/addr',
15 | ]);
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/src/components/utils/AppMenu.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'dva';
3 | import { Spin } from 'antd';
4 | import styles from '../../index.less';
5 |
6 | const AppMenu = WrappedComponent => {
7 | @connect(state => ({
8 | global: state.global,
9 | }))
10 | class AppMenuInner extends Component {
11 | componentDidMount() {
12 | const {
13 | global: { menus },
14 | dispatch,
15 | } = this.props;
16 | if (menus.length <= 0) {
17 | dispatch({
18 | type: 'global/fetchMenus',
19 | });
20 | }
21 | }
22 |
23 | render() {
24 | const {
25 | global: { menus, routerData },
26 | } = this.props;
27 | if (menus.length <= 0 || routerData.length <= 0) {
28 | return Ant Design Pro ');
11 | await page.close();
12 | browser.close();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/src/e2e/login.e2e.js:
--------------------------------------------------------------------------------
1 | import puppeteer from 'puppeteer';
2 |
3 | describe('Login', () => {
4 | let browser;
5 | let page;
6 |
7 | beforeAll(async () => {
8 | browser = await puppeteer.launch({ args: ['--no-sandbox'] });
9 | });
10 |
11 | beforeEach(async () => {
12 | page = await browser.newPage();
13 | await page.goto('http://localhost:8000/#/user/login', { waitUntil: 'networkidle2' });
14 | await page.evaluate(() => window.localStorage.setItem('antd-pro-authority', 'guest'));
15 | });
16 |
17 | afterEach(() => page.close());
18 |
19 | it('should login with failure', async () => {
20 | await page.waitForSelector('#userName', {
21 | timeout: 2000,
22 | });
23 | await page.type('#userName', 'mockuser');
24 | await page.type('#password', 'wrong_password');
25 | await page.click('button[type="submit"]');
26 | await page.waitForSelector('.ant-alert-error'); // should display error
27 | });
28 |
29 | it('should login successfully', async () => {
30 | await page.waitForSelector('#userName', {
31 | timeout: 2000,
32 | });
33 | await page.type('#userName', 'admin');
34 | await page.type('#password', '888888');
35 | await page.click('button[type="submit"]');
36 | await page.waitForSelector('.ant-layout-sider h1'); // should display error
37 | const text = await page.evaluate(() => document.body.innerHTML);
38 | expect(text).toContain('Ant Design Pro ');
39 | });
40 |
41 | afterAll(() => browser.close());
42 | });
43 |
--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ant Design Pro
9 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './polyfill';
2 | import dva from 'dva';
3 |
4 | import createHistory from 'history/createHashHistory';
5 | // user BrowserHistory
6 | // import createHistory from 'history/createBrowserHistory';
7 | import createLoading from 'dva-loading';
8 | import 'moment/locale/zh-cn';
9 | import './rollbar';
10 |
11 | import './index.less';
12 | // 1. Initialize
13 | const app = dva({
14 | history: createHistory(),
15 | });
16 |
17 | // 2. Plugins
18 | app.use(createLoading());
19 |
20 | // 3. Register global model
21 | app.model(require('./models/global').default);
22 |
23 | // 4. Router
24 | app.router(require('./router').default);
25 |
26 | // 5. Start
27 | app.start('#root');
28 |
29 | export default app._store; // eslint-disable-line
30 |
--------------------------------------------------------------------------------
/src/index.less:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | :global(#root) {
4 | height: 100%;
5 | }
6 |
7 | :global(.ant-layout) {
8 | min-height: 100%;
9 | }
10 |
11 | canvas {
12 | display: block;
13 | }
14 |
15 | body {
16 | text-rendering: optimizeLegibility;
17 | -webkit-font-smoothing: antialiased;
18 | -moz-osx-font-smoothing: grayscale;
19 | }
20 |
21 | // temp fix for https://github.com/ant-design/ant-design/commit/a1fafb5b727b62cb0be29ce6e9eca8f579d4f8b7
22 | :global {
23 | .ant-spin-container {
24 | overflow: visible !important;
25 | }
26 |
27 | .global-spin {
28 | width: 100%;
29 | margin: 40px 0 !important;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/layouts/BlankLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props =>
;
4 |
--------------------------------------------------------------------------------
/src/layouts/PageHeaderLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import PageHeader from '../components/PageHeader';
4 | import styles from './PageHeaderLayout.less';
5 |
6 | export default ({ children, wrapperClassName, top, ...restProps }) => (
7 |
8 | {top}
9 |
10 | {children ?
{children}
: null}
11 |
19 |
20 |
21 |
31 |
32 |
33 | );
34 | }
35 |
36 | export default RouterConfig;
37 |
--------------------------------------------------------------------------------
/src/routes/Dashboard/Monitor.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .mapChart {
5 | padding-top: 24px;
6 | height: 457px;
7 | text-align: center;
8 | img {
9 | display: inline-block;
10 | max-width: 100%;
11 | max-height: 437px;
12 | }
13 | }
14 |
15 | .pieCard :global(.pie-stat) {
16 | font-size: 24px !important;
17 | }
18 |
19 | @media screen and (max-width: @screen-lg) {
20 | .mapChart {
21 | height: auto;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/routes/Demo/DemoOne.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Alert } from 'antd';
3 |
4 | export default class DemoOne extends Component {
5 | /**
6 | * @description 验证是否有操作按钮的权限
7 | * @param {String} item 按钮
8 | */
9 | verifyAuthority = item => {
10 | const { actions } = this.props;
11 | return actions.indexOf(item) > -1;
12 | };
13 |
14 | render() {
15 | return (
16 |
17 |
demo-one
18 |
19 | {this.verifyAuthority('add') &&
添加 }
20 | {this.verifyAuthority('edit') &&
编辑 }
21 | {this.verifyAuthority('save') &&
保存 }
22 |
7 |
demo-three
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/Demo/DemoTwo.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class DemoOne extends Component {
4 | render() {
5 | return (
6 |
7 |
demo-two
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/routes/Exception/403.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import Exception from 'components/Exception';
4 |
5 | export default () => (
6 |
31 |
32 | this.triggerError(401)}>
33 | 触发401
34 |
35 | this.triggerError(403)}>
36 | 触发403
37 |
38 | this.triggerError(500)}>
39 | 触发500
40 |
41 | this.triggerError(404)}>
42 | 触发404
43 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/routes/Forms/StepForm/Step3.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { connect } from 'dva';
3 | import { Button, Row, Col } from 'antd';
4 | import { routerRedux } from 'dva/router';
5 | import Result from 'components/Result';
6 | import styles from './style.less';
7 |
8 | @connect(({ form }) => ({
9 | data: form.step,
10 | }))
11 | export default class Step3 extends React.PureComponent {
12 | render() {
13 | const { dispatch, data } = this.props;
14 | const onFinish = () => {
15 | dispatch(routerRedux.push('/form/step-form'));
16 | };
17 | const information = (
18 |
19 |
20 |
27 |
28 |
35 |
36 |
43 |
44 | {data.amount} 元
49 |
50 |
51 |
52 | );
53 | const actions = (
54 |
55 |
56 | 再转一笔
57 |
58 | 查看账单
59 |
60 | );
61 | return (
62 |
38 |
39 |
40 |
41 |
45 |
46 | {getRoutes(match.path, routerData).map(item => (
47 |
57 |
58 |
59 |
60 | );
61 | }
62 | }
63 |
64 | export default AppMenu(StepForm);
65 |
--------------------------------------------------------------------------------
/src/routes/Forms/StepForm/style.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .stepForm {
4 | margin: 40px auto 0;
5 | max-width: 500px;
6 | }
7 |
8 | .stepFormText {
9 | margin-bottom: 24px;
10 | :global {
11 | .ant-form-item-label,
12 | .ant-form-item-control {
13 | line-height: 22px;
14 | }
15 | }
16 | }
17 |
18 | .result {
19 | margin: 0 auto;
20 | max-width: 560px;
21 | padding: 24px 0 8px;
22 | }
23 |
24 | .desc {
25 | padding: 0 56px;
26 | color: @text-color-secondary;
27 | h3 {
28 | font-size: 16px;
29 | margin: 0 0 12px 0;
30 | color: @text-color-secondary;
31 | line-height: 32px;
32 | }
33 | h4 {
34 | margin: 0 0 4px 0;
35 | color: @text-color-secondary;
36 | font-size: 14px;
37 | line-height: 22px;
38 | }
39 | p {
40 | margin-top: 0;
41 | margin-bottom: 12px;
42 | line-height: 22px;
43 | }
44 | }
45 |
46 | @media screen and (max-width: @screen-md) {
47 | .desc {
48 | padding: 0;
49 | }
50 | }
51 |
52 | .information {
53 | line-height: 22px;
54 | :global {
55 | .ant-row:not(:last-child) {
56 | margin-bottom: 24px;
57 | }
58 | }
59 | .label {
60 | color: @heading-color;
61 | text-align: right;
62 | padding-right: 8px;
63 | @media screen and (max-width: @screen-sm) {
64 | text-align: left;
65 | }
66 | }
67 | }
68 |
69 | .money {
70 | font-family: 'Helvetica Neue', sans-serif;
71 | font-weight: 500;
72 | font-size: 20px;
73 | line-height: 14px;
74 | }
75 |
76 | .uppercase {
77 | font-size: 12px;
78 | }
79 |
--------------------------------------------------------------------------------
/src/routes/Forms/style.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .card {
4 | margin-bottom: 24px;
5 | }
6 |
7 | .heading {
8 | font-size: 14px;
9 | line-height: 22px;
10 | margin: 0 0 16px 0;
11 | }
12 |
13 | .steps:global(.ant-steps) {
14 | max-width: 750px;
15 | margin: 16px auto;
16 | }
17 |
18 | .errorIcon {
19 | cursor: pointer;
20 | color: @error-color;
21 | margin-right: 24px;
22 | i {
23 | margin-right: 4px;
24 | }
25 | }
26 |
27 | .errorPopover {
28 | :global {
29 | .ant-popover-inner-content {
30 | padding: 0;
31 | max-height: 290px;
32 | overflow: auto;
33 | min-width: 256px;
34 | }
35 | }
36 | }
37 |
38 | .errorListItem {
39 | list-style: none;
40 | border-bottom: 1px solid @border-color-split;
41 | padding: 8px 16px;
42 | cursor: pointer;
43 | transition: all 0.3s;
44 | &:hover {
45 | background: @primary-1;
46 | }
47 | &:last-child {
48 | border: 0;
49 | }
50 | .errorIcon {
51 | color: @error-color;
52 | float: left;
53 | margin-top: 4px;
54 | margin-right: 12px;
55 | padding-bottom: 22px;
56 | }
57 | .errorField {
58 | font-size: 12px;
59 | color: @text-color-secondary;
60 | margin-top: 2px;
61 | }
62 | }
63 |
64 | .editable {
65 | td {
66 | padding-top: 13px !important;
67 | padding-bottom: 12.5px !important;
68 | }
69 | }
70 |
71 | // custom footer for fixed footer toolbar
72 | .advancedForm + div {
73 | padding-bottom: 64px;
74 | }
75 |
76 | .advancedForm {
77 | :global {
78 | .ant-form .ant-row:last-child .ant-form-item {
79 | margin-bottom: 24px;
80 | }
81 | .ant-table td {
82 | transition: none !important;
83 | }
84 | }
85 | }
86 |
87 | .optional {
88 | color: @text-color-secondary;
89 | font-style: normal;
90 | }
91 |
--------------------------------------------------------------------------------
/src/routes/List/Applications.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .filterCardList {
5 | margin-bottom: -24px;
6 | :global {
7 | .ant-card-meta-content {
8 | margin-top: 0;
9 | }
10 | // disabled white space
11 | .ant-card-meta-avatar {
12 | font-size: 0;
13 | }
14 | .ant-card-actions {
15 | background: #f7f9fa;
16 | }
17 | .ant-list .ant-list-item-content-single {
18 | max-width: 100%;
19 | }
20 | }
21 | .cardInfo {
22 | .clearfix();
23 | margin-top: 16px;
24 | margin-left: 40px;
25 | & > div {
26 | position: relative;
27 | text-align: left;
28 | float: left;
29 | width: 50%;
30 | p {
31 | line-height: 32px;
32 | font-size: 24px;
33 | margin: 0;
34 | }
35 | p:first-child {
36 | color: @text-color-secondary;
37 | font-size: 12px;
38 | line-height: 20px;
39 | margin-bottom: 4px;
40 | }
41 | }
42 | }
43 | }
44 |
45 | .wan {
46 | position: relative;
47 | top: -2px;
48 | font-size: @font-size-base;
49 | font-style: normal;
50 | line-height: 20px;
51 | margin-left: 2px;
52 | }
53 |
--------------------------------------------------------------------------------
/src/routes/List/Articles.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .listContent {
5 | .description {
6 | line-height: 22px;
7 | max-width: 720px;
8 | }
9 | .extra {
10 | color: @text-color-secondary;
11 | margin-top: 16px;
12 | line-height: 22px;
13 | & > :global(.ant-avatar) {
14 | vertical-align: top;
15 | margin-right: 8px;
16 | width: 20px;
17 | height: 20px;
18 | position: relative;
19 | top: 1px;
20 | }
21 | & > em {
22 | color: @disabled-color;
23 | font-style: normal;
24 | margin-left: 16px;
25 | }
26 | }
27 | }
28 | a.listItemMetaTitle {
29 | color: @heading-color;
30 | }
31 | .listItemExtra {
32 | width: 272px;
33 | height: 1px;
34 | }
35 | .selfTrigger {
36 | margin-left: 12px;
37 | }
38 |
39 | @media screen and (max-width: @screen-xs) {
40 | .selfTrigger {
41 | display: block;
42 | margin-left: 0;
43 | }
44 | .listContent {
45 | .extra {
46 | & > em {
47 | display: block;
48 | margin-left: 0;
49 | margin-top: 8px;
50 | }
51 | }
52 | }
53 | }
54 | @media screen and (max-width: @screen-md) {
55 | .selfTrigger {
56 | display: block;
57 | margin-left: 0;
58 | }
59 | }
60 | @media screen and (max-width: @screen-lg) {
61 | .listItemExtra {
62 | width: 0;
63 | height: 1px;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/routes/List/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { routerRedux, Route, Switch } from 'dva/router';
3 | import { connect } from 'dva';
4 | import { Input } from 'antd';
5 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
6 | import { getRoutes } from '../../utils/utils';
7 |
8 | import AppMenu from '../../components/utils/AppMenu';
9 |
10 | class SearchList extends Component {
11 | handleTabChange = key => {
12 | const { dispatch, match } = this.props;
13 | switch (key) {
14 | case 'articles':
15 | dispatch(routerRedux.push(`${match.url}/articles`));
16 | break;
17 | case 'applications':
18 | dispatch(routerRedux.push(`${match.url}/applications`));
19 | break;
20 | case 'projects':
21 | dispatch(routerRedux.push(`${match.url}/projects`));
22 | break;
23 | default:
24 | break;
25 | }
26 | };
27 |
28 | render() {
29 | const tabList = [
30 | {
31 | key: 'articles',
32 | tab: '文章',
33 | },
34 | {
35 | key: 'applications',
36 | tab: '应用',
37 | },
38 | {
39 | key: 'projects',
40 | tab: '项目',
41 | },
42 | ];
43 |
44 | const mainSearch = (
45 |
46 |
54 | );
55 |
56 | const { match, routerData, location } = this.props;
57 | const routes = getRoutes(match.path, routerData);
58 |
59 | return (
60 |
67 |
68 | {routes.map(item => (
69 |
72 |
73 | );
74 | }
75 | }
76 |
77 | export default connect()(AppMenu(SearchList));
78 |
--------------------------------------------------------------------------------
/src/routes/List/Projects.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .coverCardList {
5 | margin-bottom: -24px;
6 |
7 | .card {
8 | :global {
9 | .ant-card-meta-title {
10 | margin-bottom: 4px;
11 | & > a {
12 | color: @heading-color;
13 | display: inline-block;
14 | max-width: 100%;
15 | }
16 | }
17 | .ant-card-meta-description {
18 | height: 44px;
19 | line-height: 22px;
20 | overflow: hidden;
21 | }
22 | }
23 |
24 | &:hover {
25 | :global {
26 | .ant-card-meta-title > a {
27 | color: @primary-color;
28 | }
29 | }
30 | }
31 | }
32 |
33 | .cardItemContent {
34 | display: flex;
35 | margin-top: 16px;
36 | margin-bottom: -4px;
37 | line-height: 20px;
38 | height: 20px;
39 | & > span {
40 | color: @text-color-secondary;
41 | flex: 1;
42 | font-size: 12px;
43 | }
44 | .avatarList {
45 | flex: 0 1 auto;
46 | }
47 | }
48 | .cardList {
49 | margin-top: 24px;
50 | }
51 |
52 | :global {
53 | .ant-list .ant-list-item-content-single {
54 | max-width: 100%;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/routes/List/TableList.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .tableList {
5 | .tableListOperator {
6 | margin-bottom: 16px;
7 | button {
8 | margin-right: 8px;
9 | }
10 | }
11 | }
12 |
13 | .tableListForm {
14 | :global {
15 | .ant-form-item {
16 | margin-bottom: 24px;
17 | margin-right: 0;
18 | display: flex;
19 | > .ant-form-item-label {
20 | width: auto;
21 | line-height: 32px;
22 | padding-right: 8px;
23 | }
24 | .ant-form-item-control {
25 | line-height: 32px;
26 | }
27 | }
28 | .ant-form-item-control-wrapper {
29 | flex: 1;
30 | }
31 | }
32 | .submitButtons {
33 | white-space: nowrap;
34 | margin-bottom: 24px;
35 | }
36 | }
37 |
38 | @media screen and (max-width: @screen-lg) {
39 | .tableListForm :global(.ant-form-item) {
40 | margin-right: 24px;
41 | }
42 | }
43 |
44 | @media screen and (max-width: @screen-md) {
45 | .tableListForm :global(.ant-form-item) {
46 | margin-right: 8px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/routes/Profile/AdvancedProfile.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .headerList {
4 | margin-bottom: 4px;
5 | }
6 |
7 | .tabsCard {
8 | :global {
9 | .ant-card-head {
10 | padding: 0 16px;
11 | }
12 | }
13 | }
14 |
15 | .noData {
16 | color: @disabled-color;
17 | text-align: center;
18 | line-height: 64px;
19 | font-size: 16px;
20 | i {
21 | font-size: 24px;
22 | margin-right: 16px;
23 | position: relative;
24 | top: 3px;
25 | }
26 | }
27 |
28 | .heading {
29 | color: @heading-color;
30 | font-size: 20px;
31 | }
32 |
33 | .stepDescription {
34 | font-size: 14px;
35 | position: relative;
36 | left: 38px;
37 | & > div {
38 | margin-top: 8px;
39 | margin-bottom: 4px;
40 | }
41 | }
42 |
43 | .textSecondary {
44 | color: @text-color-secondary;
45 | }
46 |
47 | @media screen and (max-width: @screen-sm) {
48 | .stepDescription {
49 | left: 8px;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/routes/Profile/BasicProfile.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .title {
4 | color: @heading-color;
5 | font-size: 16px;
6 | font-weight: 500;
7 | margin-bottom: 16px;
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/Result/Error.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { Button, Icon, Card } from 'antd';
3 | import Result from 'components/Result';
4 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
5 |
6 | const extra = (
7 |
8 |
16 | 您提交的内容有如下错误：
17 |
18 |
25 |
32 |
33 | );
34 |
35 | const actions = 返回修改 ;
36 |
37 | export default () => (
38 |
39 |
40 |
49 |
50 | );
51 |
--------------------------------------------------------------------------------
/src/routes/Result/Success.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import Success from './Success';
4 |
5 | it('renders with Result', () => {
6 | const wrapper = shallow(
26 | 你的账户：
27 | {location.state ? location.state.account : 'AntDesign@example.com'} 注册成功
28 |
29 | }
30 | description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
31 | actions={actions}
32 | style={{ marginTop: 56 }}
33 | />
34 | );
35 |
--------------------------------------------------------------------------------
/src/routes/User/RegisterResult.less:
--------------------------------------------------------------------------------
1 | .registerResult {
2 | :global {
3 | .anticon {
4 | font-size: 64px;
5 | }
6 | }
7 | .title {
8 | margin-top: 32px;
9 | font-size: 20px;
10 | line-height: 28px;
11 | }
12 | .actions {
13 | margin-top: 40px;
14 | a + a {
15 | margin-left: 8px;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/services/error.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query(code) {
4 | return request(`/api/${code}`);
5 | }
6 |
--------------------------------------------------------------------------------
/src/services/user.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
7 | export async function queryCurrent() {
8 | return request('/api/currentUser');
9 | }
10 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
2 | module.exports = {
3 | // 'primary-color': '#10e99b',
4 | 'card-actions-background': '#f5f8fa',
5 | };
6 |
--------------------------------------------------------------------------------
/src/utils/Authorized.js:
--------------------------------------------------------------------------------
1 | import RenderAuthorized from '../components/Authorized';
2 | import { getAuthority } from './authority';
3 |
4 | let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line
5 |
6 | // Reload the rights component
7 | const reloadAuthorized = () => {
8 | Authorized = RenderAuthorized(getAuthority());
9 | };
10 |
11 | export { reloadAuthorized };
12 | export default Authorized;
13 |
--------------------------------------------------------------------------------
/src/utils/authority.js:
--------------------------------------------------------------------------------
1 | // use localStorage to store the authority info, which might be sent from server in actual project.
2 | import store from '../index';
3 |
4 | /**
5 | * 获取token
6 | */
7 | export function getAuthority() {
8 | const token = getToken();
9 | // 判断token是否过期
10 | if (!token) {
11 | return null;
12 | }
13 | const nowTime = new Date() - 0;
14 | if (token.expireIn > nowTime) {
15 | return token.token;
16 | }
17 | return null;
18 | }
19 |
20 | export function setToken(token) {
21 | return localStorage.setItem('security.token', JSON.stringify(token));
22 | }
23 |
24 | export function getToken() {
25 | const tokenStr = localStorage.getItem('security.token');
26 | if (!tokenStr) {
27 | return null;
28 | }
29 |
30 | const token = JSON.parse(tokenStr);
31 | return token;
32 | }
33 |
34 | export function setTokenExpired() {
35 | localStorage.removeItem('security.token');
36 | }
37 |
38 | /**
39 | * 判断是否有权限
40 | * @param {string} [authorityIdentity]
41 | */
42 | export function hasPermission(authorityIdentity) {
43 | // 通用页面直接允许通过
44 | if (authorityIdentity === 'common') {
45 | return true;
46 | }
47 |
48 | const token = getAuthority();
49 | if (!authorityIdentity || !token) {
50 | return false;
51 | }
52 |
53 | const rootIdentity = 'root';
54 | // 已登录且是首页
55 | if (authorityIdentity === rootIdentity && token) {
56 | return true;
57 | }
58 |
59 | if (!store) {
60 | return false;
61 | }
62 |
63 | // 从redux中获取菜单
64 | const {
65 | global: { menus },
66 | } = store.getState();
67 | if (!menus || menus.length <= 0) {
68 | return false;
69 | }
70 | return checkAuth(authorityIdentity, menus);
71 | }
72 |
73 | function checkAuth(identity, menus) {
74 | if (!menus || menus.length <= 0) {
75 | return false;
76 | }
77 | let result = false;
78 | for (let i = 0; i < menus.length; i += 1) {
79 | const menu = menus[i];
80 | if (identity === menu.identity) {
81 | return true;
82 | }
83 | if (menu.children && menu.children.length) {
84 | result = checkAuth(identity, menu.children);
85 | if (result) {
86 | return true;
87 | }
88 | }
89 | }
90 |
91 | return false;
92 | }
93 |
--------------------------------------------------------------------------------
/src/utils/utils.less:
--------------------------------------------------------------------------------
1 | .textOverflow() {
2 | overflow: hidden;
3 | text-overflow: ellipsis;
4 | word-break: break-all;
5 | white-space: nowrap;
6 | }
7 |
8 | .textOverflowMulti(@line: 3, @bg: #fff) {
9 | overflow: hidden;
10 | position: relative;
11 | line-height: 1.5em;
12 | max-height: @line * 1.5em;
13 | text-align: justify;
14 | margin-right: -1em;
15 | padding-right: 1em;
16 | &:before {
17 | background: @bg;
18 | content: '...';
19 | padding: 0 1px;
20 | position: absolute;
21 | right: 14px;
22 | bottom: 0;
23 | }
24 | &:after {
25 | background: white;
26 | content: '';
27 | margin-top: 0.2em;
28 | position: absolute;
29 | right: 14px;
30 | width: 1em;
31 | height: 1em;
32 | }
33 | }
34 |
35 | // mixins for clearfix
36 | // ------------------------
37 | .clearfix() {
38 | zoom: 1;
39 | &:before,
40 | &:after {
41 | content: ' ';
42 | display: table;
43 | }
44 | &:after {
45 | clear: both;
46 | visibility: hidden;
47 | font-size: 0;
48 | height: 0;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/tests/fix_puppeteer.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | sudo apt-get update
4 | sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
5 | libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
6 | libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
7 | libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
8 | ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
9 |
--------------------------------------------------------------------------------
/tests/run-tests.js:
--------------------------------------------------------------------------------
1 | const { spawn } = require('child_process');
2 | const { kill } = require('cross-port-killer');
3 |
4 | const env = Object.create(process.env);
5 | env.BROWSER = 'none';
6 | const startServer = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['start'], {
7 | env,
8 | });
9 |
10 | startServer.stderr.on('data', data => {
11 | // eslint-disable-next-line
12 | console.log(data);
13 | });
14 |
15 | startServer.on('exit', () => {
16 | kill(process.env.PORT || 8000);
17 | });
18 |
19 | // eslint-disable-next-line
20 | console.log('Starting development server for e2e tests...');
21 | startServer.stdout.on('data', data => {
22 | // eslint-disable-next-line
23 | console.log(data.toString());
24 | if (
25 | data.toString().indexOf('Compiled successfully') >= 0 ||
26 | data.toString().indexOf('Compiled with warnings') >= 0
27 | ) {
28 | // eslint-disable-next-line
29 | console.log('Development server is started, ready to run tests.');
30 | const testCmd = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['test'], {
31 | stdio: 'inherit',
32 | });
33 | testCmd.on('exit', code => {
34 | startServer.kill();
35 | process.exit(code);
36 | });
37 | }
38 | });
39 |
--------------------------------------------------------------------------------
31 | 
快速开始
17 | 
产品简介
20 | 
产品文档
23 |