mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-05-05 21:25:01 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add char counter to message input

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-03-04 21:36:23 +11:00
parent f8ba30df77
commit 84ce3aae30
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/generic/form/Input.tsx
View File

@@ -15,16 +15,18 @@ export interface InputProps extends DefaultInputProps {
}
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{ label, error, action, suffix, ...props }: InputProps,
{ label, error, action, suffix, className, disabled, ...props }: InputProps,
ref,
) {
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<InputWrapper error={error} disabled={props.disabled}>
<InputWrapper error={error} disabled={disabled}>
<input
ref={ref}
className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
className={`h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white ${
className ?? ''
}`}
{...props}
/>
{suffix && (

8
src/pages/Messages/MessageBar.tsx
View File

@@ -58,7 +58,7 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
<div className="mx-auto flex w-full space-x-2 bg-gray-50 bg-transparent p-3 text-gray-500 dark:text-gray-400">
<div className="mx-auto flex w-full max-w-4xl">
<form
className="flex w-full space-x-2"
className="relative flex w-full space-x-2"
onSubmit={(e): void => {
e.preventDefault();
sendMessage();
@@ -70,10 +70,16 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
placeholder="Enter Message"
disabled={!meshtasticState.ready}
value={currentMessage}
className="mr-16"
onChange={(e): void => {
setCurrentMessage(e.target.value);
}}
/>
<div className="absolute right-1 flex h-10">
<div className="z-10 my-auto mr-0.5 rounded-md border bg-secondaryDark bg-opacity-50 p-1 font-mono text-xs text-white">
{currentMessage.length}/255
</div>
</div>
</form>
</div>
</div>