cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Show errors / queue on message.

Browse source 
Focus editor / box properly.
This commit is contained in:
Paul 2021-06-22 10:59:06 +01:00
parent 5db0854b42
commit 8fe1ce3450
8 changed files with 52 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
external/lang vendored

@ -1 +1 @@
Subproject commit 210172de724fcd5adeacec221bd9da30350afc06
Subproject commit a84270a2b941a51f4785e543c0882ce9f7f004a6

12
src/components/common/messaging/Message.tsx
View file

@ -6,18 +6,21 @@ import { Children } from "../../../types/Preact";
import Attachment from "./attachments/Attachment";
import { attachContextMenu } from "preact-context-menu";
import { useUser } from "../../../context/revoltjs/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue";
import { MessageObject } from "../../../context/revoltjs/util";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
import Overline from "../../ui/Overline";
interface Props {
attachContext?: boolean
queued?: QueuedMessage
message: MessageObject
contrast?: boolean
content?: Children
head?: boolean
}
export default function Message({ attachContext, message, contrast, content: replacement, head }: Props) {
export default function Message({ attachContext, message, contrast, content: replacement, head, queued }: Props) {
// TODO: Can improve re-renders here by providing a list
// TODO: of dependencies. We only need to update on u/avatar.
let user = useUser(message.author);
@ -25,9 +28,11 @@ export default function Message({ attachContext, message, contrast, content: rep
const content = message.content as string;
return (
<MessageBase id={message._id}
contrast={contrast}
head={head}
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
contrast={contrast}
sending={typeof queued !== 'undefined'}
failed={typeof queued?.error !== 'undefined'}
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
<MessageInfo>
{ head ?
<UserIcon target={user} size={36} /> :
@ -39,6 +44,7 @@ export default function Message({ attachContext, message, contrast, content: rep
<MessageDetail message={message} position="top" />
</span> }
{ replacement ?? <Markdown content={content} /> }
{ queued?.error && <Overline type="error" error={queued.error} /> }
{ message.attachments?.map((attachment, index) =>
<Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
{ message.embeds?.map((embed, index) =>

4
src/components/common/messaging/MessageBase.tsx
View file

@ -7,7 +7,7 @@ import { MessageObject } from "../../../context/revoltjs/util";
export interface BaseMessageProps {
head?: boolean,
status?: boolean,
failed?: boolean,
mention?: boolean,
blocked?: boolean,
sending?: boolean,
@ -49,7 +49,7 @@ export default styled.div<BaseMessageProps>`
color: var(--tertiary-foreground);
` }
${ props => props.status && css`
${ props => props.failed && css`
color: var(--error);
` }

12
src/components/common/messaging/MessageBox.tsx
View file

@ -19,6 +19,7 @@ import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib
import FilePreview from './bars/FilePreview';
import { debounce } from "../../../lib/debounce";
import { internalEmit } from "../../../lib/eventEmitter";
type Props = WithDispatcher & {
channel: Channel;
@ -237,11 +238,22 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
/>
</Action>
<TextAreaAutoSize
autoFocus
hideBorder
maxRows={5}
padding={15}
id="message"
value={draft ?? ''}
onKeyDown={e => {
if (
e.key === "ArrowUp" &&
(!draft || draft.length === 0)
) {
e.preventDefault();
internalEmit("MessageRenderer", "edit_last");
return;
}
if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
e.preventDefault();
return send();

139
src/components/ui/TextArea.tsx
View file

@ -48,142 +48,3 @@ export default styled.textarea<TextAreaProps>`
font-family: 'Open Sans', sans-serif;
` }
`;
/*export interface TextAreaProps {
id?: string;
value: string;
maxRows?: number;
padding?: number;
minHeight?: number;
disabled?: boolean;
maxLength?: number;
className?: string;
autoFocus?: boolean;
forceFocus?: boolean;
placeholder?: string;
onKeyDown?: (ev: KeyboardEvent) => void;
onKeyUp?: (ev: KeyboardEvent) => void;
onChange: (
value: string,
ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>
) => void;
onFocus?: (current: HTMLTextAreaElement) => void;
onBlur?: () => void;
}
const lineHeight = 20;
export const TextAreaB = memo((props: TextAreaProps) => {
const padding = props.padding ? props.padding * 2 : 0;
const [height, setHeightState] = useState(
props.minHeight ?? lineHeight + padding
);
const ghost = useRef<HTMLDivElement>();
const ref = useRef<HTMLTextAreaElement>();
function setHeight(h: number = lineHeight) {
let newHeight = Math.min(
Math.max(
lineHeight,
props.maxRows ? Math.min(h, props.maxRows * lineHeight) : h
),
props.minHeight ?? Infinity
);
if (props.padding) newHeight += padding;
if (height !== newHeight) {
setHeightState(newHeight);
}
}
function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
props.onChange(ev.currentTarget.value, ev);
}
useLayoutEffect(() => {
setHeight(ghost.current.clientHeight);
}, [ghost, props.value]);
useEffect(() => {
if (props.autoFocus) ref.current.focus();
}, [props.value]);
const inputSelected = () =>
["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
useEffect(() => {
if (props.forceFocus) {
ref.current.focus();
}
if (props.autoFocus && !inputSelected()) {
ref.current.focus();
}
// ? if you are wondering what this is
// ? it is a quick and dirty hack to fix
// ? value not setting correctly
// ? I have no clue what's going on
ref.current.value = props.value;
if (!props.autoFocus) return;
function keyDown(e: KeyboardEvent) {
if ((e.ctrlKey && e.key !== "v") || e.altKey || e.metaKey) return;
if (e.key.length !== 1) return;
if (ref && !inputSelected()) {
ref.current.focus();
}
}
document.body.addEventListener("keydown", keyDown);
return () => document.body.removeEventListener("keydown", keyDown);
}, [ref]);
useEffect(() => {
function focus(textarea_id: string) {
if (props.id === textarea_id) {
ref.current.focus();
}
}
// InternalEventEmitter.addListener("focus_textarea", focus);
// return () =>
// InternalEventEmitter.removeListener("focus_textarea", focus);
}, [ref]);
return (
<div className={classNames(styles.container, props.className)}>
<textarea
id={props.id}
name={props.id}
style={{ height }}
value={props.value}
onChange={onChange}
disabled={props.disabled}
maxLength={props.maxLength}
className={styles.textarea}
onKeyDown={props.onKeyDown}
placeholder={props.placeholder}
onContextMenu={e => e.stopPropagation()}
onKeyUp={ev => {
setHeight(ghost.current.clientHeight);
props.onKeyUp && props.onKeyUp(ev);
}}
ref={ref}
onFocus={() => props.onFocus && props.onFocus(ref.current)}
onBlur={props.onBlur}
/>
<div className={styles.hide}>
<div className={styles.ghost} ref={ghost}>
{props.value
? props.value
.split("\n")
.map(x => `‎${x}`)
.join("\n")
: undefined ?? "‎\n"}
</div>
</div>
</div>
);
});*/

28
src/lib/TextAreaAutoSize.tsx
View file

@ -1,20 +1,24 @@
import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
import { useEffect, useRef } from "preact/hooks";
import { internalSubscribe } from "./eventEmitter";
type TextAreaAutoSizeProps = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'style' | 'value'> & TextAreaProps & {
autoFocus?: boolean,
minHeight?: number,
maxRows?: number,
forceFocus?: boolean
autoFocus?: boolean
minHeight?: number
maxRows?: number
value: string
id?: string
};
export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const { autoFocus, minHeight, maxRows, value, padding, lineHeight, hideBorder, children, as, ...textAreaProps } = props;
const { autoFocus, minHeight, maxRows, value, padding, lineHeight, hideBorder, forceFocus, children, as, ...textAreaProps } = props;
const line = lineHeight ?? DEFAULT_LINE_HEIGHT;
const heightPadding = ((padding ?? DEFAULT_TEXT_AREA_PADDING) + (hideBorder ? 0 : TEXT_AREA_BORDER_WIDTH)) * 2;
const height = Math.max(Math.min(value.split('\n').length, maxRows ?? Infinity) * line + heightPadding, minHeight ?? 0);
console.log(value.split('\n').length, line, heightPadding, height);
const ref = useRef<HTMLTextAreaElement>();
useEffect(() => {
@ -25,9 +29,9 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
useEffect(() => {
/* if (props.forceFocus) { // figure out what needed force focus
if (forceFocus) {
ref.current.focus();
} */
}
if (autoFocus && !inputSelected()) {
ref.current.focus();
@ -52,6 +56,16 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
return () => document.body.removeEventListener("keydown", keyDown);
}, [ref]);
useEffect(() => {
function focus(id: string) {
if (id === props.id) {
ref.current.focus();
}
}
return internalSubscribe("TextArea", "focus", focus);
}, [ref]);
return <TextArea
ref={ref}
value={value}

2
src/pages/channels/messaging/MessageEditor.tsx
View file

@ -58,6 +58,7 @@ export default function MessageEditor({ message, finish }: Props) {
return (
<EditorBase>
<TextAreaAutoSize
forceFocus
maxRows={3}
padding={12}
value={content}
@ -73,7 +74,6 @@ export default function MessageEditor({ message, finish }: Props) {
save();
}
}}
// forceFocus
/>
<span className="caption">
escape to <a onClick={finish}>cancel</a> &middot;

26
src/pages/channels/messaging/MessageRenderer.tsx
View file

@ -1,17 +1,17 @@
import { decodeTime } from "ulid";
import MessageEditor from "./MessageEditor";
import { Children } from "../../../types/Preact";
import { useEffect, useState } from "preact/hooks";
import ConversationStart from "./ConversationStart";
import { connectState } from "../../../redux/connector";
import Preloader from "../../../components/ui/Preloader";
import { RenderState } from "../../../lib/renderer/types";
import DateDivider from "../../../components/ui/DateDivider";
import { QueuedMessage } from "../../../redux/reducers/queue";
import { useContext, useEffect, useState } from "preact/hooks";
import { MessageObject } from "../../../context/revoltjs/util";
import Message from "../../../components/common/messaging/Message";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
@ -24,17 +24,13 @@ interface Props {
function MessageRenderer({ id, state, queue }: Props) {
if (state.type !== 'RENDER') return null;
const ctx = useForceUpdate();
const users = useUsers();
const userId = ctx.client.user!._id;
/*
const view = useView(id);*/
const client = useContext(AppContext);
const userId = client.user!._id;
const [editing, setEditing] = useState<string | undefined>(undefined);
const stopEditing = () => {
setEditing(undefined);
internalEmit("MessageBox", "focus");
internalEmit("TextArea", "focus", "message");
};
useEffect(() => {
@ -141,24 +137,14 @@ function MessageRenderer({ id, state, queue }: Props) {
} as any;
}
/*render.push(
<Message
user={users.find(x => x?._id === userId)}
message={msg.data}
queued={msg}
key={msg.id}
head={head}
/>
);*/
render.push(
<Message message={msg.data}
key={msg.id}
queued={msg}
head={head}
attachContext />
);
}
// render.push(<div>end</div>);
} else {
render.push(
<RequiresOnline>