templates-patterns-collection
/
onboarding
/
src
/
Components
/
CustomizeControls
/
ImportOptionsControl.js
FeaturesControl.js
1 year ago
ImportOptionsControl.js
1 year ago
LogoControl.js
1 year ago
PaletteControl.js
1 year ago
SiteNameControl.js
1 year ago
TypographyControl.js
2 months ago
ImportOptionsControl.js
214 lines
| 1 | /* global tiobDash */ |
| 2 | import { __, sprintf } from '@wordpress/i18n'; |
| 3 | import { |
| 4 | createInterpolateElement, |
| 5 | useState, |
| 6 | useEffect, |
| 7 | } from '@wordpress/element'; |
| 8 | import classnames from 'classnames'; |
| 9 | import CustomTooltip from '../CustomTooltip'; |
| 10 | import { Icon, Button, ToggleControl } from '@wordpress/components'; |
| 11 | import { withSelect } from '@wordpress/data'; |
| 12 | |
| 13 | const ImportOptionsControl = ( { |
| 14 | importData, |
| 15 | general, |
| 16 | setGeneral, |
| 17 | setSettingsChanged, |
| 18 | } ) => { |
| 19 | const { cleanupAllowed } = tiobDash; |
| 20 | const [ optionsOpened, setOptionsOpened ] = useState( false ); |
| 21 | const [ divHeight, setDivHeight ] = useState( 0 ); |
| 22 | const allPlugins = { |
| 23 | ...( importData.recommended_plugins || {} ), |
| 24 | ...( importData.mandatory_plugins || {} ), |
| 25 | }; |
| 26 | |
| 27 | const pluginsList = Object.entries( allPlugins ) |
| 28 | .map( |
| 29 | ( [ slug, pluginName ] ) => |
| 30 | `<li key="${ slug }">${ pluginName }</li>` |
| 31 | ) |
| 32 | .join( '' ); |
| 33 | |
| 34 | const updateDivHeight = () => { |
| 35 | const element = document.querySelector( '.ob-site-settings-container' ); |
| 36 | if ( element ) { |
| 37 | setDivHeight( Math.max( element.offsetHeight, 480 ) ); |
| 38 | } |
| 39 | }; |
| 40 | |
| 41 | useEffect( () => { |
| 42 | updateDivHeight(); // Get initial height |
| 43 | |
| 44 | const win = document.defaultView; |
| 45 | |
| 46 | // Attach event listener for window resize |
| 47 | win.addEventListener( 'resize', updateDivHeight ); |
| 48 | |
| 49 | // Clean up the event listener when the component unmounts |
| 50 | return () => { |
| 51 | win.removeEventListener( 'resize', updateDivHeight ); |
| 52 | }; |
| 53 | }, [] ); |
| 54 | |
| 55 | let map = { |
| 56 | content: { |
| 57 | title: __( 'Content', 'templates-patterns-collection' ), |
| 58 | icon: 'admin-post', |
| 59 | tooltip: __( |
| 60 | 'We recommend you backup your website content before attempting a full site import.', |
| 61 | 'templates-patterns-collection' |
| 62 | ), |
| 63 | }, |
| 64 | customizer: { |
| 65 | title: __( 'Customizer', 'templates-patterns-collection' ), |
| 66 | icon: 'admin-customizer', |
| 67 | }, |
| 68 | widgets: { |
| 69 | title: __( 'Widgets', 'templates-patterns-collection' ), |
| 70 | icon: 'admin-generic', |
| 71 | tooltip: __( |
| 72 | 'Widgets will be moved to the Inactive Widgets sidebar and can be retrieved from there.', |
| 73 | 'templates-patterns-collection' |
| 74 | ), |
| 75 | }, |
| 76 | }; |
| 77 | |
| 78 | if ( cleanupAllowed === 'yes' ) { |
| 79 | map = { |
| 80 | cleanup: { |
| 81 | icon: 'trash', |
| 82 | title: __( |
| 83 | 'Cleanup previous import', |
| 84 | 'templates-patterns-collection' |
| 85 | ), |
| 86 | tooltip: __( |
| 87 | 'This will remove any plugins, images, customizer options, widgets posts and pages added by the previous demo import', |
| 88 | 'templates-patterns-collection' |
| 89 | ), |
| 90 | }, |
| 91 | ...map, |
| 92 | }; |
| 93 | } |
| 94 | |
| 95 | const toggleOpen = () => { |
| 96 | setOptionsOpened( ! optionsOpened ); |
| 97 | updateDivHeight(); |
| 98 | const optionsContainer = document.querySelector( |
| 99 | '.ob-import-options-toggles' |
| 100 | ); |
| 101 | const pluginsContainer = document.querySelector( '.ob-import-plugins' ); |
| 102 | |
| 103 | const container = document.querySelector( '.ob-site-settings' ); |
| 104 | if ( ! optionsOpened ) { |
| 105 | const newHeight = |
| 106 | optionsContainer.offsetHeight + |
| 107 | pluginsContainer.offsetHeight + |
| 108 | 200; |
| 109 | container.style.minHeight = newHeight + 'px'; |
| 110 | } else { |
| 111 | container.style.minHeight = 'auto'; |
| 112 | } |
| 113 | }; |
| 114 | |
| 115 | return ( |
| 116 | <> |
| 117 | <div className="ob-ctrl"> |
| 118 | <div className="ob-ctrl-wrap import-options"> |
| 119 | <Button |
| 120 | onClick={ toggleOpen } |
| 121 | icon={ |
| 122 | optionsOpened ? 'arrow-up-alt2' : 'arrow-down-alt2' |
| 123 | } |
| 124 | className="toggle" |
| 125 | > |
| 126 | { __( |
| 127 | 'Advanced Settings', |
| 128 | 'templates-patterns-collection' |
| 129 | ) } |
| 130 | </Button> |
| 131 | <div |
| 132 | className={ classnames( |
| 133 | 'ob-import-options-wrap', |
| 134 | optionsOpened ? 'is-opened' : '' |
| 135 | ) } |
| 136 | style={ |
| 137 | optionsOpened ? { height: divHeight + 'px' } : {} |
| 138 | } |
| 139 | > |
| 140 | <div className="ob-import-options-toggles"> |
| 141 | { Object.keys( map ).map( ( id, index ) => { |
| 142 | const rowClass = classnames( 'ob-option-row', { |
| 143 | active: general[ id ], |
| 144 | } ); |
| 145 | const { icon, title, tooltip } = map[ id ]; |
| 146 | |
| 147 | return ( |
| 148 | <div className={ rowClass } key={ index }> |
| 149 | <div className="ob-option-name"> |
| 150 | <Icon icon={ icon } /> |
| 151 | <span>{ title }</span> |
| 152 | { tooltip && ( |
| 153 | <CustomTooltip> |
| 154 | { tooltip } |
| 155 | </CustomTooltip> |
| 156 | ) } |
| 157 | </div> |
| 158 | { id !== 'theme_install' && ( |
| 159 | <div className="ob-toggle-wrapper"> |
| 160 | <ToggleControl |
| 161 | checked={ general[ id ] } |
| 162 | onChange={ () => { |
| 163 | setSettingsChanged( |
| 164 | true |
| 165 | ); |
| 166 | setGeneral( { |
| 167 | ...general, |
| 168 | [ id ]: ! general[ |
| 169 | id |
| 170 | ], |
| 171 | } ); |
| 172 | } } |
| 173 | /> |
| 174 | </div> |
| 175 | ) } |
| 176 | </div> |
| 177 | ); |
| 178 | } ) } |
| 179 | </div> |
| 180 | { allPlugins && ( |
| 181 | <div className="ob-import-plugins"> |
| 182 | <h2> |
| 183 | { __( |
| 184 | 'Plugins', |
| 185 | 'templates-patterns-collection' |
| 186 | ) } |
| 187 | </h2> |
| 188 | <p> |
| 189 | { __( |
| 190 | 'The following plugins are required for this Starter Site in order to work properly:', |
| 191 | 'templates-patterns-collection' |
| 192 | ) } |
| 193 | </p> |
| 194 | <ul |
| 195 | dangerouslySetInnerHTML={ { |
| 196 | __html: pluginsList, |
| 197 | } } |
| 198 | /> |
| 199 | </div> |
| 200 | ) } |
| 201 | </div> |
| 202 | </div> |
| 203 | </div> |
| 204 | </> |
| 205 | ); |
| 206 | }; |
| 207 | |
| 208 | export default withSelect( ( select ) => { |
| 209 | const { getImportData } = select( 'ti-onboarding' ); |
| 210 | return { |
| 211 | importData: getImportData(), |
| 212 | }; |
| 213 | } )( ImportOptionsControl ); |
| 214 |