cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(rbd): transform rbd types to Preact from React

Browse source
This commit is contained in:
Paul 2021-10-31 16:04:37 +00:00
parent c208064d2c
commit f97925073a
2 changed files with 227 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/lib/dnd.ts Normal file
View 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;

59
src/pages/settings/server/Categories.tsx
View file

@ -1,7 +1,6 @@
import { Filter, Plus, X } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { Plus, X } from "@styled-icons/boxicons-regular";
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 { Category } from "revolt-api/types/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 { useAutosave } from "../../../lib/debounce";
import { Draggable, Droppable } from "../../../lib/dnd";
import { noop } from "../../../lib/js";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
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 Tip from "../../../components/ui/Tip";
const KanbanEntry = styled.div`
padding: 2px 4px;
@ -234,8 +230,7 @@ export const Categories = observer(({ server }: Props) => {
droppableId="categories"
direction="horizontal"
type="column">
{(provided) =>
(
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}>
@ -280,8 +275,7 @@ export const Categories = observer(({ server }: Props) => {
x.id === category.id
? {
...x,
channels:
[
channels: [
...x.channels,
channel._id,
],
@ -312,8 +306,7 @@ export const Categories = observer(({ server }: Props) => {
{provided.placeholder}
</KanbanBoard>
</div>
) as any
}
)}
</Droppable>
</FullSize>
</DragDropContext>
@ -366,16 +359,12 @@ function ListElement({
key={category.id}
draggableId={category.id}
index={index}>
{(provided) =>
(
<div
{...(provided.draggableProps as any)}
ref={provided.innerRef}>
{(provided) => (
<div {...provided.draggableProps} ref={provided.innerRef}>
<KanbanList last={false} key={category.id}>
<div class="inner">
<Row>
<KanbanListHeader
{...(provided.dragHandleProps as any)}>
<KanbanListHeader {...provided.dragHandleProps}>
{editing ? (
<input
value={editing}
@ -404,29 +393,23 @@ function ListElement({
<Droppable
droppableId={category.id}
key={category.id}>
{(provided) =>
(
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}>
{category.channels.map(
(x, index) => {
{category.channels.map((x, index) => {
const channel =
server.client.channels.get(
x,
);
if (!channel)
return null;
server.client.channels.get(x);
if (!channel) return null;
return (
<Draggable
key={x}
draggableId={x}
index={index}>
{(provided) =>
(
{(provided) => (
<div
{...(provided.draggableProps as any)}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={
provided.innerRef
@ -449,16 +432,13 @@ function ListElement({
</div>
</KanbanEntry>
</div>
) as any
}
)}
</Draggable>
);
},
)}
})}
{provided.placeholder}
</div>
) as any
}
)}
</Droppable>
<KanbanListHeader
onClick={() =>
@ -474,8 +454,7 @@ function ListElement({
</div>
</KanbanList>
</div>
) as any
}
)}
</Draggable>
);
}