@@ -39,7 +39,7 @@ interface ContentTypeOption {
3939 * @returns The rendered component.
4040 */
4141const AdvancePropertise = ( props : SchemaProps ) => {
42- // State for toggle states
42+ // State for toggle state
4343 const [ toggleStates , setToggleStates ] = useState ( {
4444 minChars : props ?. value ?. minChars ,
4545 maxChars : props ?. value ?. maxChars ,
@@ -59,19 +59,27 @@ const AdvancePropertise = (props: SchemaProps) => {
5959 multiple : props ?. value ?. multiple ,
6060 embedObjects : props ?. value ?. embedObjects ,
6161 default_value : props ?. value ?. default_value ,
62- option : props ?. value ?. options
62+ option : props ?. value ?. options ,
63+ referenedItems : props ?. value ?. referenedItems || [ ]
6364 } ) ;
6465
6566 const embedObjects = props ?. value ?. embedObjects ?. map ( ( item : string ) => ( {
6667 label : item ,
6768 value : item
6869 } ) ) ;
70+
71+ const referencedItems = props ?. value ?. referenedItems ?. map ( ( item : string ) => ( {
72+ label : item ,
73+ value : item
74+ } ) ) ;
75+
6976 // State for content types
7077 const [ contentTypes , setContentTypes ] = useState < ContentType [ ] > ( [ ] ) ;
7178 const [ ctValue , setCTValue ] = useState < ContentTypeOption [ ] | null > ( embedObjects ) ;
7279 const [ embedObjectsLabels , setEmbedObjectsLabels ] = useState < string [ ] > (
7380 props ?. value ?. embedObjects
7481 ) ;
82+ const [ referencedCT , setReferencedCT ] = useState < ContentTypeOption [ ] | null > ( referencedItems || null ) ;
7583 const [ showOptions , setShowOptions ] = useState < Record < number , boolean > > ( { } ) ;
7684 const [ showIcon , setShowIcon ] = useState < number > ( ) ;
7785 const filterRef = useRef < HTMLDivElement | null > ( null ) ;
@@ -144,6 +152,7 @@ const AdvancePropertise = (props: SchemaProps) => {
144152 maxRange : currentToggleStates ?. maxRange ,
145153 minSize : currentToggleStates ?. minSize ,
146154 maxSize : currentToggleStates ?. maxSize ,
155+ referenedItems : currentToggleStates ?. referenedItems ,
147156 title : currentToggleStates ?. title ,
148157 url : currentToggleStates ?. url
149158 } ,
@@ -187,6 +196,7 @@ const AdvancePropertise = (props: SchemaProps) => {
187196 maxRange : currentToggleStates ?. maxRange ,
188197 minSize : currentToggleStates ?. minSize ,
189198 maxSize : currentToggleStates ?. maxSize ,
199+ referenedItems : currentToggleStates ?. referenedItems ,
190200 title : currentToggleStates ?. title ,
191201 url : currentToggleStates ?. url
192202 } ,
@@ -307,6 +317,8 @@ const AdvancePropertise = (props: SchemaProps) => {
307317 } ) ;
308318 } ;
309319
320+
321+
310322 const handleDrop = ( index : number ) => {
311323 if ( draggedIndex === null ) return ;
312324
@@ -323,7 +335,7 @@ const AdvancePropertise = (props: SchemaProps) => {
323335
324336 useEffect ( ( ) => {
325337 if ( ctValue && Array . isArray ( ctValue ) ) {
326- const labels = ctValue . map ( ( item ) => item . label ) ;
338+ const labels = ctValue ? .map ( ( item ) => item ? .label ) ;
327339 setEmbedObjectsLabels ( labels ) ;
328340 }
329341 } , [ ctValue ] ) ;
@@ -333,9 +345,9 @@ const AdvancePropertise = (props: SchemaProps) => {
333345
334346 const option = validateArray ( contentTypesList )
335347 ? contentTypesList ?. map ( ( option : ContentType ) => ( {
336- label : option ?. contentstackTitle ,
337- value : option ?. contentstackUid
338- } ) )
348+ label : option ?. contentstackTitle ,
349+ value : option ?. contentstackUid
350+ } ) )
339351 : [ { label : contentTypesList , value : contentTypesList } ] ;
340352
341353 return (
@@ -422,53 +434,53 @@ const AdvancePropertise = (props: SchemaProps) => {
422434
423435 { ( props ?. fieldtype === 'Single Line Textbox' ||
424436 props ?. fieldtype === 'Multi Line Textbox' ) && (
425- < >
426- < Field >
427- < FieldLabel htmlFor = "validation" version = "v2" >
428- Default Value
429- </ FieldLabel >
430- < Tooltip
431- content = {
432- 'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
433- }
434- position = "right"
435- >
436- < Icon icon = "Question" size = "small" version = "v2" className = "Help" />
437- </ Tooltip >
438- < TextInput
439- type = "text"
440- value = { toggleStates ?. default_value }
441- placeholder = "Enter value"
442- version = "v2"
443- onChange = {
444- handleOnChange &&
445- ( ( e : React . ChangeEvent < HTMLInputElement > ) =>
446- handleOnChange ( 'default_value' , e , true ) )
447- }
448- />
449- </ Field >
450-
451- < Field >
452- < FieldLabel htmlFor = "validation" version = "v2" >
453- Validation (Regex)
454- </ FieldLabel >
455- < Tooltip content = { 'Define the validation for the field.' } position = "right" >
456- < Icon icon = "Question" size = "small" version = "v2" className = "Help" />
457- </ Tooltip >
458- < TextInput
459- type = "text"
460- value = { toggleStates ?. validationRegex }
461- placeholder = "Enter value"
462- version = "v2"
463- onChange = {
464- handleOnChange &&
465- ( ( e : React . ChangeEvent < HTMLInputElement > ) =>
466- handleOnChange ( 'validationRegex' , e , true ) )
467- }
468- />
469- </ Field >
470- </ >
471- ) }
437+ < >
438+ < Field >
439+ < FieldLabel htmlFor = "validation" version = "v2" >
440+ Default Value
441+ </ FieldLabel >
442+ < Tooltip
443+ content = {
444+ 'Set a default field value for this field. The value will appear by default while creating an entry for this content type.'
445+ }
446+ position = "right"
447+ >
448+ < Icon icon = "Question" size = "small" version = "v2" className = "Help" />
449+ </ Tooltip >
450+ < TextInput
451+ type = "text"
452+ value = { toggleStates ?. default_value }
453+ placeholder = "Enter value"
454+ version = "v2"
455+ onChange = {
456+ handleOnChange &&
457+ ( ( e : React . ChangeEvent < HTMLInputElement > ) =>
458+ handleOnChange ( 'default_value' , e , true ) )
459+ }
460+ />
461+ </ Field >
462+
463+ < Field >
464+ < FieldLabel htmlFor = "validation" version = "v2" >
465+ Validation (Regex)
466+ </ FieldLabel >
467+ < Tooltip content = { 'Define the validation for the field.' } position = "right" >
468+ < Icon icon = "Question" size = "small" version = "v2" className = "Help" />
469+ </ Tooltip >
470+ < TextInput
471+ type = "text"
472+ value = { toggleStates ?. validationRegex }
473+ placeholder = "Enter value"
474+ version = "v2"
475+ onChange = {
476+ handleOnChange &&
477+ ( ( e : React . ChangeEvent < HTMLInputElement > ) =>
478+ handleOnChange ( 'validationRegex' , e , true ) )
479+ }
480+ />
481+ </ Field >
482+ </ >
483+ ) }
472484
473485 { props ?. fieldtype === 'Link' && (
474486 < >
@@ -545,7 +557,39 @@ const AdvancePropertise = (props: SchemaProps) => {
545557 < FieldLabel className = "option-label" htmlFor = "options" version = "v2" >
546558 Referenced Content Type
547559 </ FieldLabel >
548- < Tag tags = { props ?. data ?. refrenceTo } isDisabled = { true } version = { 'v2' } />
560+ { /* {option?.length > 0 && ( */ }
561+ < Select
562+ value = { referencedCT }
563+ isMulti = { true }
564+ onChange = { ( selectedOptions : ContentTypeOption [ ] ) => {
565+ setReferencedCT ( selectedOptions ) ;
566+ const referencedArray = selectedOptions ?. map ( ( item : optionsType ) => item ?. value ) ;
567+
568+ props ?. updateFieldSettings (
569+ props ?. rowId ,
570+ {
571+ ...props ?. value ,
572+ validationRegex : toggleStates ?. validationRegex ?? '' ,
573+ referenedItems : referencedArray // <-- update only this property!
574+ } ,
575+ true ,
576+ props ?. data ?. contentstackFieldUid
577+ ) ;
578+ } }
579+ options = {
580+ ( Array . isArray ( props ?. data ?. refrenceTo ) && props ?. data ?. refrenceTo ?. length ) ? [ props . data . refrenceTo . map ( ( item : any ) => ( {
581+ label : item ,
582+ value : item
583+ } ) ) , ...option ]
584+ : option ?? [ ] }
585+ placeholder = "Add Content Type(s)"
586+ version = "v2"
587+ isSearchable = { true }
588+ isClearable = { true }
589+ width = "350px"
590+ maxMenuHeight = { 200 }
591+ />
592+ { /* )} */ }
549593 </ Field >
550594 ) }
551595
@@ -556,54 +600,54 @@ const AdvancePropertise = (props: SchemaProps) => {
556600 < div className = "options-class" >
557601 { ( props ?. fieldtype === 'HTML Rich text Editor' ||
558602 props ?. fieldtype === 'JSON Rich Text Editor' ) && (
559- < >
560- < div className = "ToggleWrap" >
561- < ToggleSwitch
562- label = "Embed Object(s)"
563- labelColor = "primary"
564- labelPosition = "right"
565- checked = { ( ctValue ?. length ?? 0 ) > 0 || toggleStates ?. embedObject }
566- onChange = {
567- handleToggleChange &&
568- ( ( e : React . MouseEvent < HTMLElement > ) =>
569- handleToggleChange (
570- 'embedObject' ,
571- ( e . target as HTMLInputElement ) ?. checked ,
572- true
573- ) )
574- }
575- />
576- </ div >
603+ < >
604+ < div className = "ToggleWrap" >
605+ < ToggleSwitch
606+ label = "Embed Object(s)"
607+ labelColor = "primary"
608+ labelPosition = "right"
609+ checked = { ( ctValue ?. length ?? 0 ) > 0 || toggleStates ?. embedObject }
610+ onChange = {
611+ handleToggleChange &&
612+ ( ( e : React . MouseEvent < HTMLElement > ) =>
613+ handleToggleChange (
614+ 'embedObject' ,
615+ ( e . target as HTMLInputElement ) ?. checked ,
616+ true
617+ ) )
618+ }
619+ />
620+ </ div >
577621
578- { ( ( ctValue && ctValue ?. length > 0 ) || toggleStates ?. embedObject ) && (
579- < Select
580- value = { ctValue }
581- isMulti = { true }
582- onChange = { ( selectedOptions : ContentTypeOption [ ] ) => {
583- setCTValue ( selectedOptions ) ;
584- const embedObject = selectedOptions . map ( ( item : optionsType ) => item ?. value ) ; // Update the state with the selected options
585- props ?. updateFieldSettings (
586- props ?. rowId ,
587- {
588- validationRegex : toggleStates ?. validationRegex ?? '' ,
589- embedObjects : embedObject
590- } ,
591- true ,
592- props ?. data ?. contentstackFieldUid
593- ) ;
594- } }
595- options = { option }
596- placeholder = "Select Content Types"
597- version = "v2"
598- isSearchable = { true }
599- isClearable = { true }
600- width = "350px"
601- maxMenuHeight = { 200 }
622+ { ( ( ctValue && ctValue ?. length > 0 ) || toggleStates ?. embedObject ) && (
623+ < Select
624+ value = { ctValue }
625+ isMulti = { true }
626+ onChange = { ( selectedOptions : ContentTypeOption [ ] ) => {
627+ setCTValue ( selectedOptions ) ;
628+ const embedObject = selectedOptions ? .map ( ( item : optionsType ) => item ?. value ) ; // Update the state with the selected options
629+ props ?. updateFieldSettings (
630+ props ?. rowId ,
631+ {
632+ validationRegex : toggleStates ?. validationRegex ?? '' ,
633+ embedObjects : embedObject
634+ } ,
635+ true ,
636+ props ?. data ?. contentstackFieldUid
637+ ) ;
638+ } }
639+ options = { option }
640+ placeholder = "Select Content Types"
641+ version = "v2"
642+ isSearchable = { true }
643+ isClearable = { true }
644+ width = "350px"
645+ maxMenuHeight = { 200 }
602646 // isSelectAll={true}
603- />
604- ) }
605- </ >
606- ) }
647+ />
648+ ) }
649+ </ >
650+ ) }
607651 { props ?. fieldtype !== 'Global' && props ?. fieldtype !== 'Boolean' && (
608652 < div className = "ToggleWrap" >
609653 < ToggleSwitch
0 commit comments