From 4e6f1e7896043eb0cfa43a393402fb117d3e41bc Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Mon, 11 Mar 2024 20:57:30 +0530 Subject: [PATCH 1/3] add TS support for `PostMeta` component --- components/post-meta/{index.js => index.tsx} | 67 ++++++++++++------- .../post-meta/{utilities.js => utilities.ts} | 8 +-- 2 files changed, 48 insertions(+), 27 deletions(-) rename components/post-meta/{index.js => index.tsx} (60%) rename components/post-meta/{utilities.js => utilities.ts} (85%) diff --git a/components/post-meta/index.js b/components/post-meta/index.tsx similarity index 60% rename from components/post-meta/index.js rename to components/post-meta/index.tsx index 94718078..e0a47737 100644 --- a/components/post-meta/index.js +++ b/components/post-meta/index.tsx @@ -1,10 +1,26 @@ import { RichText } from '@wordpress/block-editor'; import { __experimentalNumberControl as NumberControl, ToggleControl } from '@wordpress/components'; -import PropTypes from 'prop-types'; +import type { ToggleControlProps } from '@wordpress/components/src/toggle-control/types'; import { usePostMetaValue, useIsSupportedMetaField } from '../../hooks'; import { toSentence } from './utilities'; -export const PostMeta = (props) => { +interface PostMetaProps { + /** + * The meta key to use. + */ + metaKey: string; + + /** + * The children render prop. + */ + children?: ((metaValue: any, setMetaValue: (value: any) => void) => React.ReactNode); +} + +export const PostMeta: React.FC & { + String: React.FC; + Number: React.FC; + Boolean: React.FC; +} = (props) => { const { metaKey, children } = props; const [isSupported] = useIsSupportedMetaField(metaKey); const [metaValue, setMetaValue] = usePostMetaValue(metaKey); @@ -31,48 +47,53 @@ export const PostMeta = (props) => { return ; }; -PostMeta.propTypes = { - metaKey: PropTypes.string.isRequired, -}; +interface MetaStringProps { + /** + * The meta key to use. + */ + metaKey: string; + + /** + * A valid HTML tag. + */ + tagName?: keyof JSX.IntrinsicElements; +} -const MetaString = (props) => { +const MetaString: React.FC = (props) => { const { metaKey, tagName = 'p' } = props; const [metaValue, setMetaValue] = usePostMetaValue(metaKey); return ; }; -MetaString.propTypes = { - metaKey: PropTypes.string.isRequired, - tagName: PropTypes.string, -}; - -MetaString.defaultProps = { - tagName: 'p', -}; +interface MetaNumberProps { + /** + * The meta key to use. + */ + metaKey: string; +} -const MetaNumber = (props) => { +const MetaNumber: React.FC = (props) => { const { metaKey } = props; const [metaValue, setMetaValue] = usePostMetaValue(metaKey); return ; }; -MetaNumber.propTypes = { - metaKey: PropTypes.string.isRequired, -}; +interface MetaBooleanProps extends Pick { + /** + * The meta key to use. + */ + metaKey: string; +} -const MetaBoolean = (props) => { +const MetaBoolean: React.FC = (props) => { const { metaKey } = props; const [metaValue, setMetaValue] = usePostMetaValue(metaKey); return ; }; -MetaBoolean.propTypes = { - metaKey: PropTypes.string.isRequired, -}; - PostMeta.String = MetaString; PostMeta.Number = MetaNumber; PostMeta.Boolean = MetaBoolean; diff --git a/components/post-meta/utilities.js b/components/post-meta/utilities.ts similarity index 85% rename from components/post-meta/utilities.js rename to components/post-meta/utilities.ts index 6580c76d..2fe528b7 100644 --- a/components/post-meta/utilities.js +++ b/components/post-meta/utilities.ts @@ -1,17 +1,17 @@ // Checks whether character is Uppercase. // Crude version. Checks only A-Z. -function isCaps(char) { +function isCaps(char: string) { if (char.match(/[A-Z]/)) return true; return false; } // Checks whether character is digit. -function isDigit(char) { +function isDigit(char: string) { if (char.match(/[0-9]/)) return true; return false; } -export function toKebab(string) { +export function toKebab(string: string) { return string .split('') .map((letter, index) => { @@ -39,7 +39,7 @@ export function toKebab(string) { .replace(/[-_\s]+/g, '-'); } -export function toSentence(string) { +export function toSentence(string: string) { const interim = toKebab(string).replace(/-/g, ' '); return interim.slice(0, 1).toUpperCase() + interim.slice(1); } From a76e382dda917a2eab2b02454c268d38283fb495 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Fri, 3 May 2024 10:45:12 +0200 Subject: [PATCH 2/3] fix allow additional props --- components/post-meta/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/post-meta/index.tsx b/components/post-meta/index.tsx index e0a47737..1d176c32 100644 --- a/components/post-meta/index.tsx +++ b/components/post-meta/index.tsx @@ -14,6 +14,11 @@ interface PostMetaProps { * The children render prop. */ children?: ((metaValue: any, setMetaValue: (value: any) => void) => React.ReactNode); + + /** + * Additional props to pass to the component. + */ + [key: string]: any; } export const PostMeta: React.FC & { From e913656139ea6044e66f8df9dc197a260c57ee1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Fri, 3 May 2024 10:48:20 +0200 Subject: [PATCH 3/3] fix type of number variable --- components/post-meta/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/post-meta/index.tsx b/components/post-meta/index.tsx index 1d176c32..49e25867 100644 --- a/components/post-meta/index.tsx +++ b/components/post-meta/index.tsx @@ -82,7 +82,7 @@ const MetaNumber: React.FC = (props) => { const { metaKey } = props; const [metaValue, setMetaValue] = usePostMetaValue(metaKey); - return ; + return setMetaValue(parseInt(value ?? ''))} {...props} />; }; interface MetaBooleanProps extends Pick {