Add files

src/renderer/components/button/index.tsx

@@ -0,0 +1,290 @@
+import type { Ref } from 'react';
+import React, { useRef, useCallback, useState, forwardRef } from 'react';
+import type { ButtonProps as MantineButtonProps, TooltipProps } from '@mantine/core';
+import { Button as MantineButton, createPolymorphicComponent } from '@mantine/core';
+import { useTimeout } from '@mantine/hooks';
+import styled from 'styled-components';
+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'>;
+}
+
+interface StyledButtonProps extends ButtonProps {
+  ref: Ref<HTMLButtonElement>;
+}
+
+const StyledButton = styled(MantineButton)<StyledButtonProps>`
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'default':
+        return 'var(--btn-default-fg)';
+      case 'filled':
+        return 'var(--btn-primary-fg)';
+      case 'subtle':
+        return 'var(--btn-subtle-fg)';
+      default:
+        return '';
+    }
+  }};
+  background: ${(props) => {
+    switch (props.variant) {
+      case 'default':
+        return 'var(--btn-default-bg)';
+      case 'filled':
+        return 'var(--btn-primary-bg)';
+      case 'subtle':
+        return 'var(--btn-subtle-bg)';
+      default:
+        return '';
+    }
+  }};
+  border: none;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  svg {
+    transition: fill 0.2s ease-in-out;
+    fill: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+  }
+
+  &:disabled {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg)';
+        case 'filled':
+          return 'var(--btn-primary-bg)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg)';
+        default:
+          return '';
+      }
+    }};
+
+    opacity: 0.6;
+  }
+
+  &:hover {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-fg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg-hover)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-bg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg-hover)';
+        default:
+          return '';
+      }
+    }};
+
+    svg {
+      fill: ${(props) => {
+        switch (props.variant) {
+          case 'default':
+            return 'var(--btn-default-fg-hover)';
+          case 'filled':
+            return 'var(--btn-primary-fg-hover)';
+          case 'subtle':
+            return 'var(--btn-subtle-fg-hover)';
+          default:
+            return '';
+        }
+      }};
+    }
+  }
+
+  &:focus-visible {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-fg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg-hover)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-bg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg-hover)';
+        default:
+          return '';
+      }
+    }};
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  & .mantine-Button-centerLoader {
+    display: none;
+  }
+
+  & .mantine-Button-leftIcon {
+    display: flex;
+    margin-right: 0.5rem;
+  }
+
+  .mantine-Button-rightIcon {
+    display: flex;
+    margin-left: 0.5rem;
+  }
+`;
+
+const ButtonChildWrapper = styled.span<{ $loading?: boolean }>`
+  color: ${(props) => props.$loading && 'transparent !important'};
+`;
+
+const SpinnerWrapper = styled.div`
+  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>
+      );
+    }
+
+    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,
+};
+
+interface HoldButtonProps extends ButtonProps {
+  timeoutProps: {
+    callback: () => void;
+    duration: number;
+  };
+}
+
+export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
+  const [_timeoutRemaining, 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 { start, clear } = useTimeout(callback, timeoutProps.duration);
+
+  const startTimeout = useCallback(() => {
+    if (isRunning) {
+      clearInterval(intervalRef.current);
+      setIsRunning(false);
+      clear();
+    } else {
+      setIsRunning(true);
+      start();
+
+      const intervalId = window.setInterval(() => {
+        setTimeoutRemaining((prev) => prev - 100);
+      }, 100);
+
+      intervalRef.current = intervalId;
+    }
+  }, [clear, isRunning, start]);
+
+  return (
+    <_Button
+      sx={{ color: 'var(--danger-color)' }}
+      onClick={startTimeout}
+      {...props}
+    >
+      {isRunning ? 'Cancel' : props.children}
+    </_Button>
+  );
+};