Sacha Weatherstone
5 years ago
27 changed files with 530 additions and 249 deletions
@ -0,0 +1,127 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm } from 'react-hook-form'; |
|||
import { FiEdit3, FiSave } from 'react-icons/fi'; |
|||
|
|||
import { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import { connection } from '../core/connection.js'; |
|||
import { EnumSelect } from './generic/form/EnumSelect.jsx'; |
|||
import { Input } from './generic/form/Input.jsx'; |
|||
import { IconButton } from './generic/IconButton.jsx'; |
|||
|
|||
export interface ChannelProps { |
|||
channel: Protobuf.Channel; |
|||
} |
|||
interface DotProps { |
|||
role: Protobuf.Channel_Role; |
|||
admin: boolean; |
|||
} |
|||
const Dot = ({ role, admin }: DotProps): JSX.Element => ( |
|||
<div |
|||
className={`h-3 my-auto w-3 rounded-full ${ |
|||
role === Protobuf.Channel_Role.PRIMARY |
|||
? 'bg-green-500' |
|||
: admin |
|||
? 'bg-amber-400' |
|||
: role === Protobuf.Channel_Role.SECONDARY |
|||
? 'bg-cyan-500' |
|||
: 'bg-gray-400' |
|||
}`}
|
|||
/> |
|||
); |
|||
|
|||
export const Channel = ({ channel }: ChannelProps): JSX.Element => { |
|||
const [edit, setEdit] = React.useState(false); |
|||
const [loading, setLoading] = React.useState(false); |
|||
|
|||
const { register, handleSubmit, formState } = useForm<{ |
|||
role: Protobuf.Channel_Role; |
|||
settings: { |
|||
name: string; |
|||
}; |
|||
}>({ |
|||
defaultValues: { |
|||
role: channel.role, |
|||
settings: { |
|||
name: channel.settings?.name, |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit(async (data) => { |
|||
setLoading(true); |
|||
const adminChannel = Protobuf.Channel.create({ |
|||
role: data.role, |
|||
index: channel.index, |
|||
settings: data.settings, |
|||
}); |
|||
|
|||
await connection.setChannel(adminChannel, (): Promise<void> => { |
|||
setLoading(false); |
|||
return Promise.resolve(); |
|||
}); |
|||
}); |
|||
|
|||
return ( |
|||
<div className="relative flex justify-between p-3 bg-gray-100 rounded-md dark:bg-gray-700"> |
|||
{edit ? ( |
|||
<> |
|||
{loading && ( |
|||
<div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm"> |
|||
<div className="m-auto text-lg font-medium text-gray-400"> |
|||
Loading |
|||
</div> |
|||
</div> |
|||
)} |
|||
<div className="my-auto space-x-2"> |
|||
<form> |
|||
<div className="flex space-x-2"> |
|||
<EnumSelect |
|||
label="Channel Type" |
|||
optionsEnum={Protobuf.Channel_Role} |
|||
{...register('role', { valueAsNumber: true })} |
|||
/> |
|||
<Dot |
|||
role={channel.role} |
|||
admin={channel.settings?.name === 'admin'} |
|||
/> |
|||
</div> |
|||
<Input label="Name" {...register('settings.name')} /> |
|||
</form> |
|||
</div> |
|||
<IconButton |
|||
onClick={async (): Promise<void> => { |
|||
await onSubmit(); |
|||
|
|||
setEdit(false); |
|||
}} |
|||
icon={<FiSave />} |
|||
/> |
|||
</> |
|||
) : ( |
|||
<> |
|||
<div className="flex my-auto space-x-2"> |
|||
<Dot |
|||
role={channel.role} |
|||
admin={channel.settings?.name === 'admin'} |
|||
/> |
|||
<div> |
|||
{channel.settings?.name.length |
|||
? channel.settings.name |
|||
: channel.role === Protobuf.Channel_Role.PRIMARY |
|||
? 'Primary' |
|||
: `Channel: ${channel.index}`} |
|||
</div> |
|||
</div> |
|||
<IconButton |
|||
onClick={(): void => { |
|||
setEdit(true); |
|||
}} |
|||
icon={<FiEdit3 />} |
|||
/> |
|||
</> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,49 @@ |
|||
import React from 'react'; |
|||
|
|||
import { FiCheck } from 'react-icons/fi'; |
|||
|
|||
type DefaulButtonProps = JSX.IntrinsicElements['button']; |
|||
|
|||
export interface IconButtonProps extends DefaulButtonProps { |
|||
icon: React.ReactNode; |
|||
confirmAction?: () => void; |
|||
} |
|||
|
|||
export const IconButton = ({ |
|||
icon, |
|||
confirmAction, |
|||
...props |
|||
}: IconButtonProps): JSX.Element => { |
|||
const [hasConfirmed, setHasConfirmed] = React.useState(false); |
|||
|
|||
const handleConfirm = (): void => { |
|||
if (confirmAction) { |
|||
if (hasConfirmed) { |
|||
void confirmAction(); |
|||
} |
|||
setHasConfirmed(true); |
|||
setTimeout(() => { |
|||
setHasConfirmed(false); |
|||
}, 3000); |
|||
} |
|||
}; |
|||
return ( |
|||
<div |
|||
className="my-auto text-gray-500 dark:text-gray-400" |
|||
onClick={handleConfirm} |
|||
> |
|||
<button |
|||
type="button" |
|||
className={`p-2 rounded-md active:scale-95 ${ |
|||
hasConfirmed |
|||
? 'bg-red-500' |
|||
: 'hover:bg-gray-200 dark:hover:bg-gray-600' |
|||
}`}
|
|||
{...props} |
|||
> |
|||
{hasConfirmed ? <FiCheck /> : icon} |
|||
<span className="sr-only">Refresh</span> |
|||
</button> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,61 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
type DefaultInputProps = JSX.IntrinsicElements['input']; |
|||
|
|||
interface InputProps extends DefaultInputProps { |
|||
icon?: JSX.Element; |
|||
label?: string; |
|||
valid?: boolean; |
|||
validationMessage?: string; |
|||
} |
|||
|
|||
export const Input = React.forwardRef<HTMLInputElement, InputProps>( |
|||
function Input( |
|||
{ |
|||
icon, |
|||
label, |
|||
valid, |
|||
validationMessage, |
|||
id, |
|||
disabled, |
|||
...props |
|||
}: InputProps, |
|||
ref, |
|||
) { |
|||
return ( |
|||
<div className="w-full"> |
|||
<label |
|||
htmlFor={id} |
|||
className="block text-sm font-medium text-black dark:text-white" |
|||
> |
|||
{label} |
|||
</label> |
|||
<div className="relative"> |
|||
{icon && ( |
|||
<div className="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none"> |
|||
{React.cloneElement(icon, { |
|||
className: 'w-5 h-5 text-gray-500 dark:text-gray-600', |
|||
})} |
|||
</div> |
|||
)} |
|||
<input |
|||
id={id} |
|||
ref={ref} |
|||
disabled={disabled} |
|||
{...props} |
|||
className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:border-gray-600 dark:text-white ${ |
|||
icon ? 'pl-9' : 'pl-2' |
|||
} ${ |
|||
disabled |
|||
? 'bg-gray-200 dark:bg-primaryDark cursor-not-allowed' |
|||
: 'bg-white dark:bg-secondaryDark' |
|||
}`}
|
|||
/> |
|||
</div> |
|||
{!valid && ( |
|||
<div className="text-sm text-gray-600">{validationMessage}</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -0,0 +1,58 @@ |
|||
import React from 'react'; |
|||
|
|||
import { InputWrapper } from './InputWrapper.jsx'; |
|||
import { Label } from './Label.jsx'; |
|||
|
|||
type DefaultSelectProps = JSX.IntrinsicElements['select']; |
|||
|
|||
interface SelectProps extends DefaultSelectProps { |
|||
options?: { |
|||
name: string; |
|||
value: number | string; |
|||
}[]; |
|||
optionsEnum?: { [s: string]: string | number }; |
|||
label?: string; |
|||
error?: string; |
|||
small?: boolean; |
|||
} |
|||
|
|||
export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>( |
|||
({ options, optionsEnum, label, error, small, ...props }, ref) => { |
|||
const optionsEnumValues = optionsEnum |
|||
? Object.entries(optionsEnum).filter( |
|||
(value) => typeof value[1] === 'number', |
|||
) |
|||
: []; |
|||
return ( |
|||
<div> |
|||
{label && <Label label={label} error={error} />} |
|||
<InputWrapper> |
|||
<select |
|||
ref={ref} |
|||
className={`w-full bg-transparent focus:outline-none focus:border-primary ${ |
|||
small ? 'py-1 mx-1' : 'h-10 mx-2' |
|||
}`}
|
|||
{...props} |
|||
> |
|||
{optionsEnumValues.length && |
|||
optionsEnumValues.map(([name, value]) => ( |
|||
<option className="dark:bg-gray-700" key={value} value={value}> |
|||
{name} |
|||
</option> |
|||
))} |
|||
{options && |
|||
options.map((option) => ( |
|||
<option |
|||
className="dark:bg-gray-700" |
|||
key={option.value} |
|||
value={option.value} |
|||
> |
|||
{option.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
</InputWrapper> |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -0,0 +1,30 @@ |
|||
import React from 'react'; |
|||
|
|||
import { InputWrapper } from './InputWrapper.jsx'; |
|||
import { Label } from './Label.jsx'; |
|||
|
|||
type DefaultInputProps = JSX.IntrinsicElements['input']; |
|||
|
|||
interface InputProps extends DefaultInputProps { |
|||
label?: string; |
|||
error?: string; |
|||
action?: JSX.Element; |
|||
} |
|||
|
|||
export const Input = React.forwardRef<HTMLInputElement, InputProps>( |
|||
function Input({ label, error, action, ...props }: InputProps, ref) { |
|||
return ( |
|||
<div className="w-full"> |
|||
{label && <Label label={label} error={error} />} |
|||
<InputWrapper error={error} disabled={props.disabled}> |
|||
<input |
|||
ref={ref} |
|||
className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary" |
|||
{...props} |
|||
/> |
|||
{action && <div className="flex mr-1">{action}</div>} |
|||
</InputWrapper> |
|||
</div> |
|||
); |
|||
}, |
|||
); |
|||
@ -0,0 +1,29 @@ |
|||
import React from 'react'; |
|||
|
|||
export interface LabelProps { |
|||
error?: string; |
|||
disabled?: boolean; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const InputWrapper = ({ |
|||
error, |
|||
disabled, |
|||
children, |
|||
}: LabelProps): JSX.Element => ( |
|||
<div |
|||
className={`flex w-full border-y border rounded-md ${ |
|||
disabled |
|||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400' |
|||
: '' |
|||
} ${ |
|||
error |
|||
? 'border-red-500' |
|||
: disabled |
|||
? 'border-gray-200' |
|||
: ' focus-within:border-primary hover:border-primary' |
|||
}`}
|
|||
> |
|||
{children} |
|||
</div> |
|||
); |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react'; |
|||
|
|||
export interface LabelProps { |
|||
label: string; |
|||
error?: string; |
|||
} |
|||
|
|||
export const Label = ({ label, error }: LabelProps): JSX.Element => ( |
|||
<label className="text-xs font-semibold text-gray-500"> |
|||
{label} |
|||
{error && <span className="ml-2 text-red-500">{error}</span>} |
|||
</label> |
|||
); |
|||
Loading…
Reference in new issue