content.js
1 year ago
filters.js
1 year ago
header.js
1 year ago
import-modal.js
1 year ago
list-item.js
1 year ago
notices.js
5 years ago
pagination.js
5 years ago
preview.js
1 year ago
publish-button.js
2 years ago
template-predefine.js
2 years ago
templates-content.js
1 year ago
tpc-templates-button.js
2 years ago
import-modal.js
291 lines
| 1 | /* eslint-disable no-undef */ |
| 2 | /* eslint-disable camelcase */ |
| 3 | import { useDispatch, useSelect } from '@wordpress/data'; |
| 4 | import { useState, useEffect } from '@wordpress/element'; |
| 5 | import { Modal, Button } from '@wordpress/components'; |
| 6 | import { parse } from '@wordpress/blocks'; |
| 7 | import { close } from '@wordpress/icons'; |
| 8 | import { __ } from '@wordpress/i18n'; |
| 9 | |
| 10 | import Header from './header'; |
| 11 | import Content from './content'; |
| 12 | import PreviewFrame from '../../../assets/src/Components/CloudLibrary/PreviewFrame'; |
| 13 | import { importTemplate } from '../data/templates-cloud'; |
| 14 | |
| 15 | const ImportModal = ( { |
| 16 | clientId, |
| 17 | autoLoad = true, |
| 18 | isFse = false, |
| 19 | modalOpen, |
| 20 | setModalOpen, |
| 21 | } ) => { |
| 22 | const { isPreview, currentTab, previewData } = useSelect( ( select ) => ( { |
| 23 | isPreview: select( 'tpc/block-editor' ).isPreview(), |
| 24 | currentTab: select( 'tpc/block-editor' ).getCurrentTab(), |
| 25 | previewData: select( 'tpc/block-editor' ).getPreview(), |
| 26 | } ) ); |
| 27 | |
| 28 | const { removeBlock, replaceBlocks, insertBlocks, resetBlocks } = |
| 29 | useDispatch( 'core/block-editor' ); |
| 30 | |
| 31 | const { togglePreview } = useDispatch( 'tpc/block-editor' ); |
| 32 | |
| 33 | const closePreview = () => togglePreview( false ); |
| 34 | |
| 35 | const { type } = useSelect( ( select ) => ( { |
| 36 | type: select( 'core/editor' ).getEditedPostAttribute( 'type' ), |
| 37 | } ) ); |
| 38 | |
| 39 | const { createErrorNotice } = useDispatch( 'core/notices' ); |
| 40 | |
| 41 | const { editPost } = useDispatch( 'core/editor' ); |
| 42 | |
| 43 | const { updateLibrary, updateTemplates } = |
| 44 | useDispatch( 'tpc/block-editor' ); |
| 45 | |
| 46 | const [ importing, setImporting ] = useState( false ); |
| 47 | |
| 48 | const [ searchQuery, setSearchQuery ] = useState( { |
| 49 | templates: '', |
| 50 | library: '', |
| 51 | } ); |
| 52 | |
| 53 | const [ sortingOrder, setSortingOrder ] = useState( { |
| 54 | templates: { |
| 55 | order: 'DESC', |
| 56 | orderby: 'date', |
| 57 | }, |
| 58 | library: { |
| 59 | order: 'DESC', |
| 60 | orderby: 'date', |
| 61 | }, |
| 62 | } ); |
| 63 | |
| 64 | const isGeneral = currentTab === 'templates'; |
| 65 | |
| 66 | const setQuery = ( query ) => { |
| 67 | if ( isGeneral ) { |
| 68 | return setSearchQuery( { |
| 69 | ...searchQuery, |
| 70 | templates: query, |
| 71 | } ); |
| 72 | } |
| 73 | |
| 74 | return setSearchQuery( { |
| 75 | ...searchQuery, |
| 76 | library: query, |
| 77 | } ); |
| 78 | }; |
| 79 | |
| 80 | const getSearchQuery = () => { |
| 81 | if ( isGeneral ) { |
| 82 | return searchQuery.templates; |
| 83 | } |
| 84 | |
| 85 | return searchQuery.library; |
| 86 | }; |
| 87 | |
| 88 | const setSorting = ( order ) => { |
| 89 | if ( isGeneral ) { |
| 90 | return setSortingOrder( { |
| 91 | ...sortingOrder, |
| 92 | templates: order, |
| 93 | } ); |
| 94 | } |
| 95 | |
| 96 | return setSortingOrder( { |
| 97 | ...sortingOrder, |
| 98 | library: order, |
| 99 | } ); |
| 100 | }; |
| 101 | |
| 102 | const getOrder = () => { |
| 103 | if ( isGeneral ) { |
| 104 | return sortingOrder.templates; |
| 105 | } |
| 106 | |
| 107 | return sortingOrder.library; |
| 108 | }; |
| 109 | |
| 110 | const tryParseJSON = ( jsonString ) => { |
| 111 | try { |
| 112 | const o = JSON.parse( jsonString ); |
| 113 | |
| 114 | // Handle non-exception-throwing cases: |
| 115 | // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking, |
| 116 | // but... JSON.parse(null) returns null, and typeof null === "object", |
| 117 | // so we must check for that, too. Thankfully, null is falsey, so this suffices: |
| 118 | // Source: https://stackoverflow.com/a/20392392 |
| 119 | if ( o && typeof o === 'object' ) { |
| 120 | return o; |
| 121 | } |
| 122 | } catch ( e ) {} |
| 123 | |
| 124 | return false; |
| 125 | }; |
| 126 | |
| 127 | const importBlocks = ( content, metaFields = [], template_type = '' ) => { |
| 128 | updateLibrary( [] ); |
| 129 | updateTemplates( [] ); |
| 130 | const { allowed_post } = window.tiTpc; |
| 131 | |
| 132 | if ( |
| 133 | 0 < Object.keys( tryParseJSON( metaFields ) || {} ).length && |
| 134 | allowed_post.includes( type ) |
| 135 | ) { |
| 136 | const fields = JSON.parse( metaFields ); |
| 137 | // eslint-disable-next-line no-unused-vars |
| 138 | const { _wp_page_template, ...restFields } = fields; |
| 139 | const meta = { ...restFields }; |
| 140 | |
| 141 | editPost( { meta } ); |
| 142 | |
| 143 | if ( 'page' === type && fields._wp_page_template ) { |
| 144 | editPost( { |
| 145 | template: fields._wp_page_template, |
| 146 | } ); |
| 147 | } |
| 148 | } |
| 149 | |
| 150 | if ( ! clientId ) { |
| 151 | if ( template_type === 'fse' ) { |
| 152 | resetBlocks( parse( content ) ); |
| 153 | } else { |
| 154 | insertBlocks( parse( content ) ); |
| 155 | } |
| 156 | } else { |
| 157 | replaceBlocks( clientId, parse( content ) ); |
| 158 | } |
| 159 | |
| 160 | closeModal(); |
| 161 | }; |
| 162 | |
| 163 | const importFromPreview = async () => { |
| 164 | setImporting( true ); |
| 165 | await importTemplate( previewData.template_id ).then( ( r ) => { |
| 166 | if ( r.__file && r.content && 'wp_export' === r.__file ) { |
| 167 | closePreview(); |
| 168 | setImporting( false ); |
| 169 | importBlocks( |
| 170 | r.content, |
| 171 | previewData.meta || [], |
| 172 | previewData.template_type |
| 173 | ); |
| 174 | return false; |
| 175 | } |
| 176 | |
| 177 | createErrorNotice( |
| 178 | __( |
| 179 | 'Something went wrong while importing. Please try again.', |
| 180 | 'templates-patterns-collection' |
| 181 | ), |
| 182 | { |
| 183 | type: 'snackbar', |
| 184 | } |
| 185 | ); |
| 186 | setImporting( false ); |
| 187 | removeBlock( clientId ); |
| 188 | } ); |
| 189 | }; |
| 190 | |
| 191 | const closeModal = () => { |
| 192 | setModalOpen( false ); |
| 193 | setImporting( false ); |
| 194 | if ( ! isFse ) { |
| 195 | removeBlock( clientId ); |
| 196 | } |
| 197 | }; |
| 198 | |
| 199 | useEffect( () => { |
| 200 | if ( autoLoad ) { |
| 201 | setTimeout( () => { |
| 202 | setModalOpen( true ); |
| 203 | }, 100 ); |
| 204 | } |
| 205 | }, [] ); |
| 206 | |
| 207 | if ( ! modalOpen ) { |
| 208 | return null; |
| 209 | } |
| 210 | |
| 211 | const PreviewWrap = () => { |
| 212 | if ( ! isPreview || currentTab !== 'templates' ) { |
| 213 | return null; |
| 214 | } |
| 215 | const { link, template_name } = previewData; |
| 216 | |
| 217 | return ( |
| 218 | <Modal |
| 219 | isDismissible={ false } |
| 220 | shouldCloseOnClickOutside={ false } |
| 221 | shouldCloseOnEsc={ false } |
| 222 | className="tpc-preview-wrap-modal" |
| 223 | > |
| 224 | <PreviewFrame |
| 225 | previewUrl={ link } |
| 226 | heading={ template_name } |
| 227 | leftButtons={ |
| 228 | <> |
| 229 | <Button |
| 230 | disabled={ importing } |
| 231 | icon={ close } |
| 232 | onClick={ closePreview } |
| 233 | /> |
| 234 | </> |
| 235 | } |
| 236 | rightButtons={ |
| 237 | <Button |
| 238 | disabled={ importing } |
| 239 | isPrimary |
| 240 | onClick={ importFromPreview } |
| 241 | > |
| 242 | { importing |
| 243 | ? __( |
| 244 | 'Importing', |
| 245 | 'templates-patterns-collection' |
| 246 | ) + '...' |
| 247 | : __( |
| 248 | 'Import', |
| 249 | 'templates-patterns-collection' |
| 250 | ) } |
| 251 | </Button> |
| 252 | } |
| 253 | /> |
| 254 | ; |
| 255 | </Modal> |
| 256 | ); |
| 257 | }; |
| 258 | |
| 259 | return ( |
| 260 | <> |
| 261 | <Modal |
| 262 | onRequestClose={ closeModal } |
| 263 | shouldCloseOnEsc={ false } |
| 264 | shouldCloseOnClickOutside={ |
| 265 | ! isPreview || currentTab !== 'templates' |
| 266 | } |
| 267 | isDismissible={ false } |
| 268 | overlayClassName="tpc-template-cloud-modal" |
| 269 | > |
| 270 | <Header |
| 271 | closeModal={ closeModal } |
| 272 | getOrder={ getOrder } |
| 273 | getSearchQuery={ getSearchQuery } |
| 274 | /> |
| 275 | |
| 276 | <Content |
| 277 | importBlocks={ importBlocks } |
| 278 | getOrder={ getOrder } |
| 279 | setQuery={ setQuery } |
| 280 | getSearchQuery={ getSearchQuery } |
| 281 | setSorting={ setSorting } |
| 282 | /> |
| 283 | |
| 284 | <PreviewWrap /> |
| 285 | </Modal> |
| 286 | </> |
| 287 | ); |
| 288 | }; |
| 289 | |
| 290 | export default ImportModal; |
| 291 |