From 44c0741447dfd5c5a7aee4c2141126fbec90eea0 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Jun 2024 13:33:46 +0100 Subject: [PATCH 1/4] migrate defaultProps --- src/view/droppable/connected-droppable.js | 19 ------------------- src/view/droppable/droppable.jsx | 21 +++++++++++++++++++-- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/view/droppable/connected-droppable.js b/src/view/droppable/connected-droppable.js index bc53a7d8f9..6759b11cc8 100644 --- a/src/view/droppable/connected-droppable.js +++ b/src/view/droppable/connected-droppable.js @@ -19,7 +19,6 @@ import type { import type { MapProps, OwnProps, - DefaultProps, Selector, DispatchProps, StateSnapshot, @@ -227,22 +226,6 @@ const mapDispatchToProps: DispatchProps = { updateViewportMaxScroll: updateViewportMaxScrollAction, }; -function getBody(): HTMLElement { - 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, -}: DefaultProps); - // 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 @@ -275,6 +258,4 @@ const ConnectedDroppable: typeof DroppableType = connect( }, )(Droppable); -ConnectedDroppable.defaultProps = defaultProps; - export default ConnectedDroppable; diff --git a/src/view/droppable/droppable.jsx b/src/view/droppable/droppable.jsx index 27fd5ecd68..e5a1ea7453 100644 --- a/src/view/droppable/droppable.jsx +++ b/src/view/droppable/droppable.jsx @@ -4,7 +4,7 @@ import { useMemo, useCallback } from 'use-memo-one'; import React, { useRef, useContext, type Node } from 'react'; import { invariant } from '../../invariant'; import type { DraggableId } from '../../types'; -import type { Props, Provided } from './droppable-types'; +import type { DefaultProps, Props, Provided } from './droppable-types'; import useDroppablePublisher from '../use-droppable-publisher'; import Placeholder from '../placeholder'; import AppContext, { type AppContextValue } from '../context/app-context'; @@ -23,7 +23,24 @@ import AnimateInOut, { } from '../animate-in-out/animate-in-out'; import { PrivateDraggable } from '../draggable/draggable-api'; -export default function Droppable(props: Props) { +function getBody(): HTMLElement { + invariant(document.body, 'document.body is not ready'); + return document.body; +} + +export default function Droppable(passedProps: Props) { + const defaultProps: DefaultProps = { + mode: 'standard', + type: 'DEFAULT', + direction: 'vertical', + isDropDisabled: false, + isCombineEnabled: false, + ignoreContainerClipping: false, + renderClone: null, + getContainerForClone: getBody, + }; + const props = { ...defaultProps, ...passedProps }; + const appContext: ?AppContextValue = useContext(AppContext); invariant(appContext, 'Could not find app context'); const { contextId, isMovementAllowed } = appContext; From e24d1cd611b5babc52f6f5cf66ca2b0be5d331d3 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Jun 2024 13:51:07 +0100 Subject: [PATCH 2/4] remove unnecessary invariant import --- src/view/droppable/connected-droppable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/view/droppable/connected-droppable.js b/src/view/droppable/connected-droppable.js index 6759b11cc8..4189f7c33e 100644 --- a/src/view/droppable/connected-droppable.js +++ b/src/view/droppable/connected-droppable.js @@ -3,7 +3,6 @@ import { Component } from 'react'; import { connect } from 'react-redux'; import memoizeOne from 'memoize-one'; -import { invariant } from '../../invariant'; import type { State, DroppableId, From 1f6ef544ce44e34b49e5505023570cfe64dda80e Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Jun 2024 15:00:08 +0100 Subject: [PATCH 3/4] use mergeProps --- src/view/droppable/connected-droppable.js | 25 ++++++++++++++++++++++- src/view/droppable/droppable.jsx | 21 ++----------------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/view/droppable/connected-droppable.js b/src/view/droppable/connected-droppable.js index 4189f7c33e..60f825751d 100644 --- a/src/view/droppable/connected-droppable.js +++ b/src/view/droppable/connected-droppable.js @@ -3,6 +3,7 @@ import { Component } from 'react'; import { connect } from 'react-redux'; import memoizeOne from 'memoize-one'; +import { invariant } from '../../invariant'; import type { State, DroppableId, @@ -18,6 +19,7 @@ import type { import type { MapProps, OwnProps, + DefaultProps, Selector, DispatchProps, StateSnapshot, @@ -225,6 +227,22 @@ const mapDispatchToProps: DispatchProps = { updateViewportMaxScroll: updateViewportMaxScrollAction, }; +function getBody(): HTMLElement { + 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, +}: DefaultProps); + // 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 @@ -243,7 +261,12 @@ const ConnectedDroppable: typeof DroppableType = connect( // no dispatch props for droppable mapDispatchToProps, // mergeProps - using default - null, + (stateProps, dispatchProps, ownProps) => ({ + ...defaultProps, + ...ownProps, + ...stateProps, + ...dispatchProps, + }), // $FlowFixMe: current react-redux type does not know about context property { // Ensuring our context does not clash with consumers diff --git a/src/view/droppable/droppable.jsx b/src/view/droppable/droppable.jsx index e5a1ea7453..27fd5ecd68 100644 --- a/src/view/droppable/droppable.jsx +++ b/src/view/droppable/droppable.jsx @@ -4,7 +4,7 @@ import { useMemo, useCallback } from 'use-memo-one'; import React, { useRef, useContext, type Node } from 'react'; import { invariant } from '../../invariant'; import type { DraggableId } from '../../types'; -import type { DefaultProps, Props, Provided } from './droppable-types'; +import type { Props, Provided } from './droppable-types'; import useDroppablePublisher from '../use-droppable-publisher'; import Placeholder from '../placeholder'; import AppContext, { type AppContextValue } from '../context/app-context'; @@ -23,24 +23,7 @@ import AnimateInOut, { } from '../animate-in-out/animate-in-out'; import { PrivateDraggable } from '../draggable/draggable-api'; -function getBody(): HTMLElement { - invariant(document.body, 'document.body is not ready'); - return document.body; -} - -export default function Droppable(passedProps: Props) { - const defaultProps: DefaultProps = { - mode: 'standard', - type: 'DEFAULT', - direction: 'vertical', - isDropDisabled: false, - isCombineEnabled: false, - ignoreContainerClipping: false, - renderClone: null, - getContainerForClone: getBody, - }; - const props = { ...defaultProps, ...passedProps }; - +export default function Droppable(props: Props) { const appContext: ?AppContextValue = useContext(AppContext); invariant(appContext, 'Could not find app context'); const { contextId, isMovementAllowed } = appContext; From 063ccb2854bfb4da6c32d61b20bd74b28113a859 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Jun 2024 17:15:19 +0100 Subject: [PATCH 4/4] move back to having default props in droppable --- src/view/droppable/connected-droppable.js | 26 ++--------------------- src/view/droppable/droppable.jsx | 21 ++++++++++++++++-- 2 files changed, 21 insertions(+), 26 deletions(-) diff --git a/src/view/droppable/connected-droppable.js b/src/view/droppable/connected-droppable.js index 60f825751d..7dd07b5c0a 100644 --- a/src/view/droppable/connected-droppable.js +++ b/src/view/droppable/connected-droppable.js @@ -3,7 +3,6 @@ import { Component } from 'react'; import { connect } from 'react-redux'; import memoizeOne from 'memoize-one'; -import { invariant } from '../../invariant'; import type { State, DroppableId, @@ -19,7 +18,6 @@ import type { import type { MapProps, OwnProps, - DefaultProps, Selector, DispatchProps, StateSnapshot, @@ -227,26 +225,11 @@ const mapDispatchToProps: DispatchProps = { updateViewportMaxScroll: updateViewportMaxScrollAction, }; -function getBody(): HTMLElement { - 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, -}: DefaultProps); - // 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 /*:: +import { defaultProps } from './droppable'; class DroppableType extends Component { static defaultProps = defaultProps; } @@ -261,12 +244,7 @@ const ConnectedDroppable: typeof DroppableType = connect( // no dispatch props for droppable mapDispatchToProps, // mergeProps - using default - (stateProps, dispatchProps, ownProps) => ({ - ...defaultProps, - ...ownProps, - ...stateProps, - ...dispatchProps, - }), + null, // $FlowFixMe: current react-redux type does not know about context property { // Ensuring our context does not clash with consumers diff --git a/src/view/droppable/droppable.jsx b/src/view/droppable/droppable.jsx index 27fd5ecd68..8368eb437f 100644 --- a/src/view/droppable/droppable.jsx +++ b/src/view/droppable/droppable.jsx @@ -4,7 +4,7 @@ import { useMemo, useCallback } from 'use-memo-one'; import React, { useRef, useContext, type Node } from 'react'; import { invariant } from '../../invariant'; import type { DraggableId } from '../../types'; -import type { Props, Provided } from './droppable-types'; +import type { DefaultProps, Props, Provided } from './droppable-types'; import useDroppablePublisher from '../use-droppable-publisher'; import Placeholder from '../placeholder'; import AppContext, { type AppContextValue } from '../context/app-context'; @@ -23,7 +23,24 @@ import AnimateInOut, { } from '../animate-in-out/animate-in-out'; import { PrivateDraggable } from '../draggable/draggable-api'; -export default function Droppable(props: Props) { +function getBody(): HTMLElement { + invariant(document.body, 'document.body is not ready'); + return document.body; +} + +export const defaultProps: DefaultProps = { + mode: 'standard', + type: 'DEFAULT', + direction: 'vertical', + isDropDisabled: false, + isCombineEnabled: false, + ignoreContainerClipping: false, + renderClone: null, + getContainerForClone: getBody, +}; + +export default function Droppable(passedProps: Props) { + const props = { ...defaultProps, ...passedProps }; const appContext: ?AppContextValue = useContext(AppContext); invariant(appContext, 'Could not find app context'); const { contextId, isMovementAllowed } = appContext;