balmet.com

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

FullyOverlayFooter.js (2868B)

      1 const {__} = wp.i18n
      2 
      3 function FullyOverlayFooter(props) {
      4     const {previewClass, expandedClass, pro} = props;
      5     const {onChangePreviewClass, onToggleExpanded, onImport} = props;
      6     const previewClassesList = [
      7         {className: 'preview-desktop', screenReaderText: 'Enter desktop preview mode'},
      8         {className: 'preview-tablet', screenReaderText: 'Enter tablet preview mode'},
      9         {className: 'preview-mobile', screenReaderText: 'Enter mobile preview mode'}
     10     ];
     11 
     12     const toggleExpanded = () => {
     13         let nextStatus = (expandedClass === 'collapsed') ? 'expanded' : 'collapsed';
     14         onToggleExpanded(nextStatus);
     15     }
     16     return (
     17         <div className="wp-full-overlay-footer">
     18             <div className="footer-import-button-wrap redux-templates-import-button-group">
     19 
     20                 {
     21                     pro ?
     22                         <div className="action-buttons">
     23                             <a className="redux-templates-button-download" target="_blank" href="http://redux-templates.io/">
     24                                 <i className="fas fa-upload"></i>&nbsp;{__('Upgrade to Pro', redux_templates.i18n)}
     25                             </a>
     26                         </div>
     27                         :
     28                         <a className="button button-hero hide-if-no-customize button-primary redux-templates-import"
     29                            onClick={onImport}>
     30                             <i className="fas fa-download"></i>&nbsp;{__('Import', redux_templates.i18n)}
     31                         </a>
     32                 }
     33 
     34             </div>
     35             <button type="button" className="collapse-sidebar button" onClick={toggleExpanded} aria-expanded="true"
     36                     aria-label="Collapse Sidebar">
     37                 <span className="collapse-sidebar-arrow"></span>
     38                 <span className="collapse-sidebar-label">{__('Collapse', redux_templates.i18n)}</span>
     39             </button>
     40 
     41             <div className="devices-wrapper">
     42                 <div className="devices">
     43                     {
     44                         previewClassesList.map((previewObject, i) => {
     45                             return (
     46                                 <button type="button"
     47                                         className={previewClass === previewObject.className ? previewObject.className + ' active' : previewObject.className}
     48                                         aria-pressed="true" key={i}
     49                                         onClick={() => onChangePreviewClass(previewObject.className)}>
     50                                     <span className="screen-reader-text">{previewObject.screenReaderText}</span>
     51                                 </button>
     52                             );
     53                         })
     54                     }
     55                 </div>
     56             </div>
     57 
     58         </div>
     59     );
     60 }
     61 
     62 export default FullyOverlayFooter;