@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 3.41 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/resizable-editor/resize-handle.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\nimport { __unstableMotion as motion } from '@wordpress/components';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\nimport { Tooltip, VisuallyHidden } from '@wordpress/ui';\n\nconst DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.\n\nexport default function ResizeHandle( { direction, resizeWidthBy } ) {\n\tfunction handleKeyDown( event ) {\n\t\tconst { keyCode } = event;\n\n\t\tif ( keyCode !== LEFT && keyCode !== RIGHT ) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\n\t\tif (\n\t\t\t( direction === 'left' && keyCode === LEFT ) ||\n\t\t\t( direction === 'right' && keyCode === RIGHT )\n\t\t) {\n\t\t\tresizeWidthBy( DELTA_DISTANCE );\n\t\t} else if (\n\t\t\t( direction === 'left' && keyCode === RIGHT ) ||\n\t\t\t( direction === 'right' && keyCode === LEFT )\n\t\t) {\n\t\t\tresizeWidthBy( -DELTA_DISTANCE );\n\t\t}\n\t}\n\n\tconst resizeHandleVariants = {\n\t\tactive: {\n\t\t\topacity: 1,\n\t\t\tscaleY: 1.3,\n\t\t},\n\t};\n\n\tconst resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip.Root>\n\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\trender={\n\t\t\t\t\t\t<motion.button\n\t\t\t\t\t\t\tclassName={ `editor-resizable-editor__resize-handle is-${ direction }` }\n\t\t\t\t\t\t\taria-label={ __( 'Drag to resize' ) }\n\t\t\t\t\t\t\taria-describedby={ resizableHandleHelpId }\n\t\t\t\t\t\t\tonKeyDown={ handleKeyDown }\n\t\t\t\t\t\t\tvariants={ resizeHandleVariants }\n\t\t\t\t\t\t\twhileFocus=\"active\"\n\t\t\t\t\t\t\twhileHover=\"active\"\n\t\t\t\t\t\t\twhileTap=\"active\"\n\t\t\t\t\t\t\tkey=\"handle\"\n\t\t\t\t\t\t\trole=\"separator\"\n\t\t\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Tooltip.Popup>{ __( 'Drag to resize' ) }</Tooltip.Popup>\n\t\t\t</Tooltip.Root>\n\t\t\t<VisuallyHidden id={ resizableHandleHelpId }>\n\t\t\t\t{ __( 'Use left and right arrow keys to resize the canvas.' ) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n"],
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,MAAM,aAAa;AAC5B,SAAS,oBAAoB,cAAc;AAE3C,SAAS,SAAS,sBAAsB;AAoCtC,mBAII,KAHH,YADD;AAlCF,IAAM,iBAAiB;AAER,SAAR,aAA+B,EAAE,WAAW,cAAc,GAAI;AACpE,WAAS,cAAe,OAAQ;AAC/B,UAAM,EAAE,QAAQ,IAAI;AAEpB,QAAK,YAAY,QAAQ,YAAY,OAAQ;AAC5C;AAAA,IACD;AACA,UAAM,eAAe;AAErB,QACG,cAAc,UAAU,YAAY,QACpC,cAAc,WAAW,YAAY,OACtC;AACD,oBAAe,cAAe;AAAA,IAC/B,WACG,cAAc,UAAU,YAAY,SACpC,cAAc,WAAW,YAAY,MACtC;AACD,oBAAe,CAAC,cAAe;AAAA,IAChC;AAAA,EACD;AAEA,QAAM,uBAAuB;AAAA,IAC5B,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,QAAM,wBAAwB,iCAAkC,SAAU;AAE1E,SACC,iCACC;AAAA,yBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,QAAC,QAAQ;AAAA,QAAR;AAAA,UACA,QACC;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACA,WAAY,6CAA8C,SAAU;AAAA,cACpE,cAAa,GAAI,gBAAiB;AAAA,cAClC,oBAAmB;AAAA,cACnB,WAAY;AAAA,cACZ,UAAW;AAAA,cACX,YAAW;AAAA,cACX,YAAW;AAAA,cACX,UAAS;AAAA,cAET,MAAK;AAAA,cACL,oBAAiB;AAAA;AAAA,YAFb;AAAA,UAGL;AAAA;AAAA,MAEF;AAAA,MACA,oBAAC,QAAQ,OAAR,EAAgB,aAAI,gBAAiB,GAAG;AAAA,OAC1C;AAAA,IACA,oBAAC,kBAAe,IAAK,uBAClB,aAAI,qDAAsD,GAC7D;AAAA,KACD;AAEF;",
"names": []
}