@wordpress/block-library
Version:
Block library for the WordPress editor.
190 lines (185 loc) • 6.06 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _socialList = require("./social-list");
var _editor = _interopRequireDefault(require("./editor.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_ACTIVE_ICON_STYLES = {
backgroundColor: '#f0f0f0',
color: '#444'
};
const ANIMATION_DELAY = 300;
const ANIMATION_DURATION = 400;
const linkSettingsOptions = {
url: {
label: (0, _i18n.__)('URL'),
placeholder: (0, _i18n.__)('Add URL'),
autoFocus: true
},
linkLabel: {
label: (0, _i18n.__)('Link label'),
placeholder: (0, _i18n.__)('None')
},
footer: {
label: (0, _i18n.__)('Briefly describe the link to help screen reader user')
}
};
const SocialLinkEdit = ({
attributes,
setAttributes,
isSelected,
onFocus,
name,
activeVariation
}) => {
const {
url,
service = name
} = attributes;
const [isLinkSheetVisible, setIsLinkSheetVisible] = (0, _element.useState)(false);
const [hasUrl, setHasUrl] = (0, _element.useState)(!!url);
const activeIcon = _editor.default[`wp-social-link-${service}`] || _editor.default[`wp-social-link`] || DEFAULT_ACTIVE_ICON_STYLES;
const animatedValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
const {
icon,
label: socialLinkName
} = (0, _socialList.getSocialService)(activeVariation);
// When new social icon is added link sheet is opened automatically.
(0, _element.useEffect)(() => {
if (isSelected && !url) {
setIsLinkSheetVisible(true);
}
}, []);
(0, _element.useEffect)(() => {
if (!url) {
setHasUrl(false);
animatedValue.setValue(0);
} else if (url) {
animateColors();
}
}, [url]);
const interpolationColors = {
opacity: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0.3, 1]
})
};
const {
opacity
} = hasUrl ? activeIcon : interpolationColors;
function animateColors() {
_reactNative.Animated.sequence([_reactNative.Animated.delay(ANIMATION_DELAY), _reactNative.Animated.timing(animatedValue, {
toValue: 1,
duration: ANIMATION_DURATION,
easing: _reactNative.Easing.circle,
useNativeDriver: false
})]).start(() => setHasUrl(true));
}
const onCloseSettingsSheet = (0, _element.useCallback)(() => {
setIsLinkSheetVisible(false);
}, []);
const onOpenSettingsSheet = (0, _element.useCallback)(() => {
setIsLinkSheetVisible(true);
}, []);
const onEmptyURL = (0, _element.useCallback)(() => {
animatedValue.setValue(0);
setHasUrl(false);
}, [animatedValue]);
function onIconPress() {
if (isSelected) {
setIsLinkSheetVisible(true);
} else {
onFocus();
}
}
const accessibilityHint = url ? (0, _i18n.sprintf)(
// translators: %s: social link name e.g: "Instagram".
(0, _i18n.__)('%s has URL set'), socialLinkName) : (0, _i18n.sprintf)(
// translators: %s: social link name e.g: "Instagram".
(0, _i18n.__)('%s has no URL set'), socialLinkName);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _editor.default.container,
children: [isSelected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
title: (0, _i18n.sprintf)(
// translators: %s: social link name e.g: "Instagram".
(0, _i18n.__)('Add link to %s'), socialLinkName),
icon: _icons.link,
onClick: onOpenSettingsSheet,
isActive: url
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.LinkSettingsNavigation, {
isVisible: isLinkSheetVisible,
url: attributes.url,
label: attributes.label,
rel: attributes.rel,
onEmptyURL: onEmptyURL,
onClose: onCloseSettingsSheet,
setAttributes: setAttributes,
options: linkSettingsOptions,
withBottomSheet: true
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: onIconPress,
accessibilityRole: "button",
accessibilityLabel: (0, _i18n.sprintf)(
// translators: %s: social link name e.g: "Instagram".
(0, _i18n.__)('%s social icon'), socialLinkName),
accessibilityHint: accessibilityHint,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: [_editor.default.iconContainer, {
backgroundColor: activeIcon.backgroundColor,
opacity
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
animated: true,
icon: icon(),
style: {
color: activeIcon.color
}
})
})
})]
});
};
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, {
clientId
}) => {
const {
getBlock
} = select(_blockEditor.store);
const {
getActiveBlockVariation
} = select(_blocks.store);
const block = getBlock(clientId);
const name = block?.name.substring(17);
return {
name,
activeVariation: block ? getActiveBlockVariation(block.name, block.attributes) : undefined
};
})])(SocialLinkEdit);
//# sourceMappingURL=edit.native.js.map