Skip to content

Commit 0bb4d9e

Browse files
yinLiangDreamyinLiangDream
committed
'COMPONENT',
 '- 新增 Message 消息提示组件', 'API', '- 新增 Animation 组件 duration 属性', 'BUG', '- 修复 FloatButton 组件拖动穿透事件，拖动卡顿问题，提升动画速度，并新增收拢动画'
1 parent c29f58d commit 0bb4d9e

File tree

14 files changed

+861
-604
lines changed

14 files changed

+861
-604
lines changed

‎.idea/workspace.xml

+136-130
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎@types/animation.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export interface IProps {
55
reverse?: boolean;
66
children?: any;
77
delay?: number;
8+
duration?: number;
89
onAnimationStart?: (e: any) => void;
910
onAnimationEnd?: (e: any) => void;
1011
}

‎@types/message.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ComponentClass } from 'react';
2+
import { bgColorType, bgColorMoreType, lightBgColorType } from './baseType';
3+
4+
export interface IProps {
5+
type: 'success' | 'error' | 'warn' | 'info' | 'custom';
6+
bgColor?: bgColorType | bgColorMoreType | lightBgColorType;
7+
message?: string;
8+
show?: boolean;
9+
duration?: number;
10+
onClose?: () => void;
11+
}
12+
13+
export const Message: ComponentClass<IProps>;

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mp-colorui",
3-
"version": "0.2.3",
3+
"version": "0.2.4",
44
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）",
55
"main": "dist/index.js",
66
"main:h5": "dist/h5/index.js",
@@ -42,6 +42,7 @@
4242
"@babel/plugin-proposal-class-properties": "^7.4.4",
4343
"@babel/plugin-transform-react-jsx": "^7.3.0",
4444
"@babel/preset-env": "^7.1.0",
45+
"@tarojs/async-await": "^1.3.9",
4546
"@tarojs/components": "1.3.4",
4647
"@tarojs/plugin-babel": "1.3.4",
4748
"@tarojs/plugin-csso": "1.3.4",

‎src/app.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Taro, { Component, Config } from '@tarojs/taro';
22
import Index from './pages/index';
3+
import '@tarojs/async-await';
34

45
import './style/index.scss'
56

