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

package/dist/components/TsingrocDatePicker.js

@@ -0,0 +1,64 @@
+import { Button, DatePicker, Space } from "antd";
+import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 支持快速跳转的日/周/月/年选择器。
+ *
+ * 除了文档中列出的属性外，该组件会将其它属性传递给 [Ant Design 的 `Space.Compact` 组件][1]。
+ *
+ * [1]: https://ant-design.antgroup.com/components/space-cn#spacecompact
+ */
+function TsingrocDatePicker(props) {
+  const {
+    value,
+    onChange: propsOnChange,
+    dataType = "month",
+    disabled,
+    buttonProps,
+    pickerProps,
+    ...rest
+  } = props;
+  const [dateValue, setDateValue] = value === undefined ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useState(undefined) : [value, () => {}];
+  /**
+   * 快速增减一定时间，如果当前未选择日期则无效。
+   * @param delta 增减的时间量，按传入的时间单位 `dataType` 计算
+   */
+  const quickSwitch = delta => {
+    if (!dateValue) return;
+    const temp = dateValue.add(delta, dataType);
+    setDateValue(temp);
+    propsOnChange?.(temp);
+  };
+  const onChange = value => {
+    setDateValue(value);
+    propsOnChange?.(value);
+  };
+  return /*#__PURE__*/_jsxs(Space.Compact, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: () => quickSwitch(-1),
+      icon: /*#__PURE__*/_jsx(LeftOutlined, {}),
+      disabled: disabled,
+      className: props.className,
+      ...buttonProps
+    }), /*#__PURE__*/_jsx(DatePicker, {
+      picker: dataType == "day" ? "date" : dataType,
+      value: dateValue,
+      onChange: onChange,
+      disabled: disabled,
+      className: props.className,
+      ...pickerProps
+    }), /*#__PURE__*/_jsx(Button
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-conversion
+    , {
+      onClick: () => quickSwitch(+1),
+      icon: /*#__PURE__*/_jsx(RightOutlined, {}),
+      disabled: disabled,
+      ...buttonProps
+    })]
+  });
+}
+export default TsingrocDatePicker;

package/dist/components/TsingrocTheme.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface TsingrocThemeProps {
+    /** 是否开启黑暗模式。*/
+    dark?: boolean;
+    /** 是否开启紧凑模式。*/
+    compact?: boolean;
+    /** 主题覆盖的页面内容。*/
+    children: ReactNode;
+}
+/**
+ * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。
+ * 请将该组件放置在整个 React 项目的顶层。
+ */
+declare function TsingrocTheme(props: TsingrocThemeProps): import("react/jsx-runtime").JSX.Element;
+export default TsingrocTheme;

package/dist/components/TsingrocTheme.js

@@ -0,0 +1,72 @@
+import { c as _c } from "react/compiler-runtime";
+import { ConfigProvider, theme } from "antd";
+import antdZhCN from "antd/es/locale/zh_CN";
+import dayjs from "dayjs";
+import dayjsZhCN from "dayjs/locale/zh-cn";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 清鹏智能的公共 Ant Design 主题，会影响内部的所有 Ant Design 组件的样式。
+ * 请将该组件放置在整个 React 项目的顶层。
+ */
+function TsingrocTheme(props) {
+  const $ = _c(11);
+  dayjs.locale(dayjsZhCN);
+  let algorithm;
+  if ($[0] !== props.compact || $[1] !== props.dark) {
+    algorithm = [];
+    if (props.compact) {
+      algorithm.push(theme.compactAlgorithm);
+    }
+    if (props.dark) {
+      algorithm.push(theme.darkAlgorithm);
+    }
+    $[0] = props.compact;
+    $[1] = props.dark;
+    $[2] = algorithm;
+  } else {
+    algorithm = $[2];
+  }
+  let t0;
+  if ($[3] !== props.dark) {
+    t0 = props.dark ? {
+      colorPrimary: "#9b5efd",
+      colorInfo: "#9b5efd",
+      colorSuccess: "#1ac489"
+    } : {
+      colorPrimary: "#5200d7",
+      colorInfo: "#5200d7",
+      colorSuccess: "#1ac489"
+    };
+    $[3] = props.dark;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== algorithm || $[6] !== t0) {
+    t1 = {
+      algorithm,
+      token: t0
+    };
+    $[5] = algorithm;
+    $[6] = t0;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== props.children || $[9] !== t1) {
+    t2 = /*#__PURE__*/_jsx(ConfigProvider, {
+      locale: antdZhCN,
+      theme: t1,
+      children: props.children
+    });
+    $[8] = props.children;
+    $[9] = t1;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  return t2;
+}
+export default TsingrocTheme;

package/dist/components/UserButton.d.ts

@@ -0,0 +1,42 @@
+import { type ButtonProps, type DropdownProps } from "antd";
+export interface UserButtonProps extends ButtonProps {
+    /**
+     * 是否显示为缩小形态（只显示头像）。
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * 使用边栏布局还是顶栏布局。
+     * @default "sidebar"
+     */
+    layout?: "sidebar" | "header";
+    /** 点击“账户”时的操作。若省略，默认通过 Casdoor SDK 获取用户主页链接并跳转。*/
+    onOpenProfile?: () => void;
+    /**
+     * 点击“登出”时的操作。默认先登出，然后跳转到主页。
+     *
+     * @default
+     * () => {
+     *   auth.logout(); // auth = useAuth()
+     *   location.href = "/";
+     * }
+     */
+    onLogout?: () => void;
+    /**
+     * 下拉菜单的属性，见 [Ant Design 文档][1]。你可以在这里覆盖弹出菜单的内容和样式。
+     *
+     * [1]: https://ant-design.antgroup.com/components/dropdown-cn
+     */
+    dropdownProps?: DropdownProps;
+}
+/**
+ * 显示用户信息的按钮，点击弹出登出或跳转到账户页的菜单。
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后，
+ * 才能正常显示用户信息，否则只会显示占位数据。
+ *
+ * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/button-cn
+ */
+declare function UserButton(props: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export default UserButton;

package/dist/components/UserButton.js

@@ -0,0 +1,105 @@
+import { Avatar, Button, Dropdown, theme } from "antd";
+import { DownOutlined, LogoutOutlined, UpOutlined, UserOutlined } from "@ant-design/icons";
+import { AuthCheck,
+// eslint-disable-line @typescript-eslint/no-unused-vars
+AuthProvider,
+// eslint-disable-line @typescript-eslint/no-unused-vars
+useAuth } from "./Auth";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 显示用户信息的按钮，点击弹出登出或跳转到账户页的菜单。
+ * 该组件必须包裹在 {@linkcode AuthProvider} 内，并且经过 {@linkcode AuthCheck} 验证后，
+ * 才能正常显示用户信息，否则只会显示占位数据。
+ *
+ * 除了文档中列出的属性以外，该组件会把额外的属性传递给内部的 [`Button`][1] 组件。
+ *
+ * [1]: https://ant-design.antgroup.com/components/button-cn
+ */
+function UserButton(props) {
+  const {
+    token
+  } = theme.useToken();
+  const auth = useAuth("UserButton");
+  const {
+    compact,
+    layout = "sidebar",
+    onOpenProfile = auth.mode === "casdoor" ? () => {
+      const account = auth.accessToken === undefined ? undefined : {
+        accessToken: auth.accessToken
+      };
+      location.href = auth.sdk.getMyProfileUrl(account, location.href);
+    } : undefined,
+    onLogout = () => {
+      auth.logout();
+      location.href = "/";
+    },
+    dropdownProps,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(Dropdown, {
+    trigger: ["click"],
+    placement: layout === "sidebar" ? "topLeft" : "bottomRight",
+    ...dropdownProps,
+    menu: {
+      items: [onOpenProfile ? {
+        key: "profile",
+        label: /*#__PURE__*/_jsx(_Fragment, {
+          children: "\u8D26\u6237"
+        }),
+        // 如果使用字符串，在缩小时会被裁剪，即使宽度足够
+        icon: /*#__PURE__*/_jsx(UserOutlined, {}),
+        title: "",
+        // 若不设置，在缩小时总是会显示工具提示，即使宽度足够
+        onClick: onOpenProfile
+      } : null, {
+        key: "logout",
+        icon: /*#__PURE__*/_jsx(LogoutOutlined, {}),
+        label: /*#__PURE__*/_jsx(_Fragment, {
+          children: "\u9000\u51FA\u767B\u5F55"
+        }),
+        title: "",
+        onClick: onLogout
+      }],
+      ...dropdownProps?.menu,
+      style: {
+        minWidth: "100%",
+        ...dropdownProps?.menu?.style
+      }
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      type: "text",
+      icon: /*#__PURE__*/_jsx(Avatar, {
+        alt: "\u5934\u50CF",
+        src: auth.mode === "casdoor" ? auth.userInfo?.picture : undefined,
+        icon: /*#__PURE__*/_jsx(UserOutlined, {})
+      }),
+      ...rest,
+      styles: {
+        icon: {
+          display: "inline-flex",
+          alignItems: "center",
+          ...rest.styles?.icon
+        }
+      },
+      style: {
+        margin: token.marginXXS,
+        ...(layout === "sidebar" ? {
+          width: "auto",
+          padding: token.paddingXXS
+        } : {
+          paddingBlock: token.padding + token.paddingXS
+        }),
+        ...rest.style
+      },
+      children: !compact && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          style: {
+            marginRight: token.marginXXS
+          },
+          children: (auth.mode === "casdoor" ? auth.userInfo?.name ?? auth.userInfo?.prefered_username : auth.userInfo?.displayName ?? auth.userInfo?.username) ?? "平台用户"
+        }), layout === "sidebar" ? /*#__PURE__*/_jsx(UpOutlined, {}) : /*#__PURE__*/_jsx(DownOutlined, {})]
+      })
+    })
+  });
+}
+export default UserButton;

package/dist/components/VerticalColorLegend.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export interface VerticalColorLegendProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    palette: [number, [number, number, number]][];
+}
+declare function VerticalColorLegend(props: VerticalColorLegendProps): import("react/jsx-runtime").JSX.Element;
+export default VerticalColorLegend;

