@wordpress/interface
Version:
Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.
199 lines (195 loc) • 6.86 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _navigableRegion = _interopRequireDefault(require("../navigable-region"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ANIMATION_DURATION = 0.25;
const commonTransition = {
type: 'tween',
duration: ANIMATION_DURATION,
ease: [0.6, 0, 0.4, 1]
};
function useHTMLClass(className) {
(0, _element.useEffect)(() => {
const element = document && document.querySelector(`html:not(.${className})`);
if (!element) {
return;
}
element.classList.toggle(className);
return () => {
element.classList.toggle(className);
};
}, [className]);
}
const headerVariants = {
hidden: {
opacity: 1,
marginTop: -60
},
visible: {
opacity: 1,
marginTop: 0
},
distractionFreeHover: {
opacity: 1,
marginTop: 0,
transition: {
...commonTransition,
delay: 0.2,
delayChildren: 0.2
}
},
distractionFreeHidden: {
opacity: 0,
marginTop: -60
},
distractionFreeDisabled: {
opacity: 0,
marginTop: 0,
transition: {
...commonTransition,
delay: 0.8,
delayChildren: 0.8
}
}
};
function InterfaceSkeleton({
isDistractionFree,
footer,
header,
editorNotices,
sidebar,
secondarySidebar,
content,
actions,
labels,
className
}, ref) {
const [secondarySidebarResizeListener, secondarySidebarSize] = (0, _compose.useResizeObserver)();
const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
const disableMotion = (0, _compose.useReducedMotion)();
const defaultTransition = {
type: 'tween',
duration: disableMotion ? 0 : ANIMATION_DURATION,
ease: [0.6, 0, 0.4, 1]
};
useHTMLClass('interface-interface-skeleton__html-container');
const defaultLabels = {
/* translators: accessibility text for the top bar landmark region. */
header: (0, _i18n._x)('Header', 'header landmark area'),
/* translators: accessibility text for the content landmark region. */
body: (0, _i18n.__)('Content'),
/* translators: accessibility text for the secondary sidebar landmark region. */
secondarySidebar: (0, _i18n.__)('Block Library'),
/* translators: accessibility text for the settings landmark region. */
sidebar: (0, _i18n._x)('Settings', 'settings landmark area'),
/* translators: accessibility text for the publish landmark region. */
actions: (0, _i18n.__)('Publish'),
/* translators: accessibility text for the footer landmark region. */
footer: (0, _i18n.__)('Footer')
};
const mergedLabels = {
...defaultLabels,
...labels
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
className: (0, _clsx.default)(className, 'interface-interface-skeleton', !!footer && 'has-footer'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "interface-interface-skeleton__editor",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
initial: false,
children: !!header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
as: _components.__unstableMotion.div,
className: "interface-interface-skeleton__header",
"aria-label": mergedLabels.header,
initial: isDistractionFree && !isMobileViewport ? 'distractionFreeHidden' : 'hidden',
whileHover: isDistractionFree && !isMobileViewport ? 'distractionFreeHover' : 'visible',
animate: isDistractionFree && !isMobileViewport ? 'distractionFreeDisabled' : 'visible',
exit: isDistractionFree && !isMobileViewport ? 'distractionFreeHidden' : 'hidden',
variants: headerVariants,
transition: defaultTransition,
children: header
})
}), isDistractionFree && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "interface-interface-skeleton__header",
children: editorNotices
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "interface-interface-skeleton__body",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
initial: false,
children: !!secondarySidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
className: "interface-interface-skeleton__secondary-sidebar",
ariaLabel: mergedLabels.secondarySidebar,
as: _components.__unstableMotion.div,
initial: "closed",
animate: "open",
exit: "closed",
variants: {
open: {
width: secondarySidebarSize.width
},
closed: {
width: 0
}
},
transition: defaultTransition,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
style: {
position: 'absolute',
width: isMobileViewport ? '100vw' : 'fit-content',
height: '100%',
left: 0
},
variants: {
open: {
x: 0
},
closed: {
x: '-100%'
}
},
transition: defaultTransition,
children: [secondarySidebarResizeListener, secondarySidebar]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
className: "interface-interface-skeleton__content",
ariaLabel: mergedLabels.body,
children: content
}), !!sidebar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
className: "interface-interface-skeleton__sidebar",
ariaLabel: mergedLabels.sidebar,
children: sidebar
}), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
className: "interface-interface-skeleton__actions",
ariaLabel: mergedLabels.actions,
children: actions
})]
})]
}), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableRegion.default, {
className: "interface-interface-skeleton__footer",
ariaLabel: mergedLabels.footer,
children: footer
})]
});
}
var _default = exports.default = (0, _element.forwardRef)(InterfaceSkeleton);
//# sourceMappingURL=index.js.map