Skip to content

Commit 039334d

Browse files
author
gongjs
committed
fix
1 parent 10283b0 commit 039334d

File tree

32 files changed

+964
-1002
lines changed

32 files changed

+964
-1002
lines changed

‎example/src/components/aside/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class CNavLeft extends Component {
1010
render() {
1111
return (
1212
<div className="nav-left">
13-
<Menu mode="vertical">{this.initMenuList(menuList)}</Menu>
13+
<Menu defaultExpandKeys={['/components/common','/components/_layout','/components/nav','/components/enter','/components/display','/components/callback']} expandKeysOnlyOne={false} mode="vertical">{this.initMenuList(menuList)}</Menu>
1414
</div>
1515
)
1616
}

‎example/src/components/header/header.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.common-header {
22
position: fixed;
3-
z-index: 1000;
3+
z-index: 50;
44
display: flex;
55
justify-content: space-between;
66
align-items: center;

‎example/src/pages/input/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react'
22
import ReactMarkdown from 'react-markdown'
33
import CodeCard from '../../components/code-card'
44
import Input from '@components/input'
5-
import Textarea from '@components/input/TextArea'
5+
import Textarea from '@components/input/Textarea'
66

77
export default () => {
88
const [value1, setValue1] = useState('')

‎example/src/pages/menu/api.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
| mode | 模式 | horizontal \| vertical | horizontal | 否 |
77
| selectedKey | 当前激活子选项的 key | string | - | - |
88
| expandKeys | 当前展开子菜单的 key 数组 | string[] | - | - |
9+
| expandKeysOnlyOne | 是否只能同时展开一个子菜单| boolean | true | - |
910
| defaultSelectedKey | 默认激活子选项的 key | string | - | 否 |
1011
| defaultExpandKeys | 默认展开子菜单的 key 数组 | string[] | - | 否 |
1112
| onSelectedChange | 激活子选项改变时的回调 | (selectedKey: string) => any | - | 否 |

‎example/src/pages/menu/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default () => {
3131
</SubMenu>
3232
</Menu>`}
3333
>
34-
<Menu style={{ marginBottom: '200px' }}>
34+
<Menu style={{ marginBottom: '240px' }}>
3535
<MenuItem key="item1">Option 1</MenuItem>
3636
<MenuItem key="item2">Option 2</MenuItem>
3737
<MenuItem key="item3">Option 3</MenuItem>
@@ -50,7 +50,7 @@ export default () => {
5050
title="垂直导航"
5151
summary="垂直的侧边导航菜单。"
5252
code={`
53-
<Menu mode="vertical" style={{ marginBottom: "200px" }}>
53+
<Menu mode="vertical" style={{ marginBottom: "10px" }}>
5454
<MenuItem key="item1">Option 1</MenuItem>
5555
<MenuItem key="item2">Option 2</MenuItem>
5656
<MenuItem key="item3">Option 3</MenuItem>
@@ -68,8 +68,8 @@ export default () => {
6868
<Menu
6969
mode="vertical"
7070
style={{
71-
height: '600px',
72-
width: '300px',
71+
height: '400px',
72+
width: '220px',
7373
borderRight: '1px solid #dedede',
7474
}}
7575
>

‎example/src/pages/message/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default () => {
2424
const handleTime = () => {
2525
message.info({
2626
content: '这条消息10秒钟后自动关闭',
27-
duration: 100,
27+
duration: 1000,
2828
})
2929
}
3030

‎lib/components/button/ButtonGroup.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,8 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
88
children: React.ReactElement[]
99
}
1010

11-
const ButtonGroup: React.SFC<ButtonGroupProps> = ({
12-
className,
13-
children,
14-
...restProps
15-
}) => {
11+
const ButtonGroup: React.SFC<ButtonGroupProps> = props => {
12+
const {className,children,...restProps} = props
1613
children.forEach(item => {
1714
if (item.type !== Button) {
1815
console.warn('children只接受Button组件')

‎lib/components/button/index.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react'
2-
import Icon from '../icon'
3-
import { combineClass } from '../../helpers/utils'
4-
import './button.scss'
1+
import React from 'react';
2+
import Icon from '../icon';
3+
import {combineClass} from '../../helpers/utils';
4+
import './button.scss';
55

66
interface Props extends React.HTMLAttributes<HTMLElement> {
77
type:
@@ -38,7 +38,7 @@ const Button: React.FC<ButtonProps> = props => {
3838
className,
3939
htmlType,
4040
...restProps
41-
} = props
41+
} = props;
4242

4343
const classList = combineClass(
4444
className,
@@ -49,7 +49,7 @@ const Button: React.FC<ButtonProps> = props => {
4949
`${circle ? 'circle clearMargin' : ''}`,
5050
`${disabled ? 'disabled' : ''}`,
5151
`${ripple && !disabled ? 'ripple' : ''}`,
52-
)
52+
);
5353

5454
return (
5555
<button
@@ -59,15 +59,15 @@ const Button: React.FC<ButtonProps> = props => {
5959
type={htmlType}
6060
>
6161
{icon === '' || icon === undefined || loading ? null : (
62-
<Icon className="icon" name={icon} />
62+
<Icon className="icon" name={icon}/>
6363
)}
6464
{loading ? (
65-
<Icon className="loading icon" name="loading" color="#fff" />
65+
<Icon className="loading icon" name="loading" color="#fff"/>
6666
) : null}
6767
<div className="r-button-content">{children}</div>
6868
</button>
69-
)
70-
}
69+
);
70+
};
7171

7272
Button.defaultProps = {
7373
type: 'default',
@@ -78,6 +78,6 @@ Button.defaultProps = {
7878
ripple: true,
7979
loading: false,
8080
iconPosition: 'left',
81-
}
82-
Button.displayName = 'Button'
83-
export default Button
81+
};
82+
Button.displayName = 'Button';
83+
export default Button;

‎lib/components/carousel/index.tsx

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React, { useEffect, useLayoutEffect } from 'react'
2-
import { combineClass, uniqueId } from '../../helpers/utils'
3-
import Icon from '../icon'
4-
import { slide, fade } from './animation'
5-
import './carousel.scss'
1+
import React, {useEffect, useLayoutEffect} from 'react';
2+
import {combineClass, uniqueId} from '../../helpers/utils';
3+
import Icon from '../icon';
4+
import {slide, fade} from './animation';
5+
import './carousel.scss';
66

77
interface Props extends React.HTMLAttributes<HTMLDivElement> {
8-
type?: 'fade' | 'slide'
9-
autoplay?: boolean
10-
interval?: number
11-
height?: string
8+
type: 'fade' | 'slide'
9+
autoplay: boolean
10+
interval: number
11+
height: string
1212
}
1313

1414
type CarouselProps = Partial<Props>
@@ -22,123 +22,123 @@ const Carousel: React.FC<CarouselProps> = props => {
2222
autoplay,
2323
interval,
2424
...restProps
25-
} = props
25+
} = props;
2626

27-
let dotsEle: NodeListOf<HTMLElement>
28-
let panelsEle: NodeListOf<HTMLElement>
29-
let endFlag = true
30-
let timer: number
31-
let direction: string
32-
const id = uniqueId(4)
33-
const panelsRef = React.createRef<HTMLDivElement>()
27+
let dotsEle: NodeListOf<HTMLElement>;
28+
let panelsEle: NodeListOf<HTMLElement>;
29+
let endFlag = true;
30+
let timer: number;
31+
let direction: string;
32+
const id = uniqueId(4);
33+
const panelsRef = React.createRef<HTMLDivElement>();
3434

3535
// 点击小点点切换
3636
const handleDotsClick = (event: any) => {
37-
event.stopPropagation()
38-
const index = Array.from(dotsEle).indexOf(event.target)
37+
event.stopPropagation();
38+
const index = Array.from(dotsEle).indexOf(event.target);
3939
if (index === -1) {
40-
return
40+
return;
4141
}
42-
const lastIndex = getActiveIndex()
43-
setActiveDot(index)
44-
play(index, lastIndex)
45-
}
42+
const lastIndex = getActiveIndex();
43+
setActiveDot(index);
44+
play(index, lastIndex);
45+
};
4646

4747
// 激活选中的小点点样式
4848
const setActiveDot = (index: number) => {
4949
if (endFlag) {
50-
dotsEle.forEach(dot => dot.classList.remove('active'))
51-
dotsEle[index].classList.add('active')
50+
dotsEle.forEach(dot => dot.classList.remove('active'));
51+
dotsEle[index].classList.add('active');
5252
}
53-
}
53+
};
5454

5555
// 上一页
5656
const pre = () => {
57-
const index = getPreIndex()
58-
direction = 'left'
59-
setActiveDot(index)
60-
play(index, getNextIndex())
57+
const index = getPreIndex();
58+
direction = 'left';
59+
setActiveDot(index);
60+
play(index, getNextIndex());
6161
if (autoplay) {
62-
clearInterval(timer)
63-
startAutoPlay()
62+
clearInterval(timer);
63+
startAutoPlay();
6464
}
65-
}
65+
};
6666

6767
// 下一页
6868
const next = () => {
69-
const index = getNextIndex()
70-
direction = 'right'
71-
setActiveDot(index)
72-
play(index, getPreIndex())
69+
const index = getNextIndex();
70+
direction = 'right';
71+
setActiveDot(index);
72+
play(index, getPreIndex());
7373
if (autoplay) {
74-
clearInterval(timer)
75-
startAutoPlay()
74+
clearInterval(timer);
75+
startAutoPlay();
7676
}
77-
}
77+
};
7878

7979
// 获取当前轮播页索引
8080
const getActiveIndex = () => {
8181
const ele: HTMLElement | null = document.querySelector(
8282
`.r-carousel-${id} .dots .active`,
83-
)
83+
);
8484
if (ele) {
85-
return Array.from(dotsEle).indexOf(ele)
85+
return Array.from(dotsEle).indexOf(ele);
8686
} else {
87-
throw Error('没有找到<span class="active"/>')
87+
throw Error('没有找到<span class="active"/>');
8888
}
89-
}
89+
};
9090

9191
// 上一页轮播页索引
9292
const getPreIndex = () => {
93-
return (getActiveIndex() - 1 + dotsEle.length) % dotsEle.length
94-
}
93+
return (getActiveIndex() - 1 + dotsEle.length) % dotsEle.length;
94+
};
9595

