CloudLibrary
1 year ago
Settings
1 year ago
StarterSites
3 years ago
App.js
2 years ago
Card.js
3 years ago
CategoriesTabs.js
3 years ago
CategorySelector.js
2 years ago
CustomTooltip.js
3 years ago
DocNotice.js
2 years ago
EditorSelector.js
2 years ago
EditorTabs.js
4 years ago
Header.js
2 years ago
Icon.js
2 years ago
ImportModal.js
1 year ago
ImportModalError.js
2 years ago
ImportModalMock.js
4 years ago
ImportModalNote.js
4 years ago
ImportStepper.js
1 year ago
InstallModal.js
1 year ago
License.js
2 years ago
LicensePanelContext.js
3 years ago
Loading.js
4 years ago
Main.js
1 year ago
Migration.js
4 years ago
NewTCNotice.js
1 year ago
Notification.js
4 years ago
OnboardingContent.js
4 years ago
PreviewFrame.js
3 years ago
Search.js
2 years ago
StarterSiteCard.js
3 years ago
Search.js
269 lines
| 1 | /* global tiobDash */ |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { useState } from '@wordpress/element'; |
| 4 | import { Button, Dashicon, Popover } from '@wordpress/components'; |
| 5 | import { withDispatch, withSelect } from '@wordpress/data'; |
| 6 | import { compose } from '@wordpress/compose'; |
| 7 | import classnames from 'classnames'; |
| 8 | import { isTabbedEditor } from '../utils/common'; |
| 9 | |
| 10 | const Search = ( { |
| 11 | count, |
| 12 | categories, |
| 13 | editors, |
| 14 | onSearch, |
| 15 | category, |
| 16 | editor, |
| 17 | onlyProSites, |
| 18 | setCurrentCategory, |
| 19 | setCurrentEditor, |
| 20 | query, |
| 21 | className, |
| 22 | showCount = false, |
| 23 | } ) => { |
| 24 | const [ open, setOpen ] = useState( false ); |
| 25 | const toggleDropdown = () => setOpen( ! open ); |
| 26 | const CategoriesDropdown = () => { |
| 27 | return ( |
| 28 | <div className="ob-dropdown categories-selector"> |
| 29 | <Button |
| 30 | onClick={ toggleDropdown } |
| 31 | className="select ob-dropdown" |
| 32 | > |
| 33 | { categories[ category ] } |
| 34 | <Dashicon |
| 35 | size={ 14 } |
| 36 | icon={ open ? 'arrow-up-alt2' : 'arrow-down-alt2' } |
| 37 | /> |
| 38 | { open && ( |
| 39 | <Popover |
| 40 | position="bottom center" |
| 41 | onClose={ toggleDropdown } |
| 42 | inline |
| 43 | noArrow |
| 44 | > |
| 45 | { open && ( |
| 46 | <ul className="options"> |
| 47 | { Object.keys( categories ).map( |
| 48 | ( key, index ) => { |
| 49 | if ( key === category ) { |
| 50 | return null; |
| 51 | } |
| 52 | if ( |
| 53 | 'free' === key && |
| 54 | count.all === count[ key ] |
| 55 | ) { |
| 56 | return null; |
| 57 | } |
| 58 | return ( |
| 59 | <li key={ index }> |
| 60 | <a |
| 61 | href="#" |
| 62 | onClick={ ( e ) => { |
| 63 | e.preventDefault(); |
| 64 | setCurrentCategory( |
| 65 | key |
| 66 | ); |
| 67 | setOpen( false ); |
| 68 | } } |
| 69 | > |
| 70 | <span> |
| 71 | { |
| 72 | categories[ |
| 73 | key |
| 74 | ] |
| 75 | } |
| 76 | </span> |
| 77 | { showCount && ( |
| 78 | <span className="count"> |
| 79 | { count[ key ] } |
| 80 | </span> |
| 81 | ) } |
| 82 | </a> |
| 83 | </li> |
| 84 | ); |
| 85 | } |
| 86 | ) } |
| 87 | </ul> |
| 88 | ) } |
| 89 | </Popover> |
| 90 | ) } |
| 91 | </Button> |
| 92 | </div> |
| 93 | ); |
| 94 | }; |
| 95 | const EditorDropdown = () => { |
| 96 | return ( |
| 97 | <div className="ob-dropdown categories-selector"> |
| 98 | <Button |
| 99 | onClick={ toggleDropdown } |
| 100 | className="select ob-dropdown" |
| 101 | > |
| 102 | <span className="label-editor"> |
| 103 | <span className="icon-wrap"> |
| 104 | <img |
| 105 | className="editor-icon" |
| 106 | src={ |
| 107 | tiobDash.assets + |
| 108 | 'img/' + |
| 109 | editors[ editor ].icon |
| 110 | } |
| 111 | alt={ __( |
| 112 | 'Builder Logo', |
| 113 | 'templates-patterns-collection' |
| 114 | ) } |
| 115 | /> |
| 116 | </span> |
| 117 | { onlyProSites.includes( editor ) && ( |
| 118 | <Dashicon |
| 119 | icon="lock" |
| 120 | style={ { |
| 121 | fontSize: '16px', |
| 122 | width: '16px', |
| 123 | height: '16px', |
| 124 | marginLeft: '0', |
| 125 | } } |
| 126 | /> |
| 127 | ) } |
| 128 | { editors[ editor ].niceName } |
| 129 | </span> |
| 130 | <Dashicon |
| 131 | size={ 14 } |
| 132 | icon={ open ? 'arrow-up-alt2' : 'arrow-down-alt2' } |
| 133 | /> |
| 134 | { open && ( |
| 135 | <Popover |
| 136 | position="bottom center" |
| 137 | onClose={ toggleDropdown } |
| 138 | inline |
| 139 | noArrow |
| 140 | > |
| 141 | { open && ( |
| 142 | <ul className="options"> |
| 143 | { Object.keys( editors ).map( |
| 144 | ( key, index ) => { |
| 145 | if ( key === editor ) { |
| 146 | return null; |
| 147 | } |
| 148 | return ( |
| 149 | <li key={ index }> |
| 150 | <a |
| 151 | href="#" |
| 152 | onClick={ ( e ) => { |
| 153 | e.preventDefault(); |
| 154 | setCurrentEditor( |
| 155 | key |
| 156 | ); |
| 157 | setOpen( false ); |
| 158 | } } |
| 159 | > |
| 160 | <span className="label-editor"> |
| 161 | <span className="icon-wrap"> |
| 162 | <img |
| 163 | className="editor-icon" |
| 164 | src={ |
| 165 | tiobDash.assets + |
| 166 | 'img/' + |
| 167 | editors[ |
| 168 | key |
| 169 | ].icon |
| 170 | } |
| 171 | alt={ __( |
| 172 | 'Builder Logo', |
| 173 | 'templates-patterns-collection' |
| 174 | ) } |
| 175 | /> |
| 176 | </span> |
| 177 | { onlyProSites.includes( |
| 178 | key |
| 179 | ) && ( |
| 180 | <Dashicon |
| 181 | icon="lock" |
| 182 | style={ { |
| 183 | fontSize: |
| 184 | '16px', |
| 185 | width: |
| 186 | '16px', |
| 187 | height: |
| 188 | '16px', |
| 189 | } } |
| 190 | /> |
| 191 | ) } |
| 192 | { |
| 193 | editors[ key ] |
| 194 | .niceName |
| 195 | } |
| 196 | </span> |
| 197 | { showCount && ( |
| 198 | <span className="count"> |
| 199 | { count[ key ] } |
| 200 | </span> |
| 201 | ) } |
| 202 | </a> |
| 203 | </li> |
| 204 | ); |
| 205 | } |
| 206 | ) } |
| 207 | </ul> |
| 208 | ) } |
| 209 | </Popover> |
| 210 | ) } |
| 211 | </Button> |
| 212 | </div> |
| 213 | ); |
| 214 | }; |
| 215 | |
| 216 | const wrapClasses = classnames( className, 'header-form' ); |
| 217 | |
| 218 | return ( |
| 219 | <div className={ wrapClasses }> |
| 220 | <div className="search"> |
| 221 | <img |
| 222 | src={ tiobDash.assets + '/img/search.svg' } |
| 223 | alt={ __( 'Search Icon' ) } |
| 224 | /> |
| 225 | <input |
| 226 | onChange={ ( e ) => { |
| 227 | onSearch( e.target.value ); |
| 228 | } } |
| 229 | type="search" |
| 230 | value={ query } |
| 231 | placeholder={ |
| 232 | __( |
| 233 | 'Search for a starter site', |
| 234 | 'templates-patterns-collection' |
| 235 | ) + '...' |
| 236 | } |
| 237 | /> |
| 238 | { isTabbedEditor && <CategoriesDropdown /> } |
| 239 | { ! isTabbedEditor && <EditorDropdown /> } |
| 240 | </div> |
| 241 | </div> |
| 242 | ); |
| 243 | }; |
| 244 | |
| 245 | export default compose( |
| 246 | withSelect( ( select ) => { |
| 247 | const { getCurrentCategory, getCurrentEditor, getSearchQuery } = select( |
| 248 | 'neve-onboarding' |
| 249 | ); |
| 250 | return { |
| 251 | editor: getCurrentEditor(), |
| 252 | category: getCurrentCategory(), |
| 253 | query: getSearchQuery(), |
| 254 | }; |
| 255 | } ), |
| 256 | withDispatch( ( dispatch ) => { |
| 257 | const { |
| 258 | setCurrentCategory, |
| 259 | setCurrentEditor, |
| 260 | setSearchQuery, |
| 261 | } = dispatch( 'neve-onboarding' ); |
| 262 | return { |
| 263 | setCurrentCategory: ( category ) => setCurrentCategory( category ), |
| 264 | setCurrentEditor: ( editor ) => setCurrentEditor( editor ), |
| 265 | onSearch: ( query ) => setSearchQuery( query ), |
| 266 | }; |
| 267 | } ) |
| 268 | )( Search ); |
| 269 |