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

CHANGED: Check boxes now is FONT, not SVG or anything

Browse Source 
REMOVED: Labels for switch and radio (because it's useless and make code more difficult)
This commit is contained in:
doryan04
2024-02-02 01:47:26 +04:00
parent 252f03af7a
commit bb7b511b76
10 changed files with 221 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/primitive-components/checkbox/checkbox.tsx
View File

@@ -43,6 +43,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
ref={checkboxRef}
type={'checkbox'}
/>
<span className={'m3 m3-checkbox-state'} />
<span className={'m3 m3-checkbox-state-layer'} />
<RippleArea
callback={setIsActive}

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

@@ -5,16 +5,15 @@ 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, oneOf, string } from 'prop-types';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
import { bool, string } from 'prop-types';
/**
* Radio component
** description
*/
export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
export const Radio = forwardRef<HTMLInputElement, RadioProps>(
({ centralRipple, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
@@ -24,34 +23,26 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
return (
<div {...events} className={classes}>
{children && labelPlacement === 'left' && (
<label htmlFor={props.id}>{children}</label>
)}
<span>
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
<circle
className={'m3-radio-outline'}
cx={'50%'}
cy={'50%'}
/>
<circle
className={'m3-radio-state'}
cx={'50%'}
cy={'50%'}
/>
</svg>
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
<circle
className={'m3-radio-outline'}
cx={'50%'}
cy={'50%'}
/>
</span>
{children && labelPlacement === 'right' && (
<label htmlFor={props.id}>{children}</label>
)}
<circle
className={'m3-radio-state'}
cx={'50%'}
cy={'50%'}
/>
</svg>
<RippleArea
callback={setIsActive}
central={centralRipple}
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
</div>
);
},
@@ -60,5 +51,4 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
Radio.propTypes = {
children: string,
centralRipple: bool,
labelPlacement: oneOf(['left', 'right']),
};

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

@@ -13,50 +13,24 @@ import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
export const Switch = forwardRef<
HTMLInputElement,
SwitchMainProps & LabelPlacement
>(
(
{
icon,
disabled,
selected = false,
children,
labelPlacement = 'right',
...props
},
ref,
) => (
<div className={'m3 m3-switch'}>
{children && labelPlacement === 'left' && (
<label htmlFor={props.id}>{children}</label>
)}
<span>
<CheckBoxLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
disabled={disabled}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>
close
</text>
)}
{icon && (
<text className={'m3 m3-icon-checked'}>check</text>
)}
</g>
</svg>
</span>
{children && labelPlacement === 'right' && (
<label htmlFor={props.id}>{children}</label>
)}
</div>
),
);
>(({ icon, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch'}>
<CheckBoxLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
)}
{icon && <text className={'m3 m3-icon-checked'}>check</text>}
</g>
</svg>
</div>
));