Skip to content

Commit a870d57

Browse files
author
Vikas Agarwal
committed
Tech Debt fixes for Dropdown and SelectRadioGroup
1 parent 264cee3 commit a870d57

File tree

6 files changed

+217
-162
lines changed

6 files changed

+217
-162
lines changed

‎components/Dropdown/Dropdown.jsx‎

Lines changed: 29 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,45 @@
11
require('./Dropdown.scss')
22

3-
import React, { Component, PropTypes } from 'react'
3+
import React, { PropTypes } from 'react'
44
import classNames from 'classnames'
5-
6-
class Dropdown extends Component {
7-
constructor(props) {
8-
super(props)
9-
10-
this.state = { isHidden: true }
11-
12-
this.onClickOutside = this.onClickOutside.bind(this)
13-
this.onClick = this.onClick.bind(this)
14-
this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
15-
}
16-
17-
onClickOutside(evt) {
18-
let currNode = evt.target
19-
let isDropdown = false
20-
21-
do {
22-
if(currNode.className
23-
&& currNode.className.indexOf
24-
&& currNode.className.indexOf('dropdown-wrap') > -1) {
25-
isDropdown = true
26-
break
5+
import enhanceDropdown from './enhanceDropdown'
6+
7+
function Dropdown(props) {
8+
const { className, pointerShadow, noPointer, pointerLeft, isOpen, theme } = props
9+
const ddClasses = classNames('dropdown-wrap', {
10+
[`${className}`] : true,
11+
[`${ theme }`] : true
12+
})
13+
const ndClasses = classNames('Dropdown', {
14+
'pointer-shadow' : pointerShadow,
15+
'pointer-hide' : noPointer,
16+
'pointer-left' : pointerLeft,
17+
hide : !isOpen
18+
})
19+
20+
return (
21+
<div className={ ddClasses }>
22+
{
23+
props.children.map((child) => {
24+
if (child.props.className.indexOf('dropdown-menu-header') > -1)
25+
return child
26+
})
2727
}
2828

29-
currNode = currNode.parentNode
30-
31-
if(!currNode)
32-
break
33-
} while(currNode.tagName)
34-
35-
if(!isDropdown) {
36-
this.setState({ isHidden: true })
37-
}
38-
}
39-
40-
onClick(evt) {
41-
const dropdownClicked = document.createEvent('Event')
42-
dropdownClicked.initEvent('dropdownClicked', true, false)
43-
44-
document.dispatchEvent(dropdownClicked)
45-
46-
this.setState({ isHidden: !this.state.isHidden })
47-
evt.stopPropagation()
48-
}
49-
50-
onClickOtherDropdown() {
51-
this.setState({ isHidden: true })
52-
}
53-
54-
componentDidMount() {
55-
document.removeEventListener('click', this.onClickOutside)
56-
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
57-
58-
document.addEventListener('click', this.onClickOutside)
59-
document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
60-
}
61-
62-
componentWillUnmount() {
63-
document.removeEventListener('click', this.onClickOutside)
64-
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
65-
}
66-
67-
render() {
68-
const { className, pointerShadow, noPointer, pointerLeft } = this.props
69-
const ddClasses = classNames('dropdown-wrap', {
70-
[`${className}`] : true,
71-
[`${ this.props.theme }`] : true
72-
})
73-
const ndClasses = classNames('Dropdown', {
74-
'pointer-shadow' : pointerShadow,
75-
'pointer-hide' : noPointer,
76-
'pointer-left' : pointerLeft,
77-
hide : this.state.isHidden
78-
})
79-
80-
return (
81-
<div className={ ddClasses } onClick={ this.onClick } ref="Dropdown">
29+
<div className = {ndClasses}>
8230
{
83-
this.props.children.map((child) => {
84-
if (child.props.className.indexOf('dropdown-menu-header') > -1)
31+
props.children.map((child) => {
32+
if (child.props.className.indexOf('dropdown-menu-list') > -1)
8533
return child
8634
})
8735
}
88-
89-
<div className = {ndClasses}>
90-
{
91-
this.props.children.map((child) => {
92-
if (child.props.className.indexOf('dropdown-menu-list') > -1)
93-
return child
94-
})
95-
}
96-
</div>
9736
</div>
98-
)
99-
}
37+
</div>
38+
)
10039
}
10140

10241
Dropdown.propTypes = {
10342
children: PropTypes.array.isRequired
10443
}
10544

106-
export default Dropdown
45+
export default enhanceDropdown(Dropdown)

‎components/Dropdown/enhanceDropdown.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { Component } from 'react'
2+
3+
const enhanceDropdown = (CompositeComponent) => class extends Component {
4+
constructor(props) {
5+
super(props)
6+
this.state = { isOpen: false }
7+
this.handleClick = this.handleClick.bind(this)
8+
// this.onSelect = this.onSelect.bind(this)
9+
this.onClickOutside = this.onClickOutside.bind(this)
10+
this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
11+
this.refreshEventHandlers = this.refreshEventHandlers.bind(this)
12+
}
13+
14+
refreshEventHandlers() {
15+
if (this.state.isOpen) {
16+
document.addEventListener('click', this.onClickOutside)
17+
document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
18+
} else {
19+
document.removeEventListener('click', this.onClickOutside)
20+
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
21+
}
22+
}
23+
24+
handleClick() {
25+
const dropdownClicked = document.createEvent('Event')
26+
dropdownClicked.initEvent('dropdownClicked', true, false)
27+
28+
document.dispatchEvent(dropdownClicked)
29+
30+
this.setState({ isOpen: !this.state.isOpen }, () => {
31+
this.refreshEventHandlers()
32+
})
33+
}
34+
35+
// onSelect(value) {
36+
// this.handleClick()
37+
// if (this.props.onSelect) this.props.onSelect(value)
38+
// }
39+
40+
onClickOutside(evt) {
41+
let currNode = evt.target
42+
let isDropdown = false
43+
console.log('onClickOutside')
44+
45+
do {
46+
if (currNode.className
47+
&& currNode.className.indexOf
48+
&& currNode.className.indexOf('dropdown-wrap') > -1) {
49+
isDropdown = true
50+
break
51+
}
52+
53+
currNode = currNode.parentNode
54+
55+
if (!currNode)
56+
break
57+
} while (currNode.tagName)
58+
59+
if (!isDropdown) {
60+
this.setState({ isOpen: false }, () => {
61+
this.refreshEventHandlers()
62+
})
63+
}
64+
}
65+
66+
onClickOtherDropdown() {
67+
this.setState({ isOpen: false }, () => {
68+
this.refreshEventHandlers()
69+
})
70+
}
71+
72+
componentDidMount() {
73+
document.removeEventListener('click', this.onClickOutside)
74+
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
75+
76+
if (this.state.isOpen) {
77+
document.addEventListener('click', this.onClickOutside)
78+
document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
79+
}
80+
}
81+
82+
componentWillUnmount() {
83+
document.removeEventListener('click', this.onClickOutside)
84+
document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
85+
}
86+
87+
stopEventPropagation(e) {
88+
e.stopPropagation()
89+
}
90+
91+
render() {
92+
const { isOpen } = this.state
93+
return (
94+
<div onClick={ this.stopEventPropagation } className="dropdown-wrap">
95+
<CompositeComponent
96+
{ ...this.props }
97+
isOpen={isOpen}
98+
handleClick={this.handleClick}
99+
// onSelect={this.onSelect}
100+
/>
101+
</div>
102+
)
103+
}
104+
}
105+
106+
export default enhanceDropdown

‎components/Forms/images/check-white.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎components/Formsy/FormFields.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,3 +269,45 @@ a.tiled-group-item {
269269
width: 15px;
270270
}
271271
}
272+
273+
.SliderRadioGroup {
274+
margin: 25px auto 0px auto;
275+
.rc-slider-dot,
276+
.rc-slider-handle {
277+
background: $tc-white;
278+
border: 4px solid $tc-gray-10;
279+
border-radius: 18px;
280+
width: 20px;
281+
height: 20px;
282+
bottom: -7px;
283+
}
284+
285+
.rc-slider-handle {
286+
border-color: $tc-dark-blue-90;
287+
margin-left: -4px;
288+
bottom: -2px;
289+
display: none;
290+
}
291+
292+
&:not(.null-value) .rc-slider-dot-active {
293+
border: none;
294+
background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px;
295+
// bottom: -2px;
296+
// margin-left: -5px;
297+
}
298+
299+
.rc-slider-track,
300+
.rc-slider-rail {
301+
background-color: $tc-gray-10;
302+
}
303+
304+
.rc-slider-mark {
305+
top: -30px;
306+
.rc-slider-mark-text {
307+
@include tc-label-lg;
308+
line-height: 5 * $base_unit;
309+
color: $tc-gray-80;
310+
letter-spacing: 0;
311+
}
312+
}
313+
}

0 commit comments

Comments
 (0)