FIXED: Interfaces

This commit is contained in:
doryan04 2024-02-01 22:39:27 +04:00
parent 218b8f61d6
commit 43381e4a7b
11 changed files with 28 additions and 33 deletions

View File

@ -1,11 +1,11 @@
import { Fragment } from 'react'; import { Fragment } from 'react';
import Fabs from './components/fabs'; import Fabs from './components/fabs';
import Badges from './components/badges'; import Badges from './components/badges';
import IconButtons from './components/icon-buttons'; import Radios from './components/radios';
import Buttons from './components/buttons'; import Buttons from './components/buttons';
import Switches from './components/switches'; import Switches from './components/switches';
import Checkboxes from './components/checkboxes'; import Checkboxes from './components/checkboxes';
import Radios from './components/radios'; import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields'; import { TextFields } from './components/text-fields';
export default function Page() { export default function Page() {

View File

@ -1,6 +1,7 @@
import { ButtonHTMLAttributes } from 'react'; import { ButtonHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types'; import { RipplePropsForComponents } from '../ripple/ripple.types';
export type ButtonLayoutProps = IRippleProps & ButtonHTMLAttributes<HTMLButtonElement> & { export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
variant?: string; ButtonHTMLAttributes<HTMLButtonElement> & {
}; variant?: string;
};

View File

@ -1,11 +1,12 @@
import { RipplePropsForComponents } from '../ripple/ripple.types';
import { ButtonHTMLAttributes } from 'react'; import { ButtonHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types';
export interface ButtonMainProps export interface ButtonMainProps {
extends ButtonHTMLAttributes<HTMLButtonElement> {
disabled?: boolean; disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text'; variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
icon?: string; icon?: string;
} }
export type ButtonProps = IRippleProps & ButtonMainProps; export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
ButtonMainProps &
ButtonHTMLAttributes<HTMLButtonElement>;

View File

@ -1,7 +1,7 @@
import { InputHTMLAttributes } from 'react'; import { InputHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types'; import { RipplePropsForComponents } from '../ripple/ripple.types';
export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> &
IRippleProps & { RipplePropsForComponents<HTMLInputElement> & {
indeterminate?: boolean; indeterminate?: boolean;
}; };

View File

@ -1,5 +1,5 @@
import { ButtonHTMLAttributes } from 'react'; import { ButtonHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types'; import { RipplePropsForComponents } from '../ripple/ripple.types';
export interface FABMainProps { export interface FABMainProps {
icon: string; icon: string;
@ -10,5 +10,5 @@ export interface FABMainProps {
} }
export type FABProps = FABMainProps & export type FABProps = FABMainProps &
IRippleProps & RipplePropsForComponents<HTMLButtonElement> &
ButtonHTMLAttributes<HTMLButtonElement>; ButtonHTMLAttributes<HTMLButtonElement>;

View File

@ -45,7 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback( const callback = useCallback(
(event: MouseEventHandler<HTMLButtonElement>) => { () => (event: MouseEventHandler<HTMLButtonElement>) => {
if (toggled) { if (toggled) {
if (toggleIcon.state === 'selected') { if (toggleIcon.state === 'selected') {
toggle('', toggled.unselected ?? 'add_circle'); toggle('', toggled.unselected ?? 'add_circle');

View File

@ -1,5 +1,5 @@
import { ButtonHTMLAttributes } from 'react'; import { ButtonHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types'; import { RipplePropsForComponents } from '../ripple/ripple.types';
export interface IconButtonMainProps { export interface IconButtonMainProps {
icon: string; icon: string;
@ -20,5 +20,5 @@ export type ToggleButtonType = {
}; };
export type IconButtonProps = IconButtonMainProps & export type IconButtonProps = IconButtonMainProps &
IRippleProps & RipplePropsForComponents<HTMLButtonElement> &
ButtonHTMLAttributes<HTMLButtonElement>; ButtonHTMLAttributes<HTMLButtonElement>;

View File

@ -1,7 +1,7 @@
import { InputHTMLAttributes } from 'react'; import { InputHTMLAttributes } from 'react';
import { IRippleProps } from '../ripple/ripple.types'; import { RipplePropsForComponents } from '../ripple/ripple.types';
export type RadioProps = InputHTMLAttributes<HTMLInputElement> & export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
IRippleProps & { RipplePropsForComponents<HTMLInputElement> & {
centralRipple?: boolean; centralRipple?: boolean;
}; };

View File

@ -19,17 +19,10 @@ interface RippleEventHandlers {
onTouchStart: TouchEventHandler; onTouchStart: TouchEventHandler;
} }
export type InteractionEventsType = MouseEvent & TouchEvent & DragEvent & FocusEvent export type InteractionEventsType = MouseEvent &
TouchEvent &
export interface InteractionEvents<T> DragEvent &
extends MouseEvent, FocusEvent;
TouchEvent,
DragEvent,
FocusEvent,
MouseEventHandler<T>,
DragEventHandler<T>,
FocusEventHandler<T>,
TouchEventHandler<T> {}
const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => { const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
const [mounted, setMounted] = useState<boolean>(false); const [mounted, setMounted] = useState<boolean>(false);

View File

@ -11,7 +11,7 @@ import React, {
import { Ripple } from './ripple'; import { Ripple } from './ripple';
import { Ripples } from './ripple'; import { Ripples } from './ripple';
import { RippleAreaProps } from './ripple.types'; import { RippleAreaProps } from './ripple.types';
import {InteractionEvents, InteractionEventsType} from './hooks/useRippleEffect'; import { InteractionEventsType } from './hooks/useRippleEffect';
const TIMEOUT: number = 550; const TIMEOUT: number = 550;
const rippleAreaContext = React.createContext(false); const rippleAreaContext = React.createContext(false);

View File

@ -4,7 +4,7 @@ export interface RipplesProps extends HTMLAttributes<HTMLElement> {
children?: ReactElement[]; children?: ReactElement[];
} }
export interface IRippleProps extends HTMLAttributes<HTMLElement> { export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
centralRipple?: boolean; centralRipple?: boolean;
} }