Tech Debt fixes for Dropdown and SelectRadioGroup

components/Dropdown/Dropdown.jsx

@@ -1,106 +1,45 @@
 require('./Dropdown.scss')
 
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import classNames from 'classnames'
-
-class Dropdown extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { isHidden: true }
-
-    this.onClickOutside = this.onClickOutside.bind(this)
-    this.onClick = this.onClick.bind(this)
-    this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
-  }
-
-  onClickOutside(evt) {
-    let currNode = evt.target
-    let isDropdown = false
-
-    do {
-      if(currNode.className
-        && currNode.className.indexOf
-        && currNode.className.indexOf('dropdown-wrap') > -1) {
-        isDropdown = true
-        break
+import enhanceDropdown from './enhanceDropdown'
+
+function Dropdown(props) {
+  const { className, pointerShadow, noPointer, pointerLeft, isOpen, theme } = props
+  const ddClasses = classNames('dropdown-wrap', {
+    [`${className}`] : true,
+    [`${ theme }`] : true
+  })
+  const ndClasses = classNames('Dropdown', {
+    'pointer-shadow' : pointerShadow,
+    'pointer-hide'   : noPointer,
+    'pointer-left'   : pointerLeft,
+    hide             : !isOpen
+  })
+
+  return (
+    <div className={ ddClasses }>
+      {
+        props.children.map((child) => {
+          if (child.props.className.indexOf('dropdown-menu-header') > -1)
+            return child
+        })
       }
 
-      currNode = currNode.parentNode
-
-      if(!currNode)
-        break
-    } while(currNode.tagName)
-
-    if(!isDropdown) {
-      this.setState({ isHidden: true })
-    }
-  }
-
-  onClick(evt) {
-    const dropdownClicked = document.createEvent('Event')
-    dropdownClicked.initEvent('dropdownClicked', true, false)
-
-    document.dispatchEvent(dropdownClicked)
-
-    this.setState({ isHidden: !this.state.isHidden })
-    evt.stopPropagation()
-  }
-
-  onClickOtherDropdown() {
-    this.setState({ isHidden: true })
-  }
-
-  componentDidMount() {
-    document.removeEventListener('click', this.onClickOutside)
-    document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
-
-    document.addEventListener('click', this.onClickOutside)
-    document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onClickOutside)
-    document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
-  }
-
-  render() {
-    const { className, pointerShadow, noPointer, pointerLeft } = this.props
-    const ddClasses = classNames('dropdown-wrap', {
-      [`${className}`] : true,
-      [`${ this.props.theme }`] : true
-    })
-    const ndClasses = classNames('Dropdown', {
-      'pointer-shadow' : pointerShadow,
-      'pointer-hide'   : noPointer,
-      'pointer-left'   : pointerLeft,
-      hide           : this.state.isHidden
-    })
-
-    return (
-      <div className={ ddClasses } onClick={ this.onClick } ref="Dropdown">
+      <div className = {ndClasses}>
         {
-          this.props.children.map((child) => {
-            if (child.props.className.indexOf('dropdown-menu-header') > -1)
+          props.children.map((child) => {
+            if (child.props.className.indexOf('dropdown-menu-list') > -1)
               return child
           })
         }
-
-        <div className = {ndClasses}>
-          {
-            this.props.children.map((child) => {
-              if (child.props.className.indexOf('dropdown-menu-list') > -1)
-                return child
-            })
-          }
-        </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 Dropdown.propTypes = {
   children: PropTypes.array.isRequired
 }
 
-export default Dropdown
+export default enhanceDropdown(Dropdown)

components/Dropdown/enhanceDropdown.js

@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+
+const enhanceDropdown = (CompositeComponent) => class extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { isOpen: false }
+    this.handleClick = this.handleClick.bind(this)
+    // this.onSelect = this.onSelect.bind(this)
+    this.onClickOutside = this.onClickOutside.bind(this)
+    this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
+    this.refreshEventHandlers = this.refreshEventHandlers.bind(this)
+  }
+
+  refreshEventHandlers() {
+    if (this.state.isOpen) {
+      document.addEventListener('click', this.onClickOutside)
+      document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
+    } else {
+      document.removeEventListener('click', this.onClickOutside)
+      document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
+    }
+  }
+
+  handleClick() {
+    const dropdownClicked = document.createEvent('Event')
+    dropdownClicked.initEvent('dropdownClicked', true, false)
+
+    document.dispatchEvent(dropdownClicked)
+
+    this.setState({ isOpen: !this.state.isOpen }, () => {
+      this.refreshEventHandlers()
+    })
+  }
+
+  // onSelect(value) {
+  //   this.handleClick()
+  //   if (this.props.onSelect) this.props.onSelect(value)
+  // }
+
+  onClickOutside(evt) {
+    let currNode = evt.target
+    let isDropdown = false
+    console.log('onClickOutside')
+
+    do {
+      if (currNode.className
+        && currNode.className.indexOf
+        && currNode.className.indexOf('dropdown-wrap') > -1) {
+        isDropdown = true
+        break
+      }
+
+      currNode = currNode.parentNode
+
+      if (!currNode)
+        break
+    } while (currNode.tagName)
+
+    if (!isDropdown) {
+      this.setState({ isOpen: false }, () => {
+        this.refreshEventHandlers()
+      })
+    }
+  }
+
+  onClickOtherDropdown() {
+    this.setState({ isOpen: false }, () => {
+      this.refreshEventHandlers()
+    })
+  }
+
+  componentDidMount() {
+    document.removeEventListener('click', this.onClickOutside)
+    document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
+
+    if (this.state.isOpen) {
+      document.addEventListener('click', this.onClickOutside)
+      document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onClickOutside)
+    document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
+  }
+
+  stopEventPropagation(e) {
+    e.stopPropagation()
+  }
+
+  render() {
+    const { isOpen } = this.state
+    return (
+      <div onClick={ this.stopEventPropagation } className="dropdown-wrap">
+        <CompositeComponent
+          { ...this.props }
+          isOpen={isOpen}
+          handleClick={this.handleClick}
+          // onSelect={this.onSelect}
+        />
+      </div>
+    )
+  }
+}
+
+export default enhanceDropdown

components/Formsy/FormFields.scss

@@ -269,3 +269,45 @@ a.tiled-group-item {
     width: 15px;
   }
 }
+
+.SliderRadioGroup {
+  margin: 25px auto 0px auto;
+  .rc-slider-dot,
+  .rc-slider-handle {
+    background: $tc-white;
+    border: 4px solid $tc-gray-10;
+    border-radius: 18px;
+    width: 20px;
+    height: 20px;
+    bottom: -7px;
+  }
+
+  .rc-slider-handle {
+    border-color: $tc-dark-blue-90;
+    margin-left: -4px;
+    bottom: -2px;
+    display: none;
+  }
+
+  &:not(.null-value) .rc-slider-dot-active {
+    border: none;
+    background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px;
+    // bottom: -2px;
+    // margin-left: -5px;
+  }
+
+  .rc-slider-track,
+  .rc-slider-rail {
+    background-color: $tc-gray-10;
+  }
+
+  .rc-slider-mark {
+    top: -30px;
+    .rc-slider-mark-text {
+      @include tc-label-lg;
+      line-height: 5 * $base_unit;
+      color: $tc-gray-80;
+      letter-spacing: 0;
+    }
+  }
+}