stitch-ui/src/core/components/EditListItem.js

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import classNames from "classnames";

export default function EditListItem(props) {
  const givenClassName = props.className;
  const newProps = {
    ...props,
    className: classNames(
      "edit-list-item",
      {
        "edit-list-item-is-active": props.active
      },
      givenClassName
    )
  };

  const arrowClass = classNames("edit-list-item-arrow", {
    "edit-list-item-arrow-hide": !props.active,
    "edit-list-item-arrow-show": !!props.active
  });

  const children = props.children;
  delete newProps.active;
  delete newProps.children;
  return (
    <div {...newProps}>
      <div className={arrowClass}>
        <i className="fa fa-angle-right" />
      </div>
      {children}
    </div>
  );
}

EditListItem.defaultProps = {
  active: false,
  className: "",
  children: null
};

EditListItem.propTypes = {
  active: PropTypes.bool,
  className: PropTypes.string,
  children: PropTypes.any // eslint-disable-line react/forbid-prop-types
};