diff --git a/components/post-date/index.js b/components/post-date/index.tsx similarity index 66% rename from components/post-date/index.js rename to components/post-date/index.tsx index 72ab538c..602d6e1a 100644 --- a/components/post-date/index.js +++ b/components/post-date/index.tsx @@ -2,12 +2,17 @@ import { __ } from '@wordpress/i18n'; import { DateTimePicker } from '@wordpress/components'; import { getSettings, dateI18n } from '@wordpress/date'; import { useEntityProp } from '@wordpress/core-data'; -import PropTypes from 'prop-types'; import { usePopover } from '../../hooks/use-popover'; import { usePost } from '../../hooks'; +import type { DateSettings } from '@wordpress/date'; -export const PostDatePicker = ({ date, setDate }) => { - const settings = getSettings(); +interface PostDatePickerProps { + date?: string; + setDate: (date: string | null) => void; +} + +export const PostDatePicker: React.FC = ({ date, setDate }) => { + const settings: DateSettings = getSettings(); // To know if the current time format is a 12 hour time, look for "a". // Also make sure this "a" is not escaped by a "/". const is12Hour = /a(?!\\)/i.test( @@ -22,19 +27,29 @@ export const PostDatePicker = ({ date, setDate }) => { return ; }; -PostDatePicker.propTypes = { - date: PropTypes.string.isRequired, - setDate: PropTypes.func.isRequired, -}; +interface PostDateProps { + /** + * The placeholder to show when no date is set. + */ + placeholder: string; -export const PostDate = (props) => { - const { placeholder = __('No date set', 'tenup'), format, ...rest } = props; + /** + * The date format to use. + */ + format?: string; + /** + * Remaining props to pass to the time element. + */ + [key: string]: any; +} + +export const PostDate: React.FC = ({ placeholder = __('No date set', 'tenup'), format, ...rest}) => { const { postId, postType, isEditable } = usePost(); - const [date, setDate] = useEntityProp('postType', postType, 'date', postId); + const [date, setDate] = useEntityProp('postType', postType, 'date', postId as string); const [siteFormat] = useEntityProp('root', 'site', 'date_format'); - const settings = getSettings(); + const settings: DateSettings = getSettings(); const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const resolvedFormat = format || siteFormat || settings.formats.date; @@ -56,7 +71,6 @@ export const PostDate = (props) => { <> {isEditable && ( - + setDate(date)} /> )} ); }; - -PostDate.propTypes = { - placeholder: PropTypes.string, - format: PropTypes.string, -}; - -PostDate.defaultProps = { - placeholder: __('No date set', 'tenup'), - format: undefined, -}; diff --git a/hooks/use-post/index.ts b/hooks/use-post/index.ts index fa07a7a3..3fd8fd95 100644 --- a/hooks/use-post/index.ts +++ b/hooks/use-post/index.ts @@ -20,8 +20,8 @@ export function usePost() { const hasBlockContext = !!blockContextPostId && !!blockContextPostType; return { - postId: (blockContextPostId || globalPostId) as number | null, + postId: (blockContextPostId || globalPostId) as number | null | undefined | string, postType: (blockContextPostType || globalPostType) as string, - isEditable: (hasBlockContext ? blockContextIsEditable : true) as boolean | null, + isEditable: (hasBlockContext ? blockContextIsEditable : true) as boolean | null | undefined, }; }