edit.js
1 lines
| 1 | "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Edit=void 0;const i18n_1=require("@wordpress/i18n"),components_1=require("@wordpress/components"),classnames_1=__importDefault(require("classnames")),element_1=require("@wordpress/element"),icons_1=require("@wordpress/icons"),components_2=require("@woocommerce/components"),tracks_1=require("@woocommerce/tracks"),block_editor_1=require("@wordpress/block-editor"),core_data_1=require("@wordpress/core-data");function Edit(){const[e,r]=(0,core_data_1.useEntityProp)("postType","product","images"),[o,t]=(0,element_1.useState)(!1),[a,n]=(0,element_1.useState)(!1),[c,_]=(0,element_1.useState)(null),i=(0,block_editor_1.useBlockProps)({className:(0,classnames_1.default)({"has-images":e.length>0})}),l=()=>{t(!o)};return(0,element_1.createElement)("div",{...i},(0,element_1.createElement)("div",{className:"woocommerce-product-form__image-drop-zone"},o?(0,element_1.createElement)("div",{className:"woocommerce-product-form__remove-image-drop-zone"},(0,element_1.createElement)("span",null,(0,element_1.createElement)(icons_1.Icon,{icon:icons_1.trash,size:20,className:"icon-control"}),(0,i18n_1.__)("Drop here to remove","woocommerce")),(0,element_1.createElement)(components_1.DropZone,{onHTMLDrop:()=>n(!0),onDrop:()=>n(!0),label:(0,i18n_1.__)("Drop here to remove","woocommerce")})):(0,element_1.createElement)(components_2.MediaUploader,{multipleSelect:!0,onError:()=>null,onFileUploadChange:o=>{o[0].id&&((0,tracks_1.recordEvent)("product_images_add_via_file_upload_area"),r([...e,...o]))},onMediaGalleryOpen:()=>{(0,tracks_1.recordEvent)("product_images_media_gallery_open")},onSelect:o=>{const t=o.filter((r=>!e.find((e=>e.id===r.id))));t.length>0&&((0,tracks_1.recordEvent)("product_images_add_via_media_library"),r([...e,...t]))},onUpload:o=>{o[0].id&&((0,tracks_1.recordEvent)("product_images_add_via_drag_and_drop_upload"),r([...e,...o]))},label:""})),(0,element_1.createElement)(components_2.ImageGallery,{allowDragging:!1,onDragStart:r=>{var o;const{id:t,dataset:a}=r.target;if(t)_(parseInt(t,10));else{const r=null==a?void 0:a.index;r&&_(null===(o=e[parseInt(r,10)])||void 0===o?void 0:o.id)}l()},onDragEnd:()=>{a&&c&&((0,tracks_1.recordEvent)("product_images_remove_image_button_click"),r(e.filter((e=>e.id!==c))),n(!1),_(null)),l()},onOrderChange:o=>{const t=o.map((r=>e.find((e=>{var o;return e.id===parseInt(null===(o=null==r?void 0:r.props)||void 0===o?void 0:o.id,10)}))));(0,tracks_1.recordEvent)("product_images_change_image_order_via_image_gallery"),r(t)},onReplace:({replaceIndex:o,media:t})=>{if(void 0===e.find((e=>t.id===e.id))){const a=[...e];a[o]=t,(0,tracks_1.recordEvent)("product_images_replace_image_button_click"),r(a)}},onSelectAsCover:()=>(0,tracks_1.recordEvent)("product_images_select_image_as_cover_button_click")},e.map((e=>(0,element_1.createElement)(components_2.ImageGalleryItem,{key:e.id||e.url,alt:e.alt,src:e.url||e.src,id:`${e.id}`})))))}exports.Edit=Edit; |