CHANGED: Types

This commit is contained in:
doryan04 2024-02-01 16:23:59 +04:00
parent dc4b8baaf8
commit ab4ae37015
19 changed files with 238 additions and 248 deletions

View File

@ -1,7 +1,7 @@
'use client';
import React, { useCallback, useState } from 'react';
import { Button } from '../../src/primitive-components/material-you-components';
import { Button } from '../../src/primitive-components/components';
export default function Buttons() {
const [state, setState] = useState(1);

View File

@ -1,10 +1,7 @@
'use client';
import React from 'react';
import {
Button,
Checkbox,
} from '../../src/primitive-components/material-you-components';
import { Button, Checkbox } from '../../src/primitive-components/components';
export default function Checkboxes() {
return (

View File

@ -1,5 +1,5 @@
import React from 'react';
import { FAB } from '../../src/primitive-components/material-you-components';
import { FAB } from '../../src/primitive-components/components';
export default function Fabs() {
return (

View File

@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { IconButton } from '../../src/primitive-components/material-you-components';
import { IconButton } from '../../src/primitive-components/components';
function IconButtons() {
return (

View File

@ -1,5 +1,5 @@
import React from 'react';
import { Radio } from '../../src/primitive-components/material-you-components';
import { Radio } from '../../src/primitive-components/components';
export default function Radios() {
return (

View File

@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { Switch } from '../../src/primitive-components/material-you-components';
import { Switch } from '../../src/primitive-components/components';
export default function Switches() {
return (

View File

@ -1,36 +1,33 @@
import { BadgeProps } from './badges.types';
import { bool, number, string } from 'prop-types';
import { bool, string } from 'prop-types';
import React, { forwardRef } from 'react';
import { BadgeProps } from './badges.types';
const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
{ disableValue = false, ...props },
ref,
) {
const digitLength = props.children
? 16 + (props.children.length - 1) * 6
: 6,
const Badge = forwardRef<SVGSVGElement, BadgeProps>(
({ disableValue = false, children, ...props }, ref) => {
const digitLength = children ? 16 + (children.length - 1) * 6 : 6,
disableValueClassName =
disableValue || (!props.children ?? true) ? 'disable-value' : '';
disableValue || (!children ?? true) ? 'disable-value' : '';
return (
<svg
{...props}
className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
className={`m3 m3-badge ${props.className ?? ''}${disableValueClassName}`.trimEnd()}
height={'16px'}
ref={ref}
width={`${digitLength}px`}
>
{props.children && (
{children && (
<text x={'50%'} y={'50%'}>
{props.children}
{children}
</text>
)}
</svg>
);
});
},
);
Badge.propTypes = {
children: number,
className: string,
children: string,
disableValue: bool,
};

View File

@ -1,20 +1,13 @@
'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) {
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
function ButtonBase({ centralRipple = false, ...props }, ref) {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
buttonId = useId(),
@ -43,6 +36,10 @@ const ButtonLayout = forwardRef<
/>
</button>
);
});
},
);
export { ButtonLayout };
ButtonLayout.propTypes = {
centralRipple: bool,
children: string,
};

View File

@ -1,20 +1,16 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../material-you-components';
import { IRippleProps } from '../ripple/ripple.types';
import { Icon } from '../components';
import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonMainProps } from '../button-layout/button.types';
/**
* Button component
** description
*/
export const Button = forwardRef<
HTMLButtonElement,
ButtonMainProps & IRippleProps
>(
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{ centralRipple = false, variant, disabled = false, icon, ...props },
ref,

View File

@ -6,13 +6,12 @@ import React, {
useImperativeHandle,
useRef,
} from 'react';
import { bool, string } from 'prop-types';
import { CheckboxLayoutProps } from './checkbox-layout.types';
export const CheckBoxLayout = forwardRef(function CheckBoxBase(
{ indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
ref,
): JSX.Element {
const checkboxRef = useRef<any>(null);
export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
({ indeterminate, typeInput, type, ...props }, ref) => {
const checkboxRef = useRef<HTMLInputElement>(null);
useEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true;
@ -35,4 +34,11 @@ export const CheckBoxLayout = forwardRef(function CheckBoxBase(
type={type}
/>
);
});
},
);
CheckBoxLayout.propTypes = {
indeterminate: bool,
typeInput: string,
type: string,
};

View File

@ -1,12 +1,12 @@
'use client';
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import {
forwardRef,
PropsWithChildren,
useEffect,
useImperativeHandle,
useRef,
@ -18,10 +18,8 @@ import {
** description
*/
export const Checkbox = forwardRef<
HTMLInputElement,
PropsWithChildren<any> & IRippleProps
>(({ centralRipple, ...props }, ref) => {
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null),
@ -30,7 +28,6 @@ export const Checkbox = forwardRef<
const classes =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
useImperativeHandle(ref, () => checkboxRef.current);
@ -42,7 +39,7 @@ export const Checkbox = forwardRef<
<label {...events} className={classes}>
<CheckBoxLayout
{...props}
indeterminate={indeterminate}
indeterminate={props.indeterminate}
ref={checkboxRef}
type={'checkbox'}
/>
@ -56,4 +53,10 @@ export const Checkbox = forwardRef<
{props.children}
</label>
);
});
},
);
Checkbox.propTypes = {
indeterminate: bool,
centralRipple: bool,
};

View File

@ -1,9 +1,5 @@
import React, { forwardRef, PropsWithChildren } from 'react';
interface DividerProps extends PropsWithChildren<any> {
orientation?: 'vertical' | 'horizontal';
variant?: 'full-width' | 'inset' | 'middle-inset';
}
import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';
const Divider = forwardRef<HTMLHRElement, DividerProps>(
({ orientation, variant, ...props }, ref) => (

View File

@ -1,9 +1,8 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../material-you-components';
import { IRippleProps } from '../ripple/ripple.types';
import { FABMainProps } from '../button-layout/button.types';
import { Icon } from '../components';
import { FABProps } from './fab.types';
import { ButtonLayout } from '../button-layout/button-layout';
/**
@ -18,7 +17,7 @@ const sizes = {
extended: 24,
};
export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
(
{
variant,

View File

@ -1,10 +1,8 @@
'use client';
import { Icon } from '../material-you-components';
import { toggleIconType } from './icon-button.types';
import { IRippleProps } from '../ripple/ripple.types';
import { Icon } from '../components';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconButtonMainProps } from '../button-layout/button.types';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
import {
forwardRef,
useCallback,
@ -18,10 +16,7 @@ import {
** description
*/
export const IconButton = forwardRef<
HTMLButtonElement,
IconButtonMainProps & IRippleProps
>(
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
(
{
icon,
@ -34,21 +29,22 @@ export const IconButton = forwardRef<
},
ref,
) => {
const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
const [toggleIcon, setToggleIcon] = useState<StateToggleIconType>({
state: selected == true ? 'selected' : 'unselected',
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
});
const toggle = (classes: string, icon: string) => {
setToggleIcon(() => ({
setToggleIcon({
state: classes,
icon: icon,
}));
});
};
const buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback(() => {
const callback = useCallback(
(e: MouseEvent) => {
if (toggled) {
if (toggleIcon.state === 'selected') {
toggle('', toggled.unselected ?? 'add_circle');
@ -57,9 +53,11 @@ export const IconButton = forwardRef<
}
}
if (props.onClick) {
props.onClick();
props.onClick.apply(null, e);
}
}, [toggleIcon]);
},
[toggleIcon],
);
useImperativeHandle(ref, () => buttonRef.current);

View File

@ -1,22 +1,24 @@
import { IconProps } from './icon.types';
import { bool, number, string } from 'prop-types';
import React, { ForwardedRef, forwardRef } from 'react';
import React, { forwardRef } from 'react';
import { number, oneOf, string } from 'prop-types';
const Icon = forwardRef(function Icon(
const Icon = forwardRef<SVGSVGElement, IconProps>(
(
{
children = '',
grade = 0,
weight = 500,
svgSize = 20,
fill = false,
fillIcon = 0,
iconSize = 20,
opticalSize = 24,
type = 'outlined',
...props
}: IconProps,
ref: ForwardedRef<any>,
) {
},
ref,
) => {
const fontVariation = {
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
fontVariationSettings: `'FILL' ${fillIcon}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
};
return (
@ -33,21 +35,22 @@ const Icon = forwardRef(function Icon(
x={'50%'}
y={'50%'}
>
{props.children ?? 'add_circle'}
{children ?? 'add_circle'}
</text>
</svg>
);
});
},
);
Icon.propTypes = {
fill: bool,
type: string,
grade: number,
weight: number,
svgSize: number,
iconSize: number,
children: string,
opticalSize: number,
fillIcon: oneOf([0, 1]),
type: oneOf(['outlined', 'rounded', 'sharp']),
weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
};
export { Icon };

View File

@ -1,20 +1,18 @@
'use client';
import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
/**
* Radio component
** description
*/
export const Radio = forwardRef<
HTMLInputElement,
PropsWithChildren<HTMLElement> & IRippleProps
>(({ centralRipple, ...props }, ref) => {
export const Radio = forwardRef<HTMLInputElement, RadioProps>(
({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
@ -35,4 +33,5 @@ export const Radio = forwardRef<
{props.children}
</label>
);
});
},
);

View File

@ -11,11 +11,12 @@ import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
({ icon, disabled, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch-exp'} ref={ref}>
<div className={'m3 m3-switch-exp'}>
<CheckBoxLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
disabled={disabled}
ref={ref}
type={'checkbox'}
/>
<svg>

View File

@ -1,8 +1,8 @@
'use client';
import React, { forwardRef, useState } from 'react';
import { bool, string } from 'prop-types';
import { type TextFieldInterface } from './text-field.types';
import { bool, oneOf, string } from 'prop-types';
import React, { FocusEvent, forwardRef, useState } from 'react';
import { TextFieldInterface } from './text-field.types';
export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
(
@ -15,11 +15,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
},
ref,
) => {
const [raised, setRaised] = useState<boolean>(
props.placeholder ?? false,
);
const [raised, setRaised] = useState<boolean>(!props.placeholder);
const callback = (e: any): void => {
const callback = (e: FocusEvent<HTMLInputElement>): void => {
if (
e.type === 'blur' &&
e.target.value.length === 0 &&
@ -97,7 +95,7 @@ TextField.propTypes = {
withBeforeIcon: bool,
withAfterIcon: bool,
className: string,
variant: string,
variant: oneOf(['filled', 'outlined']),
placeholder: string,
supportingText: string,
};