@tsingroc/tsingroc-components 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/components/IndicatorLight.tsx

@@ -1,106 +0,0 @@
-import { createStyles, keyframes } from "antd-style";
-import type { HTMLAttributes } from "react";
-
-export interface IndicatorLightProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * 指示灯的直径。
-   * @default token.sizeXL
-   */
-  size?: number | string;
-  /**
-   * 指示的状态。设置了这一项时，{@linkcode onColor}、{@linkcode mode} 和 {@linkcode period} 会被忽略。
-   *
-   * `"healthy"` 表示常绿，`"attention"` 表示绿色闪烁，
-   * `"danger"` 表示常红，`"emergency"` 表示红色闪烁，
-   * `"off"` 表示关闭。
-   * 具体色值取自 design token。
-   */
-  status?: "healthy" | "attention" | "danger" | "emergency" | "off";
-  /**
-   * 灯亮时的颜色。
-   * @default token.colorError
-   */
-  onColor?: string;
-  /**
-   * 灯灭时的颜色。
-   * @default token.colorFill
-   */
-  offColor?: string;
-  /**
-   * 灯的状态。`"on"` 表示常亮，`"flash"` 表示闪烁，`"off"` 表示常暗。
-   * @default "on"
-   */
-  mode?: "on" | "flash" | "off";
-  /**
-   * 闪烁周期（一亮一暗）的时长，以秒为单位。不可为 `0`、`NaN` 或 `Infinity`。
-   * @default 1
-   */
-  period?: number;
-}
-
-const ANIMATION_MAP: Record<IndicatorLightProps["mode"] & {}, string> = {
-  on: "linear(0, 0) paused",
-  flash: "cubic-bezier(0.9, 0, 0.1, 1) infinite alternate",
-  off: "linear(1, 1) paused",
-};
-
-const useStyles = createStyles(({ token, css }, props: IndicatorLightProps) => {
-  const size = props.size ?? token.sizeXL;
-  const sizeCss = typeof size === "number" ? `${size}px` : size;
-  const colorMap: Record<
-    IndicatorLightProps["status"] & {},
-    { onColor: string; mode: "on" | "flash" | "off" }
-  > = {
-    healthy: { onColor: token.colorSuccess, mode: "on" },
-    attention: { onColor: token.colorSuccess, mode: "flash" },
-    danger: { onColor: token.colorError, mode: "on" },
-    emergency: { onColor: token.colorError, mode: "flash" },
-    off: { onColor: token.colorError, mode: "off" },
-  };
-  const { onColor = token.colorError, mode = "on" } = props.status
-    ? colorMap[props.status]
-    : props;
-  const offColor = props.offColor ?? token.colorFillSecondary;
-  const halfPeriod = (props.period ?? 1) / 2;
-  const flash = keyframes`
-    from {
-      background-color: ${onColor};
-      box-shadow: 0 0 6px 2px ${onColor};
-    }
-    to {
-      background-color: ${offColor};
-    }
-  `;
-  return {
-    light: css`
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      animation: ${flash} ${halfPeriod}s ${ANIMATION_MAP[mode]};
-    `,
-    lightBorder: css`
-      height: ${sizeCss};
-      aspect-ratio: 1;
-      border: ${token.colorBorder} 2px solid;
-      border-radius: 50%;
-    `,
-  };
-});
-
-/**
- * 一个指示灯。
- *
- * 文档内未列出的属性会被传递给组件顶层的 `div` 元素。
- */
-function IndicatorLight(props: IndicatorLightProps) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { size, status, onColor, offColor, mode, period, ...rest } = props;
-  const { cx, styles } = useStyles(props);
-  return (
-    <div {...rest} className={cx(styles.lightBorder, rest.className)}>
-      <div className={cx(styles.light)}></div>
-    </div>
-  );
-}
-
-export default IndicatorLight;

package/src/components/LeftAlignedECharts.tsx

