@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 5.88 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/gallery/order-controls.tsx"],
"sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { SelectControl as WCSelectControl } from '@wordpress/components';\nimport {\n\tORDER_OPTIONS,\n\tRANDOM_OPTION,\n\tRANDOM_ORDER,\n\tparseOrderValue,\n\ttoOrderValue,\n} from './order-options';\nimport type { Order } from './order-options';\n\nfunction getOrderHelp( isRandom: boolean ): string | undefined {\n\treturn isRandom\n\t\t? __( 'Images are shown in a random order each time the page loads.' )\n\t\t: undefined;\n}\n\nconst SOURCE_ORDER_OPTIONS = [ ...ORDER_OPTIONS, RANDOM_OPTION ];\n\ntype SourceOrderControlProps = {\n\t/** The stored query order. */\n\torder: Order;\n\t/** Whether the gallery's `randomOrder` attribute is set. */\n\tisRandom: boolean;\n\t/**\n\t * Called with `{ orderby, order }` to update the query. Choosing an order\n\t * also turns \"Random\" off; the handler owns that so both writes land in one\n\t * undo level.\n\t */\n\tonChange: ( order: Order ) => void;\n\t/** Called when \"Random\" is chosen. */\n\tonSelectRandom: () => void;\n};\n\n/**\n * Ordering control for a dynamic gallery, shown in the Settings panel. The\n * chosen order is a *setting*: it's stored in the source's query and re-applied\n * every time the source resolves. \"Random\" is stored separately (the\n * `randomOrder` attribute) and overrides the query order on the front end, so\n * while it's set the control shows it instead of the query order.\n */\nexport function SourceOrderControl( {\n\torder,\n\tisRandom,\n\tonChange,\n\tonSelectRandom,\n}: SourceOrderControlProps ) {\n\treturn (\n\t\t<WCSelectControl\n\t\t\tlabel={ __( 'Order by' ) }\n\t\t\tvalue={ isRandom ? RANDOM_ORDER : toOrderValue( order ) }\n\t\t\toptions={ SOURCE_ORDER_OPTIONS }\n\t\t\thelp={ getOrderHelp( isRandom ) }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tif ( value === RANDOM_ORDER ) {\n\t\t\t\t\tonSelectRandom();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonChange( parseOrderValue( value ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nconst CUSTOM_ORDER = 'custom';\n\ntype SortImagesControlProps = {\n\t/** The last sort applied, while it still holds, or `null` for a custom order. */\n\tcurrentOrder: Order | null;\n\t/** Whether the gallery's `randomOrder` attribute is set. */\n\tisRandom: boolean;\n\t/** Whether the sort orders can be applied (false while media resolves). */\n\tcanSort: boolean;\n\t/**\n\t * Called with `{ orderby, order }` to sort the images. Sorting also turns\n\t * \"Random\" off; the handler owns that so both writes land in one undo level.\n\t */\n\tonSort: ( order: Order ) => void;\n\t/** Called when \"Custom\" is chosen, which turns \"Random\" off. */\n\tonSelectCustom: () => void;\n\t/** Called when \"Random\" is chosen. */\n\tonSelectRandom: () => void;\n};\n\n/**\n * Ordering control for a static gallery, shown in the Settings panel.\n *\n * The date and title orders are one-off *actions*: choosing one reorders the\n * inner image blocks once, and the user can drag them into any other order\n * afterwards. Nothing is stored for them, so the caller passes back the last\n * sort it applied for as long as the images remain in that sequence, and\n * `null` (\"Custom\") otherwise. \"Custom\" means the order arranged in the\n * editor, and is choosable only while \"Random\" is on: picking it turns\n * \"Random\" off without reordering anything.\n *\n * \"Random\" is the one stored value (the `randomOrder` attribute). It applies\n * on the front end only, leaving the editor order as it is, and choosing any\n * other option clears it.\n */\nexport function SortImagesControl( {\n\tcurrentOrder,\n\tisRandom,\n\tcanSort,\n\tonSort,\n\tonSelectCustom,\n\tonSelectRandom,\n}: SortImagesControlProps ) {\n\tconst options = [\n\t\t{ label: __( 'Custom' ), value: CUSTOM_ORDER, disabled: ! isRandom },\n\t\t...ORDER_OPTIONS.map( ( option ) => ( {\n\t\t\t...option,\n\t\t\tdisabled: ! canSort,\n\t\t} ) ),\n\t\tRANDOM_OPTION,\n\t];\n\n\tlet value = CUSTOM_ORDER;\n\tif ( isRandom ) {\n\t\tvalue = RANDOM_ORDER;\n\t} else if ( currentOrder ) {\n\t\tvalue = toOrderValue( currentOrder );\n\t}\n\n\treturn (\n\t\t<WCSelectControl\n\t\t\tlabel={ __( 'Order by' ) }\n\t\t\tvalue={ value }\n\t\t\toptions={ options }\n\t\t\thelp={ getOrderHelp( isRandom ) }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tif ( nextValue === RANDOM_ORDER ) {\n\t\t\t\t\tonSelectRandom();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( nextValue === CUSTOM_ORDER ) {\n\t\t\t\t\tonSelectCustom();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSort( parseOrderValue( nextValue ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
"mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,iBAAiB,uBAAuB;AACjD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAwCL;AArCF,SAAS,aAAc,UAAwC;AAC9D,SAAO,WACJ,GAAI,8DAA+D,IACnE;AACJ;AAEA,IAAM,uBAAuB,CAAE,GAAG,eAAe,aAAc;AAwBxD,SAAS,mBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA6B;AAC5B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,UAAW;AAAA,MACvB,OAAQ,WAAW,eAAe,aAAc,KAAM;AAAA,MACtD,SAAU;AAAA,MACV,MAAO,aAAc,QAAS;AAAA,MAC9B,UAAW,CAAE,UAAW;AACvB,YAAK,UAAU,cAAe;AAC7B,yBAAe;AACf;AAAA,QACD;AACA,iBAAU,gBAAiB,KAAM,CAAE;AAAA,MACpC;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,eAAe;AAmCd,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,UAAU;AAAA,IACf,EAAE,OAAO,GAAI,QAAS,GAAG,OAAO,cAAc,UAAU,CAAE,SAAS;AAAA,IACnE,GAAG,cAAc,IAAK,CAAE,YAAc;AAAA,MACrC,GAAG;AAAA,MACH,UAAU,CAAE;AAAA,IACb,EAAI;AAAA,IACJ;AAAA,EACD;AAEA,MAAI,QAAQ;AACZ,MAAK,UAAW;AACf,YAAQ;AAAA,EACT,WAAY,cAAe;AAC1B,YAAQ,aAAc,YAAa;AAAA,EACpC;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,UAAW;AAAA,MACvB;AAAA,MACA;AAAA,MACA,MAAO,aAAc,QAAS;AAAA,MAC9B,UAAW,CAAE,cAAe;AAC3B,YAAK,cAAc,cAAe;AACjC,yBAAe;AACf;AAAA,QACD;AACA,YAAK,cAAc,cAAe;AACjC,yBAAe;AACf;AAAA,QACD;AACA,eAAQ,gBAAiB,SAAU,CAAE;AAAA,MACtC;AAAA;AAAA,EACD;AAEF;",
"names": []
}