doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGED: README

Browse Source
This commit is contained in:
doryan04
2024-02-02 14:39:02 +04:00
parent 231bdbec3a
commit d970f5a5b3
23 changed files with 206 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/primitive-components/button-layout/button-layout.tsx
View File

@@ -7,15 +7,14 @@ import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, { forwardRef, useId, useRef, useState } from 'react';
export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
({ centralRipple = false, variant, ...props }, ref) => {
({ centralRipple = false, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = props.className
? `m3 ${props.className} ${variant}${isActive ? ' is-active' : ''}`
: `m3 ${variant}${isActive ? ' is-active' : ''}`;
const classes =
`m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
return (
<button
@@ -38,7 +37,6 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
);
ButtonLayout.propTypes = {
variant: string,
centralRipple: bool,
children: string,
centralRipple: bool,
};

4
src/primitive-components/button-layout/button-layout.types.ts
View File

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

19
src/primitive-components/button/button.tsx
View File

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
import { Icon } from '../components';
import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { bool, oneOf, string } from 'prop-types';
/**
* Button component
@@ -12,18 +13,32 @@ import { ButtonLayout } from '../button-layout/button-layout';
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{ centralRipple = false, variant, disabled = false, icon, ...props },
{
icon,
className = '',
disabled = false,
variant = 'filled',
centralRipple = false,
...props
},
ref,
) => (
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`${variant} ${className}`}
disabled={disabled}
ref={ref}
variant={variant ? variant : 'filled'}
>
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
<span className={'label-large'}>{props.children}</span>
</ButtonLayout>
),
);
Button.propTypes = {
icon: string,
children: string,
centralRipple: bool,
variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
};

3
src/primitive-components/button/button.types.ts
View File

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

3
src/primitive-components/checkbox-layout/check-box-layout.tsx
View File

@@ -38,7 +38,6 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
);
CheckBoxLayout.propTypes = {
indeterminate: bool,
typeInput: string,
type: string,
indeterminate: bool,
};

8
src/primitive-components/divider/divider.tsx
View File

@@ -1,7 +1,8 @@
import { oneOf } from 'prop-types';
import React, { forwardRef } from 'react';
import { DividerProps } from './divider.types';
const Divider = forwardRef<HTMLHRElement, DividerProps>(
export const Divider = forwardRef<HTMLHRElement, DividerProps>(
({ orientation, variant, ...props }, ref) => (
<hr
{...props}
@@ -11,4 +12,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
),
);
export { Divider };
Divider.propTypes = {
orientation: oneOf(['vertical', 'horizontal']),
variant: oneOf(['full-width', 'inset', 'middle-inset']),
};

23
src/primitive-components/fab/fab.tsx
View File

@@ -3,6 +3,7 @@
import { forwardRef } from 'react';
import { Icon } from '../components';
import { FABProps } from './fab.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
/**
@@ -20,12 +21,13 @@ const sizes = {
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
(
{
variant,
disabled,
icon,
centralRipple = false,
icon = 'edit',
className = '',
size = 'default',
elevated,
elevated = false,
disabled = false,
variant = 'surface',
centralRipple = false,
...props
},
ref,
@@ -33,10 +35,9 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
disabled={disabled}
ref={ref}
variant={variant ? variant : 'surface'}
>
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
{icon}
@@ -49,3 +50,11 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
</ButtonLayout>
),
);
FAB.propTypes = {
icon: string,
elevated: bool,
children: string,
size: oneOf(['small', 'default', 'large', 'extended']),
variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
};

1
src/primitive-components/fab/fab.types.ts
View File

@@ -3,6 +3,7 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
export interface FABMainProps {
icon: string;
children?: string;
disabled?: boolean;
elevated?: boolean;
size?: 'small' | 'default' | 'large' | 'extended';

24
src/primitive-components/icon-button/icon-button.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { Icon } from '../components';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { IconButtonProps, StateToggleIconType } from './icon-button.types';
/**
* Icon button-layout component
@@ -14,11 +15,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
(
{
icon,
variant,
disabled,
selected = false,
className = '',
toggled = false,
centralRipple,
disabled = false,
selected = false,
variant = 'default',
centralRipple = false,
...props
},
ref,
@@ -28,6 +30,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
});
const classes = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
const toggle = (classes: string, icon: string) => {
setToggleIcon({
state: classes,
@@ -56,11 +60,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
className={classes}
disabled={disabled}
onClick={callback}
ref={buttonRef}
variant={variant ? variant : 'default'}
>
<Icon
fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
@@ -73,3 +76,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
);
},
);
IconButton.propTypes = {
icon: string,
selected: bool,
centralRipple: bool,
variant: oneOf(['default', 'filled', 'tonal', 'outlined']),
};

4
src/primitive-components/icon/icon.tsx
View File

@@ -2,7 +2,7 @@ import { IconProps } from './icon.types';
import React, { forwardRef } from 'react';
import { number, oneOf, string } from 'prop-types';
const Icon = forwardRef<SVGSVGElement, IconProps>(
export const Icon = forwardRef<SVGSVGElement, IconProps>(
(
{
children = '',
@@ -52,5 +52,3 @@ Icon.propTypes = {
type: oneOf(['outlined', 'rounded', 'sharp']),
weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
};
export { Icon };

2
src/primitive-components/radio/radio.tsx
View File

@@ -1,11 +1,11 @@
'use client';
import { bool, string } from 'prop-types';
import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { bool, string } from 'prop-types';
/**
* Radio component

8
src/primitive-components/ripple/ripple.tsx
View File

@@ -1,8 +1,8 @@
'use client';
import isEmpty from './utils/utils';
import { RippleProps, RipplesProps } from './ripple.types';
import { rippleAreaContext } from './ripple-area';
import { RippleProps, RipplesProps } from './ripple.types';
import RippleEffectBuild from './utils/ripple-effect-builder';
import React, {
ReactElement,
@@ -18,7 +18,7 @@ const Ripples = (props: RipplesProps) => {
const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition();
const LifetimeEnd = (child: ReactElement) => {
const endLifetime = (child: ReactElement) => {
if (child.props.endLifetime) {
child.props.endLifetime();
}
@@ -34,11 +34,11 @@ const Ripples = (props: RipplesProps) => {
if (props.children.length > 0 && !pending) {
startTransition(() => {
if (firstRender.current || isEmpty(ripples)) {
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
setRipples(RippleEffectBuild(props.children, endLifetime));
firstRender.current = false;
} else {
setRipples(
RippleEffectBuild(props.children, LifetimeEnd, ripples),
RippleEffectBuild(props.children, endLifetime, ripples),
);
}
});

5
src/primitive-components/segmented-buttons/segmented-buttons.tsx
View File

@@ -6,8 +6,7 @@ export const SegmentedButtons = forwardRef<
SegmentedButtonProps
>(({ children, ...props }, ref) => {
if (children.length <= 1) {
console.error('You must build segmented button with 2 or more buttton');
return <></>;
throw 'You must build segmented button with 2 or more buttton';
}
return (
@@ -18,4 +17,4 @@ export const SegmentedButtons = forwardRef<
{children}
</div>
);
});
});

6
src/primitive-components/switch/switch.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { bool } from 'prop-types';
import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
@@ -34,3 +35,8 @@ export const Switch = forwardRef<
</svg>
</div>
));
Switch.propTypes = {
icon: bool,
selected: bool,
};

2
src/primitive-components/text-field/text-field.tsx
View File

@@ -92,8 +92,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
TextField.propTypes = {
children: string,
className: string,
placeholder: string,
withAfterIcon: bool,
withBeforeIcon: bool,
supportingText: string,