@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 3.77 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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,oBAAoB,cAAc;AAK3C,OAAO,cAAc,wBAAwB;AAyC3C,SAOG,KAPH;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,gBAAgB,iBAAiB;AAMvC,SACC,qBAAC,SAAI,WAAY,KAAM,kCAAkC,SAAU,GAChE;AAAA,qBACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,WAAU;AAAA,QACV,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE7B,8BAAC,WAAW,MAAX,EAAgB;AAAA;AAAA,IAClB;AAAA,IAED;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,WAAU;AAAA,QACV,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE3B;AAAA;AAAA,IACH;AAAA,IACE,UACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,WAAU;AAAA,QACV,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE3B;AAAA;AAAA,IACH;AAAA,IAED;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAC7B,WAAU;AAAA,QAER;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
"names": []
}