@wordpress/block-editor
Version:
8 lines (7 loc) • 4.64 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/responsive-block-control/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { Fragment } from '@wordpress/element';\nimport { ToggleControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ResponsiveBlockControlLabel from './label';\n\nfunction ResponsiveBlockControl( props ) {\n\tconst {\n\t\ttitle,\n\t\tproperty,\n\t\ttoggleLabel,\n\t\tonIsResponsiveChange,\n\t\trenderDefaultControl,\n\t\trenderResponsiveControls,\n\t\tisResponsive = false,\n\t\tdefaultLabel = {\n\t\t\tid: 'all',\n\t\t\tlabel: _x( 'All', 'screen sizes' ),\n\t\t},\n\t\tviewports = [\n\t\t\t{\n\t\t\t\tid: 'small',\n\t\t\t\tlabel: __( 'Small screens' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'medium',\n\t\t\t\tlabel: __( 'Medium screens' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'large',\n\t\t\t\tlabel: __( 'Large screens' ),\n\t\t\t},\n\t\t],\n\t} = props;\n\n\tif ( ! title || ! property || ! renderDefaultControl ) {\n\t\treturn null;\n\t}\n\n\tconst toggleControlLabel =\n\t\ttoggleLabel ||\n\t\tsprintf(\n\t\t\t/* translators: %s: Property value for the control (eg: margin, padding, etc.). */\n\t\t\t__( 'Use the same %s on all screen sizes.' ),\n\t\t\tproperty\n\t\t);\n\n\tconst toggleHelpText = __(\n\t\t'Choose whether to use the same value for all screen sizes or a unique value for each screen size.'\n\t);\n\n\tconst defaultControl = renderDefaultControl(\n\t\t<ResponsiveBlockControlLabel\n\t\t\tproperty={ property }\n\t\t\tviewport={ defaultLabel }\n\t\t/>,\n\t\tdefaultLabel\n\t);\n\n\tconst defaultResponsiveControls = () => {\n\t\treturn viewports.map( ( viewport ) => (\n\t\t\t<Fragment key={ viewport.id }>\n\t\t\t\t{ renderDefaultControl(\n\t\t\t\t\t<ResponsiveBlockControlLabel\n\t\t\t\t\t\tproperty={ property }\n\t\t\t\t\t\tviewport={ viewport }\n\t\t\t\t\t/>,\n\t\t\t\t\tviewport\n\t\t\t\t) }\n\t\t\t</Fragment>\n\t\t) );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-responsive-block-control\">\n\t\t\t<legend className=\"block-editor-responsive-block-control__title\">\n\t\t\t\t{ title }\n\t\t\t</legend>\n\n\t\t\t<div className=\"block-editor-responsive-block-control__inner\">\n\t\t\t\t<ToggleControl\n\t\t\t\t\tclassName=\"block-editor-responsive-block-control__toggle\"\n\t\t\t\t\tlabel={ toggleControlLabel }\n\t\t\t\t\tchecked={ ! isResponsive }\n\t\t\t\t\tonChange={ onIsResponsiveChange }\n\t\t\t\t\thelp={ toggleHelpText }\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'block-editor-responsive-block-control__group',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-responsive': isResponsive,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ ! isResponsive && defaultControl }\n\t\t\t\t\t{ isResponsive &&\n\t\t\t\t\t\t( renderResponsiveControls\n\t\t\t\t\t\t\t? renderResponsiveControls( viewports )\n\t\t\t\t\t\t\t: defaultResponsiveControls() ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n\nexport default ResponsiveBlockControl;\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAgC;AAChC,qBAAyB;AACzB,wBAA8B;AAK9B,mBAAwC;AAgDtC;AA9CF,SAAS,uBAAwB,OAAQ;AACxC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,eAAe;AAAA,MACd,IAAI;AAAA,MACJ,WAAO,gBAAI,OAAO,cAAe;AAAA,IAClC;AAAA,IACA,YAAY;AAAA,MACX;AAAA,QACC,IAAI;AAAA,QACJ,WAAO,gBAAI,eAAgB;AAAA,MAC5B;AAAA,MACA;AAAA,QACC,IAAI;AAAA,QACJ,WAAO,gBAAI,gBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,QACC,IAAI;AAAA,QACJ,WAAO,gBAAI,eAAgB;AAAA,MAC5B;AAAA,IACD;AAAA,EACD,IAAI;AAEJ,MAAK,CAAE,SAAS,CAAE,YAAY,CAAE,sBAAuB;AACtD,WAAO;AAAA,EACR;AAEA,QAAM,qBACL,mBACA;AAAA;AAAA,QAEC,gBAAI,sCAAuC;AAAA,IAC3C;AAAA,EACD;AAED,QAAM,qBAAiB;AAAA,IACtB;AAAA,EACD;AAEA,QAAM,iBAAiB;AAAA,IACtB;AAAA,MAAC,aAAAA;AAAA,MAAA;AAAA,QACA;AAAA,QACA,UAAW;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,EACD;AAEA,QAAM,4BAA4B,MAAM;AACvC,WAAO,UAAU,IAAK,CAAE,aACvB,4CAAC,2BACE;AAAA,MACD;AAAA,QAAC,aAAAA;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACD;AAAA,MACA;AAAA,IACD,KAPe,SAAS,EAQzB,CACC;AAAA,EACH;AAEA,SACC,6CAAC,cAAS,WAAU,yCACnB;AAAA,gDAAC,YAAO,WAAU,gDACf,iBACH;AAAA,IAEA,6CAAC,SAAI,WAAU,gDACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAQ;AAAA,UACR,SAAU,CAAE;AAAA,UACZ,UAAW;AAAA,UACX,MAAO;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,eAAY,YAAAC;AAAA,YACX;AAAA,YACA;AAAA,cACC,iBAAiB;AAAA,YAClB;AAAA,UACD;AAAA,UAEE;AAAA,aAAE,gBAAgB;AAAA,YAClB,iBACC,2BACC,yBAA0B,SAAU,IACpC,0BAA0B;AAAA;AAAA;AAAA,MAC/B;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,mCAAQ;",
"names": ["ResponsiveBlockControlLabel", "clsx"]
}