HOC II

enhancedSelect.jsx

import React from 'react'
import IconTips from '@client/components/icon-tips'
import { funcOrValue } from '@client/utils/tool'

import './index.scss'

const IconPrefixCls = 'block-icon'
export default SelectComponent => class extends SelectComponent {

  childStopPropagationEvent(e) {
    e.stopPropagation()
    if (e.nativeEvent.stopImmediatePropagation) {
      e.nativeEvent.stopImmediatePropagation()
    }
  }
  childRenderMultiSelect = () => {
    const { disabled, mode, emptyLabel, separator, enhancedProps } = this.props
    let { prefixCls } = this.props
    const { value } = this.state
    prefixCls += '-select-multiple'
    const outerCls = `${prefixCls}-selection enhanced-selection-wrapper`
    const hasValue = (value || []).length > 0
    const curModeProps = enhancedProps[mode] || {}
    const tooltipsProps = curModeProps.tooltips || {}
    const tipsContent = funcOrValue(tooltipsProps.content, value)

    return (
      <div className={outerCls} ref="selection" onClick={this.focusInput}>
        {
          hasValue ? (
            <ul>
              {value.map((v, k) => {
                const isError = funcOrValue(curModeProps.showErrorItem, v, value)
                return (
                  <li
                    key={k}
                    onClick={e => this.childStopPropagationEvent(e)}
                    className={isError ? 'error-item' : ''}
                  >
                    {
                      isError ? (
                        <IconTips
                          placement="top"
                          align={{ offset: [0, -10] }}
                          {...tooltipsProps}
                          content={tipsContent}
                        >
                          <span>{v.label}</span>
                        </IconTips>
                      ) : (<span>{v.label}</span>)
                    }
                    {!disabled && (
                    <i
                      className={`${prefixCls}-delete ${IconPrefixCls} ${IconPrefixCls}-cross`}
                      onClick={(e) => { this._removeHandle(k, e) }}
                    />
                 )}
                  </li>
                )
              })}
            </ul>
          ) : null
        }
        {this.renderSelect(prefixCls)}
      </div>
    )
  }
  render() {
    const WrappedElement = super.render()
    const { children, ...withoutChildrenProps } = WrappedElement.props
    const newChildren = [...children]
    newChildren[0] = this.childRenderMultiSelect()
    return React.cloneElement(WrappedElement, { ...withoutChildrenProps, children: newChildren })
  }
}