mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
feat(rbd): transform rbd types to Preact from React
This commit is contained in:
parent
c208064d2c
commit
f97925073a
2 changed files with 227 additions and 192 deletions
56
src/lib/dnd.ts
Normal file
56
src/lib/dnd.ts
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
import {
|
||||||
|
Draggable as rbdDraggable,
|
||||||
|
DraggableProps as rbdDraggableProps,
|
||||||
|
DraggableProvided as rbdDraggableProvided,
|
||||||
|
DraggableProvidedDraggableProps as rbdDraggableProvidedDraggableProps,
|
||||||
|
DraggableProvidedDragHandleProps as rbdDraggableProvidedDragHandleProps,
|
||||||
|
DraggableRubric,
|
||||||
|
DraggableStateSnapshot,
|
||||||
|
Droppable as rbdDroppable,
|
||||||
|
DroppableProps,
|
||||||
|
DroppableProvided,
|
||||||
|
DroppableStateSnapshot,
|
||||||
|
} from "react-beautiful-dnd";
|
||||||
|
|
||||||
|
export type DraggableProvidedDraggableProps = Omit<
|
||||||
|
rbdDraggableProvidedDraggableProps,
|
||||||
|
"style" | "onTransitionEnd"
|
||||||
|
> & {
|
||||||
|
style?: string;
|
||||||
|
onTransitionEnd?: JSX.TransitionEventHandler<HTMLElement>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DraggableProvidedDragHandleProps = Omit<
|
||||||
|
rbdDraggableProvidedDragHandleProps,
|
||||||
|
"onDragStart"
|
||||||
|
> & {
|
||||||
|
onDragStart?: JSX.DragEventHandler<HTMLElement>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DraggableProvided = rbdDraggableProvided & {
|
||||||
|
draggableProps: DraggableProvidedDraggableProps;
|
||||||
|
dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DraggableChildrenFn = (
|
||||||
|
provided: DraggableProvided,
|
||||||
|
snapshot: DraggableStateSnapshot,
|
||||||
|
rubric: DraggableRubric,
|
||||||
|
) => JSX.Element;
|
||||||
|
|
||||||
|
export type DraggableProps = Omit<rbdDraggableProps, "children"> & {
|
||||||
|
children: DraggableChildrenFn;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Draggable = rbdDraggable as unknown as (
|
||||||
|
props: DraggableProps,
|
||||||
|
) => JSX.Element;
|
||||||
|
|
||||||
|
export const Droppable = rbdDroppable as unknown as (
|
||||||
|
props: Omit<DroppableProps, "children"> & {
|
||||||
|
children(
|
||||||
|
provided: DroppableProvided,
|
||||||
|
snapshot: DroppableStateSnapshot,
|
||||||
|
): JSX.Element;
|
||||||
|
},
|
||||||
|
) => JSX.Element;
|
|
@ -1,7 +1,6 @@
|
||||||
import { Filter, Plus, X } from "@styled-icons/boxicons-regular";
|
import { Plus, X } from "@styled-icons/boxicons-regular";
|
||||||
import isEqual from "lodash.isequal";
|
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
import { DragDropContext } from "react-beautiful-dnd";
|
||||||
import { TextChannel, VoiceChannel } from "revolt-api/types/Channels";
|
import { TextChannel, VoiceChannel } from "revolt-api/types/Channels";
|
||||||
import { Category } from "revolt-api/types/Servers";
|
import { Category } from "revolt-api/types/Servers";
|
||||||
import { Server } from "revolt.js/dist/maps/Servers";
|
import { Server } from "revolt.js/dist/maps/Servers";
|
||||||
|
@ -12,16 +11,13 @@ import { Text } from "preact-i18n";
|
||||||
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
|
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
|
||||||
|
|
||||||
import { useAutosave } from "../../../lib/debounce";
|
import { useAutosave } from "../../../lib/debounce";
|
||||||
|
import { Draggable, Droppable } from "../../../lib/dnd";
|
||||||
import { noop } from "../../../lib/js";
|
import { noop } from "../../../lib/js";
|
||||||
|
|
||||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||||
|
|
||||||
import ChannelIcon from "../../../components/common/ChannelIcon";
|
import ChannelIcon from "../../../components/common/ChannelIcon";
|
||||||
import Button from "../../../components/ui/Button";
|
|
||||||
import ComboBox from "../../../components/ui/ComboBox";
|
|
||||||
import InputBox from "../../../components/ui/InputBox";
|
|
||||||
import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
|
import SaveStatus, { EditStatus } from "../../../components/ui/SaveStatus";
|
||||||
import Tip from "../../../components/ui/Tip";
|
|
||||||
|
|
||||||
const KanbanEntry = styled.div`
|
const KanbanEntry = styled.div`
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
|
@ -234,8 +230,7 @@ export const Categories = observer(({ server }: Props) => {
|
||||||
droppableId="categories"
|
droppableId="categories"
|
||||||
direction="horizontal"
|
direction="horizontal"
|
||||||
type="column">
|
type="column">
|
||||||
{(provided) =>
|
{(provided) => (
|
||||||
(
|
|
||||||
<div
|
<div
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.droppableProps}>
|
{...provided.droppableProps}>
|
||||||
|
@ -280,8 +275,7 @@ export const Categories = observer(({ server }: Props) => {
|
||||||
x.id === category.id
|
x.id === category.id
|
||||||
? {
|
? {
|
||||||
...x,
|
...x,
|
||||||
channels:
|
channels: [
|
||||||
[
|
|
||||||
...x.channels,
|
...x.channels,
|
||||||
channel._id,
|
channel._id,
|
||||||
],
|
],
|
||||||
|
@ -312,8 +306,7 @@ export const Categories = observer(({ server }: Props) => {
|
||||||
{provided.placeholder}
|
{provided.placeholder}
|
||||||
</KanbanBoard>
|
</KanbanBoard>
|
||||||
</div>
|
</div>
|
||||||
) as any
|
)}
|
||||||
}
|
|
||||||
</Droppable>
|
</Droppable>
|
||||||
</FullSize>
|
</FullSize>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
|
@ -366,16 +359,12 @@ function ListElement({
|
||||||
key={category.id}
|
key={category.id}
|
||||||
draggableId={category.id}
|
draggableId={category.id}
|
||||||
index={index}>
|
index={index}>
|
||||||
{(provided) =>
|
{(provided) => (
|
||||||
(
|
<div {...provided.draggableProps} ref={provided.innerRef}>
|
||||||
<div
|
|
||||||
{...(provided.draggableProps as any)}
|
|
||||||
ref={provided.innerRef}>
|
|
||||||
<KanbanList last={false} key={category.id}>
|
<KanbanList last={false} key={category.id}>
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<Row>
|
<Row>
|
||||||
<KanbanListHeader
|
<KanbanListHeader {...provided.dragHandleProps}>
|
||||||
{...(provided.dragHandleProps as any)}>
|
|
||||||
{editing ? (
|
{editing ? (
|
||||||
<input
|
<input
|
||||||
value={editing}
|
value={editing}
|
||||||
|
@ -404,29 +393,23 @@ function ListElement({
|
||||||
<Droppable
|
<Droppable
|
||||||
droppableId={category.id}
|
droppableId={category.id}
|
||||||
key={category.id}>
|
key={category.id}>
|
||||||
{(provided) =>
|
{(provided) => (
|
||||||
(
|
|
||||||
<div
|
<div
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.droppableProps}>
|
{...provided.droppableProps}>
|
||||||
{category.channels.map(
|
{category.channels.map((x, index) => {
|
||||||
(x, index) => {
|
|
||||||
const channel =
|
const channel =
|
||||||
server.client.channels.get(
|
server.client.channels.get(x);
|
||||||
x,
|
if (!channel) return null;
|
||||||
);
|
|
||||||
if (!channel)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Draggable
|
<Draggable
|
||||||
key={x}
|
key={x}
|
||||||
draggableId={x}
|
draggableId={x}
|
||||||
index={index}>
|
index={index}>
|
||||||
{(provided) =>
|
{(provided) => (
|
||||||
(
|
|
||||||
<div
|
<div
|
||||||
{...(provided.draggableProps as any)}
|
{...provided.draggableProps}
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
ref={
|
ref={
|
||||||
provided.innerRef
|
provided.innerRef
|
||||||
|
@ -449,16 +432,13 @@ function ListElement({
|
||||||
</div>
|
</div>
|
||||||
</KanbanEntry>
|
</KanbanEntry>
|
||||||
</div>
|
</div>
|
||||||
) as any
|
)}
|
||||||
}
|
|
||||||
</Draggable>
|
</Draggable>
|
||||||
);
|
);
|
||||||
},
|
})}
|
||||||
)}
|
|
||||||
{provided.placeholder}
|
{provided.placeholder}
|
||||||
</div>
|
</div>
|
||||||
) as any
|
)}
|
||||||
}
|
|
||||||
</Droppable>
|
</Droppable>
|
||||||
<KanbanListHeader
|
<KanbanListHeader
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
@ -474,8 +454,7 @@ function ListElement({
|
||||||
</div>
|
</div>
|
||||||
</KanbanList>
|
</KanbanList>
|
||||||
</div>
|
</div>
|
||||||
) as any
|
)}
|
||||||
}
|
|
||||||
</Draggable>
|
</Draggable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue