@nomios/web-uikit/dist/components/type-group/type-option/TypeOption.js

Nomios' living web UIKit

import _pick from "lodash/pick";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './TypeOption.css';
const INPUT_PROPS = ['id', 'name', 'value', 'defaultValue', 'onClick', 'onChange', 'onInput', 'onFocus', 'onBlur'];

class TypeOption extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "handleInputChange", () => {
      this.props.onSelect && this.props.onSelect(this.props.id);
    });
  }

  render() {
    const {
      label,
      groupName,
      children,
      selected,
      badge,
      selectable,
      className
    } = this.props;
    const labelClasses = classNames(styles.label, selectable && styles.selectable, !label && styles.noLabel);

    const inputProps = _pick(this.props, INPUT_PROPS);

    return React.createElement("div", {
      className: classNames(styles.container, className)
    }, React.createElement("label", {
      className: labelClasses
    }, React.createElement("input", Object.assign({
      className: styles.input,
      type: "radio",
      name: groupName,
      checked: selected,
      disabled: !selectable,
      onChange: this.handleInputChange
    }, inputProps)), React.createElement("div", {
      className: styles.circle
    }, badge && React.createElement("span", {
      className: styles.badge
    }, badge), children), label && React.createElement("span", null, label, " ")));
  }

}

TypeOption.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]).isRequired,
  groupName: PropTypes.string,
  className: PropTypes.string,
  selectable: PropTypes.bool,
  selected: PropTypes.bool,
  onSelect: PropTypes.func,
  badge: PropTypes.element,
  label: PropTypes.string,
  id: PropTypes.string
};
TypeOption.defaultProps = {
  selectable: true,
  selected: false
};
export default TypeOption;