tin-react-components/src/Button/index.js

All components used for Omadi apps

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './style.css'
/**
 * Component to allow for basic click actions
 * @author: Jason Baddley
 */
class Button extends Component {
  constructor (props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick (e) {
    const { onClick, log, allowLogging } = this.props
    if (onClick) {
      onClick(e)
    }
    if (allowLogging && log) {
      log('Button', 'handleClick', e, 'info')
    }
  }
  render () {
    const { onClick, type = 'primary', text, children } = this.props
    const buttonClasses = classnames('button', `${type}`)
    return (
      <button className={buttonClasses} onClick={onClick}>
        {text}
        {children}
      </button>
    )
  }
}

Button.propTypes = {
  /**
   * Function whose only argument the event
   * as an object with the following argument structure:
   * @structure:
   * {
   *      target: 'BUTTON ELEMENT
   * }
   */
  onClick: PropTypes.func.isRequired,
  /**
   * Any node or nodes
   */
  children: PropTypes.array,
  /**
   * Label text.
   */
  text: PropTypes.string,
  /**
   * Type of button
   * @default: primary
   * @options: primary,secondary,disabled,warning,danger
   */
  type: PropTypes.string,
  /**
   * Function that allows for advanced logging.
   * @arguments:
   * [
   *      {
   *          type: 'string',
   *          name: 'componentName',
   *          description: 'Name of component',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'methodName',
   *          description: 'Name of method fired',
   *
   *      },
   *      {
   *          type: 'object',
   *          name: 'event',
   *          description: 'The data to be logged',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'type',
   *          description: 'Type of log',
   *          options: ['error', 'warning', 'info', 'debug']
   *      }
   * ]
   */
  log: PropTypes.func,
  /**
   * Flag to indicate whether to log events or not
   */
  allowLogging: PropTypes.bool

}

export default Button