Cacher is the code snippet organizer for pro developers

import React, { Component } from 'react'
import { injectIntl } from 'react-intl'
import { Table } from 'react-bootstrap'
// import globalConfig from '../../../../config/global'
import numeral from 'numeral'

class RepoTable extends Component{
    makeTitle(colMapElm, prop) {
        const  {config: {sortCol, descending}, intl: {messages}} = this.props
        const sortActive = (sortCol === prop)
        return (
            (!colMapElm.sorting)?
                <span>
                    {messages[colMap[prop].intlName]}
                </span>
                :
                <span
                    className={(sortActive)? 'active sorting-title' : 'sorting-title'}
                    onClick={(e) => {
                        colMapElm.sorting.onClick(e, prop)
                    }}
                >
                    {messages[colMapElm.intlName]}
                    {
                        (sortActive)?
                            (descending)?
                                <span>{' \u25B2'}</span>
                                :
                                <span>{' \u25BC'}</span>
                            :
                            <span>{' \u25BD'}</span>
                    }
                </span>

        )
    }

    makeFilter(colMapElm, prop) {
        return (
            (colMapElm.filter)?
                <div className="filter">
                    <input
                        onChange={(e) => colMapElm.filter.onChange(e, prop)}
                    />
                </div>
                :
                null
        )
    }

    makeTHNode(prop, colMapElm) {
        const { config: {hasIndex} } = this.props
        let inlineStyle = null
        let classStyle = colMapElm.align || 'text-right'

        if(hasIndex && prop === 'firstColIndex') {
            inlineStyle = {
                width: 45
            }
        }

        return (
            <th className={(colMapElm.sorting)?`${classStyle} sorting`:classStyle} style={inlineStyle} key={colMapElm.index} >
                {this.makeTitle(colMapElm, prop)}
                {this.makeFilter(colMapElm, prop)}
            </th>
        )
    }

    renderHeader() {
        const { colMap, config } = this.props
        const visibleHeaders = []

        for(let prop in colMap) {
            const colMapElm = colMap[prop]
            visibleHeaders[colMapElm.index] = this.makeTHNode(prop, colMapElm, config)
        }

        return visibleHeaders
    }

    makeCell(prop, row, colMapElm) {
        let cellVal = row[prop]
        switch(colMapElm.style){
            case 'currency':
            {
                try{
                    cellVal = numeral(row[prop]).format('0,0.00')
                }catch (err) {
                    console.log('makeCell err:', err)
                    break
                }

                return (
                    (colMapElm.onCellClick) ?
                        <a onClick={() => colMapElm.onCellClick(row[prop])}>{cellVal}</a>
                        :
                        cellVal
                )
            }
            case 'image':
            {
                // <img style={{maxHeight: '80%', maxWidth: '95%'}} src={row[prop]} />
                // const url = `${globalConfig.CDN_HOST}Sugar_Smash/${row[prop]}.png`
                // <img style={{maxHeight: '100', maxWidth:'95%'}} src={require(`../../../../assets/imgs/Fishing_Game/${cellVal}`)} />
                return (
                    <img style={{maxHeight: 100, maxWidth:'95%'}} src={row[prop]} />
                )
            }
            case 'custom':
            {
                if(colMapElm.makeCell && typeof colMapElm.makeCell === 'function'){
                    return colMapElm.makeCell(cellVal, row)
                }else if(colMapElm.makeCell && typeof colMapElm.makeCell[0] === 'function'){
                    let argumentList = colMapElm.makeCell.filter((elm, index) => index !== 0)
                    argumentList.unshift(row)
                    argumentList.unshift(cellVal)
                    return colMapElm.makeCell[0](...argumentList)
                }else {
                    return cellVal
                }
            }
            default:
            {
                return (
                    (colMapElm.onCellClick) ?
                        <a onClick={() => colMapElm.onCellClick(cellVal)}>{cellVal}</a>
                        :
                        cellVal
                )
            }
        }
    }

    renderRows() {
        const { colMap, config: { hasIndex }, datas } = this.props
        const visibleRows = []
        const cellNum = Object.keys(colMap).length

        datas.forEach((row, index) => {
            const visibleCells = []

            // reset
            for(let i=0; i<cellNum; i++){
                visibleCells[i] = (
                    <td key={i} className={'text-right'} />
                )
            }

            for(let prop in row) {
                const colMapElm = colMap[prop]

                if(colMapElm) {
                    let classStyle = colMapElm.align || 'text-right'
                    visibleCells[colMapElm.index] = (
                        <td key={colMapElm.index}
                            className={classStyle}>
                            {(row[prop] !== null)?
                                this.makeCell(prop, row, colMapElm)
                                :
                                ''
                            }
                        </td>
                    )
                }
            }
            if(hasIndex) {
                let classStyle = ''
                if(colMap.firstColIndex && colMap.firstColIndex.align){
                   classStyle = colMap.firstColIndex.align || 'text-right'
                }

                visibleCells[0] = (
                    <td className={classStyle + " text-gray-d1"} key={0} >{index + 1}</td>
                )
            }
            visibleRows[index] = (
                <tr key={index}>
                    {visibleCells}
                </tr>
            )
        })
        return visibleRows
    }

    render() {
        const { config: {addClass} } = this.props
        let baseClass = ['repo-table']
        const tableClassList = (addClass) ? baseClass.concat(addClass) : baseClass
        const tableClass = tableClassList.join(' ')

        return (
            <table className={tableClass}>
                <thead>
                    <tr>
                        {this.renderHeader()}
                    </tr>
                </thead>
                <tbody>
                    {this.renderRows()}
                </tbody>
                {this.props.children}
            </table>
        )
    }
}

export default injectIntl(RepoTable)