Fakultas Ilmu Komputer UI
Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
2021
Kelas D
Justika - Pengembangan Platform untuk UMKM
Justika UMKM Legal - Frontend
Commits
4bdbccbc
Commit
4bdbccbc
authored
Apr 25, 2021
by
Shafiya Adzhani
Browse files
[GREEN] implement stepper after using mock
parent
6ef45e64
Pipeline
#72593
canceled with stages
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/Stepper/Stepper.js
View file @
4bdbccbc
import
React
from
'
react
'
import
PropTypes
from
'
prop-types
'
const
Stepper
=
({
currentPage
,
setCurrentPag
e
})
=>
{
const
Stepper
=
({
currentPage
,
handleSubmit
,
onSubmit
,
register
,
setValu
e
})
=>
{
return
(
<
div
className
=
"
flex flex-row justify-between items-center px-12 lg:px-48 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-28 pb-14
"
>
<
div
className
=
"
flex flex-col justify-center items-center pt-1 relative
"
data
-
testid
=
"
step-1
"
>
<
button
className
=
{
`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
<
form
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
input
name
=
"
page
"
type
=
"
submit
"
value
=
"
1
"
ref
=
{
register
({})}
className
=
{
`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
${
currentPage
==
1
?
`bg-white text-darkblue`
:
`bg-darkblue text-white`
}
`
}
data
-
testid
=
{
`
${
currentPage
==
1
?
`step-1-white`
:
`step-1-blue`
}
`
}
onClick
=
{()
=>
setCurrentPage
(
1
)}
>
1
<
/button
>
data
-
testid
=
{
`
${
currentPage
==
1
?
`step-1-white`
:
`step-1-blue`
}
`
}
onClick
=
{()
=>
{
setValue
(
'
page
'
,
'
1
'
)
}}
><
/input
>
<
/form
>
<
p
className
=
"
small-text text-darkblue text-center font-bold absolute top-12
"
>
Profile
<
br
><
/br> Perusahaa
n
<
/p
>
...
...
@@ -36,8 +42,13 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className
=
"
flex flex-col justify-center items-center pt-1 relative
"
data
-
testid
=
"
step-2
"
>
<
button
className
=
{
`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
<
form
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
input
name
=
"
page
"
type
=
"
submit
"
value
=
"
2
"
ref
=
{
register
({})}
className
=
{
`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${
currentPage
==
1
&&
`bg-gray-200 text-gray-400 border-gray-200`
...
...
@@ -50,17 +61,18 @@ const Stepper = ({currentPage, setCurrentPage}) => {
currentPage
==
3
&&
`bg-darkblue text-white border-darkblue`
}
`
}
data
-
testid
=
{
`
${
currentPage
==
1
?
`step-2-gray`
:
currentPage
==
2
?
`step-2-white`
:
`step-2-blue`
}
`
}
onClick
=
{()
=>
setCurrentPage
(
2
)}
>
2
<
/button
>
data
-
testid
=
{
`
${
currentPage
==
1
?
`step-2-gray`
:
currentPage
==
2
?
`step-2-white`
:
`step-2-blue`
}
`
}
onClick
=
{()
=>
{
setValue
(
'
page
'
,
'
2
'
)
}}
><
/input
>
<
/form
>
<
p
className
=
{
`small-text text-gray-400 text-center font-bold absolute top-12
${
...
...
@@ -82,18 +94,24 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className
=
"
flex flex-col justify-center items-center pt-1 relative
"
data
-
testid
=
"
step-3
"
>
<
button
className
=
{
`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
<
form
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
input
name
=
"
page
"
type
=
"
submit
"
value
=
"
3
"
className
=
{
`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${
currentPage
==
3
?
`bg-white text-darkblue border-darkblue`
:
`bg-gray-200 text-gray-400 border-gray-200`
}
`
}
data
-
testid
=
{
`
${
currentPage
==
3
?
`step-3-white`
:
`step-3-gray`
}
`
}
onClick
=
{()
=>
setCurrentPage
(
3
)}
>
3
<
/button
>
data
-
testid
=
{
`
${
currentPage
==
3
?
`step-3-white`
:
`step-3-gray`
}
`
}
onClick
=
{()
=>
{
setValue
(
'
page
'
,
'
3
'
)
}}
ref
=
{
register
({})}
><
/input
>
<
/form
>
<
p
className
=
{
`small-text text-center font-bold absolute top-12
${
...
...
@@ -109,7 +127,10 @@ const Stepper = ({currentPage, setCurrentPage}) => {
Stepper
.
propTypes
=
{
currentPage
:
PropTypes
.
number
,
setCurrentPage
:
PropTypes
.
func
,
onSubmit
:
PropTypes
.
func
,
register
:
PropTypes
.
func
,
handleSubmit
:
PropTypes
.
func
,
setValue
:
PropTypes
.
func
,
}
export
default
Stepper
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment