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

FIXED: Icon button with toggle

This commit is contained in:
doryan04 2024-02-01 23:37:22 +04:00
parent 43381e4a7b
commit df7901a779
2 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,8 +44,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback( const callback = event => {
() => (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');
@ -56,9 +55,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
if (props.onClick) { if (props.onClick) {
props.onClick.apply(null, event); props.onClick.apply(null, event);
} }
}, };
[toggleIcon],
);
useImperativeHandle(ref, () => buttonRef.current); useImperativeHandle(ref, () => buttonRef.current);

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

@ -1,8 +1,8 @@
'use client'; 'use client';
import { bool, oneOf, string } from 'prop-types'; import { bool, oneOf, string } from 'prop-types';
import React, { FocusEvent, forwardRef, useState } from 'react';
import { TextFieldInterface } from './text-field.types'; import { TextFieldInterface } from './text-field.types';
import React, { FocusEvent, forwardRef, useState } from 'react';
export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>( export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
( (
@ -43,7 +43,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
<div className={`m3 m3-text-field ${variant}`.trimEnd()}> <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
{variant === 'outlined' && ( {variant === 'outlined' && (
<fieldset> <fieldset>
<legend className={raised && 'raised'}> <legend className={raised ? 'raised' : ''}>
<span>Label</span> <span>Label</span>
</legend> </legend>
</fieldset> </fieldset>