UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 3.84 kB
{ "version": 3, "sources": ["../../../src/components/text-alignment-control/index.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\talignLeft,\n\talignCenter,\n\talignRight,\n\talignJustify,\n} from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n} from '@wordpress/components';\n\nconst TEXT_ALIGNMENT_OPTIONS = [\n\t{\n\t\tlabel: __( 'Align text left' ),\n\t\tvalue: 'left',\n\t\ticon: alignLeft,\n\t},\n\t{\n\t\tlabel: __( 'Align text center' ),\n\t\tvalue: 'center',\n\t\ticon: alignCenter,\n\t},\n\t{\n\t\tlabel: __( 'Align text right' ),\n\t\tvalue: 'right',\n\t\ticon: alignRight,\n\t},\n\t{\n\t\tlabel: __( 'Justify text' ),\n\t\tvalue: 'justify',\n\t\ticon: alignJustify,\n\t},\n];\n\nconst DEFAULT_OPTIONS = [ 'left', 'center', 'right' ];\n\n/**\n * Control to facilitate text alignment selections.\n *\n * @param {Object} props Component props.\n * @param {string} props.className Class name to add to the control.\n * @param {string} props.value Currently selected text alignment.\n * @param {Function} props.onChange Handles change in text alignment selection.\n * @param {string[]} props.options Array of text alignment options to display.\n *\n * @return {Element} Text alignment control.\n */\nexport default function TextAlignmentControl( {\n\tclassName,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_OPTIONS,\n} ) {\n\tconst validOptions = useMemo(\n\t\t() =>\n\t\t\tTEXT_ALIGNMENT_OPTIONS.filter( ( option ) =>\n\t\t\t\toptions.includes( option.value )\n\t\t\t),\n\t\t[ options ]\n\t);\n\n\tif ( ! validOptions.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\tisDeselectable\n\t\t\t__next40pxDefaultSize\n\t\t\tlabel={ __( 'Text alignment' ) }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-text-alignment-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvalue={ value }\n\t\t\tonChange={ ( newValue ) => {\n\t\t\t\tonChange( newValue === value ? undefined : newValue );\n\t\t\t} }\n\t\t>\n\t\t\t{ validOptions.map( ( option ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\ticon={ option.icon }\n\t\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,mBAKO;AACP,qBAAwB;AACxB,wBAGO;AAwEF;AAtEL,IAAM,yBAAyB;AAAA,EAC9B;AAAA,IACC,WAAO,gBAAI,iBAAkB;AAAA,IAC7B,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AAAA,EACA;AAAA,IACC,WAAO,gBAAI,mBAAoB;AAAA,IAC/B,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AAAA,EACA;AAAA,IACC,WAAO,gBAAI,kBAAmB;AAAA,IAC9B,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AAAA,EACA;AAAA,IACC,WAAO,gBAAI,cAAe;AAAA,IAC1B,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;AAEA,IAAM,kBAAkB,CAAE,QAAQ,UAAU,OAAQ;AAarC,SAAR,qBAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAAI;AACH,QAAM,mBAAe;AAAA,IACpB,MACC,uBAAuB;AAAA,MAAQ,CAAE,WAChC,QAAQ,SAAU,OAAO,KAAM;AAAA,IAChC;AAAA,IACD,CAAE,OAAQ;AAAA,EACX;AAEA,MAAK,CAAE,aAAa,QAAS;AAC5B,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,gBAAc;AAAA,MACd,uBAAqB;AAAA,MACrB,WAAQ,gBAAI,gBAAiB;AAAA,MAC7B,eAAY,YAAAC;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MACA,UAAW,CAAE,aAAc;AAC1B,iBAAU,aAAa,QAAQ,SAAY,QAAS;AAAA,MACrD;AAAA,MAEE,uBAAa,IAAK,CAAE,WAAY;AACjC,eACC;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YAEA,OAAQ,OAAO;AAAA,YACf,MAAO,OAAO;AAAA,YACd,OAAQ,OAAO;AAAA;AAAA,UAHT,OAAO;AAAA,QAId;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;", "names": ["ToggleGroupControl", "clsx", "ToggleGroupControlOptionIcon"] }