react-link-group/es6/Link.js

A ReactJS component for rendering a grouping of clickable links. Clicking a link executes a callback function, passing it the id of the selected link

import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { composeThemeFromProps } from '@css-modules-theme/react';
import styles from './LinkGroup.css';

var Link = function Link(props) {
  var id = props.id,
      displayName = props.displayName,
      value = props.value,
      selected = props.selected,
      selectionCallback = props.selectionCallback;
  var extraData = '';

  if (typeof value !== 'undefined') {
    extraData = " (".concat(value, ")");
  }

  var theme = composeThemeFromProps(styles, props, {
    compose: 'Replace'
  });
  return /*#__PURE__*/React.createElement("li", {
    className: selected ? cx(theme.reactLink, theme.selected) : theme.reactLink,
    onClick: function onClick() {
      return selectionCallback(id);
    }
  }, displayName, extraData);
};

export default Link;
Link.propTypes = {
  id: PropTypes.string,
  displayName: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  selected: PropTypes.bool,
  selectionCallback: PropTypes.func.isRequired
};
Link.defaultPrps = {
  selected: false
};