@tsingroc/tsingroc-components 5.0.0-alpha.11 → 5.0.0-alpha.13

package/dist/components/Calendar.d.ts

@@ -0,0 +1,50 @@
+import { type Dayjs } from "dayjs";
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLTableElement>, "onChange"> {
+    /**
+     * 当前显示的月份。
+     *
+     * 注意：传入的月份的时区会决定整个日历所用的时区。
+     */
+    month: Dayjs;
+    /** 当前选中的日期。*/
+    selected?: Dayjs;
+    /** 选中日期更改时的回调函数。*/
+    onChange?: (selected: Dayjs) => void;
+    /**
+     * 无论一个月需要占用多少周，都总是显示 6 周。
+     * @default false
+     */
+    alwaysSixWeeks?: boolean;
+    /**
+     * 淡化第一周和最后几周不属于本月的日期。
+     * @default true
+     */
+    fadeAdjacentDays?: boolean;
+    /**
+     * 表头单元格的属性，详见 [MDN][1]。可以通过设置这里的 `children` 来自定义表头内容。
+     *
+     * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+     */
+    thProps?: (
+    /**
+     * 范围 0-6，表示一周的第几天
+     *
+     * 注意：这个数字的含义会受到地区设置的影响！请使用 `dayjs.weekdays()` 获取每一天的名称。
+     */
+    weekday: number) => React.HTMLAttributes<HTMLTableCellElement>;
+    /**
+     * 日期单元格的属性，详见 [MDN][1]。可以通过设置这里的 `children` 来自定义单元格内容。
+     *
+     * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+     */
+    tdProps?: (date: Dayjs, selected: boolean) => React.HTMLAttributes<HTMLTableCellElement>;
+}
+/**
+ * 一个日历组件。
+ *
+ * 除了文档列出的属性之外，也接受所有 [HTML Table 元素][1] 接受的属性。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ */
+declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/components/Calendar.js

@@ -0,0 +1,130 @@
+import { createStyles } from "antd-style";
+import dayjs from "dayjs";
+import localeData from "dayjs/plugin/localeData";
+import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+dayjs.extend(localeData);
+const useStyles = createStyles(({
+  token,
+  css,
+  cx
+}) => {
+  const calendarFade = css`
+    color: ${token.colorTextDisabled};
+  `;
+  const calendarSelected = css`
+    background: ${token.colorPrimaryBg};
+    color: ${token.colorPrimary};
+  `;
+  const calendar = css`
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+    font-family: ${token.fontFamily};
+    font-size: ${token.fontSize}px;
+    line-height: ${token.lineHeight};
+    user-select: none;
+
+    > thead > tr > th {
+      box-sizing: border-box;
+      height: ${token.fontSize * token.lineHeight + token.paddingXXS * 2}px;
+      padding: ${token.paddingXXS}px;
+      font-weight: normal;
+    }
+
+    > tbody > tr > td {
+      box-sizing: border-box;
+      width: calc(100% / 7);
+      border: 1px solid ${token.colorBorder};
+      padding: ${token.paddingXXS}px;
+      vertical-align: bottom;
+      transition:
+        background ease ${token.motionDurationFast},
+        color ease ${token.motionDurationFast};
+
+      &:hover:not(.${cx(calendarSelected)}) {
+        background: ${token.colorBgTextHover};
+      }
+    }
+  `;
+  return {
+    calendar,
+    calendarFade,
+    calendarSelected
+  };
+});
+
+/**
+ * 一个日历组件。
+ *
+ * 除了文档列出的属性之外，也接受所有 [HTML Table 元素][1] 接受的属性。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ */
+function Calendar(props) {
+  const {
+    month,
+    selected: propsSelected,
+    onChange,
+    alwaysSixWeeks,
+    fadeAdjacentDays = true,
+    thProps,
+    tdProps,
+    className,
+    ...rest
+  } = props;
+  const {
+    cx,
+    styles
+  } = useStyles();
+  const [selected, setSelected] = propsSelected === undefined ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useState() : [propsSelected, () => {}];
+  const monthStart = month.startOf("month");
+  const calendarStart = monthStart.startOf("week");
+  const monthEnd = month.endOf("month");
+  const minWeeks = Math.ceil(monthEnd.diff(calendarStart, "week", true));
+  const weekdays = [...dayjs.weekdaysShort()];
+  // 按地区设置调整一周的第一天
+  weekdays.splice(0, 0, ...weekdays.splice(calendarStart.day()));
+  return /*#__PURE__*/_jsxs("table", {
+    ...rest,
+    className: cx(styles.calendar, className),
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: weekdays.map((name, weekday) => /*#__PURE__*/_jsx("th", {
+          children: name,
+          ...thProps?.(weekday)
+        }, weekday))
+      })
+    }), /*#__PURE__*/_jsx("tbody", {
+      children: Array.from({
+        length: alwaysSixWeeks ? 6 : minWeeks
+      }, (_, week) => /*#__PURE__*/_jsx("tr", {
+        children: Array(7).fill(null).map((_, weekday) => {
+          const date = calendarStart.add(week * 7 + weekday, "day");
+          const fade = fadeAdjacentDays && date.month() != monthStart.month();
+          const isSelected = Math.floor(selected?.diff(date, "day", true) ?? NaN) === 0;
+          const {
+            className,
+            ...props
+          } = tdProps?.(date, false) ?? {};
+          return /*#__PURE__*/_jsx("td", {
+            children: date.date(),
+            onClick: () => {
+              setSelected(date);
+              onChange?.(date);
+            },
+            ...props,
+            className: cx({
+              [styles.calendarFade]: fade,
+              [styles.calendarSelected]: isSelected
+            }, className)
+          }, weekday);
+        })
+      }, week))
+    })]
+  });
+}
+export default Calendar;

