index.tsx
141 lines
| 1 | /** |
| 2 | * @link https://codex.wordpress.org/Javascript_Reference/wp.media |
| 3 | * @link https://wordpress.stackexchange.com/a/382291 |
| 4 | */ |
| 5 | |
| 6 | import React from 'react'; |
| 7 | import _ from 'lodash'; |
| 8 | import {__, sprintf} from '@wordpress/i18n'; |
| 9 | import classnames from 'classnames'; |
| 10 | import './styles.scss'; |
| 11 | |
| 12 | type MediaLibrary = { |
| 13 | id: string; |
| 14 | value: string; |
| 15 | onChange: (url: string, alt: string) => void; |
| 16 | reset: () => void; |
| 17 | label: string; |
| 18 | actionLabel?: string; |
| 19 | disabled?: boolean; |
| 20 | }; |
| 21 | |
| 22 | export default function UploadMedia({id, value, onChange, label, actionLabel, reset, disabled}: MediaLibrary) { |
| 23 | // The media library uses Backbone.js, which can conflict with lodash. |
| 24 | _.noConflict(); |
| 25 | let frame; |
| 26 | |
| 27 | const openMediaLibrary = (event) => { |
| 28 | event.preventDefault(); |
| 29 | |
| 30 | if (frame) { |
| 31 | frame.open(); |
| 32 | return; |
| 33 | } |
| 34 | |
| 35 | frame = window.wp.media({ |
| 36 | title: __('Upload Media', 'give'), |
| 37 | button: { |
| 38 | text: __('Use this media', 'gie'), |
| 39 | }, |
| 40 | library: { |
| 41 | type: 'image', // Restricts media library to image files only |
| 42 | }, |
| 43 | multiple: false, // Set to true to allow multiple files to be selected |
| 44 | }); |
| 45 | |
| 46 | frame.on('select', function () { |
| 47 | // Get media attachment details from the frame state |
| 48 | var attachment = frame.state().get('selection').first().toJSON(); |
| 49 | |
| 50 | if (!attachment.type || attachment.type !== 'image') { |
| 51 | alert(__('Please select an image file only.', 'give')); |
| 52 | frame.open(); |
| 53 | return; |
| 54 | } |
| 55 | |
| 56 | onChange(attachment.url, attachment.alt); |
| 57 | }); |
| 58 | |
| 59 | // Finally, open the modal on click |
| 60 | frame.open(); |
| 61 | }; |
| 62 | |
| 63 | const resetImage = (event) => { |
| 64 | reset(); |
| 65 | }; |
| 66 | |
| 67 | const dropHandler = (event) => { |
| 68 | event.preventDefault(); |
| 69 | openMediaLibrary(event); |
| 70 | }; |
| 71 | |
| 72 | return ( |
| 73 | <div id={id} className={classnames('givewp-media-library-control-wrapper', {'is-disabled': disabled})}> |
| 74 | {value ? ( |
| 75 | <div className={'givewp-media-library-control'}> |
| 76 | <button className={'givewp-media-library-control__reset'} onClick={resetImage} disabled={disabled}> |
| 77 | <img |
| 78 | className={'givewp-media-library-control__image'} |
| 79 | src={value} |
| 80 | alt={__('uploaded image', 'give')} |
| 81 | /> |
| 82 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14" fill="#fff"> |
| 83 | <path |
| 84 | d="M4.66675 1.74935C4.66675 1.42718 4.92792 1.16602 5.25008 1.16602H8.75008C9.07225 1.16602 9.33342 1.42718 9.33342 1.74935C9.33342 2.07152 9.07225 2.33268 8.75008 2.33268H5.25008C4.92792 2.33268 4.66675 2.07152 4.66675 1.74935Z" |
| 85 | fill="#fff" |
| 86 | /> |
| 87 | <path |
| 88 | fillRule="evenodd" |
| 89 | clipRule="evenodd" |
| 90 | d="M1.16675 3.49935C1.16675 3.17718 1.42792 2.91602 1.75008 2.91602H12.2501C12.5722 2.91602 12.8334 3.17718 12.8334 3.49935C12.8334 3.82152 12.5722 4.08268 12.2501 4.08268H11.6292L11.2549 9.69755C11.2255 10.1382 11.2012 10.5029 11.1576 10.7997C11.1122 11.1088 11.0402 11.3912 10.8903 11.6544C10.6569 12.0641 10.3048 12.3935 9.88046 12.5991C9.60788 12.7312 9.3213 12.7843 9.00992 12.809C8.71085 12.8327 8.34537 12.8327 7.90372 12.8327H6.09648C5.65483 12.8327 5.28935 12.8327 4.99028 12.809C4.6789 12.7843 4.39232 12.7312 4.11973 12.5991C3.69539 12.3935 3.34332 12.0641 3.1099 11.6544C2.95996 11.3912 2.88798 11.1088 2.84261 10.7997C2.79903 10.5029 2.77472 10.1382 2.74535 9.69754L2.37102 4.08268H1.75008C1.42792 4.08268 1.16675 3.82152 1.16675 3.49935ZM5.83342 5.54102C6.15558 5.54102 6.41675 5.80218 6.41675 6.12435V9.04102C6.41675 9.36318 6.15558 9.62435 5.83342 9.62435C5.51125 9.62435 5.25008 9.36318 5.25008 9.04102V6.12435C5.25008 5.80218 5.51125 5.54102 5.83342 5.54102ZM8.75008 6.12435C8.75008 5.80218 8.48891 5.54102 8.16675 5.54102C7.84458 5.54102 7.58342 5.80218 7.58342 6.12435V9.04102C7.58342 9.36318 7.84458 9.62435 8.16675 9.62435C8.48891 9.62435 8.75008 9.36318 8.75008 9.04102V6.12435Z" |
| 91 | fill="#fff" |
| 92 | /> |
| 93 | </svg> |
| 94 | </button> |
| 95 | |
| 96 | <div className={'givewp-media-library-control__options'}> |
| 97 | <button |
| 98 | className={ |
| 99 | 'givewp-media-library-control__options givewp-media-library-control__options--remove' |
| 100 | } |
| 101 | onClick={resetImage} |
| 102 | disabled={disabled} |
| 103 | > |
| 104 | {sprintf(__('Remove %s', 'give'), label.toLowerCase())} |
| 105 | </button> |
| 106 | <button |
| 107 | className={ |
| 108 | 'givewp-media-library-control__options givewp-media-library-control__options--update' |
| 109 | } |
| 110 | onClick={openMediaLibrary} |
| 111 | disabled={disabled} |
| 112 | > |
| 113 | {sprintf(__('Change %s', 'give'), label.toLowerCase())} |
| 114 | </button> |
| 115 | </div> |
| 116 | </div> |
| 117 | ) : ( |
| 118 | <div className={'givewp-media-library-drop-area'} onDragOver={!disabled && dropHandler}> |
| 119 | <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 120 | <path |
| 121 | d="M19 13.5V14.7C19 16.3802 19 17.2202 18.673 17.862C18.3854 18.4265 17.9265 18.8854 17.362 19.173C16.7202 19.5 15.8802 19.5 14.2 19.5H5.8C4.11984 19.5 3.27976 19.5 2.63803 19.173C2.07354 18.8854 1.6146 18.4265 1.32698 17.862C1 17.2202 1 16.3802 1 14.7V13.5M15 6.5L10 1.5M10 1.5L5 6.5M10 1.5V13.5" |
| 122 | stroke="#6B7280" |
| 123 | strokeWidth="2" |
| 124 | strokeLinecap="round" |
| 125 | strokeLinejoin="round" |
| 126 | /> |
| 127 | </svg> |
| 128 | <button |
| 129 | className={'givewp-media-library-control__button'} |
| 130 | onClick={openMediaLibrary} |
| 131 | disabled={disabled} |
| 132 | > |
| 133 | {actionLabel} |
| 134 | </button> |
| 135 | <p>{__('or drag your image here', 'give')}</p> |
| 136 | </div> |
| 137 | )} |
| 138 | </div> |
| 139 | ); |
| 140 | } |
| 141 |