react-dazzle/sample/components/AddWidgetDialog.jsx

The simple yet flexible dashbording solution for React

import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';

const AddWidgetDialog = ({ widgets, isModalOpen, onRequestClose, onWidgetSelect }) => {
  const widgetItems = Object.keys(widgets).map((widget, index) => (
    <div key={index} className="list-group">
      <a href="#" className="list-group-item" onClick={() => onWidgetSelect(widget)}>
        <h6 className="list-group-item-heading">{widgets[widget].title}</h6>
      </a>
    </div>
  ));
  return (
    <Modal
      className="Modal__Bootstrap modal-dialog"
      isOpen={isModalOpen}
      contentLabel=""
    >
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" onClick={onRequestClose}>
            <span aria-hidden="true">&times;</span>
            <span className="sr-only">Close</span>
          </button>
          <h4 className="modal-title">Add a widget</h4>
        </div>
        <div className="modal-body">
          <h5>Pick a widget to add</h5>
          {widgetItems}
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default" onClick={onRequestClose}>Close</button>
          <button type="button" className="btn btn-primary" onClick={onRequestClose}>Add</button>
        </div>
      </div>
    </Modal>
  );
};

AddWidgetDialog.propTypes = {
  widgets: PropTypes.object,
  isModalOpen: PropTypes.bool,
  onRequestClose: PropTypes.func,
  onWidgetSelect: PropTypes.func,
};

export default AddWidgetDialog;