@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 3.86 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/header/header-skeleton.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackButton, { useHasBackButton } from './back-button';\n\nconst toolbarVariations = {\n\tdistractionFreeDisabled: { y: '-50px' },\n\tdistractionFreeHover: { y: 0 },\n\tdistractionFreeHidden: { y: '-50px' },\n\tvisible: { y: 0 },\n\thidden: { y: 0 },\n};\n\nconst backButtonVariations = {\n\tdistractionFreeDisabled: { x: '-100%' },\n\tdistractionFreeHover: { x: 0 },\n\tdistractionFreeHidden: { x: '-100%' },\n\tvisible: { x: 0 },\n\thidden: { x: 0 },\n};\n\n/**\n * Header skeleton component providing the common layout structure.\n *\n * @param {Object} props Component props.\n * @param {string} props.className Additional class name.\n * @param {React.JSX.Element} props.toolbar Content for the left toolbar area.\n * @param {React.JSX.Element} props.center Content for the center area.\n * @param {React.JSX.Element} props.settings Content for the right settings area.\n * @return {React.JSX.Element} The header skeleton component.\n */\nexport default function HeaderSkeleton( {\n\tclassName,\n\ttoolbar,\n\tcenter,\n\tsettings,\n} ) {\n\tconst hasBackButton = useHasBackButton();\n\n\t/*\n\t * The edit-post-header classname is only kept for backward compatibility\n\t * as some plugins might be relying on its presence.\n\t */\n\treturn (\n\t\t<div className={ clsx( 'editor-header edit-post-header', className ) }>\n\t\t\t{ hasBackButton && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"editor-header__back-button\"\n\t\t\t\t\tvariants={ backButtonVariations }\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t<BackButton.Slot />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\tclassName=\"editor-header__toolbar\"\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t>\n\t\t\t\t{ toolbar }\n\t\t\t</motion.div>\n\t\t\t{ center && (\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\t\tclassName=\"editor-header__center\"\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t{ center }\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\tclassName=\"editor-header__settings\"\n\t\t\t>\n\t\t\t\t{ settings }\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA2C;AAK3C,yBAA6C;AAyC3C;AAvCF,IAAM,oBAAoB;AAAA,EACzB,yBAAyB,EAAE,GAAG,QAAQ;AAAA,EACtC,sBAAsB,EAAE,GAAG,EAAE;AAAA,EAC7B,uBAAuB,EAAE,GAAG,QAAQ;AAAA,EACpC,SAAS,EAAE,GAAG,EAAE;AAAA,EAChB,QAAQ,EAAE,GAAG,EAAE;AAChB;AAEA,IAAM,uBAAuB;AAAA,EAC5B,yBAAyB,EAAE,GAAG,QAAQ;AAAA,EACtC,sBAAsB,EAAE,GAAG,EAAE;AAAA,EAC7B,uBAAuB,EAAE,GAAG,QAAQ;AAAA,EACpC,SAAS,EAAE,GAAG,EAAE;AAAA,EAChB,QAAQ,EAAE,GAAG,EAAE;AAChB;AAYe,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,oBAAgB,qCAAiB;AAMvC,SACC,6CAAC,SAAI,eAAY,YAAAA,SAAM,kCAAkC,SAAU,GAChE;AAAA,qBACD;AAAA,MAAC,kBAAAC,iBAAO;AAAA,MAAP;AAAA,QACA,WAAU;AAAA,QACV,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE7B,sDAAC,mBAAAC,QAAW,MAAX,EAAgB;AAAA;AAAA,IAClB;AAAA,IAED;AAAA,MAAC,kBAAAD,iBAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,WAAU;AAAA,QACV,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE3B;AAAA;AAAA,IACH;AAAA,IACE,UACD;AAAA,MAAC,kBAAAA,iBAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,WAAU;AAAA,QACV,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE3B;AAAA;AAAA,IACH;AAAA,IAED;AAAA,MAAC,kBAAAA,iBAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAC7B,WAAU;AAAA,QAER;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
"names": ["clsx", "motion", "BackButton"]
}