-
Notifications
You must be signed in to change notification settings - Fork 69
/
page-title.js
99 lines (89 loc) · 2.21 KB
/
page-title.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import styled, { withTheme } from 'styled-components';
import TetherComponent from '../../src/react-tether';
import Target from './target';
import Tooltip from './tooltip';
import type { Theme } from './theme';
const Wrapper = styled.div`
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
padding-bottom: 8rem;
`;
const Title = styled.h1`
color: ${({ theme }) => theme.lightText};
font-family: ${({ theme }) => theme.font};
letter-spacing: -4px;
word-spacing: 0.5rem;
margin: 1rem;
font-size: 3rem;
display: inline-block;
`;
type PageTitleProps = {
children: React.Node,
theme: Theme,
};
class PageTitle extends React.Component<PageTitleProps> {
constructor(props) {
super(props);
this.state = {
count: 0,
interval: null,
};
this.incrementCount = this.incrementCount.bind(this);
}
sides = ['middle left', 'top center', 'middle right', 'top center'];
direction(tetherString) {
return tetherString.match(/left|top|right/)[0];
}
incrementCount() {
this.setState(state => ({
count: state.count >= 3 ? 0 : state.count + 1,
}));
}
componentDidMount() {
const interval = setInterval(() => {
this.incrementCount();
}, 3000);
this.setState(() => ({
interval,
}));
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
render() {
const { children } = this.props;
const side =
window.innerWidth > 750 ? this.sides[this.state.count] : 'top center';
return (
<Wrapper>
<TetherComponent
attachment={side}
constraints={[
{
to: 'scrollParent',
attachment: 'together',
},
]}
renderTarget={ref => (
<Target
ref={ref}
height="100"
width="100"
color={this.props.theme.colors[this.state.count]}
/>
)}
renderElement={ref => (
<Tooltip ref={ref} side={this.direction(side)}>
<Title>{children}</Title>
</Tooltip>
)}
/>
</Wrapper>
);
}
}
export default withTheme(PageTitle);