{"size": 1419, "ext": "js", "max_stars_repo_path": "src/components/FormBuilder/ToolbarItem/ToolbarItem.js", "max_stars_repo_name": "warmansuganda/form-keren", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/FormBuilder/ToolbarItem/ToolbarItem.js", "max_issues_repo_name": "warmansuganda/form-keren", "max_issues_repo_issues_event_min_datetime": "2021-03-02T00:53:26.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-03T23:01:25.000Z", "max_forks_repo_path": "src/components/FormBuilder/ToolbarItem/ToolbarItem.js", "max_forks_repo_name": "warmansuganda/form-react-keren", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 24.4655172414, "max_line_length": 85, "alphanum_fraction": 0.6455250176}
import React from "react";
import classNames from "classnames";
import { DragSource } from "react-dnd";
import { connect } from "react-redux";
import { compose } from "redux";
import { addItem } from "../../../actions/formBuilderActions";

// type, spec and collect are the paramters to the DragSource HOC
const type = props => "items";

const spec = {
  beginDrag(props) {
    return {
      item: props.data.key
    };
  },
  endDrag(props, monitor, component) {
    if (!monitor.didDrop()) return; // return if not dropped in the Preview component
    props.addItem(props.data.key);
  }
};

const collect = (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  connectDragPreview: connect.dragPreview(),
  isDragging: monitor.isDragging()
});

const ToolbarItem = props => {
  const { isDragging, connectDragSource, data } = props;

  const opacity = isDragging ? 0.5 : 1;
  const backgroundColor = isDragging ? "lightgray" : "white";

  return connectDragSource(
    <li
      style={{ cursor: "pointer", opacity, backgroundColor }}
      className="list-group-item mb-1"
      onClick={() => props.addItem(props.data.key)}
    >
      <i className={classNames(data.icon, "mr-3")} />
      {data.name}
    </li>
  );
};

export default compose(
  connect(
    state => ({
      previewItems: state.formBuilder
    }),
    {
      addItem
    }
  ),
  DragSource(type, spec, collect)
)(ToolbarItem);
