UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 6.83 kB
{ "version": 3, "sources": ["../../../src/hooks/push-changes-to-global-styles/apply-globally-modal.js"], "sourcesContent": ["import { Modal } from '@wordpress/components';\nimport { DataViewsPicker } from '@wordpress/dataviews';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { getBlockType } from '@wordpress/blocks';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useGlobalStyles } from '../../components/global-styles/hooks';\nimport { useReviewRows } from './use-review-rows';\n\n// Show a simple table with a checkbox at the start of each row.\nconst DEFAULT_LAYOUTS = { pickerTable: {} };\n\nconst getItemId = ( row ) => row.id;\n\n/**\n * Modal for reviewing a block's changed styles and choosing which ones to apply\n * to every block of the same type.\n *\n * Each style is a row in the table and starts out selected. Apply pushes only\n * the rows that are still selected, and is turned off when none are. Closing\n * the modal or pressing Escape leaves the block untouched.\n *\n * @param {Object} props Component props.\n * @param {string} props.name Block name.\n * @param {Array} props.rows The block's changed styles, grouped into rows.\n * @param {Function} props.onApply Called with the selected rows to apply.\n * @param {Function} props.onRequestClose Called to close the modal.\n */\nexport default function ApplyGloballyModal( {\n\tname,\n\trows,\n\tonApply,\n\tonRequestClose,\n} ) {\n\tconst { merged } = useGlobalStyles();\n\tconst reviewRows = useReviewRows( rows, merged, name );\n\n\tconst [ selection, setSelection ] = useState( () =>\n\t\treviewRows.map( ( row ) => row.id )\n\t);\n\tconst [ view, setView ] = useState( () => ( {\n\t\ttype: 'pickerTable',\n\t\ttitleField: 'label',\n\t\tfields: [ 'current', 'new' ],\n\t\tpage: 1,\n\t\tperPage: reviewRows.length,\n\t\tlayout: { enableMoving: false },\n\t} ) );\n\n\tconst fields = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'label',\n\t\t\t\tlabel: __( 'Style' ),\n\t\t\t\tenableSorting: false,\n\t\t\t\tenableHiding: false,\n\t\t\t\tfilterBy: false,\n\t\t\t\tgetValue: ( { item } ) => item.label,\n\t\t\t\trender: ( { item } ) => item.label,\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'current',\n\t\t\t\tlabel: __( 'Current' ),\n\t\t\t\tenableSorting: false,\n\t\t\t\tenableHiding: false,\n\t\t\t\tfilterBy: false,\n\t\t\t\tgetValue: ( { item } ) => item.formattedCurrentValue,\n\t\t\t\trender: ( { item } ) => (\n\t\t\t\t\t<span className=\"editor-push-changes-to-global-styles-modal__value\">\n\t\t\t\t\t\t{ item.formattedCurrentValue }\n\t\t\t\t\t</span>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'new',\n\t\t\t\tlabel: __( 'New' ),\n\t\t\t\tenableSorting: false,\n\t\t\t\tenableHiding: false,\n\t\t\t\tfilterBy: false,\n\t\t\t\tgetValue: ( { item } ) => item.formattedNewValue,\n\t\t\t\trender: ( { item } ) => (\n\t\t\t\t\t<span className=\"editor-push-changes-to-global-styles-modal__value\">\n\t\t\t\t\t\t{ item.formattedNewValue }\n\t\t\t\t\t</span>\n\t\t\t\t),\n\t\t\t},\n\t\t],\n\t\t[]\n\t);\n\n\tconst actions = useMemo(\n\t\t() => [\n\t\t\t{\n\t\t\t\tid: 'apply',\n\t\t\t\tlabel: __( 'Apply' ),\n\t\t\t\tisPrimary: true,\n\t\t\t\tsupportsBulk: true,\n\t\t\t\tcallback( items ) {\n\t\t\t\t\tonApply( items );\n\t\t\t\t\tonRequestClose();\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t\t[ onApply, onRequestClose ]\n\t);\n\n\tconst blockTitle = getBlockType( name )?.title;\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ sprintf(\n\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t__( 'Apply %s styles globally' ),\n\t\t\t\tblockTitle\n\t\t\t) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tsize=\"large\"\n\t\t\tclassName=\"editor-push-changes-to-global-styles-modal\"\n\t\t>\n\t\t\t<p>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Choose which styles to make default for all %s blocks.'\n\t\t\t\t\t),\n\t\t\t\t\tblockTitle\n\t\t\t\t) }\n\t\t\t</p>\n\t\t\t<DataViewsPicker\n\t\t\t\tdata={ reviewRows }\n\t\t\t\tfields={ fields }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ setView }\n\t\t\t\tactions={ actions }\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ setSelection }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t\tpaginationInfo={ {\n\t\t\t\t\ttotalItems: reviewRows.length,\n\t\t\t\t\ttotalPages: 1,\n\t\t\t\t} }\n\t\t\t\tdefaultLayouts={ DEFAULT_LAYOUTS }\n\t\t\t\tsearch={ false }\n\t\t\t\titemListLabel={ __( 'Styles to apply' ) }\n\t\t\t>\n\t\t\t\t<DataViewsPicker.Layout />\n\t\t\t\t<DataViewsPicker.Footer />\n\t\t\t</DataViewsPicker>\n\t\t</Modal>\n\t);\n}\n"], "mappings": "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", "names": [] }