Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 88fa6b7

Browse files
urwithaturwithat
authored
Merge pull request #157 from topcoder-platform/feature/interview-scheduler-gui
Feature/interview scheduler gui
2 parents 044fc84 + 8d52552 commit 88fa6b7

File tree

28 files changed

+1295
-111
lines changed

28 files changed

+1295
-111
lines changed

‎package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@
6060
"axios": "^0.21.0",
6161
"classnames": "^2.2.6",
6262
"express": "^4.17.1",
63+
"faker": "^5.5.3",
6364
"final-form": "^4.20.1",
65+
"final-form-arrays": "^3.0.2",
6466
"immutability-helper": "^3.1.1",
6567
"lodash": "^4.17.20",
6668
"moment": "^2.29.1",
@@ -71,6 +73,7 @@
7173
"react-datepicker": "^3.4.1",
7274
"react-dom": "^16.12.0",
7375
"react-final-form": "^6.5.2",
76+
"react-final-form-arrays": "^3.1.3",
7477
"react-loader-spinner": "^4.0.0",
7578
"react-outside-click-handler": "^1.3.0",
7679
"react-popper": "^2.2.3",

‎src/components/Accordion/index.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* Accordion
3+
*
4+
* An expandable item which can be used
5+
* repeatadly to form an accordion style display
6+
*/
7+
8+
import React, { useState } from "react";
9+
import PT from "prop-types";
10+
import "./styles.module.scss";
11+
12+
function Accordion(props) {
13+
const { title, sidebar, subhead, children } = props;
14+
const [isOpen, setIsOpen] = useState(false);
15+
16+
return (
17+
<div styleName="accordion">
18+
<button onClick={() => setIsOpen(!isOpen)} styleName="button">
19+
{isOpen ? (
20+
<div styleName="down-arrow" />
21+
) : (
22+
<div styleName="right-arrow" />
23+
)}
24+
<div styleName="heading">
25+
<div>
26+
<h4 styleName="title">{title}</h4>
27+
<p>{subhead}</p>
28+
</div>
29+
<p>{sidebar}</p>
30+
</div>
31+
</button>
32+
{isOpen && <div styleName="panel">{children}</div>}
33+
</div>
34+
);
35+
}
36+
37+
Accordion.propTypes = {
38+
title: PT.string,
39+
sidebar: PT.string,
40+
subhead: PT.string,
41+
children: PT.node,
42+
};
43+
44+
export default Accordion;

‎src/components/Accordion/styles.module.scss

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@import "styles/include";
2+
3+
.accordion {
4+
padding-bottom: 10px;
5+
border-bottom: 1px solid #e9e9e9;
6+
}
7+
8+
.button {
9+
cursor: pointer;
10+
width: 100%;
11+
border: none;
12+
outline: none;
13+
background-color: #fff;
14+
color: #2a2a2a;
15+
display: flex;
16+
text-align: left;
17+
flex-direction: row;
18+
justify-content: flex-start;
19+
align-items: center;
20+
padding: 15px 0 10px 0;
21+
22+
p {
23+
@include font-roboto;
24+
font-size: 14px;
25+
}
26+
}
27+
28+
.down-arrow {
29+
display: inline-block;
30+
content: '';
31+
height: 13px;
32+
width: 13px;
33+
margin-right: 16px;
34+
border-bottom: 3px solid #137D60;
35+
border-right: 3px solid #137D60;
36+
transform: rotate(45deg);
37+
}
38+
39+
.right-arrow {
40+
display: inline-block;
41+
content: '';
42+
height: 13px;
43+
width: 13px;
44+
margin-right: 16px;
45+
border-bottom: 3px solid #137D60;
46+
border-right: 3px solid #137D60;
47+
transform: rotate(-45deg);
48+
}
49+
50+
.heading {
51+
display: flex;
52+
flex-direction: row;
53+
justify-content: space-between;
54+
align-items: center;
55+
width: 100%;
56+
}
57+
58+
.title {
59+
@include font-barlow;
60+
font-weight: 600;
61+
font-size: 20px;
62+
margin: 0;
63+
padding: 0;
64+
text-transform: uppercase;
65+
}
66+
67+
.panel {
68+
padding-left: 28px;
69+
font-size: 14px;
70+
}

