Skip to content

Commit

Permalink
refactor(Dropdown): use debug and objectDiff
Browse files Browse the repository at this point in the history
  • Loading branch information
@levithomason
levithomason committed May 9, 2016
1 parent b80ed65 commit 0286076
Showing 1 changed file with 62 additions and 41 deletions.
103 changes: 62 additions & 41 deletions src/modules/Dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import META from '../../utils/Meta'
import { useKeyOnly, useKeyOrValueAndKey } from '../../utils/propUtils'
import { iconPropRenderer } from '../../utils/propUtils'
import keyboardKey from '../../utils/keyboardKey'
import { makeDebugger } from '../../utils/debug'
import { objectDiff } from '../../utils/utils'

// import as Component so eslint react/prop-types recognizes Dropdown
import { default as Component } from '../../utils/AutoControlledComponent'
Expand All @@ -16,6 +18,8 @@ import DropdownItem from './DropdownItem'
import DropdownMenu from './DropdownMenu'
import Icon from '../../elements/Icon/Icon'

const debug = makeDebugger('dropdown')

const _meta = {
library: META.library.semanticUI,
name: 'Dropdown',
Expand Down Expand Up @@ -163,7 +167,7 @@ export default class Dropdown extends Component {

componentWillMount() {
if (super.componentWillMount) super.componentWillMount()
// console.debug('Dropdown.componentWillMount()')
debug('componentWillMount()')
const { open, options } = this.props
const { value } = this.state

Expand All @@ -184,21 +188,19 @@ export default class Dropdown extends Component {

componentWillReceiveProps(nextProps) {
super.componentWillReceiveProps(nextProps)
// console.debug('Dropdown.componentWillReceiveProps()')
// console.log('changed props:', _.transform(nextProps, (res, val, key) => {
// if (val !== this.props[key]) res[key] = val
// }, {}))
debug.groupCollapsed('componentDidUpdate()')
debug('changed props:', objectDiff(nextProps, this.props))
debug.groupEnd()

if (nextProps.value !== this.state.value) {
this.setValue(nextProps.value)
}
}

componentDidUpdate(prevProps, prevState) { // eslint-disable-line complexity
// console.debug('Dropdown.componentDidUpdate()')
// console.log('changed state:', _.transform(this.state, (res, val, key) => {
// if (val !== prevState[key]) res[key] = val
// }, {}))
debug.groupCollapsed('componentDidUpdate()')
debug('changed state:', objectDiff(this.state, prevState))
debug.groupEnd()

// focused / blurred
if (!prevState.focus && this.state.focus) {
Expand Down Expand Up @@ -233,7 +235,7 @@ export default class Dropdown extends Component {
}

componentWillUnmount() {
// console.debug('Dropdown.componentWillUnmount()')
debug('componentWillUnmount()')
document.removeEventListener('keydown', this.openOnArrow)
document.removeEventListener('keydown', this.openOnSpace)
document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
Expand All @@ -249,8 +251,9 @@ export default class Dropdown extends Component {
// onChange needs to receive a value
// can't rely on props.value if we are controlled
onChange = (value) => {
// console.debug('Dropdown.onChange()')
// console.log(value)
debug.groupCollapsed('onChange()')
debug(value)
debug.groupEnd()
const { onChange } = this.props
if (onChange) onChange(value)
}
Expand All @@ -262,8 +265,9 @@ export default class Dropdown extends Component {
}

moveSelectionOnKeyDown = (e) => {
// console.debug('Dropdown.moveSelectionOnKeyDown()')
// console.log(`key: ${keyboardKey.getCode(e)}`)
debug.groupCollapsed('moveSelectionOnKeyDown()')
debug(keyboardKey.getName(e))
debug.groupEnd()
switch (keyboardKey.getCode(e)) {
case keyboardKey.ArrowDown:
e.preventDefault()
Expand Down Expand Up @@ -292,7 +296,9 @@ export default class Dropdown extends Component {
}

selectItemOnEnter = (e) => {
// console.debug('Dropdown.selectItemOnEnter()')
debug.groupCollapsed('selectItemOnEnter()')
debug(keyboardKey.getName(e))
debug.groupEnd()
if (keyboardKey.getCode(e) !== keyboardKey.Enter) return
e.preventDefault()
const value = this.getSelectedValue()
Expand All @@ -302,8 +308,9 @@ export default class Dropdown extends Component {
}

closeOnDocumentClick = (e) => {
// console.debug('Dropdown.handleDocumentClick()')
// console.log(e)
debug.groupCollapsed('handleDocumentClick()')
debug(e)
debug.groupEnd()
this.close()
}

Expand All @@ -312,8 +319,9 @@ export default class Dropdown extends Component {
// ----------------------------------------

handleClick = (e) => {
// console.debug('Dropdown.handleClick()')
// console.log(e)
debug.groupCollapsed('handleClick()')
debug(e)
debug.groupEnd()
const { onClick } = this.props
if (onClick) onClick(e)
// prevent closeOnDocumentClick()
Expand All @@ -322,16 +330,17 @@ export default class Dropdown extends Component {
}

handleItemClick = (e, value) => {
// console.debug('Dropdown.handleClickItem()')
// console.log(value)
debug.groupCollapsed('handleClickItem()')
debug(value)
debug.groupEnd()
// prevent toggle() in handleClick()
e.stopPropagation()
this.setValue(value)
this.onChange(value)
}

handleFocus = (e) => {
// console.debug('Dropdown.handleFocus()')
debug('handleFocus()')
const { onFocus } = this.props
if (onFocus) onFocus(e)
this.setState({ focus: true })
Expand All @@ -343,7 +352,7 @@ export default class Dropdown extends Component {
}

handleBlur = (e) => {
// console.debug('Dropdown.handleBlur()')
debug('handleBlur()')
const { onBlur } = this.props
if (onBlur) onBlur(e)
// TODO
Expand All @@ -355,7 +364,9 @@ export default class Dropdown extends Component {
}

handleSearchChange = (e) => {
// console.debug('Dropdown.handleSearchChange()')
debug.groupCollapsed('handleSearchChange()')
debug(e.target.value)
debug.groupEnd()
// prevent propagating to this.props.onChange()
e.stopPropagation()
const { search } = this.props
Expand Down Expand Up @@ -386,15 +397,15 @@ export default class Dropdown extends Component {
}

getSelectedValue = () => {
// console.debug('Dropdown.getSelectedValue()')
debug('getSelectedValue()')
const { selectedIndex } = this.state
const options = this.getOptions()

return _.get(options, `[${selectedIndex}].value`)
}

getItemIndexByValue = (value) => {
// console.debug('Dropdown.getItemIndexByValue()')
debug('getItemIndexByValue()')
const options = this.getOptions()

return _.findIndex(options, ['value', value])
Expand All @@ -406,8 +417,9 @@ export default class Dropdown extends Component {

setValue = (value) => {
const { multiple } = this.props
// console.debug('Dropdown.setValue()')
// console.log(value)
debug.groupCollapsed('setValue()')
debug(value)
debug.groupEnd()
this.trySetState({
value,
}, {
Expand All @@ -419,8 +431,9 @@ export default class Dropdown extends Component {
}

moveSelectionBy = (offset) => {
// console.debug('Dropdown.moveSelectionBy()')
// console.log(`offset: ${offset}`)
debug.groupCollapsed('moveSelectionBy()')
debug(`offset: ${offset}`)
debug.groupEnd()
const { selectedIndex } = this.state

const options = this.getOptions()
Expand All @@ -441,10 +454,12 @@ export default class Dropdown extends Component {
// ----------------------------------------

scrollSelectedItemIntoView = () => {
// console.debug('Dropdown.scrollSelectedItemIntoView()')
debug.groupCollapsed('scrollSelectedItemIntoView()')
const menu = document.querySelector('.ui.dropdown.active.visible .menu.visible')
const item = menu.querySelector('.item.selected')
// console.log(menu, selectedItem)
debug(menu)
debug(item)
debug.groupEnd()
const isOutOfUpperView = item.offsetTop < menu.scrollTop
const isOutOfLowerView = (item.offsetTop + item.clientHeight) > menu.scrollTop + menu.clientHeight

Expand All @@ -454,8 +469,9 @@ export default class Dropdown extends Component {
}

open = () => {
// console.debug('Dropdown.open()')
// console.log(`dropdown is ${this.state.open ? 'already' : 'not yet'} open`)
debug.groupCollapsed('open()')
debug(`dropdown is ${this.state.open ? 'already' : 'not yet'} open`)
debug.groupEnd()
if (this.state.open) return
if (this.props.search) this.refs.search.focus()

Expand All @@ -468,8 +484,9 @@ export default class Dropdown extends Component {
}

close = () => {
// console.debug('Dropdown.close()')
// console.log(`dropdown is ${this.state.open ? 'already' : 'not yet'} open`)
debug.groupCollapsed('close()')
debug(`dropdown is ${!this.state.open ? 'already' : 'not yet'} closed`)
debug.groupEnd()
if (!this.state.open) return

this.trySetState({
Expand Down Expand Up @@ -515,10 +532,13 @@ export default class Dropdown extends Component {
// TODO hidden input only exists for backwards compatibility with SUI jQuery plugins
// remove once those are removed
renderHiddenInput = () => {
debug.groupCollapsed('renderHiddenInput()')
const { value } = this.state
const { name, onChange, selection } = this.props
// console.debug('Dropdown.renderHiddenInput()')
// console.log({ name, selection, value })
debug(`name: ${name}`)
debug(`selection: ${selection}`)
debug(`value: ${value}`)
debug.groupEnd()
if (!selection) return null
const _value = Array.isArray(value) ? value.join(',') : value

Expand Down Expand Up @@ -562,9 +582,10 @@ export default class Dropdown extends Component {
}

render() {
// console.debug('RENDER')
// console.log('props', this.props)
// console.log('state', this.state)
debug.groupCollapsed('render()')
debug('props', this.props)
debug('state', this.state)
debug.groupEnd()
const { dropdownClasses, menuClasses } = this.state

const {
Expand Down

0 comments on commit 0286076

Please sign in to comment.