Skip to content

Commit d792336

Browse files
qisi007qisi007
committed
add: map page
1 parent 6847c2d commit d792336

File tree

6 files changed

+221
-3
lines changed

6 files changed

+221
-3
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"react-dev-utils": "^10.2.1",
6666
"react-dom": "^16.13.1",
6767
"react-grid-layout": "^1.1.1",
68+
"react-magic": "^0.2.3",
6869
"react-markdown": "^5.0.3",
6970
"react-redux": "^7.2.1",
7071
"react-router": "^5.2.0",

‎src/config/home_config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,9 @@ export const MENU_LIST: NavItem[] = [
7777
{
7878
name: '富文本编辑器',
7979
key: 'markdown'
80+
},
81+
{
82+
name: '内置动画',
83+
key: 'animation'
8084
}
8185
]

‎src/pages/home/child/animation.tsx‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, css } from 'aphrodite';
3+
import * as animations from 'react-magic/lib';
4+
interface Props {
5+
6+
}
7+
8+
interface State {
9+
isPlaying: any
10+
magicClass: any
11+
}
12+
13+
const root: any = {
14+
magicAni: {
15+
backgroundColor: '#FF7374',
16+
width: '100px',
17+
height: '100px',
18+
position: 'absolute',
19+
borderRadius: '3px',
20+
textAlign: 'center',
21+
color: '#fff',
22+
left: '60%',
23+
top: '100px'
24+
},
25+
cssOptions: {
26+
width: '50%',
27+
fontFamily: '"SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif',
28+
color: '#52616A',
29+
margin: '0 0 0 20px'
30+
},
31+
title: {
32+
position: 'relative',
33+
left: '10%'
34+
},
35+
chunk: {
36+
padding: '1em 0 0 0',
37+
left: '10%',
38+
clear: 'both'
39+
},
40+
h2: {
41+
// marginTop: '110px',
42+
marginBottom: '5px',
43+
fontWeight: 400
44+
}
45+
}
46+
const styles = StyleSheet.create({
47+
btnDefault: {
48+
fontSize: 16,
49+
display: 'block',
50+
float: 'left',
51+
margin: '10px 10px 10px 0',
52+
padding: '12px 18px',
53+
background: '#fff',
54+
border: '2px solid #C9D6DE',
55+
color: '#52616A',
56+
borderRadius: '4px',
57+
cursor: 'pointer'
58+
},
59+
btnHover: {
60+
':hover': {
61+
background: '#52616A',
62+
color: '#fff',
63+
}
64+
}
65+
});
66+
67+
const PVaule = [
68+
[
69+
'magic', 'twisterInDown', 'twisterInUp', 'swap'
70+
], [
71+
'puffIn', 'puffOut', 'vanishIn', 'vanishOut'
72+
], [
73+
'openDownLeft', 'openDownLeftReturn', 'openDownRight', 'openDownRightReturn', 'openUpLeft', 'openUpLeftReturn', 'openUpRight', 'openUpRightReturn'
74+
], [
75+
'openDownLeftOut', 'openDownRightOut', 'openUpLeftOut', 'openUpRightOut'
76+
], [
77+
'perspectiveDown', 'perspectiveDownReturn', 'perspectiveLeft', 'perspectiveLeftReturn', 'perspectiveRight', 'perspectiveRightReturn', 'perspectiveUp', 'perspectiveUpReturn'
78+
],[
79+
'rotateDownIn','rotateDownOut','rotateLeftIn','rotateLeftOut','rotateRightIn','rotateRightOut','rotateUpIn','rotateUpOut'
80+
],[
81+
'slideDown','slideDownReturn','slideLeft','slideLeftReturn','slideRight','slideRightReturn','slideUp','slideUpReturn'
82+
],[
83+
'foolishIn','foolishOut','holeIn','holeOut','swashIn','swashOut'
84+
],[
85+
'tinDownIn','tinDownOut','tinLeftIn','tinLeftOut','tinRightIn','tinRightOut','tinUpIn','tinUpOut'
86+
],[
87+
'bombLeftOut','bombRightOut'
88+
],[
89+
'boingInUp','boingOutDown'
90+
],[
91+
'spaceInDown','spaceInLeft','spaceInRight','spaceInUp','spaceOutDown','spaceOutLeft','spaceOutRight','spaceOutUp'
92+
]
93+
]
94+
export default class Animate extends Component<Props, State> {
95+
constructor(props: Props) {
96+
super(props);
97+
this.state = {
98+
isPlaying: false,
99+
magicClass: null
100+
}
101+
this.handleBtnClick = this.handleBtnClick.bind(this);
102+
}
103+
handleBtnClick(e: any) {
104+
if (this.state.isPlaying) {
105+
return;
106+
}
107+
var cssName = e.target.innerText;
108+
var ani = StyleSheet.create({
109+
magic: {
110+
animationName: animations[cssName],
111+
animationDuration: '1s'
112+
}
113+
});
114+
this.setState({
115+
isPlaying: true,
116+
magicClass: ani.magic
117+
})
118+
setTimeout(() => {
119+
this.setState({
120+
isPlaying: false,
121+
magicClass: null
122+
})
123+
}, 1000);
124+
}
125+
render() {
126+
return (
127+
<div className="animation-main">
128+
<div style={root.magicAni} className={css(this.state.magicClass)}>
129+
<h2>React<br />Magic</h2>
130+
</div>
131+
<div style={root.cssOptions}>
132+
<div style={root.chunk}>
133+
<h2 style={root.h2}>React-Magic Effects</h2>
134+
{PVaule[0].map((name) => {
135+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
136+
})}
137+
</div>
138+
<div style={root.chunk}>
139+
<h2 style={root.h2}>React-Magic Bling</h2>
140+
{PVaule[1].map((name) => {
141+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
142+
})}
143+
</div>
144+
<div style={root.chunk}>
145+
<h2 style={root.h2}>React-Magic Static Effects</h2>
146+
{PVaule[2].map((name) => {
147+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
148+
})}
149+
</div>
150+
<div style={root.chunk}>
151+
<h2 style={root.h2}>React-Magic Static Effects Out</h2>
152+
{PVaule[3].map((name) => {
153+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
154+
})}
155+
</div>
156+
<div style={root.chunk}>
157+
<h2 style={root.h2}>React-Magic Perspective</h2>
158+
{PVaule[4].map((name) => {
159+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
160+
})}
161+
</div>
162+
<div style={root.chunk}>
163+
<h2 style={root.h2}>React-Magic Rotate</h2>
164+
{PVaule[5].map((name) => {
165+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
166+
})}
167+
</div>
168+
<div style={root.chunk}>
169+
<h2 style={root.h2}>React-Magic Slide</h2>
170+
{PVaule[6].map((name) => {
171+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
172+
})}
173+
</div>
174+
<div style={root.chunk}>
175+
<h2 style={root.h2}>React-Magic Math</h2>
176+
{PVaule[7].map((name) => {
177+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
178+
})}
179+
</div>
180+
<div style={root.chunk}>
181+
<h2 style={root.h2}>React-Magic Tin</h2>
182+
{PVaule[8].map((name) => {
183+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
184+
})}
185+
</div>
186+
<div style={root.chunk}>
187+
<h2 style={root.h2}>React-Magic Bomb</h2>
188+
{PVaule[9].map((name) => {
189+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
190+
})}
191+
</div>
192+
<div style={root.chunk}>
193+
<h2 style={root.h2}>React-Magic Boing</h2>
194+
{PVaule[10].map((name) => {
195+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
196+
})}
197+
</div>
198+
<div style={root.chunk}>
199+
<h2 style={root.h2}>React-Magic Space</h2>
200+
{PVaule[11].map((name) => {
201+
return <p key={name} className={css(styles.btnDefault, styles.btnHover)} onClick={this.handleBtnClick}>{name}</p>
202+
})}
203+
</div>
204+
</div>
205+
</div>
206+
);
207+
}
208+
}

‎src/pages/home/component_factory.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import skeleton from "./child/skeleton_page";
1919
import map from "./child/map_page";
2020
import rice from "./child/rich_page";
2121
import markdown from "./child/markdown_page";
22+
import animation from "./child/animation";
2223

2324
// 页面注册(目前是按照标题对应页面，后期按照页面的唯一标识对应)
2425
const components:{[prop: string]: any} = {
@@ -29,7 +30,8 @@ const components:{[prop: string]: any} = {
2930
'骨架屏': skeleton,
3031
'地图': map,
3132
'富文本编辑器': rice,
32-
'文档': markdown
33+
'文档': markdown,
34+
'内置动画': animation,
3335
}
3436

3537
// 组件渲染工厂

‎src/styles/pages/home_child.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,4 +217,4 @@
217217
width: 1600px;
218218
height: 100vh;
219219
margin-left: 20px;
220-
}
220+
}

‎src/types/index.d.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ declare module "mobx";
22
declare module "mobx-react";
33
declare module "react-grid-layout";
44
declare module "@ant-design/charts";
5-
declare module "react-amap";
5+
declare module "react-amap";
6+
declare module "react-magic";
7+
declare module "aphrodite"
8+
declare module "react-magic/lib"

0 commit comments

Comments
 (0)