‎src/components/Radio/index.jsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* Radio
3+
*
4+
* A styled radio button
5+
* Used in RadioFieldGroup component
6+
*/
7+
8+
import React from "react";
9+
import PT from "prop-types";
10+
import cn from "classnames";
11+
import "./styles.module.scss";
12+
13+
function Radio(props) {
14+
return (
15+
<label styleName={cn("container", { horizontal: props.horizontal })}>
16+
<input
17+
styleName="radio-input"
18+
type={props.type}
19+
name={props.name}
20+
value={props.value}
21+
checked={props.checked}
22+
disabled={props.disabled}
23+
onBlur={props.onBlur}
24+
onFocus={props.onFocus}
25+
onChange={props.onChange}
26+
/>
27+
<span styleName="custom" />
28+
{props.label}
29+
</label>
30+
);
31+
}
32+
33+
Radio.propTypes = {
34+
onChange: PT.func,
35+
onBlur: PT.func,
36+
onFocus: PT.func,
37+
value: PT.string.isRequired,
38+
disabled: PT.bool,
39+
type: PT.string.isRequired,
40+
label: PT.string,
41+
checked: PT.bool,
42+
horizontal: PT.bool,
43+
};
44+
45+
export default Radio;

‎src/components/Radio/styles.module.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.radio-input {
2+
width: auto;
3+
height: auto;
4+
position: absolute;
5+
opacity: 0;
6+
cursor: pointer;
7+
}
8+
9+
.container {
10+
display: block;
11+
position: relative;
12+
padding-left: 35px;
13+
margin-bottom: 24px;
14+
cursor: pointer;
15+
font-size: 14px;
16+
user-select: none;
17+
18+
&.horizontal {
19+
margin-bottom: 0;
20+
display: inline-block;
21+
margin-left: 24px;
22+
}
23+
}
24+
25+
.custom {
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
height: 24px;
30+
width: 24px;
31+
background-color: #fff;
32+
border-radius: 50%;
33+
border: 1px solid #AAA;
34+
}
35+
36+
.radio-input:checked ~ .custom {
37+
background-color: #0AB88A;
38+
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
39+
}
40+
41+
.custom:after {
42+
content: "";
43+
position: absolute;
44+
display: none;
45+
}
46+
47+
.radio-input:checked ~ .custom:after {
48+
display: block;
49+
}
50+
51+
.container .custom:after {
52+
top: 5px;
53+
left: 5px;
54+
width: 12px;
55+
height: 12px;
56+
border-radius: 50%;
57+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
58+
background: white;
59+
}

‎src/components/RadioFieldGroup/index.jsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* RadioFieldGroup
3+
*
4+
* Component that takes a configuration object
5+
* and returns a group of react-final-form radio fields
6+
*/
7+
8+
import React from "react";
9+
import PT from "prop-types";
10+
import Radio from "components/Radio";
11+
import { Field } from "react-final-form";
12+
13+
function RadioFieldGroup({ name, isHorizontal, radios }) {
14+
return (
15+
<div>
16+
{radios.map((radio) => (
17+
<Field name={name} type="radio" value={radio.value}>
18+
{({ input }) => (
19+
<Radio
20+
label={radio.label}
21+
type="radio"
22+
name={input.name}
23+
value={input.value}
24+
horizontal={isHorizontal}
25+
onChange={input.onChange}
26+
onBlur={input.onBlur}
27+
onFocus={input.onFocus}
28+
checked={input.checked}
29+
/>
30+
)}
31+
</Field>
32+
))}
33+
</div>
34+
);
35+
}
36+
37+
RadioFieldGroup.propTypes = {
38+
name: PT.string.isRequired,
39+
isHorizontal: PT.bool,
40+
radios: PT.arrayOf(
41+
PT.shape({
42+
label: PT.string.isRequired,
43+
value: PT.any.isRequired,
44+
})
45+
),
46+
};
47+
48+
export default RadioFieldGroup;

0 commit comments

Comments
 (0)