Skip to content
This repository was archived by the owner on Apr 18, 2023. It is now read-only.

Commit a502ca6

Browse files
jasminmifjasminmif
committed
Zoom in-out animation on CVV field
1 parent 06de3b5 commit a502ca6

File tree

4 files changed

+154
-106
lines changed

4 files changed

+154
-106
lines changed

‎.vscode/settings.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"prettier.singleQuote": true,
3+
"javascript.preferences.quoteStyle": "single",
4+
"prettier.tabWidth": 4
5+
}

‎src/screens/MainScreen/components/card/index.js

+21-12
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const CARDS = {
1212
mastercard: '^5[1-5]',
1313
discover: '^6011',
1414
unionpay: '^62',
15-
troy: '^9792',
15+
troy: '^9792'
1616
};
1717

1818
class Card extends Component {
@@ -57,13 +57,14 @@ class Card extends Component {
5757
}
5858
};
5959

60-
outlineElementStyle = element => element
61-
? {
62-
width: `${element.offsetWidth}px`,
63-
height: `${element.offsetHeight}px`,
64-
transform: `translateX(${element.offsetLeft}px) translateY(${element.offsetTop}px)`
65-
}
66-
: null;
60+
outlineElementStyle = element =>
61+
element
62+
? {
63+
width: `${element.offsetWidth}px`,
64+
height: `${element.offsetHeight}px`,
65+
transform: `translateX(${element.offsetLeft}px) translateY(${element.offsetTop}px)`
66+
}
67+
: null;
6768

6869
componentDidUpdate(prevProps) {
6970
const { currentFocusedElm } = this.props;
@@ -291,13 +292,21 @@ class Card extends Component {
291292
className="card-item__bg"
292293
/>
293294
</div>
294-
<div className="card-item__band"/>
295+
<div className="card-item__band" />
295296
<div className="card-item__cvv">
296297
<div className="card-item__cvvTitle">CVV</div>
297298
<div className="card-item__cvvBand">
298-
{cardCvv.map((val, index) => (
299-
<span key={index}>*</span>
300-
))}
299+
<TransitionGroup>
300+
{cardCvv.map((val, index) => (
301+
<CSSTransition
302+
classNames="zoom-in-out"
303+
key={index}
304+
timeout={250}
305+
>
306+
<span>*</span>
307+
</CSSTransition>
308+
))}
309+
</TransitionGroup>
301310
</div>
302311
<div className="card-item__type">
303312
<img

‎src/screens/MainScreen/components/card/styles.scss

+34
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,10 @@
379379
@media screen and (max-width: 360px) {
380380
margin-bottom: 15px;
381381
}
382+
383+
span {
384+
display: inline-block;
385+
}
382386
}
383387
}
384388

@@ -441,3 +445,33 @@
441445
.slide-fade-up-exit-done {
442446
opacity: 0;
443447
}
448+
449+
.zoom-in-out-enter {
450+
transform: translateY(6px) scale(3.5);
451+
transition-delay: 0.1s;
452+
filter: blur(0.4px);
453+
opacity: 0;
454+
}
455+
456+
.zoom-in-out-enter-active {
457+
transition: all 250ms ease-in-out;
458+
transform: translateY(0px) scale(1);
459+
filter: blur(0px);
460+
opacity: 1;
461+
}
462+
463+
.zoom-in-out-enter-done {
464+
opacity: 1;
465+
}
466+
467+
.zoom-in-out-exit {
468+
opacity: 1;
469+
}
470+
471+
.zoom-in-out-exit-active {
472+
transition: all 150ms ease-in-out;
473+
transition-delay: 0.1s;
474+
transform: translateY(4px) scale(2.3);
475+
filter: blur(0.4px);
476+
position: relative;
477+
}

‎src/screens/MainScreen/index.js

+94-94
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,109 @@
1-
import React, { useState, useRef } from 'react';
2-
import CForm from './components/form';
3-
import Card from './components/card';
1+
import React, { useState, useRef } from "react";
2+
import CForm from "./components/form";
3+
import Card from "./components/card";
44

5-
const defaultCardNo = '#### #### #### ####';
6-
const defaultCardHolderName = 'FULL NAME';
7-
const defaultCardMonth = '';
8-
const defaultCardYear = '';
9-
const defaultCardCvv = '';
5+
const defaultCardNo = "#### #### #### ####";
6+
const defaultCardHolderName = "FULL NAME";
7+
const defaultCardMonth = "";
8+
const defaultCardYear = "";
9+
const defaultCardCvv = "";
1010