9696
// 下一页轮播页索引
9797
const getNextIndex = () => {
98-
return (getActiveIndex() + 1) % dotsEle.length
99-
}
98+
return (getActiveIndex() + 1) % dotsEle.length;
99+
};
100100

101101
// 开启自动轮播
102102
const startAutoPlay = () => {
103103
timer = setInterval(() => {
104-
next()
105-
}, interval)
106-
}
104+
next();
105+
}, interval);
106+
};
107107

108108
// 轮播
109109
const play = (toIndex: number, fromIndex: number) => {
110110
if (!endFlag) {
111-
return
111+
return;
112112
}
113-
endFlag = false
113+
endFlag = false;
114114
const onFinish = () => {
115-
panelsEle.forEach(panel => (panel.style.zIndex = '0'))
116-
panelsEle[toIndex].style.zIndex = '10'
117-
endFlag = true
118-
}
115+
panelsEle.forEach(panel => (panel.style.zIndex = '0'));
116+
panelsEle[toIndex].style.zIndex = '10';
117+
endFlag = true;
118+
};
119119
if (type === 'slide') {
120-
slide(panelsEle[fromIndex], panelsEle[toIndex], onFinish, direction)
120+
slide(panelsEle[fromIndex], panelsEle[toIndex], onFinish, direction);
121121
}
122122
if (type === 'fade') {
123-
fade(panelsEle[fromIndex], panelsEle[toIndex], onFinish)
123+
fade(panelsEle[fromIndex], panelsEle[toIndex], onFinish);
124124
}
125-
}
125+
};
126126

