balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (3488B)

      1 import {__} from '@wordpress/i18n';
      2 import {compose} from '@wordpress/compose';
      3 import {withDispatch, withSelect} from '@wordpress/data';
      4 import {ModalManager} from '../../modal-manager';
      5 import ChallengeDot from '~redux-templates/challenge/tooltip/ChallengeDot';
      6 export function TabHeader(props) {
      7     const { activeItemType, searchContext, activeCollection, isChallengeOpen } = props;
      8     const { setActiveItemType, setSearchContext, setChallengeOpen, clearSearch } = props;
      9 
     10     const isActive = (itemType) => {
     11         return (activeItemType === itemType) ? 'active' : '';
     12     }
     13 
     14     const onSearchContextUpdate = (e) => {
     15         if (activeItemType !=='saved') setSearchContext(e.target.value);
     16     }
     17 
     18     const changeTab = (tabName) => {
     19         if (document.getElementById('modalContent')) document.getElementById('modalContent').scrollTop = 0;
     20         setActiveItemType(tabName);
     21     }
     22 
     23     const closeModal = () => {
     24         if (isChallengeOpen === false) {
     25             ModalManager.close();
     26         }
     27     }
     28 
     29     return (
     30         <div className="redux-templates-builder-modal-header">
     31             <div className="template-search-box">
     32                 {
     33                     ((activeItemType !== 'collection'  || activeCollection === null) && activeItemType !== 'saved') &&
     34                     <div>
     35                         <input type="text" placeholder={__('Search for a template', redux_templates.i18n)} className="form-control" value={searchContext} onChange={onSearchContextUpdate} />
     36                         <ChallengeDot step={1} />
     37                         <i className="fas fa-search" />
     38                     </div>
     39                 }
     40             </div>
     41 
     42             <div className="redux-templates-template-list-header" data-tut="tour__navigation">
     43                 <button className={ isActive('section') } onClick={e => changeTab('section')}> {__('Sections', redux_templates.i18n)} </button>
     44                 <button className={ isActive('page') } onClick={e => changeTab('page')}> {__('Templates', redux_templates.i18n)} </button>
     45                 <button className={ isActive('collection') } onClick={e => changeTab('collection')}> {__('Template Kits', redux_templates.i18n)} </button>
     46                 <button className={ isActive('saved') } onClick={e => changeTab('saved')}> {__('Saved', redux_templates.i18n)} </button>
     47                 <ChallengeDot step={0} />
     48                 <button className="redux-templates-builder-close-modal" onClick={closeModal} >
     49 					<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"></path></svg>
     50                 </button>
     51             </div>
     52         </div>
     53     );
     54 }
     55 
     56 export default compose([
     57     withDispatch((dispatch) => {
     58         const {
     59             setActiveItemType,
     60             setSearchContext,
     61             clearSearch
     62         } = dispatch('redux-templates/sectionslist');
     63 
     64         return {
     65             setActiveItemType,
     66             setSearchContext,
     67             clearSearch
     68         };
     69     }),
     70 
     71     withSelect((select, props) => {
     72         const { getActiveItemType, getSearchContext, getActiveCollection, getChallengeOpen } = select('redux-templates/sectionslist');
     73         return { activeItemType: getActiveItemType(), searchContext: getSearchContext(), activeCollection: getActiveCollection(), isChallengeOpen: getChallengeOpen() };
     74     })
     75 
     76 ])(TabHeader);