Started to do animations | DO NOT USE IN PROD
diff --git a/Components/Card.js b/Components/Card.js
index bab6153..4043894 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -2,15 +2,25 @@
import Styles from '../styles/Components/card.module.css';
import react from 'react'
import { withRouter } from "next/router";
+import handleViewport from 'react-in-viewport';
class Card extends Component {
constructor(props) {
super(props);
+ this.state = {
+ shown: false
+ }
+ }
+
+ animateIn() {
+ setTimeout(() => {
+ this.setState({shown: true});
+ }, this.props.delay * 200);
}
render() {
return (
- <div className={Styles.card} style={{
+ <div className={Styles.card + " " + (this.state.shown ? Styles.shown : null)} style={{
margin: "0"
}} onClick={this.props.url ? () => { this.props.router.push(this.props.url)} : null}>
<div className={Styles.backgroundGradient} style={{
@@ -43,16 +53,46 @@
}
}
-class CardRow extends Component {
+class CardRowClass extends Component {
constructor(props) {
super(props);
+ this.state = {
+ shown: false
+ }
+ }
+
+ animate() {
+ const { inViewport } = this.props;
+ console.log(inViewport)
+ if (inViewport) {
+ this.setState({shown: true});
+ react.Children.toArray(
+ react.Children.toArray(this.props.children)[0]
+ .props.children).forEach((item) => {
+ item.ref.current.animateIn();
+ }
+ );
+ }
}
render() {
+ if (!this.state.shown) this.animate()
+ else console.log("not animating")
return (
<div className={Styles.container}>
{
react.Children.toArray(this.props.children).map((item, index) => {
+ item = <Card
+ delay={index}
+ title={item.props.title}
+ subtext={item.props.subtext}
+ wave={item.props.wave}
+ gradient={item.props.gradient}
+ icon={item.props.icon}
+ buttons={item.props.buttons}
+ buttonText={item.props.buttonText}
+ url={item.props.url}
+ />
return <div className={Styles.item} key={index}>{item}</div>
})
}
@@ -62,5 +102,6 @@
}
Card = withRouter(Card);
+const CardRow = handleViewport(CardRowClass, { rootMargin: '-1.0px' });
export { Card, CardRow };
diff --git a/Components/ClicksForms/Question.js b/Components/ClicksForms/Question.js
index 25deeab..929622d 100644
--- a/Components/ClicksForms/Question.js
+++ b/Components/ClicksForms/Question.js
@@ -6,7 +6,7 @@
super(props)
this.state = {
status: null,
- answer: this.props.type == "multichoice" ? [] : null,
+ answer: this.props.type === "multichoice" ? [] : null,
errorString: null,
}
}
@@ -71,7 +71,7 @@
}
break
case 'multichoice':
- if ( typeof answer != 'object' ) {
+ if ( typeof answer !== 'object' ) {
valid = null
} else if ( !answer.length ) {
valid = null
@@ -87,7 +87,7 @@
}
break
case 'fileupload', 'date', 'time':
- valid = answer != null ? true : null
+ valid = answer !== null ? true : null
break
}
this.setState({
@@ -98,7 +98,7 @@
}
render() {
- let borderColor = this.state.status == false ? this.getCol("red") : this.getCol("default");
+ let borderColor = this.state.status === false ? this.getCol("red") : this.getCol("default");
return (
<div className={Styles.questionContainer} style={{
boxShadow: `0px 0px 10px ${borderColor}`,
diff --git a/Components/Header.js b/Components/Header.js
index 7e96ba6..ff46351 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -32,7 +32,7 @@
function confetti() {
if (!isAnimating && !isDisappointmentAnimating && props.index) {
setClickTotal(clickTotal + 1);
- if (clickTotal > 0 && Math.floor(Math.random() * 3) == 0) {
+ if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
disappointment();
} else {
reward();
diff --git a/Components/Panels.js b/Components/Panels.js
index c6ae2f6..7aaa658 100644
--- a/Components/Panels.js
+++ b/Components/Panels.js
@@ -37,17 +37,17 @@
calculateValidity() {
this.children.map((item, index) => {
- if ( index > 0 && item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+ if ( index > 0 && item.props.halfSize && this.validity[index - 1] === 'half1' ) {
this.validity[index] = 'half2';
- } else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+ } else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] === 'half1' ) {
this.validity[index] = 'full';
this.validity[index - 1] = 'full';
- } else if ( item.props.halfSize && !(index == this.props.children.length - 1) ) {
+ } else if ( item.props.halfSize && !(index === this.props.children.length - 1) ) {
this.validity[index] = 'half1';
- } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half1' ) {
+ } else if ( index === this.props.children.length - 1 && this.validity[index - 1] === 'half1' ) {
this.validity[index] = 'full';
this.validity[index - 1] = 'full';
- } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half2' ) {
+ } else if ( index === this.props.children.length - 1 && this.validity[index - 1] === 'half2' ) {
this.validity[index] = 'full';
} else {
this.validity[index] = 'full';
@@ -60,9 +60,9 @@
<div className={Styles.container}>
{
this.children.map((item, index) => {
- if ( this.validity[index] == 'full' ) {
+ if ( this.validity[index] === 'full' ) {
return this.children[index]
- } else if ( this.validity[index] == 'half1' ) {
+ } else if ( this.validity[index] === 'half1' ) {
return <div key={index} className={Styles.doublePanel}>
{this.children[index]}
{this.children[index + 1]}
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 616c14a..8001481 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -19,7 +19,7 @@
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}} href="#">
<img className={Styles.icon} alt="Theme" src={"https://assets.clicks.codes/web/icons/" + (
- colorMode == 'light' ? "light-white" : "dark"
+ colorMode === 'light' ? "light-white" : "dark"
) + ".svg"} />
</a>
</>