1111
const MainScreen = () => {
12-
const initialState = {
13-
cardNumber: defaultCardNo,
14-
cardHolder: defaultCardHolderName,
15-
cardMonth: defaultCardMonth,
16-
cardYear: defaultCardYear,
17-
cardCvv: defaultCardCvv,
18-
isCardFlipped: false,
19-
currentFocusedElm: null
20-
};
21-
const [state, setState] = useState(initialState);
12+
const initialState = {
13+
cardNumber: defaultCardNo,
14+
cardHolder: defaultCardHolderName,
15+
cardMonth: defaultCardMonth,
16+
cardYear: defaultCardYear,
17+
cardCvv: defaultCardCvv,
18+
isCardFlipped: false,
19+
currentFocusedElm: null
20+
};
21+
const [state, setState] = useState(initialState);
2222

23-
const updateStateValue = ({ name, value }) => {
24-
setState({
25-
...state,
26-
[name]: value || initialState[name]
27-
});
28-
};
23+
const updateStateValue = ({ name, value }) => {
24+
setState({
25+
...state,
26+
[name]: value || initialState[name]
27+
});
28+
};
2929

30-
const {
31-
cardNumber,
32-
cardHolder,
33-
cardMonth,
34-
cardYear,
35-
cardCvv,
36-
isCardFlipped
37-
} = state;
38-
let { currentFocusedElm } = state;
30+
const {
31+
cardNumber,
32+
cardHolder,
33+
cardMonth,
34+
cardYear,
35+
cardCvv,
36+
isCardFlipped
37+
} = state;
38+
let { currentFocusedElm } = state;
3939

40-
// References for the Form Inputs
41-
let formFieldsRefObj = {
42-
cardNumber: useRef(),
43-
cardHolder: useRef(),
44-
cardDate: useRef(),
45-
cardCvv: useRef()
46-
};
40+
// References for the Form Inputs
41+
let formFieldsRefObj = {
42+
cardNumber: useRef(),
43+
cardHolder: useRef(),
44+
cardDate: useRef(),
45+
cardCvv: useRef()
46+
};
4747

48-
let onCardElementClick = key => {
49-
focusFormFieldByKey(key);
50-
};
48+
let onCardElementClick = key => {
49+
focusFormFieldByKey(key);
50+
};
5151

52-
let focusFormFieldByKey = key => {
53-
formFieldsRefObj[key].current.focus();
54-
};
52+
let focusFormFieldByKey = key => {
53+
formFieldsRefObj[key].current.focus();
54+
};
5555

56-
// This are the references for the Card DIV elements
57-
let cardElementsRef = {
58-
cardNumber: null,
59-
cardHolder: null,
60-
cardDate: null
61-
};
56+
// This are the references for the Card DIV elements
57+
let cardElementsRef = {
58+
cardNumber: null,
59+
cardHolder: null,
60+
cardDate: null
61+
};
6262

63-
let onCardFormInputFocus = (_event, inputName) => {
64-
setState({
65-
...state,
66-
currentFocusedElm: cardElementsRef[inputName]
67-
});
68-
};
63+
let onCardFormInputFocus = (_event, inputName) => {
64+
setState({
65+
...state,
66+
currentFocusedElm: cardElementsRef[inputName]
67+
});
68+
};
6969

70-
let onCardInputBlur = event => {
71-
setState({
72-
...state,
73-
currentFocusedElm: null
74-
});
75-
};
70+
let onCardInputBlur = event => {
71+
setState({
72+
...state,
73+
currentFocusedElm: null
74+
});
75+
};
7676

77-
return (
78-
<div className="wrapper">
79-
<CForm
80-
onUpdateStateValue={updateStateValue}
81-
cardNumberRef={formFieldsRefObj.cardNumber}
82-
cardHolderRef={formFieldsRefObj.cardHolder}
83-
cardDateRef={formFieldsRefObj.cardDate}
84-
onCardInputFocus={onCardFormInputFocus}
85-
onCardInputBlur={onCardInputBlur}
86-
>
87-
<Card
88-
cardNumber={cardNumber}
89-
cardHolder={cardHolder}
90-
cardMonth={cardMonth}
91-
cardYear={cardYear}
92-
cardCvv={cardCvv}
93-
isCardFlipped={isCardFlipped}
94-
currentFocusedElm={currentFocusedElm}
95-
onCardElementClick={onCardElementClick}
96-
cardNumberRef={node =>
97-
(cardElementsRef['cardNumber'] = node)
98-
}
99-
cardHolderRef={node =>
100-
(cardElementsRef['cardHolder'] = node)
101-
}
102-
cardDateRef={node => (cardElementsRef['cardDate'] = node)}
103-
></Card>
104-
</CForm>
105-
</div>
106-
);
77+
return (
78+
<div className="wrapper">
79+
<CForm
80+
onUpdateStateValue={updateStateValue}
81+
cardNumberRef={formFieldsRefObj.cardNumber}
82+
cardHolderRef={formFieldsRefObj.cardHolder}
83+
cardDateRef={formFieldsRefObj.cardDate}
84+
onCardInputFocus={onCardFormInputFocus}
85+
onCardInputBlur={onCardInputBlur}
86+
>
87+
<Card
88+
cardNumber={cardNumber}
89+
cardHolder={cardHolder}
90+
cardMonth={cardMonth}
91+
cardYear={cardYear}
92+
cardCvv={cardCvv}
93+
isCardFlipped={isCardFlipped}
94+
currentFocusedElm={currentFocusedElm}
95+
onCardElementClick={onCardElementClick}
96+
cardNumberRef={node =>
97+
(cardElementsRef["cardNumber"] = node)
98+
}
99+
cardHolderRef={node =>
100+
(cardElementsRef["cardHolder"] = node)
101+
}
102+
cardDateRef={node => (cardElementsRef["cardDate"] = node)}
103+
></Card>
104+
</CForm>
105+
</div>
106+
);
107107
};
108108

109109
export default MainScreen;

0 commit comments

Comments
 (0)