cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04: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 { 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>
); );
} }