fix react-bootstrap imports

VulcanJS · Mar 11, 2022 · d44d356 · d44d356
1 parent 9b36811
commit d44d356
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 54 deletions.
diff --git a/packages/react-ui-bootstrap/components/core/Alert.jsx b/packages/react-ui-bootstrap/components/core/Alert.jsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import Alert from 'react-bootstrap/Alert';
-import { registerComponent } from 'meteor/vulcan:lib';
+import React from "react";
+import { Alert } from "react-bootstrap";
+import { registerComponent } from "meteor/vulcan:lib";
 
-const BootstrapAlert = ({ children, variant = 'danger',  ...rest }) => 
-  <Alert variant={variant} {...rest}>{children}</Alert>;
+const BootstrapAlert = ({ children, variant = "danger", ...rest }) => (
+  <Alert variant={variant} {...rest}>
+    {children}
+  </Alert>
+);
 
-registerComponent('Alert', BootstrapAlert);
+registerComponent("Alert", BootstrapAlert);
diff --git a/packages/react-ui-bootstrap/components/core/Button.tsx b/packages/react-ui-bootstrap/components/core/Button.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import BootstrapButton, {
+import {
+  Button as BootstrapButton,
   ButtonProps as BootstrapButtonProps,
-} from "react-bootstrap/Button";
+} from "react-bootstrap";
 
 export type ButtonProps = BootstrapButtonProps;
 export const Button = (props) => <BootstrapButton {...props} />;
diff --git a/packages/react-ui-bootstrap/components/core/Dropdown.jsx b/packages/react-ui-bootstrap/components/core/Dropdown.jsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Components, registerComponent } from 'meteor/vulcan:lib';
-import Dropdown from 'react-bootstrap/Dropdown';
-import DropdownItem from 'react-bootstrap/DropdownItem';
-import DropdownButton from 'react-bootstrap/DropdownButton';
-import { LinkContainer } from 'react-router-bootstrap';
+import React from "react";
+import PropTypes from "prop-types";
+import { Components, registerComponent } from "meteor/vulcan:lib";
+import { Dropdown, DropdownButton } from "react-bootstrap";
+import DropdownItem from "react-bootstrap/esm/DropdownItem";
+import { LinkContainer } from "react-router-bootstrap";
 
 /*
 
@@ -15,10 +14,13 @@ const Node = ({ childrenItems, ...rest }) => {
   return (
     <>
       <Item {...rest} />
-      {childrenItems &&
-        !!childrenItems.length && (
-          <div className="menu-node-children">{childrenItems.map((item, index) => <Item key={index} {...item} />)}</div>
-        )}
+      {childrenItems && !!childrenItems.length && (
+        <div className="menu-node-children">
+          {childrenItems.map((item, index) => (
+            <Item key={index} {...item} />
+          ))}
+        </div>
+      )}
     </>
   );
 };
@@ -33,7 +35,17 @@ Note: `rest` is used to ensure auto-generated props from parent dropdown
 components are properly passed down to MenuItem
 
 */
