Skip to content

Commit 7d03d14

Browse files
committed
fix(board): fix drag and drop bug
Closes #1023
1 parent e9ea9f6 commit 7d03d14

File tree

5 files changed

+43
-21
lines changed

5 files changed

+43
-21
lines changed

src/modules/common/components/SortableList.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ type Props = {
1010
onChangeFields: (reorderedFields: any) => void;
1111
isModal?: boolean;
1212
showDragHandler?: boolean | true;
13+
isDragDisabled?: boolean;
1314
};
1415

1516
class SortableList extends React.Component<Props> {
@@ -47,10 +48,15 @@ class SortableList extends React.Component<Props> {
4748
}
4849

4950
renderField(field, index) {
50-
const { child, isModal } = this.props;
51+
const { child, isModal, isDragDisabled } = this.props;
5152

5253
return (
53-
<Draggable draggableId={field._id} index={index} key={index}>
54+
<Draggable
55+
draggableId={field._id}
56+
index={index}
57+
key={index}
58+
isDragDisabled={isDragDisabled}
59+
>
5460
{(provided, snapshot) => (
5561
<>
5662
<SortItem

src/modules/settings/boards/components/PipelineRow.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type Props = {
99
pipeline: IPipeline;
1010
renderButton: (props: IButtonMutateProps) => JSX.Element;
1111
remove: (pipelineId: string) => void;
12+
onTogglePopup: () => void;
1213
type: string;
1314
};
1415

@@ -30,7 +31,11 @@ class PipelineRow extends React.Component<Props, State> {
3031

3132
const onClick = () => remove(pipeline._id);
3233

33-
const edit = () => this.setState({ showModal: true });
34+
const edit = () => {
35+
this.setState({ showModal: true });
36+
37+
this.props.onTogglePopup();
38+
};
3439

3540
return (
3641
<ActionButtons>
@@ -47,7 +52,11 @@ class PipelineRow extends React.Component<Props, State> {
4752
renderEditForm() {
4853
const { renderButton, type, pipeline } = this.props;
4954

50-
const closeModal = () => this.setState({ showModal: false });
55+
const closeModal = () => {
56+
this.setState({ showModal: false });
57+
58+
this.props.onTogglePopup();
59+
};
5160

5261
return (
5362
<PipelineForm

src/modules/settings/boards/components/Pipelines.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ type Props = {
2626
type State = {
2727
showModal: boolean;
2828
pipelines: IPipeline[];
29+
isDragDisabled: boolean;
2930
};
3031

3132
class Pipelines extends React.Component<Props, State> {
@@ -34,7 +35,8 @@ class Pipelines extends React.Component<Props, State> {
3435

3536
this.state = {
3637
showModal: false,
37-
pipelines: props.pipelines
38+
pipelines: props.pipelines,
39+
isDragDisabled: false
3840
};
3941
}
4042

@@ -72,6 +74,12 @@ class Pipelines extends React.Component<Props, State> {
7274
this.props.updateOrder(collectOrders(pipelines));
7375
};
7476

77+
onTogglePopup = () => {
78+
const { isDragDisabled } = this.state;
79+
80+
this.setState({ isDragDisabled: !isDragDisabled });
81+
};
82+
7583
renderRows() {
7684
const { renderButton, type } = this.props;
7785

@@ -83,6 +91,7 @@ class Pipelines extends React.Component<Props, State> {
8391
renderButton={renderButton}
8492
remove={this.props.remove}
8593
type={type}
94+
onTogglePopup={this.onTogglePopup}
8695
/>
8796
);
8897
};
@@ -94,6 +103,7 @@ class Pipelines extends React.Component<Props, State> {
94103
fields={pipelines}
95104
child={child}
96105
onChangeFields={this.onChangePipelines}
106+
isDragDisabled={this.state.isDragDisabled}
97107
/>
98108
);
99109
}

src/modules/settings/boards/components/Stages.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IStage } from 'modules/boards/types';
2-
import { Button, SortableList } from 'modules/common/components';
2+
import { Button } from 'modules/common/components';
33
import React from 'react';
44
import { StageList } from '../styles';
55
import StageItem from './StageItem';
@@ -55,23 +55,17 @@ class Stages extends React.Component<Props, {}> {
5555
};
5656

5757
render() {
58-
const child = stage => (
59-
<StageItem
60-
stage={stage}
61-
onChange={this.onChange}
62-
remove={this.remove}
63-
onKeyPress={this.onStageInputKeyPress}
64-
/>
65-
);
66-
6758
return (
6859
<StageList>
69-
<SortableList
70-
fields={this.props.stages}
71-
child={child}
72-
onChangeFields={this.props.onChangeStages}
73-
isModal={true}
74-
/>
60+
{this.props.stages.map((stage: IStage) => (
61+
<StageItem
62+
key={stage._id}
63+
stage={stage}
64+
onChange={this.onChange}
65+
remove={this.remove}
66+
onKeyPress={this.onStageInputKeyPress}
67+
/>
68+
))}
7569
<Button onClick={this.add} btnStyle="success" size="small" icon="add">
7670
Add stage
7771
</Button>

src/modules/settings/boards/styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ const StageList = styled.div`
5656
`;
5757

5858
const StageItemContainer = styled(PipelineRowContainer)`
59+
background-color: #fff;
60+
margin-bottom: 10px;
61+
padding: 5px 20px 10px;
5962
align-items: center;
6063
6164
> *:not(button) {

0 commit comments

Comments
 (0)