‎src/components/animation/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function ClAnimation(props: IProps) {
66
const type = props.type;
77
const reverse = props.reverse ? 'animation-reverse' : '';
88
return (
9-
<View className={`animation-${type} ${reverse}`} style={{animationDelay: `${props.delay}s`}}
9+
<View className={`animation-${type} ${reverse}`} style={{animationDelay: `${props.delay}s`, animationDuration: `${props.duration}s`}}
1010
onAnimationStart={e => {
1111
props.onAnimationStart && props.onAnimationStart(e)
1212
}} onAnimationEnd={e => {
@@ -24,5 +24,6 @@ ClAnimation.options = {
2424
ClAnimation.defaultProps = {
2525
type: 'fade',
2626
reverse: false,
27-
delay: 0
27+
delay: 0,
28+
duration: 0.5
2829
} as IProps;

‎src/components/floatButton/index.tsx

+123-72
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,145 @@
1-
import Taro, {pxTransform, useState} from '@tarojs/taro'
2-
import {View} from "@tarojs/components";
1+
import Taro, { pxTransform, useState } from '@tarojs/taro';
2+
import { View } from '@tarojs/components';
33
import utils from '../utils/index';
4-
import {IProps} from '../../../@types/floatButton'
5-
import ClIcon from "../icon";
4+
import { IProps } from '../../../@types/floatButton';
5+
import ClIcon from '../icon';
66

7-
import './index.scss'
8-
import ClAnimation from "../animation";
9-
import ClLayout from "../layout";
7+
import './index.scss';
8+
import ClAnimation from '../animation';
9+
import ClLayout from '../layout';
1010

1111
let tempPageX = 0;
1212
let tempPageY = 0;
13+
let pageX = 25;
14+
let pageY = 100;
1315
export default function ClFloatButton(props: IProps) {
1416
const [show, setShow] = useState(false);
1517
const [rotate, setRotate] = useState(0);
16-
const [pageX, setPageX] = useState(50);
17-
const [pageY, setPageY] = useState(200);
18-
const {move, open, icon, bgColor, iconColor, direction, shadow, shape, size, actionList, onClick, onActionClick, closeWithShadow} = props;
19-
const dealSize = utils.model.SIZE[size || "normal"];
20-
const dealBgColor = utils.model.BG_COLOR_LIST[bgColor || "blue"];
18+
const [animation, setAnimation] = useState({});
19+
const {
20+
move,
21+
open,
22+
icon,
23+
bgColor,
24+
iconColor,
25+
direction,
26+
shadow,
27+
shape,
28+
size,
29+
actionList,
30+
onClick,
31+
onActionClick,
32+
closeWithShadow
33+
} = props;
34+
const dealSize = utils.model.SIZE[size || 'normal'];
35+
const dealBgColor = utils.model.BG_COLOR_LIST[bgColor || 'blue'];
2136
const dealShadow = shadow ? 'shadow' : '';
2237
const dealIconColor = iconColor || '';
23-
const dealActionList = actionList || [];
38+
let dealActionList = actionList || [];
2439
const len = dealActionList.length;
40+
const type = () => {
41+
if (direction === 'vertical') {
42+
return show ? 'slide-bottom' : 'slide-top';
43+
} else {
44+
return show ? 'slide-right' : 'slide-left';
45+
}
46+
};
2547
const actionListComponent = dealActionList.map((item, index) => (
26-
<ClAnimation type={direction === "vertical" ? "slide-bottom" : "slide-right"} key={index}
27-
delay={(len - index - 1) / 10}>
28-
<ClLayout padding={"small"} paddingDirection={direction === "vertical" ? "bottom" : "right"}>
29-
<View
30-
className={`cu-avatar ${shape} ${dealSize} ${item.bgColor ? utils.model.BG_COLOR_LIST[item.bgColor] : dealBgColor} ${dealShadow}`}
31-
onClick={(e) => {
32-
e.stopPropagation();
33-
clickButton();
34-
onActionClick && onActionClick(index)
35-
}}>
36-
<View className={`${item.iconColor || dealIconColor}`}>
37-
<ClIcon iconName={item.icon} size={size}/>
48+
<View key={index} style={{position: show ? 'relative' : 'absolute'}}>
49+
<ClAnimation
50+
type={type()}
51+
delay={show ? (len - index - 1) / 10 : 0}
52+
duration={0.2}
53+
>
54+
<ClLayout
55+
padding='small'
56+
paddingDirection={direction === 'vertical' ? 'bottom' : 'right'}
57+
>
58+
<View
59+
className={`cu-avatar ${shape} ${dealSize} ${
60+
item.bgColor
61+
? utils.model.BG_COLOR_LIST[item.bgColor]
62+
: dealBgColor
63+
} ${dealShadow}`}
64+
onClick={e => {
65+
e.stopPropagation();
66+
clickButton();
67+
onActionClick && onActionClick(index);
68+
}}
69+
>
70+
<View className={`${item.iconColor || dealIconColor}`}>
71+
<ClIcon iconName={item.icon} size={size} />
72+
</View>
3873
</View>
39-
</View>
40-
</ClLayout>
41-
</ClAnimation>
74+
</ClLayout>
75+
</ClAnimation>
76+
</View>
4277
));
43-
const directionClass = direction === "vertical" ? '' : 'flex';
78+
const directionClass = direction === 'vertical' ? '' : 'flex';
4479
const clickButton = () => {
4580
setShow(!show);
4681
open && setRotate(rotate ? 0 : 45);
4782
};
4883
return (
49-
<View className={`${show ? 'float_button__mask' : ''}`} onClick={(e) => {
50-
e.stopPropagation();
51-
closeWithShadow && clickButton()
52-
}}>
53-
<View className={'float_button__fixed'}
54-
onTouchStart={(e) => {
55-
if (!move) return;
56-
const touchs = e.touches[0];
57-
tempPageX = touchs.pageX;
58-
tempPageY = touchs.pageY;
59-
}}
60-
onTouchMove={(e) => {
61-
if (!move) return;
62-
const touchs = e.touches[0];
63-
setPageX((pageX - (touchs.pageX - tempPageX) * 2));
64-
setPageY((pageY - (touchs.pageY - tempPageY) * 2));
65-
tempPageX = touchs.pageX;
66-
tempPageY = touchs.pageY;
67-
}}
68-
onTouchCancel={(e) => {
69-
}}
70-
style={{right: pxTransform(pageX), bottom: pxTransform(pageY)}}
84+
<View
85+
className={`${show ? 'float_button__mask' : ''}`}
86+
onClick={e => {
87+
closeWithShadow && clickButton();
88+
}}
89+
>
90+
<View
91+
className='float_button__fixed'
92+
animation={animation}
93+
onTouchStart={e => {
94+
if (!move) return;
95+
const touchs = e.touches[0];
96+
tempPageX = touchs.pageX;
97+
tempPageY = touchs.pageY;
98+
}}
99+
onTouchMove={e => {
100+
e.stopPropagation();
101+
if (!move) return;
102+
const touchs = e.touches[0];
103+
let newAnimation = Taro.createAnimation(animation);
104+
pageX = pageX - (touchs.pageX - tempPageX);
105+
pageY = pageY - (touchs.pageY - tempPageY);
106+
const length = Math.sqrt(Math.pow(pageX, 2) + Math.pow(pageY, 2))
107+
newAnimation.right(pageX);
108+
newAnimation.bottom(pageY).step({
109+
duration: 13 * length / 100
110+
});
111+
setAnimation(newAnimation.export());
112+
tempPageX = touchs.pageX;
113+
tempPageY = touchs.pageY;
114+
}}
115+
onTouchCancel={e => {
116+
e.stopPropagation();
117+
}}
71118
>
72119
<View className={`float_button__content ${directionClass}`}>
73-
{
74-
show ? actionListComponent : ''
75-
}
76-
<View className={`cu-avatar ${shape} ${dealSize} ${dealBgColor} ${dealShadow}`}
77-
onClick={() => {
78-
clickButton();
79-
onClick && onClick()
80-
}}>
81-
<View className={`${dealIconColor}`}
82-
style={{transform: `rotate(${rotate}deg)`, transition: 'all 0.15s linear'}}>
83-
<ClIcon iconName={icon} size={size}/>
120+
{actionListComponent}
121+
<View
122+
className={`cu-avatar ${shape} ${dealSize} ${dealBgColor} ${dealShadow}`}
123+
onClick={e => {
124+
e.stopPropagation();
125+
clickButton();
126+
onClick && onClick();
127+
}}
128+
>
129+
<View
130+
className={`${dealIconColor}`}
131+
style={{
132+
transform: `rotate(${rotate}deg)`,
133+
transition: 'all 0.15s linear'
134+
}}
135+
>
136+
<ClIcon iconName={icon} size={size} />
84137
</View>
85138
</View>
86139
</View>
87140
</View>
88141
</View>
89-
)
142+
);
90143
}
91144

92145
ClFloatButton.options = {
@@ -96,17 +149,15 @@ ClFloatButton.options = {
96149
ClFloatButton.defaultProps = {
97150
move: false,
98151
open: true,
99-
icon: "add",
100-
bgColor: "blue",
152+
icon: 'add',
153+
bgColor: 'blue',
101154
iconColor: undefined,
102-
direction: "vertical",
103-
onClick: () => {
104-
},
155+
direction: 'vertical',
156+
onClick: () => {},
105157
shadow: true,
106-
onActionClick: index => {
107-
},
158+
onActionClick: index => {},
108159
actionList: [],
109-
size: "normal",
110-
shape: "round",
160+
size: 'normal',
161+
shape: 'round',
111162
closeWithShadow: false
112163
} as IProps;

‎src/components/message/index.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.cu-cl-message {
2+
position: fixed;
3+
width: 100vw;
4+
top: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
z-index: 99;
9+
&__conetent {
10+
width: 100%;
11+
}
12+
}

0 commit comments

Comments
 (0)