refactor(EditTearsheetForm): add Typescript types

packages/ibm-products/src/components/EditTearsheet/EditTearsheetForm.js → packages/ibm-products/src/components/EditTearsheet/EditTearsheetForm.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useContext } from 'react';
+import React, { ForwardedRef, ReactNode, forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Column, FormGroup, Grid } from '@carbon/react';
@@ -22,6 +22,53 @@ const defaults = {
  hasFieldset: true,
 };
 
+interface EditTearsheetFormBaseProps {
+ /**
+ * Content that shows in the tearsheet form
+ */
+ children?: ReactNode;
+
+ /**
+ * Sets an optional className to be added to the tearsheet form
+ */
+ className?: string;
+
+ /**
+ * Sets an optional description on the form component
+ */
+ description?: string;
+
+ /**
+ * This optional prop will render your form content inside of a fieldset html element
+ * and is defaulted to true.
+ * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
+ */
+ hasFieldset?: boolean;
+
+ /**
+ * Sets an optional subtitle on the form component
+ */
+ subtitle: string;
+
+ /**
+ * Sets the title text for a tearsheet form
+ */
+ title: ReactNode;
+}
+
+type EditTearsheetFormFieldsetTypes =
+ | {
+ hasFieldset?: false;
+ fieldsetLegendText: string;
+ }
+ | {
+ hasFieldset: true;
+ fieldsetLegendText: string;
+ };
+
+type EditTearsheetFormProps = EditTearsheetFormBaseProps &
+ EditTearsheetFormFieldsetTypes;
+
 export let EditTearsheetForm = forwardRef(
  (
  {
@@ -37,10 +84,10 @@ export let EditTearsheetForm = forwardRef(
 
  // Collect any other property values passed in.
  ...rest
- },
- ref
+ }: EditTearsheetFormProps,
+ ref: ForwardedRef<HTMLDivElement>
  ) => {
- const formContext = useContext(FormContext);
+ const formContext = useContext(FormContext) as any;
  const formNumber = useContext(FormNumberContext);
  useRetrieveFormTitles({ formContext, formNumber, title });
 
@@ -114,6 +161,7 @@ EditTearsheetForm.propTypes = {
  * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's form content.
  * Otherwise, use CSS to hide/remove this label text.
  */
+ /**@ts-ignore */
  fieldsetLegendText: PropTypes.string.isRequired.if(
  ({ hasFieldset }) => !!hasFieldset
  ),
@@ -123,11 +171,13 @@ EditTearsheetForm.propTypes = {
  * and is defaulted to true.
  * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
  */
+ /**@ts-ignore*/
  hasFieldset: PropTypes.bool,
 
  /**
  * Sets an optional subtitle on the form component
  */
+ /**@ts-ignore*/
  subtitle: PropTypes.string,
 
  /**