| 1 |
// import { useState, useEffect } from '@wordpress/element'; |
| 2 |
// import { Button } from '@wordpress/components'; |
| 3 |
// import './editor.scss'; |
| 4 |
|
| 5 |
// const Advertisement = ( { attributes, setAttributes } ) => { |
| 6 |
// const [ adContents, setAdContents ] = useState( |
| 7 |
// attributes.adContents || [ '' ] |
| 8 |
// ); |
| 9 |
// const [ expandedAds, setExpandedAds ] = useState( [ 0 ] ); |
| 10 |
|
| 11 |
// useEffect( () => { |
| 12 |
// setAdContents( attributes.adContents || [ '' ] ); |
| 13 |
// }, [ attributes.adContents ] ); |
| 14 |
|
| 15 |
// const handleAddAdContent = () => { |
| 16 |
// const newAdContents = [ ...adContents, '' ]; |
| 17 |
// setAdContents( newAdContents ); |
| 18 |
// setAttributes( { adContents: newAdContents } ); |
| 19 |
// setExpandedAds( [ newAdContents.length - 1 ] ); // Automatically expand the newly added ad |
| 20 |
// }; |
| 21 |
|
| 22 |
// const handleAdContentChange = ( value, index ) => { |
| 23 |
// const newAdContents = [ ...adContents ]; |
| 24 |
// newAdContents[ index ] = value; |
| 25 |
// setAdContents( newAdContents ); |
| 26 |
// setAttributes( { adContents: newAdContents } ); |
| 27 |
// }; |
| 28 |
|
| 29 |
// const handleRemoveAdContent = ( index ) => { |
| 30 |
// const newAdContents = adContents.filter( ( _, i ) => i !== index ); |
| 31 |
// setAdContents( newAdContents ); |
| 32 |
// setAttributes( { adContents: newAdContents } ); |
| 33 |
// setExpandedAds( [] ); // Collapse all ads if one is removed |
| 34 |
// }; |
| 35 |
|
| 36 |
// const toggleExpandAd = ( index ) => { |
| 37 |
// if ( expandedAds.includes( index ) ) { |
| 38 |
// setExpandedAds( [] ); |
| 39 |
// } else { |
| 40 |
// setExpandedAds( [ index ] ); |
| 41 |
// } |
| 42 |
// }; |
| 43 |
|
| 44 |
// const onDragEnd = ( result ) => { |
| 45 |
// const { source, destination } = result; |
| 46 |
|
| 47 |
// if ( ! destination ) { |
| 48 |
// return; |
| 49 |
// } |
| 50 |
|
| 51 |
// const reorderedItems = Array.from( adContents ); |
| 52 |
// const [ sourceItem ] = reorderedItems.splice( source.index, 1 ); |
| 53 |
// reorderedItems.splice( destination.index, 0, sourceItem ); |
| 54 |
|
| 55 |
// setAttributes( { adContents: reorderedItems } ); |
| 56 |
// setAdContents( reorderedItems ); |
| 57 |
// }; |
| 58 |
|
| 59 |
// return ( |
| 60 |
// <DragDropContext onDragEnd={ onDragEnd }> |
| 61 |
// <Droppable droppableId="droppable"> |
| 62 |
// { ( provided ) => ( |
| 63 |
// <div |
| 64 |
// ref={ provided.innerRef } |
| 65 |
// { ...provided.droppableProps } |
| 66 |
// className="sp-smart-post-advertisement-general-tab .sp-smart-post-header-right" |
| 67 |
// > |
| 68 |
// { adContents.map( ( content, index ) => ( |
| 69 |
// <Draggable |
| 70 |
// key={ 10 * index } |
| 71 |
// draggableId={ index.toString() } |
| 72 |
// index={ index } |
| 73 |
// > |
| 74 |
// { ( provided ) => ( |
| 75 |
// <div |
| 76 |
// ref={ provided.innerRef } |
| 77 |
// { ...provided.draggableProps } |
| 78 |
// className={ `sp-smart-post-ad-content-item ${ |
| 79 |
// expandedAds.includes( index ) |
| 80 |
// ? 'expanded' |
| 81 |
// : '' |
| 82 |
// }` } |
| 83 |
// > |
| 84 |
// <div |
| 85 |
// className="sp-smart-post-ad-content-header" |
| 86 |
// { ...provided.dragHandleProps } |
| 87 |
// > |
| 88 |
// <div className="sp-smart-post-ad-title">{ `${ |
| 89 |
// index + 1 |
| 90 |
// }. Ads` }</div> |
| 91 |
// <div className="sp-smart-post-ad-title-icon"> |
| 92 |
// <span |
| 93 |
// className="sp-smart-post-dropdown-arrow" |
| 94 |
// onClick={ () => |
| 95 |
// toggleExpandAd( index ) |
| 96 |
// } |
| 97 |
// > |
| 98 |
// { expandedAds.includes( |
| 99 |
// index |
| 100 |
// ) ? ( |
| 101 |
// <DownIconExpend /> |
| 102 |
// ) : ( |
| 103 |
// <DownIcon /> |
| 104 |
// ) } |
| 105 |
// </span> |
| 106 |
// <Button |
| 107 |
// isDestructive |
| 108 |
// onClick={ () => |
| 109 |
// handleRemoveAdContent( |
| 110 |
// index |
| 111 |
// ) |
| 112 |
// } |
| 113 |
// className="sp-smart-post-remove-ad-button" |
| 114 |
// > |
| 115 |
// <CrossIcon /> |
| 116 |
// </Button> |
| 117 |
// </div> |
| 118 |
// </div> |
| 119 |
// { expandedAds.includes( index ) && ( |
| 120 |
// <div className="sp-smart-post-add-full-body"> |
| 121 |
// <div className="sp-smart-post-ad-gap"></div> |
| 122 |
// <div className="sp-smart-post-code-mirror-container"> |
| 123 |
// <CodeMirror |
| 124 |
// value={ content } |
| 125 |
// options={ { |
| 126 |
// mode: 'xml', |
| 127 |
// theme: 'material', |
| 128 |
// lineNumbers: true, |
| 129 |
// readOnly: false, |
| 130 |
// } } |
| 131 |
// onBeforeChange={ ( |
| 132 |
// editor, |
| 133 |
// data, |
| 134 |
// value |
| 135 |
// ) => { |
| 136 |
// handleAdContentChange( |
| 137 |
// value, |
| 138 |
// index |
| 139 |
// ); |
| 140 |
// } } |
| 141 |
// className="sp-smart-post-ad-textarea" |
| 142 |
// /> |
| 143 |
// </div> |
| 144 |
// </div> |
| 145 |
// ) } |
| 146 |
// </div> |
| 147 |
// ) } |
| 148 |
// </Draggable> |
| 149 |
// ) ) } |
| 150 |
// { provided.placeholder } |
| 151 |
// <Button |
| 152 |
// onClick={ handleAddAdContent } |
| 153 |
// className="sp-smart-post-add-ad-button" |
| 154 |
// > |
| 155 |
// Add New Ads |
| 156 |
// </Button> |
| 157 |
// </div> |
| 158 |
// ) } |
| 159 |
// </Droppable> |
| 160 |
// </DragDropContext> |
| 161 |
// ); |
| 162 |
// }; |
| 163 |
|
| 164 |
// export default Advertisement; |
| 165 |
|
