Skip to content

Commit 6d70c01

Browse files
author
vikasrohit
committed
Merge pull request #37 from reynard2007/Task_12_1
Task 12 1
2 parents 6296da2 + 5377c39 commit 6d70c01

21 files changed

+452
-208
lines changed

‎components/Dropdown/Dropdown.jsx‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
'use strict'
2-
31
require('./Dropdown.scss')
4-
const React = require('react')
52

6-
const Dropdown = {
7-
getInitialState() {
8-
return { isHidden: true }
9-
},
3+
import React, { Component } from 'react'
4+
5+
class Dropdown extends Component {
6+
constructor(props) {
7+
super(props)
8+
9+
this.state = { isHidden: true }
10+
11+
this.onClickOutside = this.onClickOutside.bind(this)
12+
this.onClick = this.onClick.bind(this)
13+
this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
14+
}
15+
1016
onClickOutside(evt) {
1117
let currNode = evt.target
1218
let isDropdown = false
@@ -18,34 +24,42 @@ const Dropdown = {
1824
}
1925

2026
currNode = currNode.parentNode
27+
28+
if(!currNode.tagName)
29+
break
2130
} while(currNode.tagName)
2231

2332
if(!isDropdown) {
2433
this.setState({ isHidden: true })
2534
}
26-
},
35+
}
36+
2737
onClick(evt) {
2838
const dropdownClicked = new Event('dropdownClicked')
2939

3040
document.dispatchEvent(dropdownClicked)
3141

3242
this.setState({ isHidden: !this.state.isHidden })
3343
evt.stopPropagation()
34-
},
44+
}
45+
3546
onClickOtherDropdown() {
3647
this.setState({ isHidden: true })
37-
},
48+
}
49+
3850
componentDidMount() {
3951
document.removeEventListener('click', this.onClickOutside)
4052
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
4153

4254
document.addEventListener('click', this.onClickOutside)
4355
document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
44-
},
56+
}
57+
4558
componentWillUnmount() {
4659
document.removeEventListener('click', this.onClickOutside)
4760
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
48-
},
61+
}
62+
4963
render() {
5064
const pointerShadow = this.props.pointerShadow
5165
const noPointer = this.props.noPointer
@@ -70,14 +84,24 @@ const Dropdown = {
7084

7185
return (
7286
<div className="dropdown-wrap" onClick={ this.onClick } ref="Dropdown">
73-
{ this.props.children[0] }
87+
{
88+
this.props.children.map((child) => {
89+
if(child.props.className.indexOf('dropdown-menu-header') > -1)
90+
return child
91+
})
92+
}
7493

7594
<div className = {ndClasses}>
76-
{ this.props.children[1] }
95+
{
96+
this.props.children.map((child) => {
97+
if(child.props.className.indexOf('dropdown-menu-list') > -1)
98+
return child
99+
})
100+
}
77101
</div>
78102
</div>
79103
)
80104
}
81105
}
82106

83-
module.exports = React.createClass(Dropdown)
107+
export default Dropdown

‎components/Dropdown/Dropdown.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "work/work-includes";
1+
@import "topcoder/tc-includes";
22

