Render date as button that opens form

WordPress · Aug 5, 2024 · e40a0ea · e40a0ea
1 parent bf65a6f
commit e40a0ea
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 21 deletions.
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
@@ -1,8 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import {
+	Button,
+	DateTimePicker,
+	Dropdown,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,12 +41,44 @@ function isValid( value: any, context?: ValidationContext ) {
 	return true;
 }
 
+interface DateTimePickerControlProps {
+	title: string;
+	value: string;
+	onChange: ( newValue: string | null ) => void;
+	onClose: () => void;
+}
+
+const DateTimePickerForm: ComponentType< DateTimePickerControlProps > = ( {
+	title,
+	value,
+	onChange,
+	onClose,
+} ) => {
+	return (
+		<VStack>
+			<HStack>
+				<span>{ title }</span>
+				<Button
+					label={ __( 'Close' ) }
+					icon={ closeSmall }
+					onClick={ onClose }
+				/>
+			</HStack>
+			<DateTimePicker
+				currentDate={ value }
+				onChange={ onChange }
+				is12Hour
+			/>
+		</VStack>
+	);
+};
+
 function Edit< Item >( {
 	data,
 	field,
 	onChange,
 }: DataFormControlProps< Item > ) {
-	const { id } = field;
+	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
 	const onChangeControl = useCallback(
 		( newValue: string | null ) =>
@@ -45,10 +90,27 @@ function Edit< Item >( {
 	);
 
 	return (
-		<DateTimePicker
-			currentDate={ value }
-			onChange={ onChangeControl }
-			is12Hour
+		<Dropdown
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<Button
+					size="compact"
+					variant="tertiary"
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+					aria-label={ label }
+					label={ description }
+				>
+					{ value }
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<DateTimePickerForm
+					onClose={ onClose }
+					title={ label }
+					value={ value }
+					onChange={ onChangeControl }
+				/>
+			) }
 		/>
 	);
 }

diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
@@ -10,7 +10,11 @@ import { __ } from '@wordpress/i18n';
 import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 
 /**
@@ -72,20 +76,24 @@ function PostEditForm( { postType, postId } ) {
 	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
 		<form onSubmit={ onSubmit }>
-			<DataForm
-				data={ itemWithEdits }
-				fields={ fields }
-				form={ form }
-				onChange={ setEdits }
-			/>
-			<Button
-				variant="primary"
-				type="submit"
-				accessibleWhenDisabled
-				disabled={ isUpdateDisabled }
-			>
-				{ __( 'Update' ) }
-			</Button>
+			<VStack>
+				<DataForm
+					data={ itemWithEdits }
+					fields={ fields }
+					form={ form }
+					onChange={ setEdits }
+				/>
+				<HStack>
+					<Button
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ isUpdateDisabled }
+					>
+						{ __( 'Update' ) }
+					</Button>
+				</HStack>
+			</VStack>
 		</form>
 	);
 }