package/dist/components/CircularProgress.d.ts

@@ -0,0 +1,21 @@
+import { type ProgressProps } from "antd";
+import type { ProgressGradient } from "antd/es/progress/progress";
+export interface CircularProgressProps extends ProgressProps, React.RefAttributes<HTMLDivElement> {
+    /** 进度百分比，范围是 0-100。*/
+    progress?: number;
+    /**
+     * 进度条已完成部分的颜色。
+     * @default "#34A9D4"
+     */
+    color?: string | string[] | ProgressGradient;
+}
+/**
+ * 环形进度条。
+ *
+ * 本组件基于 [Ant Design 的 `Progress`][1] 自定义而来。
+ * 因此，除了文档中列出的属性以外，也兼容 `Progress` 的所有属性。
+ *
+ * [1]: https://ant-design.antgroup.com/components/progress-cn
+ */
+declare function CircularProgress(props: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+export default CircularProgress;

package/dist/components/CircularProgress.js

@@ -0,0 +1,34 @@
+import { c as _c } from "react/compiler-runtime";
+import { Progress } from "antd";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 环形进度条。
+ *
+ * 本组件基于 [Ant Design 的 `Progress`][1] 自定义而来。
+ * 因此，除了文档中列出的属性以外，也兼容 `Progress` 的所有属性。
+ *
+ * [1]: https://ant-design.antgroup.com/components/progress-cn
+ */
+function CircularProgress(props) {
+  const $ = _c(3);
+  const t0 = props.color ?? "#34A9D4";
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = /*#__PURE__*/_jsx(Progress, {
+      type: "circle",
+      percent: props.progress,
+      strokeLinecap: "butt",
+      strokeWidth: 9,
+      strokeColor: t0,
+      trailColor: "#22405A",
+      ...props
+    });
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+export default CircularProgress;

package/dist/components/ConnectedECharts.d.ts

@@ -0,0 +1,31 @@
+import * as echarts from "echarts/core";
+import { type ReactNode } from "react";
+import type { EChartsHOCType, EChartsProps } from "./ECharts";
+/**
+ * 为 {@linkcode ConnectedECharts}/{@linkcode withConnector | withConnector(ECharts)}
+ * 提供联动上下文，只有同一个上下文内的 ECharts 会联动。
+ */
+export declare function EChartsConnector({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 为 ECharts 增加联动能力。所有添加了该能力的 ECharts 都会相互联动。
+ *
+ * 可以使用 {@linkcode EChartsConnector} 将同一个页面上的 ECharts
+ * 划分为多个组，不同组的 ECharts 不会联动。也可以使用 `group` 属性手动指定联动组。
+ */
+export declare const withConnector: EChartsHOCType<{
+    group?: string;
+}>;
+/**
+ * 预置了联动和自适应容器尺寸能力的 ECharts。
+ *
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+declare const ConnectedECharts: import("./ECharts").EChartsComponentType<EChartsProps<echarts.EChartsCoreOption> & {
+    group?: string;
+}> & {
+    displayName: string;
+};
+export default ConnectedECharts;

package/dist/components/ConnectedECharts.js

@@ -0,0 +1,100 @@
+import { c as _c } from "react/compiler-runtime";
+import * as echarts from "echarts/core";
+import { createContext, use, useId } from "react";
+import AutoResizedECharts from "./AutoResizedECharts"; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { jsx as _jsx } from "react/jsx-runtime";
+const EChartsConnectorContext = /*#__PURE__*/createContext("default");
+
+/**
+ * 为 {@linkcode ConnectedECharts}/{@linkcode withConnector | withConnector(ECharts)}
+ * 提供联动上下文，只有同一个上下文内的 ECharts 会联动。
+ */
+export function EChartsConnector(t0) {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const group = useId();
+  let t1;
+  if ($[0] !== children || $[1] !== group) {
+    t1 = /*#__PURE__*/_jsx(EChartsConnectorContext.Provider, {
+      value: group,
+      children: children
+    });
+    $[0] = children;
+    $[1] = group;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+/**
+ * 为 ECharts 增加联动能力。所有添加了该能力的 ECharts 都会相互联动。
+ *
+ * 可以使用 {@linkcode EChartsConnector} 将同一个页面上的 ECharts
+ * 划分为多个组，不同组的 ECharts 不会联动。也可以使用 `group` 属性手动指定联动组。
+ */
+export const withConnector = ECharts => props => {
+  "use memo";
+
+  const $ = _c(10);
+  const contextGroup = use(EChartsConnectorContext);
+  let onInit;
+  let rest;
+  let t0;
+  if ($[0] !== props) {
+    ({
+      onInit,
+      group: t0,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = onInit;
+    $[2] = rest;
+    $[3] = t0;
+  } else {
+    onInit = $[1];
+    rest = $[2];
+    t0 = $[3];
+  }
+  const group = t0 === undefined ? contextGroup : t0;
+  let t1;
+  if ($[4] !== group || $[5] !== onInit) {
+    t1 = instance => {
+      instance.group = group;
+      echarts.connect(group);
+      return onInit?.(instance);
+    };
+    $[4] = group;
+    $[5] = onInit;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== rest || $[8] !== t1) {
+    t2 = /*#__PURE__*/_jsx(ECharts, {
+      onInit: t1,
+      ...rest
+    });
+    $[7] = rest;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
+};
+
+/**
+ * 预置了联动和自适应容器尺寸能力的 ECharts。
+ *
+ * @see {@linkcode withConnector}
+ * @see {@linkcode withAutoResize}
+ */
+const ConnectedECharts = Object.assign(withConnector(AutoResizedECharts), {
+  displayName: "ConnectedECharts"
+});
+export default ConnectedECharts;

package/dist/components/ECharts.d.ts

@@ -0,0 +1,57 @@
+import type { EChartsOption } from "echarts";
+import type { EChartsCoreOption, EChartsInitOpts, ECharts as EChartsInstance, SetOptionOpts } from "echarts/core";
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref } from "react";
+export interface EChartsProps<Option extends EChartsCoreOption = EChartsOption> extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 用于命令式操作 ECharts 容器和实例的 ref。
+     *
+     * 注意 effect 首次执行时 ECharts 实例尚未被创建。如果需要在 ECharts
+     * 实例上添加事件监听器或者执行其它的初始化操作，请使用 {@linkcode onInit}。
+     */
+    ref?: Ref<EChartsRef>;
+    /** 主题。 @default "default" */
+    theme?: string | Record<string, any> | null;
+    /**
+     * 初始化实例时的选项。
+     *
+     * 修改该属性会导致 ECharts 实例被销毁并重新创建，因此建议不要频繁修改该属性，并且推荐使用
+     * React Compiler 或者 useMemo 将该属性记忆化。
+     */
+    initOpts?: EChartsInitOpts;
+    /** 配置对象。 */
+    option?: Option;
+    /**
+     * 更新 {@linkcode option} 时的选项。其中的 {@linkcode SetOptionOpts.silent | silent}
+     * 选项也会在更新 {@linkcode theme} 时使用。
+     *
+     * 注意该属性变化后只会从下一次 option 更新开始生效。
+     */
+    setOptionOpts?: SetOptionOpts;
+    /**
+     * 初始化实例（`echarts.init()`）后执行的回调。如果返回函数，则会在销毁实例（`instance.dispose()`）之前调用。
+     *
+     * 推荐在这个回调中为 ECharts 实例添加事件监听器。
+     */
+    onInit?: (instance: EChartsInstance) => void | undefined | (() => void);
+    /** option 更新（`instance.setOption()`）后执行的回调。注意如果设置了 {@linkcode lazyUpdate}，那么这个回调大概率没什么用。 */
+    onSetOption?: (instance: EChartsInstance) => void;
+}
+export interface EChartsRef {
+    /** 容纳 ECharts 画布的 div 容器。 */
+    container: HTMLDivElement;
+    /** ECharts 实例。注意该实例在 ref 连接时尚未创建，如果要在实例创建时执行代码请使用 {@linkcode EChartsProps.onInit | onInit} 属性。 */
+    instance?: EChartsInstance;
+}
+/** 用于 HOC 的返回值。 */
+export type EChartsComponentType<Extra> = <Option extends EChartsCoreOption = EChartsOption>(props: EChartsProps<Option> & Extra) => ReactNode;
+/** 用于方便定义 HOC。 */
+export interface EChartsHOCType<Extra = {}> {
+    <PrevExtra>(ECharts: EChartsComponentType<PrevExtra>): EChartsComponentType<PrevExtra & Extra>;
+    <Props extends EChartsProps>(ECharts: (props: Props) => ReactNode): (props: Props & Extra) => ReactNode;
+    <Props extends EChartsProps>(ECharts: ComponentType<Props>): ComponentType<Props & Extra>;
+}
+/**
+ * ECharts 的 React 封装，支持 `theme`、`opts` 等初始化参数和 `option` 配置的响应式更新。
+ */
+declare const ECharts: EChartsComponentType<{}>;
+export default ECharts;

package/dist/components/ECharts.js

@@ -0,0 +1,255 @@
+import { c as _c } from "react/compiler-runtime";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as echarts from "echarts/core";
+import { useEffect, useEffectEvent, useImperativeHandle, useRef } from "react";
+import { debugAssert } from "../utils/debug";
+
+/** 用于 HOC 的返回值。 */
+
+/** 用于方便定义 HOC。 */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ECharts 的 React 封装，支持 `theme`、`opts` 等初始化参数和 `option` 配置的响应式更新。
+ */
+const ECharts = props => {
+  const $ = _c(39);
+  let onInit;
+  let onSetOption;
+  let option;
+  let opts;
+  let outerRef;
+  let rest;
+  let setOptionOpts;
+  let theme;
+  if ($[0] !== props) {
+    ({
+      ref: outerRef,
+      theme,
+      initOpts: opts,
+      option,
+      setOptionOpts,
+      onInit,
+      onSetOption,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = onInit;
+    $[2] = onSetOption;
+    $[3] = option;
+    $[4] = opts;
+    $[5] = outerRef;
+    $[6] = rest;
+    $[7] = setOptionOpts;
+    $[8] = theme;
+  } else {
+    onInit = $[1];
+    onSetOption = $[2];
+    option = $[3];
+    opts = $[4];
+    outerRef = $[5];
+    rest = $[6];
+    setOptionOpts = $[7];
+    theme = $[8];
+  }
+  const ref = useRef(null);
+  useForwardEChartsRef(outerRef, ref);
+  let t0;
+  if ($[9] !== setOptionOpts?.silent) {
+    t0 = theme_0 => {
+      debugAssert(ref.current, "effect should run after ref is connected");
+      ref.current.instance?.setTheme(theme_0 ?? "default", {
+        silent: setOptionOpts?.silent
+      });
+    };
+    $[9] = setOptionOpts?.silent;
+    $[10] = t0;
+  } else {
+    t0 = $[10];
+  }
+  const setTheme = useEffectEvent(t0);
+  let t1;
+  if ($[11] !== setTheme || $[12] !== theme) {
+    t1 = () => setTheme(theme);
+    $[11] = setTheme;
+    $[12] = theme;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  let t2;
+  if ($[14] !== theme) {
+    t2 = [theme];
+    $[14] = theme;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[16] !== onSetOption || $[17] !== setOptionOpts) {
+    t3 = (option_0, t4) => {
+      const isInit = t4 === undefined ? false : t4;
+      debugAssert(ref.current, "effect should run after ref is connected");
+      const {
+        instance
+      } = ref.current;
+      if (instance) {
+        instance.setOption(option_0, {
+          ...setOptionOpts,
+          lazyUpdate: !isInit && setOptionOpts?.lazyUpdate
+        });
+        onSetOption?.(instance);
+      }
+    };
+    $[16] = onSetOption;
+    $[17] = setOptionOpts;
+    $[18] = t3;
+  } else {
+    t3 = $[18];
+  }
+  const setOption = useEffectEvent(t3);
+  let t4;
+  if ($[19] !== option || $[20] !== setOption) {
+    t4 = () => option && setOption(option);
+    $[19] = option;
+    $[20] = setOption;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  let t5;
+  if ($[22] !== option) {
+    t5 = [option];
+    $[22] = option;
+    $[23] = t5;
+  } else {
+    t5 = $[23];
+  }
+  useEffect(t4, t5);
+  const onDisposeRef = useRef(null);
+  let t6;
+  if ($[24] !== onInit || $[25] !== option || $[26] !== setOption || $[27] !== theme) {
+    t6 = opts_0 => {
+      debugAssert(ref.current, "effect should run after ref is connected");
+      const {
+        container,
+        instance: existingInstance
+      } = ref.current;
+      if (existingInstance) {
+        return;
+      }
+      const instance_0 = echarts.init(container, theme, opts_0);
+      ref.current = {
+        container,
+        instance: instance_0
+      };
+      onDisposeRef.current = onInit?.(instance_0) ?? null;
+      if (option) {
+        setOption(option, true);
+      }
+    };
+    $[24] = onInit;
+    $[25] = option;
+    $[26] = setOption;
+    $[27] = theme;
+    $[28] = t6;
+  } else {
+    t6 = $[28];
+  }
+  const init = useEffectEvent(t6);
+  let t7;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => {
+      if (ref.current) {
+        const {
+          container: container_0,
+          instance: instance_1
+        } = ref.current;
+        if (instance_1) {
+          onDisposeRef.current?.();
+          instance_1.dispose();
+          ref.current = {
+            container: container_0
+          };
+        }
+      }
+    };
+    $[29] = t7;
+  } else {
+    t7 = $[29];
+  }
+  const dispose = useEffectEvent(t7);
+  let t8;
+  if ($[30] !== dispose || $[31] !== init || $[32] !== opts) {
+    t8 = () => {
+      const animationFrame = requestAnimationFrame(() => init(opts));
+      return () => {
+        cancelAnimationFrame(animationFrame);
+        dispose();
+      };
+    };
+    $[30] = dispose;
+    $[31] = init;
+    $[32] = opts;
+    $[33] = t8;
+  } else {
+    t8 = $[33];
+  }
+  let t9;
+  if ($[34] !== opts) {
+    t9 = [opts];
+    $[34] = opts;
+    $[35] = t9;
+  } else {
+    t9 = $[35];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = container_1 => {
+      if (container_1 === null) {
+        ref.current = null;
+      } else {
+        ref.current = {
+          container: container_1
+        };
+      }
+    };
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  let t11;
+  if ($[37] !== rest) {
+    t11 = /*#__PURE__*/_jsx("div", {
+      ref: t10,
+      ...rest
+    });
+    $[37] = rest;
+    $[38] = t11;
+  } else {
+    t11 = $[38];
+  }
+  return t11;
+};
+export default ECharts;
+
+// React Compiler 无法处理 getter
+function useForwardEChartsRef(outerRef, innerRef) {
+  useImperativeHandle(outerRef, () => {
+    debugAssert(innerRef.current, "ref should be connected");
+    return {
+      get container() {
+        debugAssert(innerRef.current, "ref should be connected");
+        return innerRef.current.container;
+      },
+      get instance() {
+        debugAssert(innerRef.current, "ref should be connected");
+        return innerRef.current.instance;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}