upgrades react-bootstrap (broken)

docs/sections/user-interface/tools.md

@@ -315,7 +315,7 @@ Tools styles are stored in `MY_PLUGIN/Resources/styles`.
 // MY_PLUGIN/Resources/styles/my-tool.less
 
 // Claroline & bootstrap variables
-@import "/src/main/app/Resources/styles/variables";
+@import "src/main/app/Resources/styles/variables";
 
 // Your custom styles are defined here
 

package.json

@@ -40,7 +40,7 @@
     "postcss-cli": "^2.5.0",
     "prop-types": "^15.7.2",
     "react": "^16.7.0",
-    "react-bootstrap": "^0.31.2",
+    "react-bootstrap": "^2.7",
     "react-dnd": "^7.7.0",
     "react-dnd-html5-backend": "^7.0.2",
     "react-dnd-touch-backend": "^0.5.2",

src/main/app/Resources/modules/action/components/button.jsx

@@ -1,6 +1,7 @@
-import React, {Component, cloneElement} from 'react'
+import React, {Component, cloneElement, createElement, forwardRef} from 'react'
 import classes from 'classnames'
 import invariant from 'invariant'
+import merge from 'lodash/merge'
 import omit from 'lodash/omit'
 
 import {PropTypes as T, implementPropTypes} from '#/main/app/prop-types'
@@ -10,12 +11,12 @@ import {TooltipOverlay} from '#/main/app/overlays/tooltip/components/overlay'
 import {Action as ActionTypes} from '#/main/app/action/prop-types'
 import {createActionDefinition} from '#/main/app/action/utils'
 
