init: the first public commit for AFFiNE

2026-07-15 00:56:26 +08:00 · 2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
@@ -0,0 +1,98 @@
+import type {
+    FC,
+    MouseEventHandler,
+    CSSProperties,
+    PropsWithChildren,
+} from 'react';
+import { styled } from '../styled';
+import { buttonStatus } from './constants';
+import { cx } from '../clsx';
+
+/* Temporary solution, needs to be adjusted */
+const SIZE_SMALL = 'small' as const;
+const SIZE_MIDDLE = 'middle' as const;
+const SIZE_LARGE = 'large' as const;
+
+const SIZE_CONFIG = {
+    [SIZE_SMALL]: {
+        iconSize: '14px',
+        areaSize: '20px',
+    },
+    [SIZE_MIDDLE]: {
+        iconSize: '20px',
+        areaSize: '32px',
+    },
+    [SIZE_LARGE]: {
+        iconSize: '24px',
+        areaSize: '36px',
+    },
+} as const;
+
+type SizeType = keyof typeof SIZE_CONFIG;
+
+interface IconButtonProps {
+    onClick?: MouseEventHandler;
+    disabled?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
+    children,
+    disabled,
+    onClick,
+    className,
+    ...props
+}) => {
+    return (
+        <Container
+            {...props}
+            onClick={disabled ? undefined : onClick}
+            disabled={disabled}
+            className={cx({ [buttonStatus.disabled]: disabled }, className)}
+        >
+            {children}
+        </Container>
+    );
+};
+
+const Container = styled('button')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '32px',
+        height: '32px',
+        backgroundColor: theme.affine.palette.white,
+        color: theme.affine.palette.icons,
+        padding: theme.affine.spacing.iconPadding,
+        borderRadius: '5px',
+
+        '& svg': {
+            width: '20px',
+            height: '20px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+
+        '&:hover': {
+            backgroundColor: theme.affine.palette.hover,
+        },
+
+        [`&${buttonStatus.hover}`]: {
+            backgroundColor: theme.affine.palette.hover,
+        },
+
+        '&:focus': {
+            color: theme.affine.palette.primary,
+        },
+        [`&.${buttonStatus.focus}`]: {
+            color: theme.affine.palette.primary,
+        },
+
+        [`&${buttonStatus.disabled}`]: {
+            cursor: 'not-allowed',
+        },
+    };
+});