@wordpress/block-editor
Version:
233 lines (229 loc) • 7.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _a11y = require("@wordpress/a11y");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _keycodes = require("@wordpress/keycodes");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _dom = require("@wordpress/dom");
var _notices = require("@wordpress/notices");
var _mediaUpload = _interopRequireDefault(require("../media-upload"));
var _check = _interopRequireDefault(require("../media-upload/check"));
var _linkControl = _interopRequireDefault(require("../link-control"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
let uniqueId = 0;
const MediaReplaceFlow = ({
mediaURL,
mediaId,
mediaIds,
allowedTypes,
accept,
onError,
onSelect,
onSelectURL,
onReset,
onToggleFeaturedImage,
useFeaturedImage,
onFilesUpload = noop,
name = (0, _i18n.__)('Replace'),
createNotice,
removeNotice,
children,
multiple = false,
addToGallery,
handleUpload = true,
popoverProps,
renderToggle
}) => {
const {
getSettings
} = (0, _data.useSelect)(_store.store);
const errorNoticeID = `block-editor/media-replace-flow/error-notice/${++uniqueId}`;
const onUploadError = message => {
const safeMessage = (0, _dom.__unstableStripHTML)(message);
if (onError) {
onError(safeMessage);
return;
}
// We need to set a timeout for showing the notice
// so that VoiceOver and possibly other screen readers
// can announce the error after the toolbar button
// regains focus once the upload dialog closes.
// Otherwise VO simply skips over the notice and announces
// the focused element and the open menu.
setTimeout(() => {
createNotice('error', safeMessage, {
speak: true,
id: errorNoticeID,
isDismissible: true
});
}, 1000);
};
const selectMedia = (media, closeMenu) => {
if (useFeaturedImage && onToggleFeaturedImage) {
onToggleFeaturedImage();
}
closeMenu();
// Calling `onSelect` after the state update since it might unmount the component.
onSelect(media);
(0, _a11y.speak)((0, _i18n.__)('The media file has been replaced'));
removeNotice(errorNoticeID);
};
const uploadFiles = (event, closeMenu) => {
const files = event.target.files;
if (!handleUpload) {
closeMenu();
return onSelect(files);
}
onFilesUpload(files);
getSettings().mediaUpload({
allowedTypes,
filesList: files,
onFileChange: ([media]) => {
selectMedia(media, closeMenu);
},
onError: onUploadError
});
};
const openOnArrowDown = event => {
if (event.keyCode === _keycodes.DOWN) {
event.preventDefault();
event.target.click();
}
};
const onlyAllowsImages = () => {
if (!allowedTypes || allowedTypes.length === 0) {
return false;
}
return allowedTypes.every(allowedType => allowedType === 'image' || allowedType.startsWith('image/'));
};
const gallery = multiple && onlyAllowsImages();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: popoverProps,
contentClassName: "block-editor-media-replace-flow__options",
renderToggle: ({
isOpen,
onToggle
}) => {
if (renderToggle) {
return renderToggle({
'aria-expanded': isOpen,
'aria-haspopup': 'true',
onClick: onToggle,
onKeyDown: openOnArrowDown,
children: name
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle,
onKeyDown: openOnArrowDown,
children: name
});
},
renderContent: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.NavigableMenu, {
className: "block-editor-media-replace-flow__media-upload-menu",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_check.default, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaUpload.default, {
gallery: gallery,
addToGallery: addToGallery,
multiple: multiple,
value: multiple ? mediaIds : mediaId,
onSelect: media => selectMedia(media, onClose),
allowedTypes: allowedTypes,
render: ({
open
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.media,
onClick: open,
children: (0, _i18n.__)('Open Media Library')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormFileUpload, {
onChange: event => {
uploadFiles(event, onClose);
},
accept: accept,
multiple: !!multiple,
render: ({
openFileDialog
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.upload,
onClick: () => {
openFileDialog();
},
children: (0, _i18n._x)('Upload', 'verb')
});
}
})]
}), onToggleFeaturedImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.postFeaturedImage,
onClick: onToggleFeaturedImage,
isPressed: useFeaturedImage,
children: (0, _i18n.__)('Use featured image')
}), mediaURL && onReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
onClick: () => {
onReset();
onClose();
},
children: (0, _i18n.__)('Reset')
}), typeof children === 'function' ? children({
onClose
}) : children]
}), onSelectURL &&
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
(0, _jsxRuntime.jsxs)("form", {
className: "block-editor-media-flow__url-input",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "block-editor-media-replace-flow__image-url-label",
children: (0, _i18n.__)('Current media URL:')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkControl.default, {
value: {
url: mediaURL
},
settings: [],
showSuggestions: false,
onChange: ({
url
}) => {
onSelectURL(url);
},
searchInputPlaceholder: (0, _i18n.__)('Paste or type URL')
})]
})]
})
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md
*/
var _default = exports.default = (0, _compose.compose)([(0, _data.withDispatch)(dispatch => {
const {
createNotice,
removeNotice
} = dispatch(_notices.store);
return {
createNotice,
removeNotice
};
}), (0, _components.withFilters)('editor.MediaReplaceFlow')])(MediaReplaceFlow);
//# sourceMappingURL=index.js.map