127127
useEffect(() => {
128-
dotsEle = document.querySelectorAll(`.r-carousel-${id} .dots span`)
129-
panelsEle = document.querySelectorAll(`.r-carousel-${id} .panels div`)
128+
dotsEle = document.querySelectorAll(`.r-carousel-${id} .dots span`);
129+
panelsEle = document.querySelectorAll(`.r-carousel-${id} .panels div`);
130130
if (autoplay) {
131-
startAutoPlay()
131+
startAutoPlay();
132132
}
133-
return () => clearInterval(timer)
134-
}, [])
133+
return () => clearInterval(timer);
134+
}, []);
135135

136136
useLayoutEffect(() => {
137-
const ref = panelsRef
137+
const ref = panelsRef;
138138
if (ref.current && height) {
139-
ref.current.style.height = height
139+
ref.current.style.height = height;
140140
}
141-
})
141+
});
142142

143143
return (
144144
<div
@@ -148,10 +148,10 @@ const Carousel: React.FC<CarouselProps> = props => {
148148
<div ref={panelsRef} className="panels">
149149
{children}
150150
<button className="arrow pre" onClick={pre}>
151-
<Icon name="back" color="#fff" />
151+
<Icon name="back" color="#fff"/>
152152
</button>
153153
<button className="arrow next" onClick={next}>
154-
<Icon name="right" color="#fff" />
154+
<Icon name="right" color="#fff"/>
155155
</button>
156156
</div>
157157
<div className="action">
@@ -162,13 +162,13 @@ const Carousel: React.FC<CarouselProps> = props => {
162162
</div>
163163
</div>
164164
</div>
165-
)
166-
}
165+
);
166+
};
167167

168168
Carousel.defaultProps = {
169169
type: 'fade',
170170
autoplay: true,
171171
interval: 3000,
172-
}
173-
Carousel.displayName = 'Carousel'
174-
export default Carousel
172+
};
173+
Carousel.displayName = 'Carousel';
174+
export default Carousel;

0 commit comments

Comments
 (0)