@@ -1,190 +0,0 @@
-import type { ECharts } from "echarts/core";
-import {
-  createContext,
-  use,
-  useEffect,
-  useEffectEvent,
-  useId,
-  useImperativeHandle,
-  useRef,
-  useState,
-  type ComponentType,
-  type ReactNode,
-} from "react";
-import type { Element, ElementProps, Group } from "zrender";
-
-import { debugAssert } from "../utils/debug";
-import type { withAutoResize } from "./AutoResizedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
-import ConnectedECharts, { type withConnector } from "./ConnectedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
-import type { EChartsHOCType, EChartsProps, EChartsRef } from "./ECharts";
-
-interface LeftAlignContext {
-  maxLabelsWidth: number;
-  register: (id: string, size: number) => void;
-  unregister: (id: string) => void;
-}
-
-const LeftAlignContext = createContext<LeftAlignContext | null>(null);
-
-/**
- * 为 {@linkcode LeftAlignedECharts} 和
- * {@linkcode withLeftAlign | withLeftAlign(ECharts)}
- * 提供对齐上下文。
- */
-export function EChartsLeftAligner({ children }: { children: ReactNode }) {
-  const [labelsWidthMap, setLabelsWidthMap] = useState(
-    new Map<string, number>(),
-  );
-  return (
-    <LeftAlignContext.Provider
-      value={{
-        maxLabelsWidth: Math.max(...labelsWidthMap.values()),
-        register: (id, size) =>
-          setLabelsWidthMap((map) => new Map(map).set(id, size)),
-        unregister: (id) =>
-          setLabelsWidthMap(
-            (map) => ((map = new Map(map)), map.delete(id), map),
-          ),
-      }}
-    >
-      {children}
-    </LeftAlignContext.Provider>
-  );
-}
-
-function findLabelsGroup<T extends ElementProps>(
-  element: Element<T>,
-): Group | undefined {
-  if (element.isGroup) {
-    const group = element as Group;
-    if (group.children().every((el) => el.type === "text")) {
-      return group;
-    } else {
-      for (const child of group.children()) {
-        const found = findLabelsGroup(child);
-        if (found) {
-          return found;
-        }
-      }
-    }
-  }
-}
-
-function getLabelsWidth(instance: ECharts) {
-  const yAxis = instance
-    .getZr()
-    .storage.getRoots()
-    .find(
-      (it: unknown) =>
-        (it as { __ecComponentInfo: { mainType: string } }).__ecComponentInfo
-          .mainType === "yAxis",
-    );
-  if (!yAxis) {
-    return undefined;
-  }
-  const labelsGroup = findLabelsGroup(yAxis as unknown as Element);
-  if (!labelsGroup) {
-    return undefined;
-  }
-  // 不知道为什么，直接在 labelsGroup 上使用 getBoundingRect 测量到的宽度有时是错误的
-  const childrenWidths = labelsGroup
-    .children()
-    .map((it) => it.getBoundingRect().width);
-  return Math.max(...childrenWidths);
-}
-
-/**
- * 为 ECharts 添加与其它 ECharts 纵轴左对齐的能力。
- *
- * 使用该组件时必须满足下列限制：
- *
- * - 必须包裹在 {@linkcode EChartsLeftAligner} 内，否则会立即抛出错误。
- * - 图像所在的容器本身必须已经左对齐。
- * - 图像中必须包含且仅包含一个 grid 坐标系。
- *   如果图像不包含 grid，那么该组件不会产生任何效果。
- *   如果图像包含多个 grid，那么该组件只会对齐其中一个 grid，且无法保证是哪一个。
- * - grid 必须有且仅有一个纵轴，并且在左侧，不满足这一条件的影响同上一条。
- * - grid 坐标系必须被设置为 `{ containLabel: true }` 或者
- *   `{ outerBoundsMode: "same", outerBoundsContain: "axisLabel" }`。
- *   这也是组件库内的 `echarts.grid()` 的默认设置。
- *   如果你不这么设置，而是使用 `left` 和 `bottom` 来手动对齐轴线，那就没必要使用这个组件，强行使用可能导致布局异常。
- * - grid 坐标系的 `left` 属性会被该组件覆盖，最终效果总是会使得纵轴标签最宽的坐标系的标签紧贴容器左边缘（即 `left === 0`）。
- * - 左对齐时原本的过渡动画会被打断。
- */
-export const withLeftAlign: EChartsHOCType =
-  <Props extends EChartsProps>(ECharts: ComponentType<Props>) =>
-  (props: Props) => {
-    "use memo";
-    const { ref: outerRef, option, onSetOption, ...rest } = props;
-
-    const ref = useRef<EChartsRef>(null);
-    useImperativeHandle(outerRef, () => {
-      debugAssert(ref.current, "ref should be connected");
-      return ref.current;
-    }, []);
-
-    const context = use(LeftAlignContext);
-    if (!context) {
-      throw new Error(
-        "LeftAlignedECharts or withLeftAlign(ECharts) must be wrapped inside an EChartsLeftAligner!",
-      );
-    }
-    const { maxLabelsWidth, register, unregister } = context;
-    const id = useId();
-    const [labelsWidth, setLabelsWidth] = useState<number | undefined>();
-
-    // 布局变化时，测量并报告最新的 labelsWidth 值
-    const reportLayoutChange = useEffectEvent((instance: ECharts) => {
-      const labelsWidth = getLabelsWidth(instance);
-      if (labelsWidth !== undefined) {
-        setLabelsWidth(labelsWidth);
-        register(id, labelsWidth);
-      }
-    });
-
-    // 卸载时，注销自身
-    const dispose = useEffectEvent(() => unregister(id));
-    useEffect(() => dispose, []);
-
-    return (
-      // @ts-expect-error 见 ./AutoResizedECharts.tsx
-      <ECharts
-        ref={ref}
-        option={
-          option === undefined ||
-          option.grid === undefined ||
-          labelsWidth === undefined ||
-          Number.isNaN(labelsWidth) ||
-          labelsWidth >= maxLabelsWidth
-            ? option
-            : {
-                ...option,
-                grid: (Array.isArray(option.grid)
-                  ? option.grid
-                  : [option.grid]
-                ).map((it) => ({
-                  ...it,
-                  left: maxLabelsWidth - labelsWidth,
-                })),
-              }
-        }
-        onSetOption={(instance) => {
-          reportLayoutChange(instance);
-          return onSetOption?.(instance);
-        }}
-        {...rest}
-      />
-    );
-  };
-
-/**
- * 预置了纵轴左对齐、联动和自适应容器尺寸能力的 ECharts 组件。
- *
- * @see {@linkcode withLeftAlign}
- * @see {@linkcode withConnector}
- * @see {@linkcode withAutoResize}
- */
-const LeftAlignedECharts = Object.assign(withLeftAlign(ConnectedECharts), {
-  displayName: "ConnectedECharts",
-});
-export default LeftAlignedECharts;