refactor(InlineLoading): add TypeScript types (#15247)

* refactor(InlineLoading): add TypeScript types * refactor(InlineLoading): add types and fix usages * fix(inlineloading): name prop spread ...rest --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Dec 5, 2023 · f8e2e45 · f8e2e45
1 parent 5067a9b
commit f8e2e45
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/packages/react/src/components/ComposedModal/ModalFooter.tsx b/packages/react/src/components/ComposedModal/ModalFooter.tsx
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { noopFn } from '../../internal/noopFn';
 import InlineLoading from '../InlineLoading';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 
 interface SecondaryButtonProps {
   buttonText: ReactNode;
@@ -166,7 +167,7 @@ export interface ModalFooterProps {
   /**
    * loading status
    */
-  loadingStatus?: string;
+  loadingStatus?: InlineLoadingStatus;
 
   /**
    * Specify the description for the loading text

diff --git a/...components/InlineLoading/InlineLoading.js → ...omponents/InlineLoading/InlineLoading.tsx b/...components/InlineLoading/InlineLoading.js → ...omponents/InlineLoading/InlineLoading.tsx
@@ -12,15 +12,64 @@ import { CheckmarkFilled, ErrorFilled } from '@carbon/icons-react';
 import Loading from '../Loading';
 import { usePrefix } from '../../internal/usePrefix';
 
-export default function InlineLoading({
+export const InlineLoadingStatuses = [
+  'inactive',
+  'active',
+  'finished',
+  'error',
+] as const;
+
+export type InlineLoadingStatus = (typeof InlineLoadingStatuses)[number];
+
+export interface InlineLoadingProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    'children'
+  > {
+  /**
+   * Specify a custom className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  description?: React.ReactNode;
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  iconDescription?: string;
+
+  /**
+   * Provide an optional handler to be invoked when <InlineLoading> is
+   * successful
+   */
+  onSuccess?: () => void;
+
+  /**
+   * Specify the loading status
+   */
+  status?: InlineLoadingStatus;
+
+  /**
+   * Provide a delay for the `setTimeout` for success
+   */
+  successDelay?: number;
+}
+
+const InlineLoading = ({
   className,
   status = 'active',
   iconDescription,
   description,
   onSuccess,
   successDelay = 1500,
-  ...other
-}) {
+  ...rest
+}: InlineLoadingProps) => {
   const prefix = usePrefix();
   const loadingClasses = classNames(`${prefix}--inline-loading`, className);
   const getLoading = () => {
@@ -70,13 +119,13 @@ export default function InlineLoading({
   return (
     <div
       className={loadingClasses}
-      {...other}
-      aria-live={'assertive' || other['aria-live']}>
+      {...rest}
+      aria-live={'assertive' || rest['aria-live']}>
       {loadingAnimation}
       {description && loadingText}
     </div>
   );
-}
+};
 
 InlineLoading.propTypes = {
   /**
@@ -110,3 +159,5 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes.number,
 };
+
+export default InlineLoading;
diff --git a/...act/src/components/InlineLoading/index.js → ...act/src/components/InlineLoading/index.ts b/...act/src/components/InlineLoading/index.js → ...act/src/components/InlineLoading/index.ts
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -23,6 +23,7 @@ import { keys, match } from '../../internal/keyboard';
 import { noopFn } from '../../internal/noopFn';
 import { Text } from '../Text';
 import { ReactAttr } from '../../types/common';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -101,7 +102,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * Specify loading status
    */
-  loadingStatus?: string;
+  loadingStatus?: InlineLoadingStatus;
 
   /**
    * Specify a label to be read by screen readers on the modal root node
@@ -128,7 +129,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
    * Specify an optional handler to be invoked when loading is
    * successful
    */
-  onLoadingSuccess?: React.ReactEventHandler<HTMLElement>;
+  onLoadingSuccess?: () => void;
 
   /**
    * Specify a handler for closing modal.