feat(web): disable IRC fields (#1220)

This commit is contained in:
martylukyy 2023-10-27 17:33:41 +02:00 committed by GitHub
parent 2372c942b3
commit 40a1a4c014
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -30,7 +30,9 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
{({ remove, push }: FieldArrayRenderProps) => ( {({ remove, push }: FieldArrayRenderProps) => (
<div className="flex flex-col space-y-2 border-2 border-dashed dark:border-gray-700 p-4"> <div className="flex flex-col space-y-2 border-2 border-dashed dark:border-gray-700 p-4">
{channels && channels.length > 0 ? ( {channels && channels.length > 0 ? (
channels.map((_channel: IrcChannel, index: number) => ( channels.map((_channel: IrcChannel, index: number) => {
const isDisabled = channels[index].name === "#ptp-announce-dev";
return (
<div key={index} className="flex justify-between"> <div key={index} className="flex justify-between">
<div className="flex"> <div className="flex">
<Field name={`channels.${index}.name`}> <Field name={`channels.${index}.name`}>
@ -41,7 +43,9 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
value={field.value ?? ""} value={field.value ?? ""}
onChange={field.onChange} onChange={field.onChange}
placeholder="#Channel" placeholder="#Channel"
className="mr-4 dark:bg-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md" className={`mr-4 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm rounded-md
${isDisabled ? "disabled dark:bg-gray-800 dark:text-gray-500" : "dark:bg-gray-700 dark:text-white"}`}
disabled={isDisabled}
/> />
)} )}
</Field> </Field>
@ -54,7 +58,9 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
value={field.value ?? ""} value={field.value ?? ""}
onChange={field.onChange} onChange={field.onChange}
placeholder="Password" placeholder="Password"
className="mr-4 dark:bg-gray-700 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md" className={`mr-4 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm rounded-md
${isDisabled ? "disabled dark:bg-gray-800 dark:text-gray-500" : "dark:bg-gray-700 dark:text-white"}`}
disabled={isDisabled}
/> />
)} )}
</Field> </Field>
@ -62,14 +68,17 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className={`bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500
${isDisabled ? "disabled hidden" : ""}`}
onClick={() => remove(index)} onClick={() => remove(index)}
disabled={isDisabled}
> >
<span className="sr-only">Remove</span> <span className="sr-only">Remove</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
)) );
})
) : ( ) : (
<span className="text-center text-sm text-grey-darker dark:text-white"> <span className="text-center text-sm text-grey-darker dark:text-white">
No channels! No channels!
@ -87,7 +96,6 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
</FieldArray> </FieldArray>
</div> </div>
); );
interface IrcNetworkAddFormValues { interface IrcNetworkAddFormValues {
name: string; name: string;
enabled: boolean; enabled: boolean;