@wordpress/block-editor
Version:
200 lines (193 loc) • 8.15 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _context = require("../block-edit/context");
var _mediaUpload = _interopRequireDefault(require("../media-upload"));
var _constants = require("../media-upload/constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const isMediaEqual = (media1, media2) => media1.id === media2.id || media1.url === media2.url;
// Remove duplicates after gallery append.
const dedupMedia = media => media.reduce((dedupedMedia, mediaItem) => dedupedMedia.some(item => isMediaEqual(item, mediaItem)) ? dedupedMedia : [...dedupedMedia, mediaItem], []);
const hitSlop = {
top: 22,
bottom: 22,
left: 22,
right: 22
};
function MediaPlaceholder(props) {
const {
addToGallery,
allowedTypes = [],
className = '',
labels = {},
icon,
onSelect,
onFocus,
__experimentalOnlyMediaLibrary,
isAppender,
disableMediaButtons,
multiple,
value = [],
children,
height,
backgroundColor,
hideContent,
autoOpenMediaUpload,
onSelectURL
} = props;
// Use ref to keep media array current for callbacks during rerenders.
const mediaRef = (0, _element.useRef)(value);
mediaRef.current = value;
const blockEditContext = (0, _context.useBlockEditContext)();
const onButtonPress = (0, _element.useCallback)(open => event => {
onFocus?.(event);
open();
}, [onFocus]);
// Append and deduplicate media array for gallery use case.
const setMedia = multiple && addToGallery ? selected => onSelect(dedupMedia([...mediaRef.current, ...selected])) : onSelect;
const isOneType = allowedTypes.length === 1;
const isImage = isOneType && allowedTypes.includes(_constants.MEDIA_TYPE_IMAGE);
const isVideo = isOneType && allowedTypes.includes(_constants.MEDIA_TYPE_VIDEO);
const isAudio = isOneType && allowedTypes.includes(_constants.MEDIA_TYPE_AUDIO);
let placeholderTitle = labels.title;
if (placeholderTitle === undefined) {
placeholderTitle = (0, _i18n.__)('Media');
if (isImage) {
placeholderTitle = (0, _i18n.__)('Image');
} else if (isVideo) {
placeholderTitle = (0, _i18n.__)('Video');
} else if (isAudio) {
placeholderTitle = (0, _i18n.__)('Audio');
}
}
let instructions = labels.instructions;
if (instructions === undefined) {
if (isImage) {
instructions = (0, _i18n.__)('Add image');
} else if (isVideo) {
instructions = (0, _i18n.__)('Add video');
} else if (isAudio) {
instructions = (0, _i18n.__)('Add audio');
} else {
instructions = (0, _i18n.__)('Add image or video');
}
}
let accessibilityHint = (0, _i18n.__)('Double tap to select');
if (isImage) {
accessibilityHint = (0, _i18n.__)('Double tap to select an image');
} else if (isVideo) {
accessibilityHint = (0, _i18n.__)('Double tap to select a video');
} else if (isAudio) {
accessibilityHint = (0, _i18n.__)('Double tap to select an audio file');
}
const titleStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__header-title'], _styles.default['media-placeholder__header-title--dark']);
const addMediaButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.addMediaButton, _styles.default.addMediaButtonDark);
const buttonStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__button'], _styles.default['media-placeholder__button--dark']);
const emptyStateDescriptionStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.emptyStateDescription, _styles.default.emptyStateDescriptionDark);
const iconStyles = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__header-icon'], _styles.default['media-placeholder__header-icon--dark']);
const placeholderIcon = (0, _element.cloneElement)(icon, {
fill: iconStyles.fill
});
const accessibilityLabel = (0, _i18n.sprintf)(/* translators: accessibility text for the media block empty state. %s: media type */
(0, _i18n.__)('%s block. Empty'), placeholderTitle);
const renderContent = open => {
if (isAppender === undefined || !isAppender) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _styles.default['media-placeholder__header'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: iconStyles,
children: placeholderIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: titleStyles,
children: placeholderTitle
})]
}), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
activeOpacity: 0.5,
accessibilityLabel: accessibilityLabel,
style: buttonStyles,
accessibilityRole: "button",
accessibilityHint: accessibilityHint,
hitSlop: hitSlop,
onPress: onButtonPress(open),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: emptyStateDescriptionStyles,
children: instructions
})
})]
});
} else if (isAppender && !disableMediaButtons) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
activeOpacity: 0.5,
accessibilityLabel: accessibilityLabel,
style: _styles.default['media-placeholder__appender'],
accessibilityRole: "button",
accessibilityHint: accessibilityHint,
hitSlop: hitSlop,
onPress: onButtonPress(open),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
testID: "media-placeholder-appender-icon",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.plusCircleFilled,
style: addMediaButtonStyle,
color: addMediaButtonStyle.color,
size: addMediaButtonStyle.size
})
})
});
}
};
const appenderStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.appender, _styles.default.appenderDark);
const containerSelectedStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__container-selected'], _styles.default['media-placeholder__container-selected--dark']);
const containerStyle = [(0, _compose.usePreferredColorSchemeStyle)(_styles.default['media-placeholder__container'], _styles.default['media-placeholder__container--dark']), blockEditContext?.isSelected && !className.includes('no-block-outline') && containerSelectedStyle];
if (isAppender && disableMediaButtons) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
flex: 1
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaUpload.default, {
allowedTypes: allowedTypes,
onSelect: setMedia,
onSelectURL: onSelectURL,
__experimentalOnlyMediaLibrary: __experimentalOnlyMediaLibrary,
multiple: multiple,
isReplacingMedia: false,
autoOpen: autoOpenMediaUpload,
render: ({
open,
getMediaOptions
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [[containerStyle, height && {
height
}, backgroundColor && {
backgroundColor
}], isAppender && appenderStyle],
children: [getMediaOptions(), !hideContent && renderContent(open)]
});
}
})
});
}
var _default = exports.default = MediaPlaceholder;
//# sourceMappingURL=index.native.js.map