-const Item = ({ index, to, labelId, label, component, componentProps = {}, itemProps, linkProps, ...rest }) => {
+const Item = ({
+  index,
+  to,
+  labelId,
+  label,
+  component,
+  componentProps = {},
+  itemProps,
+  linkProps,
+  ...rest
+}) => {
   let menuComponent;
 
   if (component) {
@@ -50,7 +62,13 @@ const Item = ({ index, to, labelId, label, component, componentProps = {}, itemP
     </DropdownItem>
   );
 
-  return to ? <LinkContainer to={to} {...linkProps}>{item}</LinkContainer> : item;
+  return to ? (
+    <LinkContainer to={to} {...linkProps}>
+      {item}
+    </LinkContainer>
+  ) : (
+    item
+  );
 };
 
 Item.propTypes = {
@@ -63,19 +81,28 @@ Item.propTypes = {
   itemProps: PropTypes.object, // props for the <MenuItem/> component
 };
 
-const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, variant = 'dropdown', buttonProps, ...dropdownProps }) => {
-  const menuBody = menuContents ? menuContents : menuItems.map((item, index) => {
-    if (item === 'divider') {
-      return <Dropdown.Divider key={index} />;
-    } else {
-      return <Node {...item} key={index} index={index} />;
-    }
-  });
-
-  if (variant === 'flat') {
-
+const BootstrapDropdown = ({
+  label,
+  labelId,
+  trigger,
+  menuItems,
+  menuContents,
+  variant = "dropdown",
+  buttonProps,
+  ...dropdownProps
+}) => {
+  const menuBody = menuContents
+    ? menuContents
+    : menuItems.map((item, index) => {
+        if (item === "divider") {
+          return <Dropdown.Divider key={index} />;
+        } else {
+          return <Node {...item} key={index} index={index} />;
+        }
+      });
+
+  if (variant === "flat") {
     return menuBody;
-
   } else {
     if (trigger) {
       // if a trigger component has been provided, use it
@@ -88,7 +115,11 @@ const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, v
     } else {
       // else default to DropdownButton
       return (
-        <DropdownButton {...buttonProps} title={labelId ? <Components.FormattedMessage id={labelId} /> : label} {...dropdownProps}>
+        <DropdownButton
+          {...buttonProps}
+          title={labelId ? <Components.FormattedMessage id={labelId} /> : label}
+          {...dropdownProps}
+        >
           {menuBody}
         </DropdownButton>
       );
@@ -106,4 +137,4 @@ BootstrapDropdown.propTypes = {
   buttonProps: PropTypes.object, // props specific to the dropdown button
 };
 
-registerComponent('Dropdown', BootstrapDropdown);
+registerComponent("Dropdown", BootstrapDropdown);
diff --git a/packages/react-ui-bootstrap/components/core/Modal.jsx b/packages/react-ui-bootstrap/components/core/Modal.jsx
@@ -1,27 +1,40 @@
-import { registerComponent } from 'meteor/vulcan:lib';
-import React from 'react';
-import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/Modal';
-
-const BootstrapModal = ({ children, size = 'lg', show = false, onHide, title, showCloseButton = true, header, footer, ...rest }) => {
+import { registerComponent } from "meteor/vulcan:lib";
+import React from "react";
+import PropTypes from "prop-types";
+import { Modal } from "react-bootstrap";
 
+const BootstrapModal = ({
+  children,
+  size = "lg",
+  show = false,
+  onHide,
+  title,
+  showCloseButton = true,
+  header,
+  footer,
+  ...rest
+}) => {
   let headerComponent;
   if (header) {
     headerComponent = <Modal.Header>{header}</Modal.Header>;
   } else if (title) {
-    headerComponent = <Modal.Header closeButton={showCloseButton}><Modal.Title>{title}</Modal.Title></Modal.Header>;
+    headerComponent = (
+      <Modal.Header closeButton={showCloseButton}>
+        <Modal.Title>{title}</Modal.Title>
+      </Modal.Header>
+    );
   } else {
-    headerComponent = <Modal.Header closeButton={showCloseButton}></Modal.Header>;
+    headerComponent = (
+      <Modal.Header closeButton={showCloseButton}></Modal.Header>
+    );
   }
 
   const footerComponent = footer ? <Modal.Footer>{footer}</Modal.Footer> : null;
-  
+
   return (
     <Modal size={size} show={show} onHide={onHide} {...rest}>
       {headerComponent}
-      <Modal.Body>
-        {children}
-      </Modal.Body>
+      <Modal.Body>{children}</Modal.Body>
       {footerComponent}
     </Modal>
   );
@@ -37,4 +50,4 @@ BootstrapModal.propTypes = {
   footer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };
 
-registerComponent('Modal', BootstrapModal);
+registerComponent("Modal", BootstrapModal);
diff --git a/packages/react-ui-bootstrap/components/core/TooltipTrigger.tsx b/packages/react-ui-bootstrap/components/core/TooltipTrigger.tsx
@@ -5,8 +5,7 @@ trigger: the component that triggers the tooltip to appear
 
 */
 import React from "react";
-import Tooltip from "react-bootstrap/Tooltip";
-import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import { Tooltip, OverlayTrigger } from "react-bootstrap";
 
 export const TooltipTrigger = ({
   children,

diff --git a/packages/react-ui/components/bootstrap/Dropdown.tsx b/packages/react-ui/components/bootstrap/Dropdown.tsx
@@ -1,9 +1,8 @@
 // TODO: uses react bootstrap a lot, need a refactor
 import React from "react";
 import PropTypes from "prop-types";
-import Dropdown from "react-bootstrap/Dropdown";
-import DropdownItem from "react-bootstrap/DropdownItem";
-import DropdownButton from "react-bootstrap/DropdownButton";
+import { Dropdown, DropdownButton } from "react-bootstrap";
+import DropdownItem from "react-bootstrap/esm/DropdownItem";
 import { useVulcanComponents } from "../VulcanComponents";
 // import { LinkContainer } from "react-router-bootstrap";
 

diff --git a/packages/react-ui/components/bootstrap/Modal.tsx b/packages/react-ui/components/bootstrap/Modal.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Modal from "react-bootstrap/Modal";
+import { Modal } from "react-bootstrap";
 
 export const BootstrapModal = ({
   children,