UNPKG

@wordpress/block-library

Version:
190 lines (185 loc) 6.06 kB
"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