Lint all files

src/renderer/components/button/index.tsx

@@ -8,177 +8,177 @@ import { Spinner } from '/@/renderer/components/spinner';
 import { Tooltip } from '/@/renderer/components/tooltip';
 
 export interface ButtonProps extends MantineButtonProps {
-  children: React.ReactNode;
-  loading?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  tooltip?: Omit<TooltipProps, 'children'>;
+    children: React.ReactNode;
+    loading?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    tooltip?: Omit<TooltipProps, 'children'>;
 }
 
 interface StyledButtonProps extends ButtonProps {
-  ref: Ref<HTMLButtonElement>;
+    ref: Ref<HTMLButtonElement>;
 }
 
 const StyledButton = styled(MantineButton)<StyledButtonProps>`
-  color: ${(props) => `var(--btn-${props.variant}-fg)`};
-  background: ${(props) => `var(--btn-${props.variant}-bg)`};
-  border: ${(props) => `var(--btn-${props.variant}-border)`};
-  border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
-  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
-
-  svg {
-    transition: fill 0.2s ease-in-out;
-    fill: ${(props) => `var(--btn-${props.variant}-fg)`};
-  }
-
-  &:disabled {
     color: ${(props) => `var(--btn-${props.variant}-fg)`};
     background: ${(props) => `var(--btn-${props.variant}-bg)`};
-
-    opacity: 0.6;
-  }
-
-  &:not([data-disabled])&:hover {
-    color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
-    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-    border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
+    border: ${(props) => `var(--btn-${props.variant}-border)`};
+    border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
 
     svg {
-      fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        transition: fill 0.2s ease-in-out;
+        fill: ${(props) => `var(--btn-${props.variant}-fg)`};
     }
-  }
 
-  &:not([data-disabled])&:focus-visible {
-    color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
-    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-  }
+    &:disabled {
+        color: ${(props) => `var(--btn-${props.variant}-fg)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg)`};
 
-  &:active {
-    transform: none;
-  }
+        opacity: 0.6;
+    }
 
-  & .mantine-Button-centerLoader {
-    display: none;
-  }
+    &:not([data-disabled])&:hover {
+        color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
+        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+        border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
 
-  & .mantine-Button-leftIcon {
-    display: flex;
-    height: 100%;
-    margin-right: 0.5rem;
-    transform: translateY(-0.1rem);
-  }
+        svg {
+            fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        }
+    }
 
-  .mantine-Button-rightIcon {
-    display: flex;
-    margin-left: 0.5rem;
-  }
+    &:not([data-disabled])&:focus-visible {
+        color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+    }
+
+    &:active {
+        transform: none;
+    }
+
+    & .mantine-Button-centerLoader {
+        display: none;
+    }
+
+    & .mantine-Button-leftIcon {
+        display: flex;
+        height: 100%;
+        margin-right: 0.5rem;
+        transform: translateY(-0.1rem);
+    }
+
+    .mantine-Button-rightIcon {
+        display: flex;
+        margin-left: 0.5rem;
+    }
 `;
 
 const ButtonChildWrapper = styled.span<{ $loading?: boolean }>`
-  color: ${(props) => props.$loading && 'transparent !important'};
+    color: ${(props) => props.$loading && 'transparent !important'};
 `;
 
 const SpinnerWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
 `;
 
 export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, tooltip, ...props }: ButtonProps, ref) => {
-    if (tooltip) {
-      return (
-        <Tooltip
-          withinPortal
-          {...tooltip}
-        >
-          <StyledButton
-            ref={ref}
-            loaderPosition="center"
-            {...props}
-          >
-            <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
-            {props.loading && (
-              <SpinnerWrapper>
-                <Spinner />
-              </SpinnerWrapper>
-            )}
-          </StyledButton>
-        </Tooltip>
-      );
-    }
+    ({ children, tooltip, ...props }: ButtonProps, ref) => {
+        if (tooltip) {
+            return (
+                <Tooltip
+                    withinPortal
+                    {...tooltip}
+                >
+                    <StyledButton
+                        ref={ref}
+                        loaderPosition="center"
+                        {...props}
+                    >
+                        <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+                        {props.loading && (
+                            <SpinnerWrapper>
+                                <Spinner />
+                            </SpinnerWrapper>
+                        )}
+                    </StyledButton>
+                </Tooltip>
+            );
+        }
 
-    return (
-      <StyledButton
-        ref={ref}
-        loaderPosition="center"
-        {...props}
-      >
-        <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
-        {props.loading && (
-          <SpinnerWrapper>
-            <Spinner />
-          </SpinnerWrapper>
-        )}
-      </StyledButton>
-    );
-  },
+        return (
+            <StyledButton
+                ref={ref}
+                loaderPosition="center"
+                {...props}
+            >
+                <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+                {props.loading && (
+                    <SpinnerWrapper>
+                        <Spinner />
+                    </SpinnerWrapper>
+                )}
+            </StyledButton>
+        );
+    },
 );
 
 export const Button = createPolymorphicComponent<'button', ButtonProps>(_Button);
 
 _Button.defaultProps = {
-  loading: undefined,
-  onClick: undefined,
-  tooltip: undefined,
+    loading: undefined,
+    onClick: undefined,
+    tooltip: undefined,
 };
 
 interface HoldButtonProps extends ButtonProps {
-  timeoutProps: {
-    callback: () => void;
-    duration: number;
-  };
+    timeoutProps: {
+        callback: () => void;
+        duration: number;
+    };
 }
 
 export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
-  const [, setTimeoutRemaining] = useState(timeoutProps.duration);
-  const [isRunning, setIsRunning] = useState(false);
-  const intervalRef = useRef(0);
+    const [, setTimeoutRemaining] = useState(timeoutProps.duration);
+    const [isRunning, setIsRunning] = useState(false);
+    const intervalRef = useRef(0);
 
-  const callback = () => {
-    timeoutProps.callback();
-    setTimeoutRemaining(timeoutProps.duration);
-    clearInterval(intervalRef.current);
-    setIsRunning(false);
-  };
+    const callback = () => {
+        timeoutProps.callback();
+        setTimeoutRemaining(timeoutProps.duration);
+        clearInterval(intervalRef.current);
+        setIsRunning(false);
+    };
 
-  const { start, clear } = useTimeout(callback, timeoutProps.duration);
+    const { start, clear } = useTimeout(callback, timeoutProps.duration);
 
-  const startTimeout = useCallback(() => {
-    if (isRunning) {
-      clearInterval(intervalRef.current);
-      setIsRunning(false);
-      clear();
-    } else {
-      setIsRunning(true);
-      start();
+    const startTimeout = useCallback(() => {
+        if (isRunning) {
+            clearInterval(intervalRef.current);
+            setIsRunning(false);
+            clear();
+        } else {
+            setIsRunning(true);
+            start();
 
-      const intervalId = window.setInterval(() => {
-        setTimeoutRemaining((prev) => prev - 100);
-      }, 100);
+            const intervalId = window.setInterval(() => {
+                setTimeoutRemaining((prev) => prev - 100);
+            }, 100);
 
-      intervalRef.current = intervalId;
-    }
-  }, [clear, isRunning, start]);
+            intervalRef.current = intervalId;
+        }
+    }, [clear, isRunning, start]);
 
-  return (
-    <Button
-      sx={{ color: 'var(--danger-color)' }}
-      onClick={startTimeout}
-      {...props}
-    >
-      {isRunning ? 'Cancel' : props.children}
-    </Button>
-  );
+    return (
+        <Button
+            sx={{ color: 'var(--danger-color)' }}
+            onClick={startTimeout}
+            {...props}
+        >
+            {isRunning ? 'Cancel' : props.children}
+        </Button>
+    );
 };