@tsingroc/tsingroc-components 4.2.0 → 4.3.1

package/src/components/QuickDateRangePicker.tsx

@@ -1,13 +1,13 @@
 import {
   Button,
-  type ButtonProps,
   DatePicker,
   Space,
+  type ButtonProps,
   type SpaceProps,
 } from "antd";
+import type { RangePickerProps } from "antd/es/date-picker";
 import dayjs, { type Dayjs } from "dayjs";
 import type { NoUndefinedRangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
-import type { RangePickerProps } from "antd/es/date-picker";
 import { useState } from "react";
 
 export interface QuickDateRangePickerProps
@@ -72,8 +72,8 @@ function QuickDateRangePicker(props: QuickDateRangePickerProps) {
         value={range}
         allowClear={false}
         onChange={(range) => {
-          setRange(range!);
-          onChange?.(range!); // 由于 allowClear=false，这里 range 不可能为 null
+          setRange(range as NoUndefinedRangeValueType<Dayjs>);
+          onChange?.(range as NoUndefinedRangeValueType<Dayjs>); // 由于 allowClear=false，这里 range 不可能为 null
         }}
         {...pickerProps}
       />

package/src/components/SegmentedButtons.tsx

@@ -37,7 +37,7 @@ export function TimeUnitSwitcher(props: TimeUnitSwitcherProps) {
     <Radio.Group
       optionType="button"
       options={TIME_UNIT_OPTIONS}
-      onChange={(e) => onChange?.(e.target.value)}
+      onChange={(e) => onChange?.(e.target.value as "day" | "week" | "month")}
       {...rest}
     />
   );

package/src/components/Sidebar.tsx

@@ -1,3 +1,6 @@
+import { Button, Flex, Layout, Menu, type MenuProps } from "antd";
+import { createStyles } from "antd-style";
+import { useState, type CSSProperties, type Key, type ReactNode } from "react";
 import {
   BarChartOutlined,
   LeftOutlined,
@@ -5,9 +8,6 @@ import {
   SwapOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
-import { Button, Flex, Layout, Menu, type MenuProps } from "antd";
-import { type CSSProperties, type Key, type ReactNode, useState } from "react";
-import { createStyles } from "antd-style";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { AuthCheck, AuthProvider } from "./Auth";
@@ -104,70 +104,6 @@ export interface SidebarProps extends MenuProps {
   style?: CSSProperties;
 }
 
-const useStyles = createStyles(
-  ({ token, css, cx, prefixCls }, collapsed: boolean) => {
-    const sidebarHeader = css`
-      margin-top: ${token.marginXXS}px;
-
-      > img {
-        width: 40%;
-      }
-
-      > h1 {
-        margin: ${collapsed ? 0 : token.marginXXS}px 0 0 0;
-        font-size: ${collapsed ? 0 : token.fontSize}px;
-        font-weight: normal;
-        line-height: 1;
-        transition:
-          margin-top ${token.motionDurationMid},
-          font-size ${token.motionDurationMid};
-      }
-    `;
-    const sidebarMenu = css`
-      flex-basis: 100%;
-      overflow-y: auto;
-    `;
-    const sidebarBtn = css`
-      position: absolute;
-      top: 75%;
-      right: 0;
-      transform: translate(50%, -50%);
-
-      font-size: ${token.sizeSM}px;
-
-      transition: opacity ${token.motionDurationMid};
-      opacity: 0%;
-    `;
-    const sidebar = css`
-      position: relative;
-      box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
-
-      > .${prefixCls}-layout-sider-children {
-        display: flex;
-        flex-direction: column;
-      }
-
-      /* 为了提高权重 */
-      & .${cx(sidebarBtn)} {
-        width: ${token.controlHeightXS}px;
-      }
-      & .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
-        border-inline-end: none;
-      }
-
-      &:hover .${cx(sidebarBtn)} {
-        opacity: 100%;
-      }
-    `;
-    return {
-      sidebar,
-      sidebarHeader,
-      sidebarMenu,
-      sidebarBtn,
-    };
-  },
-);
-
 /**
  * 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
  * 如果没有指定 {@linkcode SidebarProps.footer | footer} 属性，
@@ -202,6 +138,11 @@ function Sidebar(props: SidebarProps) {
   } = props;
 
   const [collapsed, setCollapsed] = useState(false);
+  // 默认展开到 selectedKeys
+  const [openKeys, setOpenKeys] = useState<string[]>(
+    () =>
+      rest.selectedKeys?.flatMap((key) => findKeyPath(items, key) ?? []) ?? [],
+  );
   const { cx, styles, theme: token } = useStyles(collapsed);
 
   return (
@@ -232,10 +173,12 @@ function Sidebar(props: SidebarProps) {
         mode="inline"
         items={items}
         inlineCollapsed={collapsible ? collapsed : false}
+        openKeys={openKeys}
+        onOpenChange={(openKeys) => setOpenKeys(openKeys)}
         className={cx(styles.sidebarMenu)}
         {...rest}
       />
-      {footer === null ? null : footer?.(collapsed)}
+      {footer === null ? null : footer(collapsed)}
       {collapsible && (
         <Button
           className={cx(styles.sidebarBtn)}
@@ -248,3 +191,85 @@ function Sidebar(props: SidebarProps) {
 }
 
 export default Sidebar;
+
+const useStyles = createStyles(
+  ({ token, css, cx, prefixCls }, collapsed: boolean) => {
+    const sidebarHeader = css`
+      margin-top: ${token.marginXXS}px;
+
+      > img {
+        width: 40%;
+      }
+
+      > h1 {
+        margin: ${collapsed ? 0 : token.marginXXS}px 0 0 0;
+        font-size: ${collapsed ? 0 : token.fontSize}px;
+        font-weight: normal;
+        line-height: 1;
+        transition:
+          margin-top ${token.motionDurationMid},
+          font-size ${token.motionDurationMid};
+      }
+    `;
+    const sidebarMenu = css`
+      flex-basis: 100%;
+      overflow-y: auto;
+    `;
+    const sidebarBtn = css`
+      position: absolute;
+      top: 75%;
+      right: 0;
+      transform: translate(50%, -50%);
+
+      font-size: ${token.sizeSM}px;
+
+      transition: opacity ${token.motionDurationMid};
+      opacity: 0%;
+    `;
+    const sidebar = css`
+      position: relative;
+      box-shadow: rgba(0, 0, 0, 0.15) 0 0 8px;
+
+      > .${prefixCls}-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* 为了提高权重 */
+      & .${cx(sidebarBtn)} {
+        width: ${token.controlHeightXS}px;
+      }
+      & .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
+        border-inline-end: none;
+      }
+
+      &:hover .${cx(sidebarBtn)} {
+        opacity: 100%;
+      }
+    `;
+    return {
+      sidebar,
+      sidebarHeader,
+      sidebarMenu,
+      sidebarBtn,
+    };
+  },
+);
+
+function findKeyPath(items: MenuItem[], key: string): string[] | null {
+  for (const item of items) {
+    if (!item) {
+      continue;
+    }
+    if (item.key === key) {
+      return [];
+    }
+    if ("children" in item) {
+      const childrenResult = findKeyPath(item.children ?? [], key);
+      if (childrenResult) {
+        return [item.key as string, ...childrenResult];
+      }
+    }
+  }
+  return null;
+}

package/src/components/TsingrocDatePicker.tsx

@@ -1,14 +1,14 @@
 import {
-  type DatePickerProps as AntdDatePickerProps,
   Button,
-  type ButtonProps,
   DatePicker,
   Space,
+  type DatePickerProps as AntdDatePickerProps,
+  type ButtonProps,
 } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import type { Dayjs } from "dayjs";
 import type { SpaceCompactProps } from "antd/es/space/Compact";
+import type { Dayjs } from "dayjs";
 import { useState } from "react";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 
 export interface DatePickerProps extends Omit<SpaceCompactProps, "onChange"> {
   value?: Dayjs;

package/src/components/TsingrocTheme.tsx

@@ -1,7 +1,8 @@
 import { ConfigProvider, theme } from "antd";
+import zhCN from "antd/es/locale/zh_CN";
 import dayjs from "dayjs";
 import type { ReactNode } from "react";
-import zhCN from "antd/es/locale/zh_CN";
+
 import "dayjs/locale/zh-cn";
 
 export interface TsingrocThemeProps {

package/src/components/UserButton.tsx

@@ -1,25 +1,25 @@
 import {
   Avatar,
   Button,
-  type ButtonProps,
   Dropdown,
-  type DropdownProps,
   theme,
+  type ButtonProps,
+  type DropdownProps,
 } from "antd";
+import type { Account } from "casdoor-js-sdk/lib/esm/sdk";
 import {
   DownOutlined,
   LogoutOutlined,
   UpOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import type { Account } from "casdoor-js-sdk/lib/esm/sdk";
 
 import {
   AuthCheck, // eslint-disable-line @typescript-eslint/no-unused-vars
   AuthProvider, // eslint-disable-line @typescript-eslint/no-unused-vars
+  useAuth,
   type CasdoorAuth,
   type LocalAuth,
-  useAuth,
 } from "./Auth";
 
 export interface UserButtonProps extends ButtonProps {

package/src/components/VerticalColorLegend.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "react";
 import { theme } from "antd";
+import type { HTMLAttributes } from "react";
 
 export interface VerticalColorLegendProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface VerticalColorLegendProps
 function VerticalColorLegend(props: VerticalColorLegendProps) {
   const { title, palette, ...rest } = props;
   const { token } = theme.useToken();
-  const max = palette.at(-1)![0];
+  const max = (palette.at(-1) as [number, [number, number, number]])[0];
   const min = palette[0][0];
   const range = max - min;
   return (
@@ -58,7 +58,7 @@ function VerticalColorLegend(props: VerticalColorLegendProps) {
               key={i}
               style={{
                 position: "relative",
-                top: ((max - value) / range) * 100 + "%",
+                top: `${((max - value) / range) * 100}%`,
               }}
             >
               {value.toFixed(1)}

package/src/components/WeatherMap.tsx

@@ -1,11 +1,13 @@
-import * as wl from "weatherlayers-gl";
-import { Button, type ButtonProps, Flex, Slider, Spin, theme } from "antd";
+import { Button, Flex, Slider, Spin, theme, type ButtonProps } from "antd";
+import { createStyles } from "antd-style";
+import dayjs from "dayjs";
+import DeckGL from "deck.gl";
 import {
+  useMemo,
+  useState,
   type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
-  useMemo,
-  useState,
 } from "react";
 import { MdDewPoint, MdThermostat } from "react-icons/md";
 import {
@@ -15,10 +17,9 @@ import {
   WiRain,
   WiStrongWind,
 } from "react-icons/wi";
-import { createStyles } from "antd-style";
-import dayjs from "dayjs";
-import DeckGL from "deck.gl";
+import * as wl from "weatherlayers-gl";
 
+import { TiandituLayer } from "../deckgl";
 import {
   extractMagnitudeData,
   extractScalarData,
@@ -26,7 +27,6 @@ import {
   getBounds,
   type WeatherData,
 } from "../deckgl/WeatherData";
-import { TiandituLayer } from "../deckgl";
 import TsingrocTheme from "./TsingrocTheme";
 import VerticalColorLegend from "./VerticalColorLegend";
 
@@ -88,7 +88,7 @@ function WeatherMap(props: WeatherMapProps) {
     return adaptiveColorCoding(
       scalarFrame.min,
       scalarFrame.max,
-      selectedScalar.adaptivePalette!,
+      selectedScalar.adaptivePalette,
     );
   }, [selectedScalar, scalarFrame]);
   return (
@@ -141,7 +141,7 @@ function WeatherMap(props: WeatherMapProps) {
               tooltip={{
                 formatter: (value) =>
                   dayjs
-                    .unix(data.coords.time[value!])
+                    .unix(data.coords.time[value as number])
                     .format("YYYY-MM-DD HH:mm:ss"),
               }}
             />
@@ -298,8 +298,8 @@ interface ScalarInfo {
 }
 
 const iconSizeFix = (ratio: number): CSSProperties => ({
-  fontSize: ratio + "em",
-  margin: -(1 - 1 / ratio) / 3 + "em " + -(1 - 1 / ratio) / 2 + "em",
+  fontSize: `${ratio}em`,
+  margin: `${-(1 - 1 / ratio) / 3}em ${-(1 - 1 / ratio) / 2}em`,
 });
 
 const TEMPERATURE_ADAPTIVE_PALETTE: AdaptivePalette = {
@@ -506,6 +506,7 @@ function adaptiveColorCoding(
 }
 
 // 参考 https://dbba.sacinfo.org.cn/attachment/downloadStdFile?pk=dda6960be9435ed7ab01e336e197cd67a072a28725f03685bfbdaf19cbfeb267
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function fixedColorCoding<T>(min: number, max: number, palette: [number, T][]) {
   let minIdx = palette.findIndex(([value]) => value > min) - 1;
   if (minIdx < -1) {

package/src/deckgl/TiandituLayer.ts

@@ -1,6 +1,6 @@
 import { BitmapLayer, CompositeLayer } from "deck.gl";
-import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
 import type { DefaultProps } from "@deck.gl/core";
+import { TileLayer, type TileLayerProps } from "@deck.gl/geo-layers";
 
 export interface TiandituLayerProps {
   tiandituTk: string;
@@ -14,7 +14,7 @@ export default class TiandituLayer extends CompositeLayer<TiandituLayerProps> {
     type: { type: "object", value: "vec" },
     layer: { type: "object", value: "base" },
   };
-  renderLayers() {
+  renderLayers(): TileLayer {
     const { tiandituTk, type, layer } = this.props;
     const actualType = layer === "base" ? type : "c" + type[0] + "a";
     return new TileLayer(
@@ -24,7 +24,7 @@ export default class TiandituLayer extends CompositeLayer<TiandituLayerProps> {
         maxZoom: 18,
         zoomOffset: 1,
         renderSubLayers,
-      }),
+      }) as TileLayerProps,
     );
   }
 }

package/src/deckgl/WeatherData.ts

@@ -42,11 +42,11 @@ export interface WeatherData {
 export const getBounds = (data: WeatherData): BitmapBoundingBox => {
   const [lngMin, lngMax] = [
     data.coords.longitude[0],
-    data.coords.longitude.at(-1)!,
+    data.coords.longitude.at(-1) as number,
   ].sort();
   const [latMin, latMax] = [
     data.coords.latitude[0],
-    data.coords.latitude.at(-1)!,
+    data.coords.latitude.at(-1) as number,
   ].sort();
   return [lngMin, latMin, lngMax, latMax];
 };
@@ -69,7 +69,7 @@ export function extractScalarData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let value = data.data_vars[variable]![i][j][t];
+        let value = (data.data_vars[variable] as number[][][])[i][j][t];
         if (value === -9999) value = NaN;
         result[t].image.data[p] = value;
         if (value > result[t].max) result[t].max = value;
@@ -104,8 +104,8 @@ export function extractVectorData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let u = data.data_vars[variableU]![i][j][t];
-        let v = data.data_vars[variableV]![i][j][t];
+        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
+        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
         if (u === -9999) u = NaN;
         if (v === -9999) v = NaN;
         result[t].data[p] = u;
@@ -136,8 +136,8 @@ export function extractMagnitudeData(
   for (let i = 0; i < data.dims.longitude; i++) {
     for (let j = 0; j < data.dims.latitude; j++) {
       for (let t = 0; t < data.dims.time; t++) {
-        let u = data.data_vars[variableU]![i][j][t];
-        let v = data.data_vars[variableV]![i][j][t];
+        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
+        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
         if (u === -9999) u = NaN;
         if (v === -9999) v = NaN;
         const value = Math.sqrt(u * u + v * v);

package/src/echarts/coordinateSystem.ts

@@ -84,7 +84,7 @@ export function useGrid(option: GridOption): EChartsComponent {
     id: gridId + "y",
     type: option.yAxis?.type ?? "value",
     gridId,
-    nameGap: 12,
+    nameGap: 10,
     ...option.yAxis,
     nameTextStyle: {
       align: "left",
@@ -100,7 +100,7 @@ export function useGrid(option: GridOption): EChartsComponent {
     yAxis: [yAxis],
     series: option.series
       ?.flatMap((item) => item.series)
-      ?.map((series) => ({
+      .map((series) => ({
         ...series,
         coordinateSystem: "cartesian2d",
         xAxisId,
@@ -113,7 +113,7 @@ const MINIMAL_GRID: GridPreset = (grid, xAxis, yAxis) => {
   grid.top = 0;
   xAxis.show = false;
   if (
-    (xAxis.type === undefined && (xAxis as { data: [] }).data !== undefined) ||
+    (xAxis.type === undefined && (xAxis as { data?: [] }).data !== undefined) ||
     xAxis.type === "category"
   ) {
     (xAxis as { boundaryGap: boolean }).boundaryGap = false;

package/src/echarts/gl.ts

@@ -1,9 +1,10 @@
+import type { FlowGLSeriesOption as OrigFlowGLSeriesOption } from "echarts";
 import type {
   ComponentOption,
   SeriesOnCartesianOptionMixin,
   SeriesOnGeoOptionMixin,
 } from "echarts/types/src/util/types.js";
-import type { FlowGLSeriesOption as OrigFlowGLSeriesOption } from "echarts";
+
 import "echarts-gl";
 
 import type { EChartsSeries } from ".";

package/src/echarts/index.ts

@@ -57,6 +57,7 @@ export function buildEChartsOption(
   for (const component of components) {
     Object.entries(component).forEach(([k, value]) => {
       const key = k as keyof EChartsComponent;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       (option[key] ??= []).push(...(value ?? []));
     });
   }