index.js (6230B)
1 const {__, sprintf} = wp.i18n; 2 const {compose} = wp.compose; 3 const {withDispatch, withSelect} = wp.data; 4 const {useState, useEffect} = wp.element; 5 import ChallengeDot from '~redux-templates/challenge/tooltip/ChallengeDot'; 6 import {Button, Notice} from '@wordpress/components' 7 import SVGViewFew from './images/view-few.svg' 8 import SVGViewMany from './images/view-many.svg' 9 import SVGViewNormal from './images/view-normal.svg' 10 import {reloadLibrary} from '~redux-templates/stores/actionHelper'; 11 import * as Icons from '~redux-templates/icons'; 12 import './style.scss' 13 14 function TemplateListSubHeader(props) { 15 const {itemType, sortBy, activeCollection, challengePassed, pageData, columns, loading} = props; 16 const {setSortBy, setColumns, setChallengeOpen, setChallengeListExpanded} = props; 17 const [triggerTourClassname, setTriggerTourClassname] = useState('far fa-question-circle tour-icon'); 18 19 useEffect(() => { 20 setTriggerTourClassname(challengePassed ? 'fas fa-trophy tour-icon' : 'fas fa-map-signs tour-icon'); 21 }, [challengePassed]); 22 23 const itemTypeLabel = () => { 24 if (itemType === 'section') return __('Sections', redux_templates.i18n); 25 if (itemType === 'page') return __('Templates', redux_templates.i18n); 26 if (itemType === 'collection' && activeCollection === null) return __('Template Kits', redux_templates.i18n); 27 if (itemType === 'collection' && activeCollection !== null) return __('Sections', redux_templates.i18n); 28 }; 29 30 const dataLength = pageData ? pageData.length : ''; 31 32 let pageTitle = ''; 33 if (loading === false && dataLength && dataLength !== 0) { 34 pageTitle = <span>{dataLength} {itemTypeLabel()}</span>; 35 } 36 37 return ( 38 <div className="redux-templates-template-list-sub-header"> 39 <h4> 40 {pageTitle} 41 <ChallengeDot step={3} /> 42 </h4> 43 44 <div className="redux-templates-template-filters"> 45 <div className='trial_notice'> 46 { ! redux_templates.mokama && 47 <div style={{verticalAlign:'middle'}}> 48 <Notice status="info" isDismissible={false}> 49 <strong style={{display:'inline-block', marginRight:'10px', verticalAlign:'middle'}}> 50 { redux_templates.left <= 0 && 51 <> 52 {sprintf( __( 'Trial Ended: %d/%d Imported', redux_templates.i18n ), 5-redux_templates.left, 5 )} 53 </> 54 } 55 { redux_templates.left > 0 && 56 <> 57 {sprintf( __( 'Trial: %d/%d Imports Remaining', redux_templates.i18n ), redux_templates.left, 5 )} 58 </> 59 } 60 </strong> 61 <Button isPrimary 62 isSmall 63 icon={Icons.redux} 64 label={__('Upgrade to Redux Pro', redux_templates.i18n)} 65 onClick={()=> window.open( redux_templates.u + 'subheader', '_blank')}>Get Pro</Button> 66 </Notice> 67 68 69 </div> 70 71 }</div> 72 <Button 73 icon={<i className={triggerTourClassname} />} 74 label={__('Take the Redux Challenge', redux_templates.i18n)} 75 onClick={() => {setChallengeOpen(true); setChallengeListExpanded(true); }} 76 /> 77 <Button 78 icon="image-rotate" 79 label={__('Refresh Library', redux_templates.i18n)} 80 className="refresh-library" 81 onClick={reloadLibrary} 82 /> 83 <Button 84 icon={<SVGViewFew width="18" height="18"/>} 85 className={columns === 'large' ? 'is-active' : ''} 86 label={__('Large preview', redux_templates.i18n)} 87 onClick={() => setColumns('large')} 88 /> 89 <Button 90 icon={<SVGViewNormal width="18" height="18"/>} 91 className={columns === '' ? 'is-active' : ''} 92 label={__('Medium preview', redux_templates.i18n)} 93 onClick={(e) => setColumns('')} 94 /> 95 <Button 96 icon={<SVGViewMany width="18" height="18"/>} 97 className={columns === 'small' ? 'is-active' : ''} 98 label={__('Small preview', redux_templates.i18n)} 99 onClick={(e) => setColumns('small')} 100 /> 101 <div className=""> 102 <select name="sortBy" id="sortBy" value={sortBy} onChange={(e) => setSortBy(e.target.value)}> 103 <option value="name">{__('Name', redux_templates.i18n)}</option> 104 {/*<option value="popularity">{__('Popularity', redux_templates.i18n)}</option>*/} 105 <option value="updated">{__('Updated', redux_templates.i18n)}</option> 106 </select> 107 </div> 108 </div> 109 110 </div> 111 ); 112 } 113 114 115 export default compose([ 116 withDispatch((dispatch) => { 117 const {setLibrary, setActivePriceFilter, setActiveCollection, setSortBy, setColumns, setChallengeOpen, setChallengeListExpanded} = dispatch('redux-templates/sectionslist'); 118 return { 119 setLibrary, 120 setActivePriceFilter, 121 setActiveCollection, 122 setSortBy, 123 setColumns, 124 setChallengeOpen, 125 setChallengeListExpanded 126 }; 127 }), 128 129 withSelect((select, props) => { 130 const {fetchLibraryFromAPI, getActiveItemType, getColumns, getPageData, getActiveCollection, getStatistics, getSortBy, getLoading, getChallengePassed} = select('redux-templates/sectionslist'); 131 return { 132 fetchLibraryFromAPI, 133 itemType: getActiveItemType(), 134 pageData: getPageData(), 135 columns: getColumns(), 136 statistics: getStatistics(), 137 sortBy: getSortBy(), 138 activeCollection: getActiveCollection(), 139 loading: getLoading(), 140 challengePassed: getChallengePassed() 141 }; 142 }) 143 ])(TemplateListSubHeader);