@wordpress/block-library
Version:
Block library for the WordPress editor.
248 lines (244 loc) • 9.35 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 _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _style = _interopRequireDefault(require("./style.scss"));
var _overlayColorSettings = _interopRequireDefault(require("./overlay-color-settings"));
var _focalPointSettingsButton = _interopRequireDefault(require("./focal-point-settings-button"));
var _shared = require("./shared");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Controls({
attributes,
didUploadFail,
hasOnlyColorBackground,
isUploadInProgress,
onClearMedia,
onSelectMedia,
setAttributes
}) {
const {
backgroundType,
dimRatio,
hasParallax,
focalPoint,
minHeight,
minHeightUnit = 'px',
url
} = attributes;
const CONTAINER_HEIGHT = minHeight || _shared.COVER_DEFAULT_HEIGHT;
const onHeightChange = (0, _element.useCallback)(value => {
if (minHeight || value !== _shared.COVER_DEFAULT_HEIGHT) {
setAttributes({
minHeight: value
});
}
}, [minHeight]);
const [availableUnits] = (0, _blockEditor.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem', 'vw', 'vh'],
defaultValues: {
px: 430,
em: 20,
rem: 20,
vw: 20,
vh: 50
}
});
const onOpacityChange = (0, _element.useCallback)(value => {
setAttributes({
dimRatio: value
});
}, []);
const onChangeUnit = (0, _element.useCallback)(nextUnit => {
setAttributes({
minHeightUnit: nextUnit,
minHeight: nextUnit === 'px' ? Math.max(CONTAINER_HEIGHT, _shared.COVER_MIN_HEIGHT) : CONTAINER_HEIGHT
});
}, []);
const [displayPlaceholder, setDisplayPlaceholder] = (0, _element.useState)(true);
function setFocalPoint(value) {
setAttributes({
focalPoint: value
});
}
const toggleParallax = () => {
setAttributes({
hasParallax: !hasParallax,
...(!hasParallax ? {
focalPoint: undefined
} : {
focalPoint: _components.IMAGE_DEFAULT_FOCAL_POINT
})
});
};
const addMediaButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.addMediaButton, _style.default.addMediaButtonDark);
function focalPointPosition({
x,
y
} = _components.IMAGE_DEFAULT_FOCAL_POINT) {
return {
left: `${(hasParallax ? 0.5 : x) * 100}%`,
top: `${(hasParallax ? 0.5 : y) * 100}%`
};
}
const [videoNaturalSize, setVideoNaturalSize] = (0, _element.useState)(null);
const videoRef = (0, _element.useRef)(null);
const mediaBackground = (0, _compose.usePreferredColorSchemeStyle)(_style.default.mediaBackground, _style.default.mediaBackgroundDark);
const imagePreviewStyles = [displayPlaceholder && _style.default.imagePlaceholder];
const videoPreviewStyles = [{
aspectRatio: videoNaturalSize && videoNaturalSize.width / videoNaturalSize.height,
// Hide Video component since it has black background while loading the source
opacity: displayPlaceholder ? 0 : 1
}, _style.default.video, displayPlaceholder && _style.default.imagePlaceholder];
const focalPointHint = !hasParallax && !displayPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _icons.plus,
size: _style.default.focalPointHint?.width,
style: [_style.default.focalPointHint, focalPointPosition(focalPoint)]
});
const renderMediaSection = ({
open: openMediaOptions,
getMediaOptions
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [getMediaOptions(), url ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
accessible: false,
cellContainerStyle: [_style.default.mediaPreview, mediaBackground],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.mediaInner,
children: [_shared.IMAGE_BACKGROUND_TYPE === backgroundType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
editButton: !displayPlaceholder,
highlightSelected: false,
isSelected: !displayPlaceholder,
isUploadFailed: didUploadFail,
isUploadInProgress: isUploadInProgress,
mediaPickerOptions: [{
destructiveButton: true,
id: 'clearMedia',
label: (0, _i18n.__)('Clear Media'),
onPress: onClearMedia,
separated: true,
value: 'clearMedia'
}],
onImageDataLoad: () => {
setDisplayPlaceholder(false);
},
onSelectMediaUploadOption: onSelectMedia,
openMediaOptions: openMediaOptions,
url: url,
height: "100%",
style: imagePreviewStyles,
width: _style.default.image?.width
}), _shared.VIDEO_BACKGROUND_TYPE === backgroundType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeVideo.default, {
muted: true,
paused: true,
disableFocus: true,
onLoadStart: () => {
setDisplayPlaceholder(true);
},
onLoad: event => {
const {
height,
width
} = event.naturalSize;
setVideoNaturalSize({
height,
width
});
setDisplayPlaceholder(false);
// Avoid invisible, paused video on Android, presumably
// related to https://github.com/react-native-video/react-native-video/issues/1979
videoRef?.current.seek(0);
},
ref: videoRef,
resizeMode: "cover",
source: {
uri: url
},
style: videoPreviewStyles
}), displayPlaceholder ? null : focalPointHint]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointSettingsButton.default, {
disabled: hasParallax,
focalPoint: focalPoint || _components.IMAGE_DEFAULT_FOCAL_POINT,
onFocalPointChange: setFocalPoint,
url: url
}), _shared.IMAGE_BACKGROUND_TYPE === backgroundType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
label: (0, _i18n.__)('Fixed background'),
checked: hasParallax,
onChange: toggleParallax
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
leftAlign: true,
label: (0, _i18n.__)('Clear Media'),
labelStyle: _style.default.clearMediaButton,
onPress: onClearMedia
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
accessibilityLabel: (0, _i18n.__)('Add image or video'),
label: (0, _i18n.__)('Add image or video'),
labelStyle: addMediaButtonStyle,
leftAlign: true,
onPress: openMediaOptions
})]
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: (0, _i18n.__)('Media'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
allowedTypes: _shared.ALLOWED_MEDIA_TYPES,
isReplacingMedia: !hasOnlyColorBackground,
onSelect: onSelectMedia,
render: renderMediaSection
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayColorSettings.default, {
overlayColor: attributes.overlayColor,
customOverlayColor: attributes.customOverlayColor,
gradient: attributes.gradient,
customGradient: attributes.customGradient,
setAttributes: setAttributes
}), url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
label: (0, _i18n.__)('Opacity'),
minimumValue: 0,
maximumValue: 100,
value: dimRatio,
onChange: onOpacityChange,
style: _style.default.rangeCellContainer,
separatorType: "topFullWidth"
})
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: (0, _i18n.__)('Dimensions'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.UnitControl, {
label: (0, _i18n.__)('Minimum height'),
min: minHeightUnit === 'px' ? _shared.COVER_MIN_HEIGHT : 1,
max: _shared.COVER_MAX_HEIGHT,
unit: minHeightUnit,
value: CONTAINER_HEIGHT,
onChange: onHeightChange,
onUnitChange: onChangeUnit,
units: units,
style: _style.default.rangeCellContainer
}, minHeightUnit)
})]
});
}
var _default = exports.default = Controls;
//# sourceMappingURL=controls.native.js.map