From 43381e4a7b766c48b904704e2f1eb354a4e75f3c Mon Sep 17 00:00:00 2001 From: doryan04 Date: Thu, 1 Feb 2024 22:39:27 +0400 Subject: [PATCH] FIXED: Interfaces --- app/page.tsx | 4 ++-- .../button-layout/button-layout.types.ts | 9 +++++---- src/primitive-components/button/button.types.ts | 9 +++++---- .../checkbox/checkbox.types.ts | 4 ++-- src/primitive-components/fab/fab.types.ts | 4 ++-- .../icon-button/icon-button.tsx | 2 +- .../icon-button/icon-button.types.ts | 6 +++--- src/primitive-components/radio/radio.types.ts | 4 ++-- .../ripple/hooks/useRippleEffect.ts | 15 ++++----------- src/primitive-components/ripple/ripple-area.tsx | 2 +- src/primitive-components/ripple/ripple.types.ts | 2 +- 11 files changed, 28 insertions(+), 33 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a8173ea..aa3f03e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,11 @@ import { Fragment } from 'react'; import Fabs from './components/fabs'; import Badges from './components/badges'; -import IconButtons from './components/icon-buttons'; +import Radios from './components/radios'; import Buttons from './components/buttons'; import Switches from './components/switches'; import Checkboxes from './components/checkboxes'; -import Radios from './components/radios'; +import IconButtons from './components/icon-buttons'; import { TextFields } from './components/text-fields'; export default function Page() { diff --git a/src/primitive-components/button-layout/button-layout.types.ts b/src/primitive-components/button-layout/button-layout.types.ts index 208688c..f44b41b 100644 --- a/src/primitive-components/button-layout/button-layout.types.ts +++ b/src/primitive-components/button-layout/button-layout.types.ts @@ -1,6 +1,7 @@ import { ButtonHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; +import { RipplePropsForComponents } from '../ripple/ripple.types'; -export type ButtonLayoutProps = IRippleProps & ButtonHTMLAttributes & { - variant?: string; -}; +export type ButtonLayoutProps = RipplePropsForComponents & + ButtonHTMLAttributes & { + variant?: string; + }; diff --git a/src/primitive-components/button/button.types.ts b/src/primitive-components/button/button.types.ts index 8947a8e..76ecf68 100644 --- a/src/primitive-components/button/button.types.ts +++ b/src/primitive-components/button/button.types.ts @@ -1,11 +1,12 @@ +import { RipplePropsForComponents } from '../ripple/ripple.types'; import { ButtonHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; -export interface ButtonMainProps - extends ButtonHTMLAttributes { +export interface ButtonMainProps { disabled?: boolean; variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text'; icon?: string; } -export type ButtonProps = IRippleProps & ButtonMainProps; +export type ButtonProps = RipplePropsForComponents & + ButtonMainProps & + ButtonHTMLAttributes; diff --git a/src/primitive-components/checkbox/checkbox.types.ts b/src/primitive-components/checkbox/checkbox.types.ts index 05f6bc5..533de2d 100644 --- a/src/primitive-components/checkbox/checkbox.types.ts +++ b/src/primitive-components/checkbox/checkbox.types.ts @@ -1,7 +1,7 @@ import { InputHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; +import { RipplePropsForComponents } from '../ripple/ripple.types'; export type CheckboxProps = InputHTMLAttributes & - IRippleProps & { + RipplePropsForComponents & { indeterminate?: boolean; }; diff --git a/src/primitive-components/fab/fab.types.ts b/src/primitive-components/fab/fab.types.ts index 8ffeb51..9a90ec1 100644 --- a/src/primitive-components/fab/fab.types.ts +++ b/src/primitive-components/fab/fab.types.ts @@ -1,5 +1,5 @@ import { ButtonHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; +import { RipplePropsForComponents } from '../ripple/ripple.types'; export interface FABMainProps { icon: string; @@ -10,5 +10,5 @@ export interface FABMainProps { } export type FABProps = FABMainProps & - IRippleProps & + RipplePropsForComponents & ButtonHTMLAttributes; diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx index 248627d..618f64f 100644 --- a/src/primitive-components/icon-button/icon-button.tsx +++ b/src/primitive-components/icon-button/icon-button.tsx @@ -45,7 +45,7 @@ export const IconButton = forwardRef( const buttonRef = useRef(null); const callback = useCallback( - (event: MouseEventHandler) => { + () => (event: MouseEventHandler) => { if (toggled) { if (toggleIcon.state === 'selected') { toggle('', toggled.unselected ?? 'add_circle'); diff --git a/src/primitive-components/icon-button/icon-button.types.ts b/src/primitive-components/icon-button/icon-button.types.ts index 08b3b78..5365dd0 100644 --- a/src/primitive-components/icon-button/icon-button.types.ts +++ b/src/primitive-components/icon-button/icon-button.types.ts @@ -1,5 +1,5 @@ import { ButtonHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; +import { RipplePropsForComponents } from '../ripple/ripple.types'; export interface IconButtonMainProps { icon: string; @@ -20,5 +20,5 @@ export type ToggleButtonType = { }; export type IconButtonProps = IconButtonMainProps & - IRippleProps & - ButtonHTMLAttributes; \ No newline at end of file + RipplePropsForComponents & + ButtonHTMLAttributes; diff --git a/src/primitive-components/radio/radio.types.ts b/src/primitive-components/radio/radio.types.ts index 59d2c0a..57bbca9 100644 --- a/src/primitive-components/radio/radio.types.ts +++ b/src/primitive-components/radio/radio.types.ts @@ -1,7 +1,7 @@ import { InputHTMLAttributes } from 'react'; -import { IRippleProps } from '../ripple/ripple.types'; +import { RipplePropsForComponents } from '../ripple/ripple.types'; export type RadioProps = InputHTMLAttributes & - IRippleProps & { + RipplePropsForComponents & { centralRipple?: boolean; }; diff --git a/src/primitive-components/ripple/hooks/useRippleEffect.ts b/src/primitive-components/ripple/hooks/useRippleEffect.ts index f10ab27..7ea754f 100644 --- a/src/primitive-components/ripple/hooks/useRippleEffect.ts +++ b/src/primitive-components/ripple/hooks/useRippleEffect.ts @@ -19,17 +19,10 @@ interface RippleEventHandlers { onTouchStart: TouchEventHandler; } -export type InteractionEventsType = MouseEvent & TouchEvent & DragEvent & FocusEvent - -export interface InteractionEvents - extends MouseEvent, - TouchEvent, - DragEvent, - FocusEvent, - MouseEventHandler, - DragEventHandler, - FocusEventHandler, - TouchEventHandler {} +export type InteractionEventsType = MouseEvent & + TouchEvent & + DragEvent & + FocusEvent; const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => { const [mounted, setMounted] = useState(false); diff --git a/src/primitive-components/ripple/ripple-area.tsx b/src/primitive-components/ripple/ripple-area.tsx index c39d17c..951cf61 100644 --- a/src/primitive-components/ripple/ripple-area.tsx +++ b/src/primitive-components/ripple/ripple-area.tsx @@ -11,7 +11,7 @@ import React, { import { Ripple } from './ripple'; import { Ripples } from './ripple'; import { RippleAreaProps } from './ripple.types'; -import {InteractionEvents, InteractionEventsType} from './hooks/useRippleEffect'; +import { InteractionEventsType } from './hooks/useRippleEffect'; const TIMEOUT: number = 550; const rippleAreaContext = React.createContext(false); diff --git a/src/primitive-components/ripple/ripple.types.ts b/src/primitive-components/ripple/ripple.types.ts index 09e33ac..8fa9b6e 100644 --- a/src/primitive-components/ripple/ripple.types.ts +++ b/src/primitive-components/ripple/ripple.types.ts @@ -4,7 +4,7 @@ export interface RipplesProps extends HTMLAttributes { children?: ReactElement[]; } -export interface IRippleProps extends HTMLAttributes { +export interface RipplePropsForComponents extends HTMLAttributes { centralRipple?: boolean; }