- Fix Console deprecation around default props for DND lib

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/dnd/lib/view/droppable/connected-droppable.js

@@ -1,13 +1,13 @@
 // eslint-disable-next-line no-unused-vars
 import { connect } from "react-redux";
 import memoizeOne from "memoize-one";
-import { invariant } from "../../invariant";
 import Droppable from "./droppable";
 import isStrictEqual from "../is-strict-equal";
 import whatIsDraggedOver from "../../state/droppable/what-is-dragged-over";
 import { updateViewportMaxScroll as updateViewportMaxScrollAction } from "../../state/action-creators";
 import StoreContext from "../context/store-context";
 import whatIsDraggedOverFromResult from "../../state/droppable/what-is-dragged-over-from-result";
+import { invariant } from "../../invariant.js";
 
 const isMatchingType = (type, critical) => type === critical.droppable.type;
 const getDraggable = (critical, dimensions) => dimensions.draggables[critical.draggable.id];
@@ -85,13 +85,29 @@ export const makeMapStateToProps = () => {
       };
     }
   );
-  const selector = (state, ownProps) => {
-    // not checking if item is disabled as we need the home list to display a placeholder
 
+  function getBody() {
+    invariant(document.body, "document.body is not ready");
+    return document.body;
+  }
+
+  return (
+    state,
+    {
+      mode = "standard",
+      type = "DEFAULT",
+      direction = "vertical",
+      isDropDisabled = false,
+      isCombineEnabled = false,
+      ignoreContainerClipping = false,
+      renderClone,
+      getContainerForClone = getBody,
+      ...ownProps
+    }
+  ) => {
+    // not checking if item is disabled as we need the home list to display a placeholder
     const id = ownProps.droppableId;
-    const type = ownProps.type;
+    const isEnabled = !isDropDisabled;
-    const isEnabled = !ownProps.isDropDisabled;
-    const renderClone = ownProps.renderClone;
     if (state.isDragging) {
       const critical = state.critical;
       if (!isMatchingType(type, critical)) {
@@ -147,28 +163,11 @@ export const makeMapStateToProps = () => {
     // default: including when flushed
     return idleWithoutAnimation;
   };
-  return selector;
 };
 const mapDispatchToProps = {
   updateViewportMaxScroll: updateViewportMaxScrollAction
 };
 
-function getBody() {
-  invariant(document.body, "document.body is not ready");
-  return document.body;
-}
-
-const defaultProps = {
-  mode: "standard",
-  type: "DEFAULT",
-  direction: "vertical",
-  isDropDisabled: false,
-  isCombineEnabled: false,
-  ignoreContainerClipping: false,
-  renderClone: null,
-  getContainerForClone: getBody
-};
-
 // Abstract class allows to specify props and defaults to component.
 // All other ways give any or do not let add default props.
 // eslint-disable-next-line
@@ -192,7 +191,6 @@ const ConnectedDroppable = connect(
   {
     // Ensuring our context does not clash with consumers
     context: StoreContext,
-
     // When pure, compares the result of mapStateToProps to its previous value.
     // Default value: shallowEqual
     // Switching to a strictEqual as we return a memoized object on changes
@@ -200,5 +198,4 @@ const ConnectedDroppable = connect(
   }
 )(Droppable);
 
-ConnectedDroppable.defaultProps = defaultProps;
 export default ConnectedDroppable;

client/src/components/trello-board/dnd/lib/view/droppable/droppable.js

@@ -12,7 +12,22 @@ import useValidation from "./use-validation";
 import AnimateInOut from "../animate-in-out/animate-in-out";
 import { PrivateDraggable } from "../draggable/draggable-api";
 
-export default function Droppable(props) {
+function getBody() {
+  invariant(document.body, "document.body is not ready");
+  return document.body;
+}
+
+export default function Droppable({
+  mode = "standard",
+  type = "DEFAULT",
+  direction = "vertical",
+  isDropDisabled = false,
+  isCombineEnabled = false,
+  ignoreContainerClipping = false,
+  renderClone,
+  getContainerForClone = getBody,
+  ...props
+}) {
   const appContext = useContext(AppContext);
   invariant(appContext, "Could not find app context");
   const { contextId, isMovementAllowed } = appContext;
@@ -22,19 +37,12 @@ export default function Droppable(props) {
     // own props
     children,
     droppableId,
-    type,
-    mode,
-    direction,
-    ignoreContainerClipping,
-    isDropDisabled,
-    isCombineEnabled,
     // map props
     snapshot,
     useClone,
     // dispatch props
-    updateViewportMaxScroll,
+    updateViewportMaxScroll
     // clone (ownProps)
-    getContainerForClone
   } = props;
   const getDroppableRef = useCallback(() => droppableRef.current, []);
   const setDroppableRef = useCallback((value) => {
@@ -44,11 +52,13 @@ export default function Droppable(props) {
   const setPlaceholderRef = useCallback((value) => {
     placeholderRef.current = value;
   }, []);
+
   useValidation({
-    props,
+    props: { ...props, isDropDisabled, isCombineEnabled, ignoreContainerClipping },
     getDroppableRef,
     getPlaceholderRef
   });
+
   const onPlaceholderTransitionEnd = useCallback(() => {
     // A placeholder change can impact the window's max scroll
     if (isMovementAllowed()) {