FIXED: Interfaces
This commit is contained in:
parent
218b8f61d6
commit
43381e4a7b
|
@ -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() {
|
||||||
|
|
|
@ -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> &
|
||||||
|
ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||||
variant?: string;
|
variant?: string;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>;
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>;
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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>;
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue