diff --git a/frontend/src/component/common/drag-and-drop.jsx b/frontend/src/component/common/drag-and-drop.jsx new file mode 100644 index 0000000000..97f6e3f61f --- /dev/null +++ b/frontend/src/component/common/drag-and-drop.jsx @@ -0,0 +1,18 @@ +import { DndProvider, createDndContext } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; +import React, { useRef } from 'react'; + +const RNDContext = createDndContext(HTML5Backend); + +function useDNDProviderElement(props) { + const manager = useRef(RNDContext); + + if (!props.children) return null; + + return {props.children}; +} + +export default function DragAndDrop(props) { + const DNDElement = useDNDProviderElement(props); + return {DNDElement}; +} diff --git a/frontend/src/component/feature/create/add-feature-container.jsx b/frontend/src/component/feature/create/add-feature-container.jsx index 0204dee4b6..7003785b5c 100644 --- a/frontend/src/component/feature/create/add-feature-container.jsx +++ b/frontend/src/component/feature/create/add-feature-container.jsx @@ -29,6 +29,7 @@ class WrapperComponent extends Component { name, description: '', type: 'release', + stale: false, strategies: [], variants: [], enabled: true, diff --git a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx index 6838b38380..0a28ea4497 100644 --- a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx +++ b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx @@ -1,13 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; - -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; import arrayMove from 'array-move'; import ConfigureStrategy from './strategy-configure-container'; import AddStrategy from './strategies-add'; import { HeaderTitle } from '../../common'; +import DragAndDrop from '../../common/drag-and-drop'; import { updateIndexInArray } from '../../common/util'; import styles from './strategy.module.scss'; @@ -57,7 +55,7 @@ const StrategiesList = props => { /> )); return ( - +
{ )}
-
+ ); }; diff --git a/frontend/src/component/feature/strategy/strategies-list-component.jsx b/frontend/src/component/feature/strategy/strategies-list-component.jsx index 5eb4285569..0b8c5b169b 100644 --- a/frontend/src/component/feature/strategy/strategies-list-component.jsx +++ b/frontend/src/component/feature/strategy/strategies-list-component.jsx @@ -1,12 +1,11 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; import { cloneDeep } from 'lodash'; import arrayMove from 'array-move'; import { Button, Icon } from 'react-mdl'; +import DragAndDrop from '../../common/drag-and-drop'; import ConfigureStrategy from './strategy-configure-container'; import AddStrategy from './strategies-add'; import { HeaderTitle } from '../../common'; @@ -123,7 +122,7 @@ const StrategiesList = props => { /> )); return ( - + {editable && ( { Clear all - + ); };