@wordpress/block-editor
Version:
74 lines (71 loc) • 2.42 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useReducer } from '@wordpress/element';
import { Button, __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper } from '@wordpress/components';
import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
/**
* Internal dependencies
*/
import URLInput from './';
/**
* A button that toggles a URL input field for inserting or editing links.
*
* @param {Object} props Component properties.
* @param {string} props.url The current URL value.
* @param {Function} props.onChange Callback function to handle URL changes.
* @return {JSX.Element} The URL input button component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function URLInputButton({
url,
onChange
}) {
const [expanded, toggleExpanded] = useReducer(isExpanded => !isExpanded, false);
const submitLink = event => {
event.preventDefault();
toggleExpanded();
};
return /*#__PURE__*/_jsxs("div", {
className: "block-editor-url-input__button",
children: [/*#__PURE__*/_jsx(Button, {
size: "compact",
icon: link,
label: url ? __('Edit link') : __('Insert link'),
onClick: toggleExpanded,
className: "components-toolbar__control",
isPressed: !!url
}), expanded && /*#__PURE__*/_jsx("form", {
className: "block-editor-url-input__button-modal",
onSubmit: submitLink,
children: /*#__PURE__*/_jsxs("div", {
className: "block-editor-url-input__button-modal-line",
children: [/*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
className: "block-editor-url-input__back",
icon: arrowLeft,
label: __('Close'),
onClick: toggleExpanded
}), /*#__PURE__*/_jsx(URLInput, {
value: url || '',
onChange: onChange,
suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {
variant: "control",
children: /*#__PURE__*/_jsx(Button, {
size: "small",
icon: keyboardReturn,
label: __('Submit'),
type: "submit"
})
})
})]
})
})]
});
}
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
*/
export default URLInputButton;
//# sourceMappingURL=button.js.map