UNPKG

@wordpress/block-editor

Version:
66 lines (64 loc) 2.3 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _components = require("@wordpress/components"); var _icons = require("@wordpress/icons"); var _compose = require("@wordpress/compose"); var _i18n = require("@wordpress/i18n"); var _element = require("@wordpress/element"); var _jsxRuntime = require("react/jsx-runtime"); /** * WordPress dependencies */ function LinkSettingsDrawer({ children, settingsOpen, setSettingsOpen }) { const prefersReducedMotion = (0, _compose.useReducedMotion)(); const MaybeAnimatePresence = prefersReducedMotion ? _element.Fragment : _components.__unstableAnimatePresence; const MaybeMotionDiv = prefersReducedMotion ? 'div' : _components.__unstableMotion.div; const id = (0, _compose.useInstanceId)(LinkSettingsDrawer); const settingsDrawerId = `link-control-settings-drawer-${id}`; return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { __next40pxDefaultSize: true, className: "block-editor-link-control__drawer-toggle", "aria-expanded": settingsOpen, onClick: () => setSettingsOpen(!settingsOpen), icon: (0, _i18n.isRTL)() ? _icons.chevronLeftSmall : _icons.chevronRightSmall, "aria-controls": settingsDrawerId, children: (0, _i18n._x)('Advanced', 'Additional link settings') }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeAnimatePresence, { children: settingsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeMotionDiv, { className: "block-editor-link-control__drawer", hidden: !settingsOpen, id: settingsDrawerId, initial: "collapsed", animate: "open", exit: "collapsed", variants: { open: { opacity: 1, height: 'auto' }, collapsed: { opacity: 0, height: 0 } }, transition: { duration: 0.1 }, children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "block-editor-link-control__drawer-inner", children: children }) }) })] }); } var _default = exports.default = LinkSettingsDrawer; //# sourceMappingURL=settings-drawer.js.map