33
.Dropdown {
44
margin-top: 30px;

‎components/Dropdown/DropdownExamples.jsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
'use strict'
2-
31
require('./DropdownExamples.scss')
4-
const Dropdown = require('./Dropdown.jsx')
5-
const React = require('react')
2+
3+
import Dropdown from './Dropdown'
4+
import React from 'react'
5+
66
const items = [
77
'Review',
88
'Web Arena',
@@ -11,7 +11,7 @@ const items = [
1111

1212
const DropdownExamples = {
1313
render() {
14-
const dom = (
14+
return (
1515
<section>
1616
<div className="dropdown-example full-width">
1717
<Dropdown pointerShadow>
@@ -93,8 +93,6 @@ const DropdownExamples = {
9393

9494
</section>
9595
)
96-
97-
return dom
9896
}
9997
}
10098

‎components/ExampleNav/ExampleNavContainer.coffee‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ navs =
99
'UserDropdownMenuExamples',
1010
'QuickLinksExample',
1111
'SearchSuggestionsExamples',
12-
'SearchBarExample'
12+
'SearchBarExample',
13+
'NavbarExample'
1314
]
1415
FileUploader: [
1516
'FileUploaderContainerExamples'

‎components/Navbar/Navbar.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
require('./Navbar.scss')
2+
3+
import MenuBar from '../MenuBar/MenuBar'
4+
import React, { Component } from 'react'
5+
import SearchBar from '../SearchBar/SearchBar'
6+
import QuickLinks from '../QuickLinks/QuickLinks'
7+
import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
8+
9+
const primaryNavigationItems = [
10+
{img: '../components/MenuBar/nav-community.svg', text: 'Community', link: 'javascript:;'},
11+
{img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: 'javascript:;', selected: true},
12+
{img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: 'javascript:;'}
13+
]
14+
15+
class Navbar extends Component {
16+
render() {
17+
return (
18+
<div className="Navbar flex middle space-between">
19+
<div className="topcoder-logo"></div>
20+
<div className="search-bar-wrap">
21+
<div className="icon-placeholder"></div>
22+
<SearchBar />
23+
</div>
24+
<MenuBar items={primaryNavigationItems} mobileBreakPoint={767} orientation="horizontal" />
25+
<div className="collapse-group">
26+
<div className="icon-placeholder"></div>
27+
<div className="quick-links-wrap"><QuickLinks /></div>
28+
<UserDropdownMenu username="vic-tor" />
29+
</div>
30+
</div>
31+
)
32+
}
33+
}
34+
35+
export default Navbar

‎components/Navbar/Navbar.scss‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
@import "topcoder/tc-includes";
2+
3+
$navbar-bg: #FAFAFB;
4+
$border-color: #CFCFD2;
5+
$placeholder-bg: #B47DD6;
6+
7+
/* Breakpoints - update as necessary */
8+
$mobile: 768px;
9+
$super-wide: 1376px;
10+
11+
.Navbar {
12+
height: 60px;
13+
background-color: $navbar-bg;
14+
border-bottom: 1px solid $border-color;
15+
padding: 10px 20px;
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
width: 100%;
20+
21+
@media screen and (max-width: $mobile) {
22+
height: 40px;
23+
padding-top: 0;
24+
padding-bottom: 0;
25+
}
26+
27+
.topcoder-logo {
28+
width: 56px;
29+
height: 24px;
30+
background-color: $placeholder-bg;
31+
margin-right: 40px;
32+
flex: 0 0 auto;
33+
34+
@media screen and (min-width: $super-wide) {
35+
width: 155px;
36+
}
37+
38+
@media screen and (max-width: $mobile) {
39+
width: 40px;
40+
margin-right: 15px;
41+
order: 1;
42+
}
43+
}
44+
45+
.search-bar-wrap {
46+
flex: 1 1 auto;
47+
margin-right: 35px;
48+
49+
@media screen and (min-width: $super-wide) {
50+
margin-right: 32px;
51+
}
52+
53+
@media screen and (max-width: $mobile) {
54+
flex: 0 0 60px;
55+
order: 2;
56+
background-color: $accent-gray;
57+
width: 60px;
58+
height: 40px;
59+
display: flex;
60+
margin-right: 10px;
61+
}
62+
63+
.icon-placeholder {
64+
display: none;
65+
66+
@media screen and (max-width: $mobile) {
67+
display: block;
68+
height: 25px;
69+
width: 25px;
70+
background-color: $placeholder-bg;
71+
margin: auto;
72+
}
73+
}
74+
75+
.SearchBar {
76+
margin-right: 45px;
77+
max-width: 789px;
78+
79+
@media screen and (max-width: $mobile) {
80+
display: none;
81+
}
82+
}
83+
}
84+
85+
.MenuBar {
86+
margin-right: 30px;
87+
88+
@media screen and (max-width: $mobile) {
89+
order: 1;
90+
margin-right: 7px;
91+
}
92+
93+
&.horizontal li {
94+
position: relative;
95+
96+
a {
97+
@media screen and (max-width: $mobile) {
98+
padding-bottom: 0;
99+
position: absolute;
100+
top: 50%;
101+
transform: translateY(-50%);
102+
}
103+
}
104+
}
105+
}
106+
107+
.collapse-group {
108+
flex: 0 0 auto;
109+
position: relative;
110+
111+
@media screen and (max-width :$mobile) {
112+
width: 40px;
113+
height: 40px;
114+
order: 3;
115+
cursor: pointer;
116+
}
117+
118+
.icon-placeholder {
119+
120+
@media screen and (max-width: $mobile) {
121+
display: block;
122+
height: 24px;
123+
width: 24px;
124+
background-color: $placeholder-bg;
125+
position: absolute;
126+
top: 50%;
127+
left: 50%;
128+
transform: translate(-50%, -50%);
129+
}
130+
}
131+
132+
.quick-links-wrap {
133+
margin-right: 30px;
134+
display: inline-block;
135+
vertical-align: middle;
136+
137+
@media screen and (max-width: $mobile) {
138+
display: none;
139+
}
140+
141+
.Dropdown {
142+
right: -46px;
143+
top: 10px;
144+
}
145+
}
146+
147+
.UserDropdownMenu {
148+
flex-shrink: 0;
149+
background-color: transparent;
150+
151+
@media screen and (max-width: $mobile) {
152+
display: none;
153+
}
154+
}
155+
}
156+
}

‎components/Navbar/NavbarExample.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Navbar from './Navbar'
2+
import React from 'react'
3+
4+
const NavbarExample = () => (
5+
<Navbar />
6+
)
7+
8+
module.exports = NavbarExample

‎components/QuickLinks/QuickLinks.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
'use strict'
2-
31
require('./QuickLinks.scss')
4-
const Dropdown = require('../Dropdown/Dropdown.jsx')
5-
const React = require('react')
62

7-
import StandardListItem from '../StandardListItem/StandardListItem.jsx'
3+
import React, { Component } from 'react'
4+
import Dropdown from '../Dropdown/Dropdown'
5+
6+
import StandardListItem from '../StandardListItem/StandardListItem'
87

9-
const QuickLinks = {
8+
class QuickLinks extends Component {
109
render() {
1110
return (
1211
<div className="QuickLinks">
@@ -32,4 +31,4 @@ const QuickLinks = {
3231
}
3332
}
3433

35-
module.exports = React.createClass(QuickLinks)
34+
export default QuickLinks

0 commit comments

Comments
 (0)