Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Replace react-sortable by beautiful-dnd lirary

Browse Source 
[MAILPOET-2610]
This commit is contained in:
Rostislav Wolny
2020-01-24 10:44:31 +01:00
committed by Jack Kitterhing
parent 320d5ba856
commit 7e2cda78f0
7 changed files with 199 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/src/components/formEditor/components/_block_editor.scss
View File

@@ -20,3 +20,9 @@
display: none;
}
}
// Drag and drop library we use for custom fields does not support nested scrollable
// https://github.com/atlassian/react-beautiful-dnd/issues/131
.edit-post-editor-regions__body {
overflow: hidden;
}

6
assets/css/src/components/formEditor/components/_sidebar.scss
View File

@@ -56,19 +56,17 @@ $gutenberg-control-border-color-focus: #007cba;
max-height: 30px;
}
.mailpoet-dnd-items-list {
align-content: flex-start;
align-items: flex-start;
.mailpoet-dnd-items-list > div {
display: flex;
flex-direction: column;
> * {
align-items: center;
margin-bottom: 12px
}
}
.mailpoet-form-segments-settings-list {
align-items: center;
display: flex;
flex-direction: row;

1
assets/js/src/form_editor/blocks/add_custom_field/add_custom_field_form.jsx
View File

@@ -80,7 +80,6 @@ const AddCustomFieldForm = ({ dateSettings, onSubmit }) => {
mandatory={fieldSettings.mandatory ? fieldSettings.mandatory : false}
values={fieldSettings.values ? fieldSettings.values : [{ name: '', id: Math.random().toString() }]}
onChange={setFieldSettings}
useDragAndDrop={false}
/>
);
default:

55
assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx
View File

@@ -5,7 +5,7 @@ import React, {
import PropTypes from 'prop-types';
import { Dashicon } from '@wordpress/components';
import { partial } from 'lodash';
import { ReactSortable } from 'react-sortablejs';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const PreviewItem = ({
value,
@@ -55,7 +55,6 @@ const Preview = ({
update,
remove,
onReorder,
useDragAndDrop,
}) => {
const [valuesWhileMoved, setValues] = useState(values);
@@ -96,31 +95,54 @@ const Preview = ({
update(sanitizeValue(value));
};
const onDragEnd = (result) => {
const from = result.source.index;
const to = result.destination.index;
const newValues = [...valuesWhileMoved];
const [movedItem] = newValues.splice(from, 1);
newValues.splice(to, 0, movedItem);
setValues(newValues);
onReorder(newValues);
};
const renderItems = () => (valuesWhileMoved.map((value, index) => (
<Draggable key={value.id} draggableId={value.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<PreviewItem
key={value.id}
key={`inner${value.id}`}
index={index}
value={value}
remove={remove}
onCheck={onCheck}
onUpdate={onUpdate}
/>
</div>
)}
</Draggable>
)));
return (useDragAndDrop ? (
<ReactSortable
list={valuesWhileMoved}
setList={(reorderedValues) => onReorder(reorderedValues.map(sanitizeValue))}
className="mailpoet-dnd-items-list"
animation={100}
return (
<div className="mailpoet-dnd-items-list">
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
{renderItems()}
</ReactSortable>
) : (
<div className="mailpoet-dnd-items-list">
{renderItems()}
{provided.placeholder}
</div>
));
)}
</Droppable>
</DragDropContext>
</div>
);
};
Preview.propTypes = {
@@ -131,11 +153,6 @@ Preview.propTypes = {
update: PropTypes.func.isRequired,
remove: PropTypes.func.isRequired,
onReorder: PropTypes.func.isRequired,
useDragAndDrop: PropTypes.bool,
};
Preview.defaultProps = {
useDragAndDrop: true,
};
export default Preview;

44
assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
View File

@@ -5,7 +5,7 @@ import React, {
import PropTypes from 'prop-types';
import { CheckboxControl, Dashicon } from '@wordpress/components';
import { partial } from 'lodash';
import { ReactSortable } from 'react-sortablejs';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const PreviewItem = ({
segment,
@@ -63,9 +63,25 @@ const Preview = ({
updateSegment(segment);
};
return (
<ReactSortable list={segmentsWhileMoved} setList={onSegmentsReorder}>
{segmentsWhileMoved.map((segment, index) => (
const onDragEnd = (result) => {
const from = result.source.index;
const to = result.destination.index;
const newValues = [...segmentsWhileMoved];
const [movedItem] = newValues.splice(from, 1);
newValues.splice(to, 0, movedItem);
setSegments(newValues);
onSegmentsReorder(newValues);
};
const renderItems = () => (segmentsWhileMoved.map((segment, index) => (
<Draggable key={segment.id} draggableId={segment.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<PreviewItem
key={segment.id}
index={index}
@@ -73,8 +89,24 @@ const Preview = ({
onCheck={onCheck}
removeSegment={removeSegment}
/>
))}
</ReactSortable>
</div>
)}
</Draggable>
)));
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
{renderItems()}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};

130
package-lock.json generated
View File

@@ -1788,6 +1788,22 @@
}
}
},
"@babel/runtime-corejs2": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.8.3.tgz",
"integrity": "sha512-yxJXBKdIogkfF+wgeJrvU7Afp5ugBi92NzSgNPWWKVoQAlixH3gwMP6yYYr7SV1Dbc0HmNw7WUJkV5ksvtQuHg==",
"requires": {
"core-js": "^2.6.5",
"regenerator-runtime": "^0.13.2"
},
"dependencies": {
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
}
}
},
"@babel/runtime-corejs3": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.5.5.tgz",
@@ -2102,11 +2118,6 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"@types/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-aWK2oTpbjNmLyexl95L4ttd0kFIvbMIf1JR2YbNhUwIk9Y1cOwfAfyvfxBBmtg1ZDy64gpbgEdFjyqnzjh+3/A=="
},
"@types/unist": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
@@ -5213,6 +5224,14 @@
"urix": "^0.1.0"
}
},
"css-box-model": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.0.tgz",
"integrity": "sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA==",
"requires": {
"tiny-invariant": "^1.0.6"
}
},
"css-line-break": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
@@ -9199,6 +9218,11 @@
"resolved": "https://registry.npmjs.org/memize/-/memize-1.0.5.tgz",
"integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg=="
},
"memoize-one": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
},
"memory-fs": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
@@ -10966,6 +10990,11 @@
"integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
"dev": true
},
"raf-schd": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.2.tgz",
"integrity": "sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ=="
},
"randombytes": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.6.tgz",
@@ -11022,6 +11051,20 @@
"prop-types": "^15.5.6"
}
},
"react-beautiful-dnd": {
"version": "12.2.0",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-12.2.0.tgz",
"integrity": "sha512-s5UrOXNDgeEC+sx65IgbeFlqKKgK3c0UfbrJLWufP34WBheyu5kJ741DtJbsSgPKyNLkqfswpMYr0P8lRj42cA==",
"requires": {
"@babel/runtime-corejs2": "^7.6.3",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
}
},
"react-dates": {
"version": "17.2.0",
"resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz",
@@ -11114,6 +11157,55 @@
"prop-types": "^15.5.8"
}
},
"react-redux": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
"integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
"requires": {
"@babel/runtime": "^7.5.5",
"hoist-non-react-statics": "^3.3.0",
"invariant": "^2.2.4",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^16.9.0"
},
"dependencies": {
"@babel/runtime": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz",
"integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==",
"requires": {
"regenerator-runtime": "^0.13.2"
}
},
"invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"requires": {
"loose-envify": "^1.0.0"
}
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
}
}
},
"react-resize-aware": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-resize-aware/-/react-resize-aware-3.0.0.tgz",
@@ -11150,24 +11242,6 @@
"tiny-warning": "^1.0.0"
}
},
"react-sortablejs": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-2.0.9.tgz",
"integrity": "sha512-0vs6krRksmupcs7VG1mww85bSg7vNEvoKExIV1bu8YB3zJjGb5Kb7RTL79bM0wt+Pq6a944jOWGaGNc5/mmG8A==",
"requires": {
"@types/sortablejs": "^1.10.0",
"classnames": "^2.2.6",
"sortablejs": "1.10.1",
"tiny-invariant": "^1.0.6"
},
"dependencies": {
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
}
}
},
"react-spring": {
"version": "8.0.27",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
@@ -12429,11 +12503,6 @@
"kind-of": "^3.2.0"
}
},
"sortablejs": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz",
"integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ=="
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14138,6 +14207,11 @@
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
"dev": true
},
"use-memo-one": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",

2
package.json
View File

@@ -52,10 +52,10 @@
"prop-types": "^15.6.2",
"react": "^16.10.2",
"react-autosize-textarea": "^7.0.0",
"react-beautiful-dnd": "^12.2.0",
"react-dom": "^16.10.2",
"react-html-parser": "^2.0.2",
"react-router-dom": "~5.1.2",
"react-sortablejs": "^2.0.9",
"react-string-replace": "^0.3.2",
"react-tooltip": "^3.11.1",
"satismeter-loader": "^1.1.0",