[RFC] Bubble 2.0

[anxLiang]

Summary

Bubble 组件 2.0 版本

Motivation

升级 Bubble 组件，支持更多槽位、动画效果。

• 支持淡入渐进式动画，支持动画回调
• 扩充槽位，content 四周 + content 内 footer

Detailed Design

type BubbleContentType = React.ReactNode | AnyObject | string | number;

export type BubbleSlotType =
  | 'content'
  | 'header'
  | 'footer-inner'
  | 'footer-outer'
  | 'sider-major'
  | 'sider-minor';

export interface BubbleAnimationOption {
  /**
   * @description 动画效果类型，打字机，渐入
   */
  effect: 'typing' | 'fade-in';
  /**
   * @description 内容步进单位，数组格式为随机区间
   */
  step?: number | [number, number];
  /**
   * @description 动画触发间隔
   */
  interval?: number;
  /**
   * @description 打字机效果下步进UI
   */
  suffix?: React.ReactNode;
}

export type BubbleSlot<ContentType> = React.ReactNode | ((content: ContentType) => React.ReactNode);

export interface BubbleRef {
  nativeElement: HTMLElement;
}

export interface BubbleProps<ContentType extends BubbleContentType = string>
  extends Omit<
    React.HTMLAttributes<HTMLDivElement>,
    'content' | 'onAnimationStart' | 'onAnimationEnd'
  > {
  prefixCls?: string;
  rootStyle?: React.CSSProperties;
  styles?: Partial<Record<BubbleSlotType | 'root', React.CSSProperties>>;
  rootClassName?: string;
  classNames?: Partial<Record<BubbleSlotType | 'root', string>>;
  placement?: 'start' | 'end';
  loading?: boolean;
  loadingRender?: () => React.ReactNode;
  content: ContentType;
  contentRender?: (content: ContentType) => React.ReactNode;
  /**
   * @description 动画配置，仅在 content 为 string 或 contentRender 返回 string 时生效
   */
  animation?: boolean | BubbleAnimationOption;
  /**
   * @description 气泡变体，filled-填充，无边框，outlined-填充，有边框，shadow-填充，无边框，有阴影
   * @default filled
   */
  variant?: 'filled' | 'outlined' | 'shadow';
  /**
   * @description 气泡形状，default-圆角方形，round-胶囊，*-puff-气泡（左上或右上方角）
   * @default default
   */
  shape?: 'default' | 'round' | 'left-puff' | 'right-puff';
  /**
   * @description bubble 扩展槽位渲染配置
   */
  components?: {
    header?: BubbleSlot<ContentType>;
    footer?: {
      inner?: BubbleSlot<ContentType>;
      outer?: BubbleSlot<ContentType>;
    };
    sider?: {
      major?: BubbleSlot<ContentType>;
      minor?: BubbleSlot<ContentType>;
    };
  };
  /**
   * @description 动画开始时回调
   */
  onAnimationStart?: () => void;
  /**
   * @description 动画执行时回调
   * @param rendererContent 已渲染内容
   * @param currentContent 当前全量 content
   */
  onAnimation?: (rendererContent: string, currentContent: string) => void;
  /**
   * @description 动画结束回调
   */
  onAnimationEnd?: (content: ContentType) => void;
}

Example Usage

...

Hints

...

[afc163]

onAnimation 和 onAnimationStart 是同个时机触发的么？

[anxLiang]

可以同时触发，也可以差开一个执行间隔。目前实现的是同时触发。

[afc163]

同时触发的话感觉无需保留两个。实现 onAnimate 和 onAnimated 即可。

[anxLiang]

这样的话，我倾向于保留三个 api，错开触发的写法。这样比较贴近于原生写法，回调生命周期也比较清晰。

[afc163]

如无必要，勿增实体。如果两个就能满足需求，我建议先留两个。

[afc163]

loadingRender 和 contentRender 疑似和 slotsRender 是同个功能？

[anxLiang]

slotsRender 聚焦于槽位拓展吧。contentRender 针对主体内容区，使用比较高频，所以保留放在顶层 api。
loading 态保留了 1.0 的逻辑，会取代整个 Bubble，所以也还是保留成顶层的 api。

[afc163]

slots 是 vue 的表达，xxxRender 是 react 的表达方式。slotsRender 有点杂糅了。

建议两者留其一即可，要么叫 slots，要么叫 components（参考 antd Table 的命名方式）。

[anxLiang]

好