@wordpress/block-editor
Version:
8 lines (7 loc) • 8.17 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/date-format-picker/index.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object} props\n * @param {string|null} props.format The selected date format. If `null`, _Default_ is selected.\n * @param {string} props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function} props.onChange Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) } ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
"mappings": "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",
"names": ["VStack"]
}