binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: components restructuring and UI improvements. (#5285)

Browse source 
* chore: components restructuring and minor UI improvements.

* chore: minor UI improvements fro icons and member dropdown.

* chore: update issue identifier.

* chore: rename `Issue Extra Property` to `Issue Additional Property`

* chore: fix popovers placement issue on components with overflow.

* chore: add `scrollbar-xs`

* chore: add `xs` size for input and textarea components.

* chore: update `sortable` to return back `movedItem` in the onChange callback.

* chore: minor UI adjustments for radio-select.

* chore: update outside click delay to 1ms.
This commit is contained in:
Prateek Shourya 2024-08-05 20:42:14 +05:30 • committed by GitHub
parent 07574b4222
commit 333a989b1a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
67 changed files with 824 additions and 569 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/ui/src/sortable/sortable.tsx
View file

@ -5,7 +5,7 @@ import { Draggable } from "./draggable";
type Props<T> = {
data: T[];
render: (item: T, index: number) => React.ReactNode;
onChange: (data: T[]) => void;
onChange: (data: T[], movedItem?: T) => void;
keyExtractor: (item: T, index: number) => string;
containerClassName?: string;
id?: string;
@ -16,13 +16,16 @@ const moveItem = <T,>(
source: T,
destination: T & Record<symbol, string>,
keyExtractor: (item: T, index: number) => string
) => {
): {
newData: T[];
movedItem: T | undefined;
} => {
const sourceIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(source, 0));
if (sourceIndex === -1) return data;
if (sourceIndex === -1) return { newData: data, movedItem: undefined };
const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
if (destinationIndex === -1) return data;
if (destinationIndex === -1) return { newData: data, movedItem: undefined };
const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
@ -41,7 +44,7 @@ const moveItem = <T,>(
newData.splice(adjustedDestinationIndex, 0, movedItem);
return newData;
return { newData, movedItem };
};
export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
@ -50,7 +53,13 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
onDrop({ source, location }) {
const destination = location?.current?.dropTargets[0];
if (!destination) return;
onChange(moveItem(data, source.data as T, destination.data as T & { closestEdge: string }, keyExtractor));
const { newData, movedItem } = moveItem(
data,
source.data as T,
destination.data as T & { closestEdge: string },
keyExtractor
);
onChange(newData, movedItem);
},
});