CHANGED: Types

src/primitive-components/button-layout/button-layout.tsx

@@ -1,48 +1,45 @@
 'use client';
 
+import { bool, string } from 'prop-types';
 import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
+import { ButtonLayoutProps } from './button-layout.types';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
-import React, {
-    forwardRef,
-    PropsWithChildren,
-    useId,
-    useRef,
-    useState,
-} from 'react';
+import React, { forwardRef, useId, useRef, useState } from 'react';
 
-const ButtonLayout = forwardRef<
-    HTMLButtonElement,
-    PropsWithChildren<any> & IRippleProps
->(function ButtonBase({ centralRipple = false, ...props }, ref) {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        ripplesRef = useRef(null),
-        buttonId = useId(),
-        events = useRippleEffect(ripplesRef, setIsActive);
+export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
+    function ButtonBase({ centralRipple = false, ...props }, ref) {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            ripplesRef = useRef(null),
+            buttonId = useId(),
+            events = useRippleEffect(ripplesRef, setIsActive);
 
-    const { variant, disabled, className } = props;
+        const { variant, disabled, className } = props;
 
-    const classes = className
-        ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
-        : `m3 ${variant}${isActive ? ' is-active' : ''}`;
+        const classes = className
+            ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
+            : `m3 ${variant}${isActive ? ' is-active' : ''}`;
 
-    return (
-        <button
-            {...props}
-            {...events}
-            className={classes}
-            disabled={disabled}
-            id={buttonId}
-            ref={ref}
-        >
-            {props.children}
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                ref={ripplesRef}
-            />
-        </button>
-    );
-});
+        return (
+            <button
+                {...props}
+                {...events}
+                className={classes}
+                disabled={disabled}
+                id={buttonId}
+                ref={ref}
+            >
+                {props.children}
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    ref={ripplesRef}
+                />
+            </button>
+        );
+    },
+);
 
-export { ButtonLayout };
+ButtonLayout.propTypes = {
+    centralRipple: bool,
+    children: string,
+};