package/dist/components/VerticalColorLegend.js

@@ -0,0 +1,208 @@
+import { c as _c } from "react/compiler-runtime";
+import { theme } from "antd";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function VerticalColorLegend(props) {
+  const $ = _c(43);
+  let palette;
+  let rest;
+  let title;
+  if ($[0] !== props) {
+    ({
+      title,
+      palette,
+      ...rest
+    } = props);
+    $[0] = props;
+    $[1] = palette;
+    $[2] = rest;
+    $[3] = title;
+  } else {
+    palette = $[1];
+    rest = $[2];
+    title = $[3];
+  }
+  const {
+    token
+  } = theme.useToken();
+  let t0;
+  if ($[4] !== palette) {
+    t0 = palette.at(-1);
+    $[4] = palette;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  const max = t0[0];
+  const min = palette[0][0];
+  const range = max - min;
+  let t1;
+  if ($[6] !== rest.style || $[7] !== token.colorText || $[8] !== token.fontSizeSM) {
+    t1 = {
+      display: "flex",
+      flexDirection: "column",
+      userSelect: "none",
+      fontSize: token.fontSizeSM,
+      color: token.colorText,
+      textShadow: "-1px -1px white, 0px -1px white, 1px -1px white, 1px 0px white, 1px 1px white, 0px 1px white, -1px 1px white, -1px 0px white",
+      ...rest.style
+    };
+    $[6] = rest.style;
+    $[7] = token.colorText;
+    $[8] = token.fontSizeSM;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      fontWeight: "bold"
+    };
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== title) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      style: t2,
+      children: title
+    });
+    $[11] = title;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== token.paddingXXS) {
+    t4 = {
+      display: "flex",
+      flexBasis: "100%",
+      alignItems: "stretch",
+      gap: token.paddingXXS,
+      paddingBlock: "0.5em"
+    };
+    $[13] = token.paddingXXS;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== min || $[16] !== palette || $[17] !== range) {
+    let t6;
+    if ($[19] !== min || $[20] !== range) {
+      t6 = t7 => {
+        const [value, color] = t7;
+        return `rgb(${color.join(", ")}) ${(value - min) / range * 100}%`;
+      };
+      $[19] = min;
+      $[20] = range;
+      $[21] = t6;
+    } else {
+      t6 = $[21];
+    }
+    t5 = palette.map(t6).join(", ");
+    $[15] = min;
+    $[16] = palette;
+    $[17] = range;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  const t6 = `linear-gradient(
+              to top,
+              ${t5}
+            )`;
+  let t7;
+  if ($[22] !== t6) {
+    t7 = /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 24,
+        background: t6
+      }
+    });
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  let t8;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      lineHeight: 0,
+      verticalAlign: "middle"
+    };
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== max || $[26] !== palette || $[27] !== range) {
+    let t10;
+    if ($[29] !== max || $[30] !== range) {
+      t10 = (t11, i) => {
+        const [value_0] = t11;
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            position: "relative",
+            top: `${(max - value_0) / range * 100}%`
+          },
+          children: value_0.toFixed(1)
+        }, i);
+      };
+      $[29] = max;
+      $[30] = range;
+      $[31] = t10;
+    } else {
+      t10 = $[31];
+    }
+    t9 = palette.map(t10);
+    $[25] = max;
+    $[26] = palette;
+    $[27] = range;
+    $[28] = t9;
+  } else {
+    t9 = $[28];
+  }
+  let t10;
+  if ($[32] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      style: t8,
+      children: t9
+    });
+    $[32] = t9;
+    $[33] = t10;
+  } else {
+    t10 = $[33];
+  }
+  let t11;
+  if ($[34] !== t10 || $[35] !== t4 || $[36] !== t7) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      style: t4,
+      children: [t7, t10]
+    });
+    $[34] = t10;
+    $[35] = t4;
+    $[36] = t7;
+    $[37] = t11;
+  } else {
+    t11 = $[37];
+  }
+  let t12;
+  if ($[38] !== rest || $[39] !== t1 || $[40] !== t11 || $[41] !== t3) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      ...rest,
+      style: t1,
+      children: [t3, t11]
+    });
+    $[38] = rest;
+    $[39] = t1;
+    $[40] = t11;
+    $[41] = t3;
+    $[42] = t12;
+  } else {
+    t12 = $[42];
+  }
+  return t12;
+}
+export default VerticalColorLegend;

package/dist/components/WeatherMap.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes } from "react";
+import { type WeatherData } from "../deckgl/WeatherData";
+export { type WeatherData };
+export interface WeatherMapProps extends HTMLAttributes<HTMLDivElement> {
+    /** 天地图平台的 token。*/
+    tiandituTk: string;
+    /** 要显示的天气数据。如果为 `undefined`，则会显示加载界面。*/
+    data: WeatherData | undefined;
+}
+/**
+ * 一张显示各类天气信息的地图。
+ *
+ * 多余的属性会被传递给组件最外层的 [`div` 元素][1]。
+ *
+ * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+declare function WeatherMap(props: WeatherMapProps): import("react/jsx-runtime").JSX.Element;
+export default WeatherMap;