content.js
1 year ago
export.js
1 year ago
header.js
1 year ago
template.js
5 years ago
templates-content.js
1 year ago
template.js
173 lines
| 1 | /* global moment */ |
| 2 | import { Button, DropdownMenu } from '@wordpress/components'; |
| 3 | import { withDispatch } from '@wordpress/data'; |
| 4 | import { Fragment, useState } from '@wordpress/element'; |
| 5 | import { moreHorizontalMobile, edit, stack, trash } from '@wordpress/icons'; |
| 6 | |
| 7 | const Template = ( { |
| 8 | table = false, |
| 9 | item, |
| 10 | id, |
| 11 | title, |
| 12 | meta, |
| 13 | thumbnail, |
| 14 | onImport, |
| 15 | onUpdateTemplate, |
| 16 | onDelete, |
| 17 | onDuplicate, |
| 18 | togglePreview, |
| 19 | setPreviewData, |
| 20 | } ) => { |
| 21 | const [ isEditing, setEditing ] = useState( false ); |
| 22 | |
| 23 | const [ itemTitle, setItemTitle ] = useState( title ); |
| 24 | |
| 25 | if ( table ) { |
| 26 | return ( |
| 27 | <div className="ti-tpc-template-library-templates-table-item"> |
| 28 | <div className="ti-tpc-template-library-templates-table-column"> |
| 29 | { isEditing ? ( |
| 30 | <Fragment> |
| 31 | <input |
| 32 | type="text" |
| 33 | value={ itemTitle } |
| 34 | onChange={ ( e ) => |
| 35 | setItemTitle( e.target.value ) |
| 36 | } |
| 37 | /> |
| 38 | |
| 39 | <Button |
| 40 | className="elementor-button" |
| 41 | onClick={ () => |
| 42 | onUpdateTemplate( id, itemTitle ) |
| 43 | } |
| 44 | > |
| 45 | <i |
| 46 | className="eicon-check" |
| 47 | aria-hidden="true" |
| 48 | title={ window.tiTpc.library.actions.save } |
| 49 | ></i> |
| 50 | <span className="elementor-button-title elementor-hidden"> |
| 51 | { window.tiTpc.library.actions.save } |
| 52 | </span> |
| 53 | </Button> |
| 54 | |
| 55 | <Button |
| 56 | className="elementor-button" |
| 57 | onClick={ () => setEditing( false ) } |
| 58 | > |
| 59 | <i |
| 60 | className="eicon-editor-close" |
| 61 | aria-hidden="true" |
| 62 | title={ |
| 63 | window.tiTpc.library.actions.cancel |
| 64 | } |
| 65 | ></i> |
| 66 | <span className="elementor-button-title elementor-hidden"> |
| 67 | { window.tiTpc.library.actions.cancel } |
| 68 | </span> |
| 69 | </Button> |
| 70 | </Fragment> |
| 71 | ) : ( |
| 72 | title |
| 73 | ) } |
| 74 | </div> |
| 75 | <div className="ti-tpc-template-library-templates-table-column"> |
| 76 | { moment( item.date ).format( 'MMMM D, YYYY' ) } |
| 77 | </div> |
| 78 | <div className="ti-tpc-template-library-templates-table-column"> |
| 79 | { moment( item.modified ).format( 'MMMM D, YYYY' ) } |
| 80 | </div> |
| 81 | <div className="ti-tpc-template-library-templates-table-column"> |
| 82 | <Button |
| 83 | className="elementor-button elementor-button-success" |
| 84 | onClick={ () => onImport( { id, title, meta } ) } |
| 85 | > |
| 86 | <i |
| 87 | className="eicon-file-download" |
| 88 | aria-hidden="true" |
| 89 | ></i> |
| 90 | <span className="elementor-button-title"> |
| 91 | { window.tiTpc.library.actions.insert } |
| 92 | </span> |
| 93 | </Button> |
| 94 | |
| 95 | <DropdownMenu |
| 96 | icon={ moreHorizontalMobile } |
| 97 | label={ |
| 98 | window.tiTpc.library.filters.sortLabels.actions |
| 99 | } |
| 100 | popoverProps={ { |
| 101 | position: 'bottom right', |
| 102 | noArrow: false, |
| 103 | } } |
| 104 | controls={ [ |
| 105 | { |
| 106 | title: window.tiTpc.library.actions.edit, |
| 107 | icon: edit, |
| 108 | isDisabled: item.link ? true : false, |
| 109 | onClick: () => setEditing( true ), |
| 110 | }, |
| 111 | { |
| 112 | title: window.tiTpc.library.actions.duplicate, |
| 113 | icon: stack, |
| 114 | onClick: () => onDuplicate( id ), |
| 115 | }, |
| 116 | { |
| 117 | title: window.tiTpc.library.actions.delete, |
| 118 | icon: trash, |
| 119 | onClick: () => onDelete( id ), |
| 120 | }, |
| 121 | ] } |
| 122 | /> |
| 123 | </div> |
| 124 | </div> |
| 125 | ); |
| 126 | } |
| 127 | |
| 128 | return ( |
| 129 | <div className="ti-tpc-template-library-template"> |
| 130 | <div className="ti-tpc-template-library-template-body"> |
| 131 | <div |
| 132 | className="ti-tpc-template-library-template-screenshot" |
| 133 | style={ { |
| 134 | backgroundImage: `url( ${ thumbnail })`, |
| 135 | } } |
| 136 | ></div> |
| 137 | <Button |
| 138 | className="ti-tpc-template-library-template-preview" |
| 139 | onClick={ () => { |
| 140 | togglePreview(); |
| 141 | setPreviewData( { ...item } ); |
| 142 | } } |
| 143 | > |
| 144 | <i className="eicon-zoom-in-bold" aria-hidden="true"></i> |
| 145 | </Button> |
| 146 | </div> |
| 147 | |
| 148 | <div className="ti-tpc-template-library-template-footer"> |
| 149 | <Button |
| 150 | className="ti-tpc-template-library-template-action elementor-button" |
| 151 | onClick={ () => onImport( { id, title, meta } ) } |
| 152 | > |
| 153 | <i className="eicon-file-download" aria-hidden="true"></i> |
| 154 | <span>{ window.tiTpc.library.actions.insert }</span> |
| 155 | </Button> |
| 156 | |
| 157 | <div className="ti-tpc-template-library-template-name"> |
| 158 | { title } |
| 159 | </div> |
| 160 | </div> |
| 161 | </div> |
| 162 | ); |
| 163 | }; |
| 164 | |
| 165 | export default withDispatch( ( dispatch ) => { |
| 166 | const { togglePreview, setPreviewData } = dispatch( 'tpc/elementor' ); |
| 167 | |
| 168 | return { |
| 169 | togglePreview, |
| 170 | setPreviewData, |
| 171 | }; |
| 172 | } )( Template ); |
| 173 |