TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- addressing feedback

Browse Source
This commit is contained in:
Toba Ojo
2025-12-04 19:14:14 +00:00
parent 3af4e585e7
commit 9208470e53
13 changed files with 229 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/features/output/components/ChannelFields.tsx
View File

@@ -12,12 +12,13 @@ type ChannelFieldsProps = {
};
outputData?: OutputDataResponse;
onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
customFields: (string | undefined)[];
};
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue, customFields }: ChannelFieldsProps) => {
const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
const optionalConstants = optionalConstantsQuery?.data;
console.log(customFields);
const channelFieldsObject = useMemo(() => {
return {
connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -269,24 +270,28 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
<FieldArray name="customFields">
{(arrayHelpers) => (
<>
{values?.customFields?.map((_, index) => (
{values?.customFields?.slice(0, 6).map((_, index) => (
<div key={index} className="flex flex-row justify-between items-center mb-4">
<label htmlFor={`customFields.${index}`} className="mr-2">
Custom Field {index + 1}
</label>
<Field
name={`customFields.${index}`}
name={`customFields.${index}.label`}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Custom Field ${index + 1} label`}
/>
<Field
name={`customFields.${index}.value`}
key={index}
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
placeholder={`Enter Custom Field ${index + 1}`}
placeholder={`Enter Custom Field ${index + 1} value`}
autoComplete="off"
/>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push("")}
className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
onClick={() => arrayHelpers.push({ label: "", value: "" })}
className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={values?.customFields && values?.customFields?.length >= 6}
>
Add Custom Field
</button>