@wordpress/block-editor
Version:
8 lines (7 loc) • 4.2 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/dimensions-tool/aspect-ratio-tool.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string} [panelId] ID of the panel this tool is associated with.\n * @property {string} [value] Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange] Callback to update the aspect ratio value.\n * @property {SelectControlProps[]} [options] Aspect ratio options.\n * @property {string} [defaultValue] Default aspect ratio value.\n * @property {boolean} [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAuB;AAIvB,0BAA4B;AA8EzB;AAxDY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AACpB,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,CAAE,eAAe,aAAa,iBAAkB,QAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,WAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,IACpC;AAAA,MACC,WAAO,gBAAI,UAAU,4CAA6C;AAAA,MAClE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,UACC,WAAW,WAAW,MAAM,iBAAiB;AAAA,MAE9C,WAAQ,gBAAI,cAAe;AAAA,MAC3B,YAAa,MAAM,SAAU,MAAU;AAAA,MACvC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAQ,gBAAI,cAAe;AAAA,UAC3B,OAAQ;AAAA,UACR,SAAU,WAAW;AAAA,UACrB;AAAA,UACA,MAAK;AAAA;AAAA,MACN;AAAA;AAAA,EACD;AAEF;",
"names": ["ToolsPanelItem"]
}