UNPKG

@wordpress/block-library

Version:
305 lines (300 loc) 10.1 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.MIN_PREVIEW_HEIGHT = exports.MAX_PREVIEW_HEIGHT = void 0; var _clsx = _interopRequireDefault(require("clsx")); var _blob = require("@wordpress/blob"); var _components = require("@wordpress/components"); var _data = require("@wordpress/data"); var _blockEditor = require("@wordpress/block-editor"); var _element = require("@wordpress/element"); var _compose = require("@wordpress/compose"); var _i18n = require("@wordpress/i18n"); var _icons = require("@wordpress/icons"); var _coreData = require("@wordpress/core-data"); var _notices = require("@wordpress/notices"); var _inspector = _interopRequireDefault(require("./inspector")); var _utils = require("./utils"); var _removeAnchorTag = _interopRequireDefault(require("../utils/remove-anchor-tag")); var _hooks = require("../utils/hooks"); var _jsxRuntime = require("react/jsx-runtime"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ const MIN_PREVIEW_HEIGHT = exports.MIN_PREVIEW_HEIGHT = 200; const MAX_PREVIEW_HEIGHT = exports.MAX_PREVIEW_HEIGHT = 2000; function ClipboardToolbarButton({ text, disabled }) { const { createNotice } = (0, _data.useDispatch)(_notices.store); const ref = (0, _compose.useCopyToClipboard)(text, () => { createNotice('info', (0, _i18n.__)('Copied URL to clipboard.'), { isDismissible: true, type: 'snackbar' }); }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, { className: "components-clipboard-toolbar-button", ref: ref, disabled: disabled, children: (0, _i18n.__)('Copy URL') }); } function FileEdit({ attributes, isSelected, setAttributes, clientId }) { const { id, fileName, href, textLinkHref, textLinkTarget, showDownloadButton, downloadButtonText, displayPreview, previewHeight } = attributes; const [temporaryURL, setTemporaryURL] = (0, _element.useState)(attributes.blob); const { media } = (0, _data.useSelect)(select => ({ media: id === undefined ? undefined : select(_coreData.store).getMedia(id) }), [id]); const { createErrorNotice } = (0, _data.useDispatch)(_notices.store); const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } = (0, _data.useDispatch)(_blockEditor.store); (0, _hooks.useUploadMediaFromBlobURL)({ url: temporaryURL, onChange: onSelectFile, onError: onUploadError }); // Note: Handle setting a default value for `downloadButtonText` via HTML API // when it supports replacing text content for HTML tags. (0, _element.useEffect)(() => { if (_blockEditor.RichText.isEmpty(downloadButtonText)) { __unstableMarkNextChangeAsNotPersistent(); setAttributes({ downloadButtonText: (0, _i18n._x)('Download', 'button label') }); } // This effect should only run on mount. }, []); function onSelectFile(newMedia) { var _attributes$displayPr, _attributes$previewHe; if (!newMedia || !newMedia.url) { // Reset attributes. setAttributes({ href: undefined, fileName: undefined, textLinkHref: undefined, id: undefined, fileId: undefined, displayPreview: undefined, previewHeight: undefined }); setTemporaryURL(); return; } if ((0, _blob.isBlobURL)(newMedia.url)) { setTemporaryURL(newMedia.url); return; } const isPdf = newMedia.url.endsWith('.pdf'); const pdfAttributes = { displayPreview: isPdf ? (_attributes$displayPr = attributes.displayPreview) !== null && _attributes$displayPr !== void 0 ? _attributes$displayPr : true : undefined, previewHeight: isPdf ? (_attributes$previewHe = attributes.previewHeight) !== null && _attributes$previewHe !== void 0 ? _attributes$previewHe : 600 : undefined }; setAttributes({ href: newMedia.url, fileName: newMedia.title, textLinkHref: newMedia.url, id: newMedia.id, fileId: `wp-block-file--media-${clientId}`, blob: undefined, ...pdfAttributes }); setTemporaryURL(); } function onUploadError(message) { setAttributes({ href: undefined }); createErrorNotice(message, { type: 'snackbar' }); } function changeLinkDestinationOption(newHref) { // Choose Media File or Attachment Page (when file is in Media Library). setAttributes({ textLinkHref: newHref }); } function changeOpenInNewWindow(newValue) { setAttributes({ textLinkTarget: newValue ? '_blank' : false }); } function changeShowDownloadButton(newValue) { setAttributes({ showDownloadButton: newValue }); } function changeDisplayPreview(newValue) { setAttributes({ displayPreview: newValue }); } function handleOnResizeStop(event, direction, elt, delta) { toggleSelection(true); const newHeight = parseInt(previewHeight + delta.height, 10); setAttributes({ previewHeight: newHeight }); } function changePreviewHeight(newValue) { const newHeight = Math.max(parseInt(newValue, 10), MIN_PREVIEW_HEIGHT); setAttributes({ previewHeight: newHeight }); } const attachmentPage = media && media.link; const blockProps = (0, _blockEditor.useBlockProps)({ className: (0, _clsx.default)(!!temporaryURL && (0, _components.__unstableGetAnimateClassName)({ type: 'loading' }), { 'is-transient': !!temporaryURL }) }); const displayPreviewInEditor = (0, _utils.browserSupportsPdfs)() && displayPreview; if (!href && !temporaryURL) { return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...blockProps, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, { icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, { icon: _icons.file }), labels: { title: (0, _i18n.__)('File'), instructions: (0, _i18n.__)('Drag and drop a file, upload, or choose from your library.') }, onSelect: onSelectFile, onError: onUploadError, accept: "*" }) }); } return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inspector.default, { hrefs: { href: href || temporaryURL, textLinkHref, attachmentPage }, openInNewWindow: !!textLinkTarget, showDownloadButton, changeLinkDestinationOption, changeOpenInNewWindow, changeShowDownloadButton, displayPreview, changeDisplayPreview, previewHeight, changePreviewHeight }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, { group: "other", children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, { mediaId: id, mediaURL: href, accept: "*", onSelect: onSelectFile, onError: onUploadError, onReset: () => onSelectFile(undefined) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClipboardToolbarButton, { text: href, disabled: (0, _blob.isBlobURL)(href) })] }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...blockProps, children: [displayPreviewInEditor && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ResizableBox, { size: { height: previewHeight, width: '100%' }, minHeight: MIN_PREVIEW_HEIGHT, maxHeight: MAX_PREVIEW_HEIGHT // The horizontal grid value must be 1 or else the width may snap during a // resize even though only vertical resizing is enabled. , grid: [1, 10], enable: { top: false, right: false, bottom: true, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }, onResizeStart: () => toggleSelection(false), onResizeStop: handleOnResizeStop, showHandle: isSelected, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("object", { className: "wp-block-file__preview", data: href, type: "application/pdf", "aria-label": (0, _i18n.__)('Embed of the selected PDF file.') }), !isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "wp-block-file__preview-overlay" })] }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "wp-block-file__content-wrapper", children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, { identifier: "fileName", tagName: "a", value: fileName, placeholder: (0, _i18n.__)('Write file name…'), withoutInteractiveFormatting: true, onChange: text => setAttributes({ fileName: (0, _removeAnchorTag.default)(text) }), href: textLinkHref }), showDownloadButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "wp-block-file__button-richtext-wrapper", children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, { identifier: "downloadButtonText", tagName: "div" // Must be block-level or else cursor disappears. , "aria-label": (0, _i18n.__)('Download button text'), className: (0, _clsx.default)('wp-block-file__button', (0, _blockEditor.__experimentalGetElementClassName)('button')), value: downloadButtonText, withoutInteractiveFormatting: true, placeholder: (0, _i18n.__)('Add text…'), onChange: text => setAttributes({ downloadButtonText: (0, _removeAnchorTag.default)(text) }) }) })] })] })] }); } var _default = exports.default = FileEdit; //# sourceMappingURL=edit.js.map