Merge pull request #286 from humanmade/datepicker-allow-custom-edit-b…

…utton-text DateTimeControl. Edit button text, with option to customise text
humanmade · Nov 21, 2024 · ededc7c · ededc7c
2 parents ecfcc09 + 007f7cd
commit ededc7c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/DateTimeControl/README.md b/src/components/DateTimeControl/README.md
@@ -6,8 +6,9 @@ The `DateTimeControl` component provides a date and time picker with timezone in
 
 - `label` (string): The label for the date/time control.
 - `id` (string): The ID for the base control.
-- `onChange` (Function): Callback function to handle date/time change.
+- `onChange` (function): Callback function to handle date/time change.
 - `value` (string): The current date/time value in UTC format.
+- `editButtonText` (string, optional): The text for the edit/set button.
 
 ## Usage
 

diff --git a/src/components/DateTimeControl/index.js b/src/components/DateTimeControl/index.js
@@ -15,15 +15,23 @@ import TimeZone from './timezone';
  *
  * @param {object} props - Component properties.
  * @param {string} props.label - The label for the date/time control.
+ * @param {string} [props.editButtonText] - The text for the edit/set button. (optional)
  * @param {string} props.id - The ID for the base control.
  * @param {Function} props.onChange - Callback function to handle date/time change.
  * @param {string} props.value - The current date/time value in UTC format.
  *
- * @returns {ReactNode|null} The DateTimeControl component.
+ * @returns {React.ReactNode|null} The DateTimeControl component.
  */
-function DateTimeControl( { label, id, onChange, value } ) {
+function DateTimeControl( {
+	editButtonText,
+	label,
+	id,
+	onChange,
+	value,
+} ) {
 	const [ isDatePickerVisible, setIsDatePickerVisible ] = useState( false );
 	const dateSettings = getDateSettings();
+	const defaultEditButtonText = value ? __( 'Edit date', 'block-editor-components' ) : __( 'Set date', 'block-editor-components' );
 
 	/**
 	 * Convert a date string in the current site local time into a UTC formatted as a MySQL date.
@@ -63,11 +71,11 @@ function DateTimeControl( { label, id, onChange, value } ) {
 			) }
 
 			<Button
+				style={ { display: 'block' } }
 				variant="link"
-				onClick={ () =>
-					setIsDatePickerVisible( ! isDatePickerVisible ) }
+				onClick={ () => setIsDatePickerVisible( ! isDatePickerVisible ) }
 			>
-				{ __( 'Edit webinar start time/date', 'block-editor-components' ) }
+				{ editButtonText ? editButtonText : defaultEditButtonText }
 			</Button>
 
 			{ isDatePickerVisible && (

diff --git a/src/components/DateTimeControl/timezone.js b/src/components/DateTimeControl/timezone.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * This component determines the user's timezone offset and compares it with the system timezone offset.
  * If they match, it returns null. Otherwise, it displays the timezone abbreviation and details in a tooltip.
  *
- * @returns {ReactNode|null} The timezone abbreviation and details in a tooltip, or null if the user's timezone matches the system timezone.
+ * @returns {React.ReactNode|null} The timezone abbreviation and details in a tooltip, or null if the user's timezone matches the system timezone.
  */
 const TimeZone = () => {
 	const { timezone } = getDateSettings();