From d2f4217a2ba3ec4ed2f338a9a69a59f2e4367dfe Mon Sep 17 00:00:00 2001 From: David Newell Date: Wed, 30 Aug 2023 09:19:57 +0100 Subject: [PATCH] chore: migrate to dnd kit (#16962) chore: migrate selectable person properties to dnd-sortable --- ...ilters-person-property-select--default.png | Bin 13412 -> 7699 bytes .../PersonPropertySelect.tsx | 84 +++++++++++------- package.json | 4 + pnpm-lock.yaml | 67 ++++++++++++++ 4 files changed, 125 insertions(+), 30 deletions(-) diff --git a/frontend/__snapshots__/filters-person-property-select--default.png b/frontend/__snapshots__/filters-person-property-select--default.png index 4e618c3af0d81ccadd0c873c70b2c1a11b8f93d2..9cfbf7848023c59dda0d15eadc8b836637483cbe 100644 GIT binary patch literal 7699 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 diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx index 58726593b0a..0b5fe4cf3d5 100644 --- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx +++ b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx @@ -1,13 +1,17 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter' import { Popover } from 'lib/lemon-ui/Popover/Popover' -import { SortableContainer, SortableElement } from 'react-sortable-hoc' import { LemonButton } from '@posthog/lemon-ui' import { IconPlus } from 'lib/lemon-ui/icons' import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack' import clsx from 'clsx' import { useState } from 'react' +import { DndContext, closestCenter } from '@dnd-kit/core' +import { useSortable, SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' +import { restrictToHorizontalAxis } from '@dnd-kit/modifiers' + export interface PersonPropertySelectProps { addText: string onChange: (names: string[]) => void @@ -15,25 +19,32 @@ export interface PersonPropertySelectProps { sortable?: boolean } -const PropertyTag = ({ +const SortableProperty = ({ name, onRemove, - sortable = false, + sortable, }: { name: string onRemove: (val: string) => void sortable?: boolean -}): JSX.Element => ( - - onRemove(name)}>{name} - -) +}): JSX.Element => { + const { setNodeRef, attributes, transform, transition, listeners } = useSortable({ id: name }) -const SortableProperty = SortableElement(PropertyTag) - -const SortablePropertyList = SortableContainer(({ children }: { children: React.ReactNode }) => { - return {children} -}) + return ( + + onRemove(name)}>{name} + + ) +} export const PersonPropertySelect = ({ onChange, @@ -60,23 +71,36 @@ export const PersonPropertySelect = ({ return (
- {sortable ? ( - - {selectedProperties.map((value, index) => ( - - ))} - - ) : ( - selectedProperties?.map((value) => ( - - )) - )} + { + if (over && active.id !== over.id) { + handleSort({ + oldIndex: selectedProperties.indexOf(active.id.toString()), + newIndex: selectedProperties.indexOf(over.id.toString()), + }) + } + }} + collisionDetection={closestCenter} + modifiers={[restrictToHorizontalAxis]} + > + +
+ {selectedProperties.map((value) => ( + + ))} +
+
+
+ setOpen(false)} diff --git a/package.json b/package.json index a5a751e7040..8e4ec82a7b2 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,10 @@ }, "dependencies": { "@ant-design/icons": "^4.7.0", + "@dnd-kit/core": "^6.0.8", + "@dnd-kit/modifiers": "^6.0.1", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", "@floating-ui/react": "^0.16.0", "@lottiefiles/react-lottie-player": "^3.4.7", "@medv/finder": "^2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad32f20ef86..0c8d51a7b38 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,18 @@ dependencies: '@ant-design/icons': specifier: ^4.7.0 version: 4.7.0(react-dom@16.14.0)(react@16.14.0) + '@dnd-kit/core': + specifier: ^6.0.8 + version: 6.0.8(react-dom@16.14.0)(react@16.14.0) + '@dnd-kit/modifiers': + specifier: ^6.0.1 + version: 6.0.1(@dnd-kit/core@6.0.8)(react@16.14.0) + '@dnd-kit/sortable': + specifier: ^7.0.2 + version: 7.0.2(@dnd-kit/core@6.0.8)(react@16.14.0) + '@dnd-kit/utilities': + specifier: ^3.2.1 + version: 3.2.1(react@16.14.0) '@floating-ui/react': specifier: ^0.16.0 version: 0.16.0(@types/react@16.14.34)(react-dom@16.14.0)(react@16.14.0) @@ -2245,6 +2257,61 @@ packages: dev: true optional: true + /@dnd-kit/accessibility@3.0.1(react@16.14.0): + resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 16.14.0 + tslib: 2.4.1 + dev: false + + /@dnd-kit/core@6.0.8(react-dom@16.14.0)(react@16.14.0): + resolution: {integrity: sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@dnd-kit/accessibility': 3.0.1(react@16.14.0) + '@dnd-kit/utilities': 3.2.1(react@16.14.0) + react: 16.14.0 + react-dom: 16.14.0(react@16.14.0) + tslib: 2.4.1 + dev: false + + /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.0.8)(react@16.14.0): + resolution: {integrity: sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==} + peerDependencies: + '@dnd-kit/core': ^6.0.6 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.0.8(react-dom@16.14.0)(react@16.14.0) + '@dnd-kit/utilities': 3.2.1(react@16.14.0) + react: 16.14.0 + tslib: 2.4.1 + dev: false + + /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.0.8)(react@16.14.0): + resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==} + peerDependencies: + '@dnd-kit/core': ^6.0.7 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.0.8(react-dom@16.14.0)(react@16.14.0) + '@dnd-kit/utilities': 3.2.1(react@16.14.0) + react: 16.14.0 + tslib: 2.4.1 + dev: false + + /@dnd-kit/utilities@3.2.1(react@16.14.0): + resolution: {integrity: sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 16.14.0 + tslib: 2.4.1 + dev: false + /@esbuild/linux-loong64@0.14.54: resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==} engines: {node: '>=12'}