chore: bump version (#3041)

2026-02-13 04:48:53 +00:00 · 2023-07-06 11:49:17 +08:00
parent e95d28e136
commit fa1cd87348
44 changed files with 508 additions and 495 deletions
--- a/packages/component/src/ui/button/loading.tsx
+++ b/packages/component/src/ui/button/loading.tsx
@@ -1,10 +1,12 @@
 import { styled } from '../../styles';
 import type { ButtonProps } from './interface';
 import { getButtonColors } from './utils';
-export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
-  ({ theme, type = 'default' }) => {
-    const { color } = getButtonColors(theme, type, false);
-    return `
+export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(({
+  theme,
+  type = 'default',
+}) => {
+  const { color } = getButtonColors(theme, type, false);
+  return `
    margin: 0px auto;
    width: 38px;
    text-align: center;
@@ -45,8 +47,7 @@ export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
      }
    }
  `;
-  }
-);
+});

 export const Loading = ({ type }: Pick<ButtonProps, 'type'>) => {
  return (
--- a/packages/component/src/ui/button/styles.ts
+++ b/packages/component/src/ui/button/styles.ts
@@ -28,36 +28,34 @@ export const StyledIconButton = styled('button', {
  hoverStyle?: CSSProperties;
  // In some cases, button is in a normal hover status, it should be darkened
  fontSize?: CSSProperties['fontSize'];
-}>(
-  ({
+}>(({
+  width,
+  height,
+  borderRadius,
+  disabled,
+  hoverBackground,
+  hoverColor,
+  hoverStyle,
+  fontSize,
+}) => {
+  return {
    width,
    height,
-    borderRadius,
-    disabled,
-    hoverBackground,
-    hoverColor,
-    hoverStyle,
    fontSize,
-  }) => {
-    return {
-      width,
-      height,
-      fontSize,
-      WebkitAppRegion: 'no-drag',
-      color: 'var(--affine-icon-color)',
-      ...displayInlineFlex('center', 'center'),
-      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
-      transition: 'background .15s',
-      borderRadius,
+    WebkitAppRegion: 'no-drag',
+    color: 'var(--affine-icon-color)',
+    ...displayInlineFlex('center', 'center'),
+    ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+    transition: 'background .15s',
+    borderRadius,

-      ':hover': {
-        color: hoverColor ?? 'var(--affine-icon-color)',
-        background: hoverBackground || 'var(--affine-hover-color)',
-        ...(hoverStyle ?? {}),
-      },
-    };
-  }
-);
+    ':hover': {
+      color: hoverColor ?? 'var(--affine-icon-color)',
+      background: hoverBackground || 'var(--affine-hover-color)',
+      ...(hoverStyle ?? {}),
+    },
+  };
+});

 export const StyledTextButton = styled('button', {
  shouldForwardProp: prop => {
@@ -85,42 +83,40 @@ export const StyledTextButton = styled('button', {
    | 'type'
    | 'bold'
  >
->(
-  ({
-    size = 'default',
-    disabled,
-    hoverBackground,
-    hoverColor,
-    hoverStyle,
-    bold = false,
-    shape = 'default',
-    // TODO: Implement type
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // type = 'default',
-  }) => {
-    const { fontSize, borderRadius, padding, height } = getSize(size);
+>(({
+  size = 'default',
+  disabled,
+  hoverBackground,
+  hoverColor,
+  hoverStyle,
+  bold = false,
+  shape = 'default',
+  // TODO: Implement type
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // type = 'default',
+}) => {
+  const { fontSize, borderRadius, padding, height } = getSize(size);

-    return {
-      height,
-      paddingLeft: padding,
-      paddingRight: padding,
-      ...displayInlineFlex('flex-start', 'center'),
-      position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
-      transition: 'background .15s',
-      // TODO: Implement circle shape
-      borderRadius: shape === 'default' ? borderRadius : height / 2,
-      fontSize,
-      fontWeight: bold ? '500' : '400',
+  return {
+    height,
+    paddingLeft: padding,
+    paddingRight: padding,
+    ...displayInlineFlex('flex-start', 'center'),
+    position: 'relative',
+    ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+    transition: 'background .15s',
+    // TODO: Implement circle shape
+    borderRadius: shape === 'default' ? borderRadius : height / 2,
+    fontSize,
+    fontWeight: bold ? '500' : '400',

-      ':hover': {
-        color: hoverColor ?? 'var(--affine-primary-color)',
-        background: hoverBackground ?? 'var(--affine-hover-color)',
-        ...(hoverStyle ?? {}),
-      },
-    };
-  }
-);
+    ':hover': {
+      color: hoverColor ?? 'var(--affine-primary-color)',
+      background: hoverBackground ?? 'var(--affine-hover-color)',
+      ...(hoverStyle ?? {}),
+    },
+  };
+});

 export const StyledButton = styled('button', {
  shouldForwardProp: prop => {
@@ -147,70 +143,68 @@ export const StyledButton = styled('button', {
    | 'bold'
    | 'noBorder'
  >
->(
-  ({
-    theme,
-    size = 'default',
-    disabled,
-    hoverBackground,
-    hoverColor,
-    hoverStyle,
-    bold = false,
-    shape = 'default',
-    type = 'default',
-    noBorder = false,
-  }) => {
-    const { fontSize, borderRadius, padding, height } = getSize(size);
+>(({
+  theme,
+  size = 'default',
+  disabled,
+  hoverBackground,
+  hoverColor,
+  hoverStyle,
+  bold = false,
+  shape = 'default',
+  type = 'default',
+  noBorder = false,
+}) => {
+  const { fontSize, borderRadius, padding, height } = getSize(size);

-    return {
-      height,
-      paddingLeft: padding,
-      paddingRight: padding,
-      border: noBorder ? 'none' : '1px solid',
-      WebkitAppRegion: 'no-drag',
-      ...displayInlineFlex('center', 'center'),
-      gap: '8px',
-      position: 'relative',
-      // TODO: disabled color is not decided
-      ...(disabled
-        ? {
-            cursor: 'not-allowed',
-            pointerEvents: 'none',
-            color: 'var(--affine-text-disable-color)',
-          }
-        : {}),
-      transition: 'background .15s',
-      // TODO: Implement circle shape
-      borderRadius: shape === 'default' ? borderRadius : height / 2,
-      fontSize,
-      fontWeight: bold ? '500' : '400',
-      '.affine-button-icon': {
-        color: 'var(--affine-icon-color)',
-      },
-      '.affine-button-icon__fixed': {
-        color: 'var(--affine-icon-color)',
-      },
-      '>span': {
-        width: 'max-content',
-      },
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ...getButtonColors(theme, type, disabled, {
-        hoverBackground,
-        hoverColor,
-        hoverStyle,
-      }),
+  return {
+    height,
+    paddingLeft: padding,
+    paddingRight: padding,
+    border: noBorder ? 'none' : '1px solid',
+    WebkitAppRegion: 'no-drag',
+    ...displayInlineFlex('center', 'center'),
+    gap: '8px',
+    position: 'relative',
+    // TODO: disabled color is not decided
+    ...(disabled
+      ? {
+          cursor: 'not-allowed',
+          pointerEvents: 'none',
+          color: 'var(--affine-text-disable-color)',
+        }
+      : {}),
+    transition: 'background .15s',
+    // TODO: Implement circle shape
+    borderRadius: shape === 'default' ? borderRadius : height / 2,
+    fontSize,
+    fontWeight: bold ? '500' : '400',
+    '.affine-button-icon': {
+      color: 'var(--affine-icon-color)',
+    },
+    '.affine-button-icon__fixed': {
+      color: 'var(--affine-icon-color)',
+    },
+    '>span': {
+      width: 'max-content',
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ...getButtonColors(theme, type, disabled, {
+      hoverBackground,
+      hoverColor,
+      hoverStyle,
+    }),

-      // TODO: disabled hover should be implemented
-      //
-      // ':hover': {
-      //   color: hoverColor ?? 'var(--affine-primary-color)',
-      //   background: hoverBackground ?? 'var(--affine-hover-color)',
-      //   '.affine-button-icon':{
-      //
-      //   }
-      //   ...(hoverStyle ?? {}),
-      // },
-    };
-  }
-);
+    // TODO: disabled hover should be implemented
+    //
+    // ':hover': {
+    //   color: hoverColor ?? 'var(--affine-primary-color)',
+    //   background: hoverBackground ?? 'var(--affine-hover-color)',
+    //   '.affine-button-icon':{
+    //
+    //   }
+    //   ...(hoverStyle ?? {}),
+    // },
+  };
+});
--- a/packages/component/src/ui/empty/style.ts
+++ b/packages/component/src/ui/empty/style.ts
@@ -2,18 +2,18 @@ import type { CSSProperties } from 'react';

 import { displayFlex, styled } from '../../styles';

-export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(
-  ({ style }) => {
-    return {
-      height: '100%',
-      ...displayFlex('center', 'center'),
-      flexDirection: 'column',
-      color: 'var(--affine-text-secondary-color)',
-      svg: {
-        width: style?.width ?? '248px',
-        height: style?.height ?? '216px',
-        fontSize: style?.fontSize ?? 'inherit',
-      },
-    };
-  }
-);
+export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(({
+  style,
+}) => {
+  return {
+    height: '100%',
+    ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    color: 'var(--affine-text-secondary-color)',
+    svg: {
+      width: style?.width ?? '248px',
+      height: style?.height ?? '216px',
+      fontSize: style?.fontSize ?? 'inherit',
+    },
+  };
+});
--- a/packages/component/src/ui/layout/content.tsx
+++ b/packages/component/src/ui/layout/content.tsx
@@ -29,30 +29,28 @@ export const Content = styled('div', {
      'align',
    ].includes(prop as string);
  },
-})<ContentProps>(
-  ({
-    color,
-    fontSize,
-    weight,
-    lineHeight,
-    ellipsis,
-    lineNum,
+})<ContentProps>(({
+  color,
+  fontSize,
+  weight,
+  lineHeight,
+  ellipsis,
+  lineNum,
+  width,
+  maxWidth,
+  align,
+}) => {
+  return {
    width,
    maxWidth,
-    align,
-  }) => {
-    return {
-      width,
-      maxWidth,
-      textAlign: align,
-      display: 'inline-block',
-      color: color ?? 'var(--affine-text-primary-color)',
-      fontSize: fontSize ?? 'var(--affine-font-base)',
-      fontWeight: weight ?? 400,
-      lineHeight: lineHeight ?? 1.5,
-      ...(ellipsis ? textEllipsis(lineNum) : {}),
-    };
-  }
-);
+    textAlign: align,
+    display: 'inline-block',
+    color: color ?? 'var(--affine-text-primary-color)',
+    fontSize: fontSize ?? 'var(--affine-font-base)',
+    fontWeight: weight ?? 400,
+    lineHeight: lineHeight ?? 1.5,
+    ...(ellipsis ? textEllipsis(lineNum) : {}),
+  };
+});

 export default Content;
--- a/packages/component/src/ui/layout/wrapper.tsx
+++ b/packages/component/src/ui/layout/wrapper.tsx
@@ -47,8 +47,22 @@ export const Wrapper = styled('div', {
      'marginBottom',
    ].includes(prop as string);
  },
-})<WrapperProps>(
-  ({
+})<WrapperProps>(({
+  display,
+  width,
+  height,
+  padding,
+  margin,
+  paddingTop,
+  paddingRight,
+  paddingLeft,
+  paddingBottom,
+  marginTop,
+  marginLeft,
+  marginRight,
+  marginBottom,
+}) => {
+  return {
    display,
    width,
    height,
@@ -62,24 +76,8 @@ export const Wrapper = styled('div', {
    marginLeft,
    marginRight,
    marginBottom,
-  }) => {
-    return {
-      display,
-      width,
-      height,
-      padding,
-      margin,
-      paddingTop,
-      paddingRight,
-      paddingLeft,
-      paddingBottom,
-      marginTop,
-      marginLeft,
-      marginRight,
-      marginBottom,
-    };
-  }
-);
+  };
+});

 export const FlexWrapper = styled(Wrapper, {
  shouldForwardProp: prop => {
@@ -92,26 +90,24 @@ export const FlexWrapper = styled(Wrapper, {
      'flexGrow',
    ].includes(prop as string);
  },
-})<FlexWrapperProps>(
-  ({
+})<FlexWrapperProps>(({
+  justifyContent,
+  alignItems,
+  wrap = false,
+  flexDirection,
+  flexShrink,
+  flexGrow,
+}) => {
+  return {
+    display: 'flex',
    justifyContent,
    alignItems,
-    wrap = false,
+    flexWrap: wrap ? 'wrap' : 'nowrap',
    flexDirection,
    flexShrink,
    flexGrow,
-  }) => {
-    return {
-      display: 'flex',
-      justifyContent,
-      alignItems,
-      flexWrap: wrap ? 'wrap' : 'nowrap',
-      flexDirection,
-      flexShrink,
-      flexGrow,
-    };
-  }
-);
+  };
+});

 // TODO: Complete me
 export const GridWrapper = styled(Wrapper, {
--- a/packages/component/src/ui/menu/styles.ts
+++ b/packages/component/src/ui/menu/styles.ts
@@ -54,53 +54,51 @@ export const StyledMenuItem = styled('button')<{
  disabled?: boolean;
  active?: boolean;
  disableHover?: boolean;
-}>(
-  ({
-    isDir = false,
-    disabled = false,
-    active = false,
-    disableHover = false,
-  }) => {
-    return {
-      width: '100%',
-      borderRadius: '5px',
-      padding: '0 14px',
-      fontSize: 'var(--affine-font-base)',
-      height: '32px',
-      ...displayFlex('flex-start', 'center'),
-      cursor: isDir ? 'pointer' : '',
-      position: 'relative',
-      backgroundColor: 'transparent',
+}>(({
+  isDir = false,
+  disabled = false,
+  active = false,
+  disableHover = false,
+}) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: 'var(--affine-font-base)',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    backgroundColor: 'transparent',
+    color: disabled
+      ? 'var(--affine-text-disable-color)'
+      : 'var(--affine-text-primary-color)',
+    svg: {
      color: disabled
        ? 'var(--affine-text-disable-color)'
-        : 'var(--affine-text-primary-color)',
-      svg: {
-        color: disabled
-          ? 'var(--affine-text-disable-color)'
-          : 'var(--affine-icon-color)',
-      },
-      ...(disabled
-        ? {
-            cursor: 'not-allowed',
-            pointerEvents: 'none',
-          }
-        : {}),
+        : 'var(--affine-icon-color)',
+    },
+    ...(disabled
+      ? {
+          cursor: 'not-allowed',
+          pointerEvents: 'none',
+        }
+      : {}),

-      ':hover':
-        disabled || disableHover
-          ? {}
-          : {
-              backgroundColor: 'var(--affine-hover-color)',
-            },
-
-      ...(active && !disabled
-        ? {
+    ':hover':
+      disabled || disableHover
+        ? {}
+        : {
            backgroundColor: 'var(--affine-hover-color)',
-          }
-        : {}),
-    };
-  }
-);
+          },
+
+    ...(active && !disabled
+      ? {
+          backgroundColor: 'var(--affine-hover-color)',
+        }
+      : {}),
+  };
+});

 export const StyledButton = styled(Button)(() => {
  return {
--- a/packages/component/src/ui/table/styles.ts
+++ b/packages/component/src/ui/table/styles.ts
@@ -1,36 +1,36 @@
 import { styled, textEllipsis } from '../../styles';
 import type { TableCellProps } from './interface';

-export const StyledTable = styled('table')<{ showBorder?: boolean }>(
-  ({ showBorder }) => {
-    return {
-      fontSize: 'var(--affine-font-base)',
-      color: 'var(--affine-text-primary-color)',
-      tableLayout: 'fixed',
-      width: '100%',
-      borderCollapse: 'collapse',
-      borderSpacing: '0',
+export const StyledTable = styled('table')<{ showBorder?: boolean }>(({
+  showBorder,
+}) => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    color: 'var(--affine-text-primary-color)',
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    borderSpacing: '0',

-      ...(typeof showBorder === 'boolean'
-        ? {
-            thead: {
-              '::after': {
-                display: 'block',
-                position: 'absolute',
-                content: '""',
-                width: '100%',
-                height: '1px',
-                left: 0,
-                background: 'var(--affine-border-color)',
-                transition: 'opacity .15s',
-                opacity: showBorder ? 1 : 0,
-              },
+    ...(typeof showBorder === 'boolean'
+      ? {
+          thead: {
+            '::after': {
+              display: 'block',
+              position: 'absolute',
+              content: '""',
+              width: '100%',
+              height: '1px',
+              left: 0,
+              background: 'var(--affine-border-color)',
+              transition: 'opacity .15s',
+              opacity: showBorder ? 1 : 0,
            },
-          }
-        : {}),
-    };
-  }
-);
+          },
+        }
+      : {}),
+  };
+});

 export const StyledTableBody = styled('tbody')(() => {
  return {
@@ -43,31 +43,29 @@ export const StyledTableCell = styled('td')<
    TableCellProps,
    'ellipsis' | 'align' | 'proportion' | 'active' | 'onClick'
  >
->(
-  ({
-    align = 'left',
-    ellipsis = false,
-    proportion,
-    active = false,
-    onClick,
-  }) => {
-    const width = proportion ? `${proportion * 100}%` : 'auto';
-    return {
-      width,
-      height: '52px',
-      paddingLeft: '16px',
-      boxSizing: 'border-box',
-      textAlign: align,
-      verticalAlign: 'middle',
-      whiteSpace: 'nowrap',
-      userSelect: 'none',
-      fontSize: 'var(--affine-font-sm)',
-      ...(active ? { color: 'var(--affine-text-primary-color)' } : {}),
-      ...(ellipsis ? textEllipsis(1) : {}),
-      ...(onClick ? { cursor: 'pointer' } : {}),
-    };
-  }
-);
+>(({
+  align = 'left',
+  ellipsis = false,
+  proportion,
+  active = false,
+  onClick,
+}) => {
+  const width = proportion ? `${proportion * 100}%` : 'auto';
+  return {
+    width,
+    height: '52px',
+    paddingLeft: '16px',
+    boxSizing: 'border-box',
+    textAlign: align,
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    fontSize: 'var(--affine-font-sm)',
+    ...(active ? { color: 'var(--affine-text-primary-color)' } : {}),
+    ...(ellipsis ? textEllipsis(1) : {}),
+    ...(onClick ? { cursor: 'pointer' } : {}),
+  };
+});

 export const StyledTableHead = styled('thead')(() => {
  return {