vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor button to use default loader

Browse Source
This commit is contained in:
jeffvli
2025-11-26 14:56:39 -08:00
parent 2c9ea6d19c
commit 6a8e55ce15
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/button/button.module.css
+16 -1
View File
@@ -2,9 +2,24 @@
font-weight: 500;
border: 1px solid transparent;
transition:
opacity 0.2s ease,
background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out;
&[data-loading='true'] {
transform: none;
&::before {
transition: none;
transition: opacity 0.1s ease;
}
.inner {
opacity: 0;
transform: none;
}
}
&[data-disabled='true'] {
opacity: 0.6;
}
@@ -143,7 +158,7 @@
}
.loader {
display: none;
transition-duration: 0;
}
.section {
src/shared/components/button/button.tsx
+4 -11
View File
@@ -6,7 +6,6 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import styles from './button.module.css';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
import { useTimeout } from '/@/shared/hooks/use-timeout';
import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
@@ -48,6 +47,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
<MantineButton
autoContrast
classNames={{
inner: styles.inner,
label: clsx(styles.label, {
[styles.uppercase]: uppercase,
}),
@@ -56,6 +56,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
section: styles.section,
...classNames,
}}
loading={loading}
ref={ref}
size={size}
style={style}
@@ -63,11 +64,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{children}
{loading && (
<div className={styles.spinner}>
<Spinner />
</div>
)}
</MantineButton>
</Tooltip>
);
@@ -76,6 +72,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
return (
<MantineButton
classNames={{
inner: styles.inner,
label: clsx(styles.label, {
[styles.uppercase]: uppercase,
}),
@@ -84,6 +81,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
section: styles.section,
...classNames,
}}
loading={loading}
ref={ref}
size={size}
style={style}
@@ -91,11 +89,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{children}
{loading && (
<div className={styles.spinner}>
<Spinner />
</div>
)}
</MantineButton>
);
},