Col.tsx

// @ts-nocheck
import React from 'react'
import PropTypes from 'prop-types'
import { isUndefined, omit, pick, keys, extend } from 'lodash'
import classNames from 'classnames'

import { Col as BootstrapCol } from 'reactstrap'

// Twice Smaller than Bootstrap breakpoints
const breakPoints = [
  { id: 'xl', min: 600 },
  { id: 'lg', min: 496, max: 600 },
  { id: 'md', min: 384, max: 496 },
  { id: 'sm', min: 288, max: 384 },
  { id: 'xs', max: 288 },
]

const getCurrentbreakPoint = (width, breakPoints) => {
  let output = 'xl'
  for (const bp of breakPoints) {
    if ((isUndefined(bp.min) || bp.min <= width) && (isUndefined(bp.max) || bp.max > width)) {
      output = bp.id
    }
  }
  return output
}

export class Col extends React.Component {
  static propTypes = {
    active: PropTypes.bool,

    lg: PropTypes.number,
    md: PropTypes.number,
    sm: PropTypes.number,
    xs: PropTypes.number,
    xl: PropTypes.number,

    xlH: PropTypes.number,
    lgH: PropTypes.number,
    mdH: PropTypes.number,
    smH: PropTypes.number,
    xsH: PropTypes.number,

    xlX: PropTypes.number,
    lgX: PropTypes.number,
    mdX: PropTypes.number,
    smX: PropTypes.number,
    xsX: PropTypes.number,

    xlY: PropTypes.number,
    lgY: PropTypes.number,
    mdY: PropTypes.number,
    smY: PropTypes.number,
    xsY: PropTypes.number,

    trueSize: PropTypes.object,
    children: PropTypes.node,
    className: PropTypes.string,
  }

  static defaultProps = {
    active: true,
  }

  render() {
    const { active, children, className, trueSize } = this.props
    const bsColumnProps = pick(this.props, ['xl', 'lg', 'md', 'sm', 'xs'])
    const otherProps = omit(this.props, [
      ...keys(Col.propTypes),
      'minW',
      'maxW',
      'minH',
      'maxH',
      'moved',
      'static',
      'isDraggable',
      'isResizable',
    ])
    const floatColBpId = trueSize ? getCurrentbreakPoint(trueSize.wPx, breakPoints) : 'xl'
    const floatColClasses = classNames(
      className,
      'float-col',
      'float-column',
      `float-column--size-${floatColBpId}`,
    )

    return active ? (
      <div {...otherProps} className={floatColClasses}>
        {children}
      </div>
    ) : (
      <BootstrapCol
        {...extend(bsColumnProps, otherProps)}
        className={classNames(className, 'pb-3')}
      >
        {children}
      </BootstrapCol>
    )
  }
}