diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx index 39d71f600..9208ea94d 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx @@ -1,5 +1,5 @@ import { FormControlLabel, Switch, SwitchProps } from '@mui/material' -import { useState } from 'react' +import { useEffect, useState } from 'react' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { colors } from '~/utils/colors' @@ -8,14 +8,15 @@ type MediaOptionKey = 'videoAudio' | 'image' | 'sourceLink' type MediaOptionsProps = { setMediaOptions: (options: { videoAudio: boolean; image: boolean; sourceLink: boolean }) => void + initialOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean } } -const MediaOptions = ({ setMediaOptions }: MediaOptionsProps) => { - const [mediaOptions, setLocalMediaOptions] = useState({ - videoAudio: false, - image: false, - sourceLink: false, - }) +const MediaOptions = ({ setMediaOptions, initialOptions }: MediaOptionsProps) => { + const [mediaOptions, setLocalMediaOptions] = useState(initialOptions) + + useEffect(() => { + setLocalMediaOptions(initialOptions) + }, [initialOptions]) const handleToggle = (option: MediaOptionKey) => { setLocalMediaOptions((prevOptions) => { diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 0fd65b448..3a992cafc 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx @@ -239,6 +239,16 @@ export const Editor = ({ setValue('type', selectedSchema.type as string) setValue('parent', selectedSchema.parent) + if (selectedSchema.index) { + setValue('selectedIndex', selectedSchema.index) + } + + setMediaOptions({ + videoAudio: !!selectedSchema.media_url, + image: !!selectedSchema.image_url, + sourceLink: !!selectedSchema.source_link, + }) + if (selectedSchema.type !== NoParent.value.toLowerCase()) { getNodeType(selectedSchema.type as string).then((data) => { const parsedDataDefault = data ? parseJson(data) : [{ required: false, type: 'string', key: '' }] @@ -398,6 +408,24 @@ export const Editor = ({ return undefined }, [selectedSchema, selectedNodeParentOptions]) + const resolvedSelectedIndexValue = useMemo((): TAutocompleteOption | undefined => { + if (!selectedSchema) { + return undefined + } + + const option = attributes.find((attr) => attr.key === selectedSchema.index) + + if (option) { + return { label: option.key, value: option.key } + } + + if (selectedSchema.index) { + return { label: selectedSchema.index, value: selectedSchema.index } + } + + return undefined + }, [selectedSchema, attributes]) + return ( @@ -491,7 +519,7 @@ export const Editor = ({ onDelete={handleDeleteAttribute} parent={selectedSchema ? selectedSchema.type : parent} /> - + @@ -499,8 +527,9 @@ export const Editor = ({ setValue(`selectedIndex`, val?.value)} + onSelect={(val) => setValue('selectedIndex', val?.value || '')} options={attributes.map((attr) => ({ label: attr.key, value: attr.key }))} + selectedValue={resolvedSelectedIndexValue} /> diff --git a/src/network/fetchSourcesData/index.ts b/src/network/fetchSourcesData/index.ts index 9efdd90a6..cc60f5d41 100644 --- a/src/network/fetchSourcesData/index.ts +++ b/src/network/fetchSourcesData/index.ts @@ -137,6 +137,10 @@ export interface Schema { children?: string[] primary_color?: string node_key?: string + index?: string + media_url?: string + image_url?: string + source_link?: string attributes?: { [key: string]: string } }