-const ButtonComponent = props => {
+const ButtonComponent = forwardRef((props, ref) => {
   const button = buttonRegistry.get(props.type)
 
   invariant(undefined !== button, `You have requested a non existent button "${props.type}".`)
 
-  return React.createElement(button, omit(props, 'type', 'icon', 'label', 'hideLabel', 'subscript'), [
+  return createElement(button, merge(omit(props, 'type', 'icon', 'label', 'hideLabel', 'subscript'), {ref: ref}), [
     (props.icon && typeof props.icon === 'string') &&
       <span key="button-icon" className={classes('action-icon', props.icon, !props.hideLabel && 'icon-with-text-right')} aria-hidden={true} />,
     (props.icon && typeof props.icon !== 'string') && cloneElement(props.icon, {key: 'button-icon'}),
@@ -24,7 +25,7 @@ const ButtonComponent = props => {
     props.subscript &&
       <span key="button-subscript" className={classes('action-subscript', `${props.subscript.type} ${props.subscript.type}-${props.subscript.status || 'primary'}`)}>{props.subscript.value}</span>
   ])
-}
+})
 
 implementPropTypes(ButtonComponent, ActionTypes, {
   hideLabel: T.bool

src/main/app/Resources/modules/buttons/link/components/button.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, {forwardRef} from 'react'
 import classes from 'classnames'
 import omit from 'lodash/omit'
 
 import {PropTypes as T, implementPropTypes} from '#/main/app/prop-types'
 import {
   NavLink,
-  withRouter,
-  matchPath
+  matchPath,
+  useLocation
 } from '#/main/app/router'
 
 import {Button as ButtonTypes} from '#/main/app/buttons/prop-types'
@@ -16,43 +16,43 @@ import {Button as ButtonTypes} from '#/main/app/buttons/prop-types'
 /**
  * Link button.
  * Renders a component that will navigate user in the current app on click.
- *
- * @param props
- * @constructor
  */
-const LinkButtonComponent = props =>
-  <NavLink
-    {...omit(props, 'displayed', 'primary', 'dangerous', 'size', 'target', 'confirm', 'history', 'match', 'staticContext', 'active')}
-    tabIndex={props.tabIndex}
-    to={props.target}
-    exact={props.exact}
-    disabled={props.disabled || matchPath(props.location.pathname, {path: props.target, exact: true})}
-    className={classes(
-      props.className,
-      props.size && `btn-${props.size}`,
-      {
-        disabled: props.disabled,
-        default: !props.primary && !props.dangerous,
-        primary: props.primary,
-        danger: props.dangerous,
-        active: props.active
-      }
-    )}
-  >
-    {props.children}
-  </NavLink>
-
-implementPropTypes(LinkButtonComponent, ButtonTypes, {
+const LinkButton = forwardRef((props, ref) => {
+  const location = useLocation()
+
+  return (
+    <NavLink
+      {...omit(props, 'displayed', 'primary', 'dangerous', 'size', 'target', 'confirm', 'history', 'match', 'staticContext', 'active')}
+      ref={ref}
+      tabIndex={props.tabIndex}
+      to={props.target}
+      exact={props.exact}
+      disabled={props.disabled || matchPath(location.pathname, {path: props.target, exact: true})}
+      className={classes(
+        props.className,
+        props.size && `btn-${props.size}`,
+        {
+          disabled: props.disabled,
+          default: !props.primary && !props.dangerous,
+          primary: props.primary,
+          danger: props.dangerous,
+          active: props.active
+        }
+      )}
+    >
+      {props.children}
+    </NavLink>
+  )
+})
+
+implementPropTypes(LinkButton, ButtonTypes, {
   target: T.string,
-  location: T.shape({
-    pathname: T.string
-  }),
   exact: T.bool
 }, {
   exact: false
 })
 
-const LinkButton = withRouter(LinkButtonComponent)
+//const LinkButton = withRouter(LinkButtonComponent)
 
 export {
   LinkButton

src/main/app/Resources/modules/buttons/menu/components/button.jsx

@@ -1,9 +1,10 @@
-import React, {Component} from 'react'
+import React, {Component, forwardRef} from 'react'
 import classes from 'classnames'
 import identity from 'lodash/identity'
 import omit from 'lodash/omit'
 
-import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'
+import Dropdown from 'react-bootstrap/Dropdown'
+//import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'
 
 import {PropTypes as T, implementPropTypes} from '#/main/app/prop-types'
 import {toKey} from '#/main/core/scaffolding/text'
@@ -27,7 +28,7 @@ class StandardMenu extends Component {
 
   // for custom menus
   handleRootClose(event) {
-    this.props.onClose(event, { source: 'rootClose' })
+    //this.props.onClose(event, { source: 'rootClose' })
   }
 
   render() {
@@ -110,15 +111,17 @@ class StandardMenu extends Component {
       )
     }
 
-    return (
+    return props.menu
+
+    /*return (
       <RootCloseWrapper
         disabled={!props.open}
         onRootClose={this.handleRootClose}
         event={props.rootCloseEvent}
       >
         {props.menu}
       </RootCloseWrapper>
-    )
+    )*/
   }
 }
 
@@ -148,11 +151,8 @@ StandardMenu.propTypes = {
 /**
  * Menu button.
  * Renders a component that will open a menu with additional actions.
- *
- * @param props
- * @constructor
  */
-const MenuButton = props => {
+const MenuButton = forwardRef((props, ref) => {
   const isStandard = typeof props.menu === 'object' && props.menu.items
   let hasActions = false
   if (isStandard) {
@@ -162,34 +162,44 @@ const MenuButton = props => {
     )
   }
 
+  /*<CallbackButton
+    {...omit(props, 'menu', 'containerClassName', 'onToggle', 'opened')}
+
+    className={classes('dropdown-toggle', props.className)}
+    callback={identity}
+  >
+    {props.children}
+  </CallbackButton>
+  <StandardMenu
+        id={props.id}
+        menu={props.menu}
+      />
+  */
+
   // only display button if there are actions
   return (
-    <MenuOverlay
+    <Dropdown
       id={props.id}
-      open={props.opened}
-      position={props.menu.position}
-      align={props.menu.align}
-      className={props.containerClassName}
-      disabled={(isStandard && !hasActions) || props.disabled}
+      //open={props.opened}
+      //drop={'right' === props.align}
+      autoClose={true}
+      className={props.className}
+      disabled={props.disabled}
       onToggle={props.onToggle}
+      ref={ref}
     >
-      <CallbackButton
-        {...omit(props, 'menu', 'containerClassName', 'onToggle', 'opened')}
-        className={classes('dropdown-toggle', props.className)}
-        bsRole="toggle"
-        callback={identity}
-      >
-        {props.children}
-      </CallbackButton>
-
-      <StandardMenu
-        bsRole="menu"
-        id={props.id}
-        menu={props.menu}
-      />
-    </MenuOverlay>
+      <Dropdown.Toggle id="dropdown-autoclose-true">
+        Default Dropdown
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+        <Dropdown.Item href="#">Menu Item</Dropdown.Item>
+      </Dropdown.Menu>
+
+    </Dropdown>
   )
-}
+})
 
 implementPropTypes(MenuButton, ButtonTypes, {
   id: T.string.isRequired,

src/main/app/Resources/modules/buttons/url/components/button.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {forwardRef} from 'react'
 import classes from 'classnames'
 import omit from 'lodash/omit'
 
@@ -12,11 +12,8 @@ import {Button as ButtonTypes} from '#/main/app/buttons/prop-types'
  * Renders a component that will navigate user to an url (internal or external) on click.
  *
  * IMPORTANT : if you need to navigate inside the current app, use `LinkButton` instead.
- *
- * @param props
- * @constructor
  */
-const UrlButton = props => {
+const UrlButton = forwardRef((props, ref) => {
   let target = props.target
   if (Array.isArray(target)) {
     target = url(target)
@@ -28,6 +25,7 @@ const UrlButton = props => {
       role="link"
       tabIndex={props.tabIndex}
       href={!props.disabled ? target : ''}
+      ref={ref}
       disabled={props.disabled}
       className={classes(props.className, {
         disabled: props.disabled,
@@ -41,7 +39,7 @@ const UrlButton = props => {
       {props.children}
     </a>
   )
-}
+})
 
 implementPropTypes(UrlButton, ButtonTypes, {
   target: T.oneOfType([

src/main/app/Resources/modules/content/components/sections.jsx

@@ -4,8 +4,8 @@ import classes from 'classnames'
 import omit from 'lodash/omit'
 
 // TODO : remove us
-import Panel      from 'react-bootstrap/lib/Panel'
-import PanelGroup from 'react-bootstrap/lib/PanelGroup'
+//import Panel      from 'react-bootstrap/Panel'
+//import PanelGroup from 'react-bootstrap/PanelGroup'
 
 import {toKey} from '#/main/core/scaffolding/text'
 import {Action as ActionTypes} from '#/main/app/action/prop-types'

src/main/app/Resources/modules/layout/menu/components/main.jsx

@@ -3,7 +3,7 @@ import {PropTypes as T} from 'prop-types'
 import isEmpty from 'lodash/isEmpty'
 import isNumber from 'lodash/isNumber'
 
-import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'
+//import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'
 
 import {getWindowSize} from '#/main/app/dom/size/utils'
 import {constants} from '#/main/app/dom/size/constants'
@@ -56,11 +56,11 @@ class MenuMain extends Component {
   }
 
   render() {
+    /*<RootCloseWrapper
+      disabled={constants.SIZE_SM !== this.state.computedSize && constants.SIZE_XS !== this.state.computedSize}
+      onRootClose={() => this.props.close()}
+    >*/
     return (
-      <RootCloseWrapper
-        disabled={constants.SIZE_SM !== this.state.computedSize && constants.SIZE_XS !== this.state.computedSize}
-        onRootClose={() => this.props.close()}
-      >
         <Fragment>
           <aside className="app-menu">
             <header className="app-menu-header">
@@ -145,7 +145,6 @@ class MenuMain extends Component {
             <div className="app-menu-backdrop" />
           }
         </Fragment>
-      </RootCloseWrapper>
     )
   }
 }

src/main/app/Resources/modules/modals/login/components/modal.jsx

@@ -2,7 +2,7 @@ import React, {Component} from 'react'
 import {PropTypes as T} from 'prop-types'
 import omit from 'lodash/omit'
 
-import BaseModal from 'react-bootstrap/lib/Modal'
+import BaseModal from 'react-bootstrap/Modal'
 
 import {LoginMain} from '#/main/app/security/login/containers/main'
 

src/main/app/Resources/modules/overlays/components/overlay.jsx

@@ -1,4 +1,4 @@
-import BaseOverlay from 'react-overlays/lib/Overlay'
+import BaseOverlay from 'react-bootstrap/Overlay'
 
 const Overlay = BaseOverlay
 

src/main/app/Resources/modules/overlays/menu/components/menu-item.jsx

@@ -1,6 +1,6 @@
-import BaseMenuItem from 'react-bootstrap/lib/MenuItem'
+import Dropdown from 'react-bootstrap/Dropdown'
 
-const MenuItem = BaseMenuItem
+const MenuItem = Dropdown.Item
 
 export {
   MenuItem

src/main/app/Resources/modules/overlays/menu/components/menu.jsx

@@ -1,7 +1,5 @@
-import DropdownMenu from 'react-bootstrap/lib/DropdownMenu'
-
-const Menu = DropdownMenu
+import DropdownMenu from 'react-bootstrap/DropdownMenu'
 
 export {
-  Menu
+  DropdownMenu as Menu
 }