@hsu-react/ui 0.0.1

package/src/components/Select/index.tsx

@@ -0,0 +1,266 @@
+import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { BaseSelectRef } from "rc-select";
+import { DefaultOptionType } from "antd/es/select";
+import Icon from "../Icon";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { generateRandomStr } from "hsu-utils";
+import { useSelectComposition, useSelectPopupPosition } from "./_hooks";
+import { getElementLeft, calculatePopupWidth, filterOption } from "./_utils";
+import { Prefix } from "./_components/Prefix";
+import { Suffix } from "./_components/Suffix";
+import { isLegacyHasSelectorBrowser } from "../../utils/cssSupports";
+
+export interface SelectOption<T = number | string> {
+  label: string;
+  value: T;
+  disabled?: boolean;
+  [key: string]: unknown;
+}
+
+export interface SelectProps extends Omit<
+  AntdSelectProps,
+  "placement" | "filterOption"
+> {
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  selectClassName?: string;
+  arrowAnimation?: boolean;
+  popupMatchContentWidth?: boolean;
+  placement?: "bottomLeft" | "topLeft";
+  filterOption?: (searchValue: string, option?: DefaultOptionType) => boolean;
+  options?: SelectOption[];
+  optionFontSize?: number;
+  valueInlabel?: "before" | "after";
+}
+
+const Select: React.FC<SelectProps> = (props) => {
+  const {
+    prefix,
+    suffix,
+    className,
+    selectClassName,
+    arrowAnimation = true,
+    onFocus,
+    onBlur,
+    onSearch,
+    disabled,
+    mode,
+    popupMatchSelectWidth,
+    popupMatchContentWidth,
+    popupClassName,
+    placement = "bottomLeft",
+    filterOption: customFilterOption,
+    onChange,
+    options = [],
+    optionFontSize = 14,
+    valueInlabel,
+    optionRender,
+    labelRender,
+    suffixIcon: customSuffixIcon,
+    ...antdSelctConfig
+  } = props;
+  const [focused, setFocused] = useState<boolean>(false);
+  const ref = useRef<BaseSelectRef>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [legacyHasErrorStatus, setLegacyHasErrorStatus] =
+    useState<boolean>(false);
+  const [legacyHasArrowOrClear, setLegacyHasArrowOrClear] =
+    useState<boolean>(true);
+  const legacyHasSelector = isLegacyHasSelectorBrowser();
+
+  const cls = useMemo(() => generateRandomStr(10), []);
+
+  const { isComposing } = useSelectComposition({ onSearch });
+
+  useSelectPopupPosition(selectRef, open, cls);
+
+  const selectWidth = selectRef.current ? selectRef.current.offsetWidth : 0;
+
+  const calculatedPopupWidth = popupMatchContentWidth
+    ? calculatePopupWidth({
+        options,
+        selectWidth,
+        mode,
+        optionFontSize,
+        valueInlabel,
+      })
+    : selectWidth;
+
+  useEffect(() => {
+    if (!legacyHasSelector) {
+      return;
+    }
+
+    const container = selectRef.current;
+    if (!container) {
+      return;
+    }
+
+    const selectNode = container.querySelector(
+      `.${styles.antdSelect}`,
+    ) as HTMLElement | null;
+    if (!selectNode) {
+      return;
+    }
+
+    const updateLegacyStates = () => {
+      setLegacyHasErrorStatus(
+        selectNode.classList.contains("ant-select-status-error"),
+      );
+
+      let hasArrowOrClear = false;
+      const children = selectNode.children;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (
+          child.classList.contains("ant-select-arrow") ||
+          child.classList.contains("ant-select-clear")
+        ) {
+          hasArrowOrClear = true;
+          break;
+        }
+      }
+
+      setLegacyHasArrowOrClear(hasArrowOrClear);
+    };
+
+    updateLegacyStates();
+
+    if (typeof MutationObserver === "undefined") {
+      return;
+    }
+
+    const observer = new MutationObserver(updateLegacyStates);
+    observer.observe(selectNode, {
+      attributes: true,
+      childList: true,
+      subtree: false,
+      attributeFilter: ["class"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [legacyHasSelector, open]);
+
+  return (
+    <div
+      className={classNames({
+        [styles.select]: true,
+        [className ?? ""]: true,
+        [styles.focused]: focused,
+        [styles.disabled]: disabled,
+        [styles.popupMatchContentWidth]: popupMatchContentWidth,
+        [styles.legacyHasErrorStatus]:
+          legacyHasSelector && legacyHasErrorStatus,
+      })}
+      onFocus={
+        mode
+          ? () => {
+              ref.current?.focus();
+              setOpen(true);
+            }
+          : undefined
+      }
+      onBlur={
+        mode
+          ? () => {
+              setOpen(false);
+            }
+          : undefined
+      }
+      onClick={
+        !mode
+          ? () => {
+              ref.current?.focus();
+              setOpen(!open);
+            }
+          : undefined
+      }
+      ref={selectRef}
+    >
+      {prefix && <Prefix prefix={prefix} />}
+      <AntdSelect
+        {...{
+          allowClear: true,
+          showSearch: true,
+          ...antdSelctConfig,
+          mode,
+          open,
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus?.(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            setOpen(false);
+            onBlur?.(e);
+          },
+          options,
+          labelRender:
+            labelRender ??
+            ((option) => {
+              if (valueInlabel === "before") {
+                return option.value;
+              }
+
+              return option.label;
+            }),
+          optionRender:
+            optionRender ??
+            ((option) => {
+              if (valueInlabel) {
+                return (
+                  <span>
+                    <span>
+                      {valueInlabel === "before" ? option.value : option.label}
+                    </span>
+                    <span style={{ opacity: 0.5 }}>
+                      {" "}
+                      - {valueInlabel === "after" ? option.value : option.label}
+                    </span>
+                  </span>
+                );
+              }
+
+              return option.label;
+            }),
+          onChange,
+          filterOption: (searchValue, option) =>
+            filterOption({
+              searchValue,
+              option,
+              isComposing,
+              customFilterOption,
+              valueInlabel,
+            }),
+          className: classNames(styles.antdSelect, selectClassName, {
+            [styles.noArrowAnimation]: !arrowAnimation,
+            [styles.legacyHasArrowOrClear]:
+              legacyHasSelector && legacyHasArrowOrClear,
+          }),
+          popupClassName: `${cls} ${popupClassName ?? ""}`,
+          getPopupContainer: () => selectRef.current ?? document.body,
+          popupMatchSelectWidth:
+            popupMatchSelectWidth ?? (calculatedPopupWidth || undefined),
+          dropdownStyle: {
+            left: selectRef.current
+              ? getElementLeft(selectRef.current)
+              : undefined,
+            right: "auto",
+          },
+          suffixIcon: customSuffixIcon ?? <Icon icon="ep:arrow-down" />,
+          placement,
+        }}
+        ref={ref}
+        disabled={disabled}
+      />
+      {suffix && <Suffix suffix={suffix} />}
+    </div>
+  );
+};
+
+export default Select;

package/src/components/Slider/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据录入
+  order: 3
+title: Slider 滑动输入
+---
+
+# Slider 滑动输入
+
+> `Slider` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Slider } from "@hsu-react/ui";
+```

package/src/components/Slider/index.module.less

@@ -0,0 +1,66 @@
+.slider {
+  height: 32px;
+  margin: 0px;
+  padding-block: 0px;
+
+  overflow-x: hidden;
+  overflow-y: visible;
+
+  .ant-slider-step,
+  .ant-slider-track,
+  .ant-slider-rail {
+    top: 0px;
+    height: 100% !important;
+  }
+
+  .ant-slider-handle {
+    position: relative;
+    top: 50%;
+    transform: translate(calc(-50% - 4px), calc(-50% + 1px)) !important;
+
+    width: 36px;
+    height: 36px !important;
+
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+
+      &:after {
+        cursor: grabbing;
+      }
+    }
+
+    &::after,
+    &::before {
+      margin-left: 50%;
+      transform: translateX(-50%);
+
+      width: 4px !important;
+      height: calc(100% - 8px) !important;
+
+      border-radius: 100px !important;
+    }
+
+    &:after {
+      inset-inline-start: -1px !important;
+      inset-block-start: 2.5px !important;
+      box-shadow: none !important;
+
+      cursor: grab;
+    }
+
+    &:hover {
+      &::after,
+      &::before {
+        width: 4px !important;
+        height: 100% !important;
+      }
+
+      &:after {
+        inset-inline-start: -1px !important;
+        inset-block-start: -1px !important;
+      }
+    }
+  }
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1,43 @@
+import {
+  Slider as AntdSlider,
+  SliderSingleProps as AntdSliderSingleProps,
+} from "antd";
+import React, { useEffect, useState } from "react";
+
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+export interface SliderProps extends AntdSliderSingleProps {
+  topValue?: number;
+}
+
+const Slider: React.FC<SliderProps> = (props) => {
+  const { className, value = 0, topValue, onChange, ...sliderConfig } = props;
+  const [_value, setValue] = useState<number>(value);
+  const [lastValue, setLastValue] = useState<number>(value);
+
+  useEffect(() => {
+    if (_value !== lastValue) {
+      setLastValue(_value);
+      onChange?.(_value);
+    }
+  }, [lastValue, onChange, _value]);
+
+  useEffect(() => {
+    if ((topValue || value) !== lastValue) {
+      setValue(topValue || value);
+    }
+  }, [lastValue, topValue, value]);
+
+  return (
+    <AntdSlider
+      className={classNames([styles.slider, className])}
+      tooltip={{ open: false }}
+      value={_value}
+      onChange={setValue}
+      {...sliderConfig}
+    />
+  );
+};
+
+export default Slider;

package/src/components/Spreadsheet/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据展示
+  order: 4
+title: Spreadsheet 电子表格
+---
+
+# Spreadsheet 电子表格
+
+> `Spreadsheet` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Spreadsheet } from "@hsu-react/ui";
+```

package/src/components/Spreadsheet/index.module.less

@@ -0,0 +1,29 @@
+.spreadsheet {
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+
+  .x-spreadsheet-toolbar,
+  .x-spreadsheet-bottombar {
+    width: 100% !important;
+  }
+
+  * {
+    background-size: auto;
+  }
+
+  .x-spreadsheet-menu {
+    > li:first-child {
+      display: none;
+    }
+  }
+
+  &.showBottomTool {
+    .x-spreadsheet-menu {
+      > li:first-child {
+        display: list-item;
+      }
+    }
+  }
+}

package/src/components/Spreadsheet/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./index.module.less";
+import XSpreadsheet, { Options } from "x-data-spreadsheet";
+import { Equal, generateRandomStr } from "hsu-utils";
+import "x-data-spreadsheet/dist/xspreadsheet.css";
+import classNames from "classnames";
+import { WorkBook } from "xlsx";
+import { stox } from "./xlsxspread";
+
+interface XOptions extends Omit<Options, "view"> {
+  showBottomTool?: boolean;
+}
+
+interface SpreadsheetProps {
+  data?: WorkBook;
+  xOptions?: XOptions;
+  className?: string;
+}
+
+const Spreadsheet: React.FC<SpreadsheetProps> = (props) => {
+  const { data, xOptions = {}, className } = props;
+  const { showBottomTool = true, ...xOptionsRest } = xOptions;
+  const ref = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const id = useMemo(() => generateRandomStr(10), []);
+  const [sheet, setSheet] = useState<XSpreadsheet | null>(null);
+  const [lastData, setLastData] = useState<WorkBook | undefined>(undefined);
+
+  useEffect(() => {
+    if (ref.current && containerRef.current && !sheet) {
+      const _sheet = new XSpreadsheet(`#${id}`, {
+        view: ref.current
+          ? {
+              width: () => ref.current!.clientWidth,
+              height: () => ref.current!.clientHeight,
+            }
+          : undefined,
+        ...xOptionsRest,
+      });
+
+      setSheet(_sheet);
+    }
+  }, [id, xOptionsRest, sheet]);
+
+  useEffect(() => {
+    if (sheet && data && !Equal.ObjEqual(data, lastData)) {
+      sheet.loadData(stox(data));
+      setLastData(data);
+    }
+  }, [sheet, data, lastData]);
+
+  return (
+    <div
+      className={classNames(styles.spreadsheet, className, {
+        [styles.showBottomTool]: showBottomTool,
+      })}
+      ref={ref}
+    >
+      <div id={id} ref={containerRef} />
+    </div>
+  );
+};
+
+export default Spreadsheet;

package/src/components/Spreadsheet/xlsxspread.ts

@@ -0,0 +1,179 @@
+import * as XLSX from "xlsx";
+
+// 定义类型接口
+interface CellData {
+  text: string;
+  merge?: [number, number];
+}
+
+interface RowData {
+  cells: { [key: number]: CellData };
+}
+
+interface SheetData {
+  name: string;
+  rows: { [key: number]: RowData };
+  merges: string[];
+}
+
+interface XSpreadsheetData {
+  name: string;
+  rows: {
+    len: number;
+    [key: number]: {
+      cells: { [key: string]: CellData };
+    };
+  };
+}
+
+interface Coordinate {
+  r: number;
+  c: number;
+}
+
+export function stox(wb: XLSX.WorkBook): SheetData[] {
+  const out: SheetData[] = [];
+  wb.SheetNames?.forEach(function (name) {
+    const o: SheetData = { name: name, rows: {}, merges: [] };
+    const ws = wb.Sheets[name];
+
+    // 检查 ws["!ref"] 是否存在
+    if (!ws["!ref"]) {
+      out.push(o);
+      return;
+    }
+
+    const range = XLSX.utils.decode_range(ws["!ref"]);
+    // sheet_to_json will lost empty row and col at begin as default
+    range.s = { r: 0, c: 0 };
+    const aoa = XLSX.utils.sheet_to_json(ws, {
+      raw: false,
+      header: 1,
+      range: range,
+    }) as unknown[][];
+
+    aoa?.forEach(function (r: unknown[], i: number) {
+      const cells: { [key: number]: CellData } = {};
+      r?.forEach(function (c: unknown, j: number) {
+        cells[j] = { text: String(c || "") };
+
+        const cellRef = XLSX.utils.encode_cell({ r: i, c: j });
+
+        if (ws[cellRef] != null && ws[cellRef].f != null) {
+          cells[j].text = "=" + ws[cellRef].f;
+        }
+      });
+      o.rows[i] = { cells: cells };
+    });
+
+    o.merges = [];
+    (ws["!merges"] || [])?.forEach(function (merge: XLSX.Range, i: number) {
+      //Needed to support merged cells with empty content
+      if (o.rows[merge.s.r] == null) {
+        o.rows[merge.s.r] = { cells: {} };
+      }
+      if (o.rows[merge.s.r].cells[merge.s.c] == null) {
+        o.rows[merge.s.r].cells[merge.s.c] = { text: "" };
+      }
+
+      o.rows[merge.s.r].cells[merge.s.c].merge = [
+        merge.e.r - merge.s.r,
+        merge.e.c - merge.s.c,
+      ];
+
+      o.merges[i] = XLSX.utils.encode_range(merge);
+    });
+
+    out.push(o);
+  });
+
+  return out;
+}
+
+/**
+ * Converts data from x-spreadsheet to SheetJS
+ *
+ * @param  {XSpreadsheetData[]} sdata An x-spreadsheet data object
+ *
+ * @returns {XLSX.WorkBook} A SheetJS workbook object
+ */
+export function xtos(sdata: XSpreadsheetData[]): XLSX.WorkBook {
+  const out = XLSX.utils.book_new();
+  sdata?.forEach(function (xws: XSpreadsheetData) {
+    const ws: XLSX.WorkSheet = {} as XLSX.WorkSheet;
+    const rowobj = xws.rows;
+    for (let ri = 0; ri < rowobj.len; ++ri) {
+      const row = rowobj[ri];
+      if (!row) continue;
+
+      let minCoord: Coordinate | undefined, maxCoord: Coordinate | undefined;
+      Object.keys(row.cells)?.forEach(function (k: string) {
+        const idx = +k;
+        if (isNaN(idx)) return;
+
+        const lastRef = XLSX.utils.encode_cell({ r: ri, c: idx });
+        if (minCoord == null) {
+          minCoord = { r: ri, c: idx };
+        } else {
+          if (ri < minCoord.r) minCoord.r = ri;
+          if (idx < minCoord.c) minCoord.c = idx;
+        }
+        if (maxCoord == undefined) {
+          maxCoord = { r: ri, c: idx };
+        } else {
+          if (ri > maxCoord.r) maxCoord.r = ri;
+          if (idx > maxCoord.c) maxCoord.c = idx;
+        }
+
+        let cellText: string | number | boolean = row.cells[k].text || "";
+        let type = "s";
+        if (!cellText) {
+          cellText = "";
+          type = "z";
+        } else if (
+          typeof cellText === "string" &&
+          !isNaN(parseFloat(cellText))
+        ) {
+          cellText = parseFloat(cellText);
+          type = "n";
+        } else if (
+          typeof cellText === "string" &&
+          (cellText.toLowerCase() === "true" ||
+            cellText.toLowerCase() === "false")
+        ) {
+          cellText = cellText.toLowerCase() === "true";
+          type = "b";
+        }
+
+        ws[lastRef] = { v: cellText, t: type };
+
+        if (type == "s" && typeof cellText === "string" && cellText[0] == "=") {
+          ws[lastRef].f = cellText.slice(1);
+        }
+
+        if (row.cells[k].merge != null) {
+          if (ws["!merges"] == null) ws["!merges"] = [];
+
+          ws["!merges"].push({
+            s: { r: ri, c: idx },
+            e: {
+              r: ri + (row.cells[k].merge?.[0] || 0),
+              c: idx + (row.cells[k].merge?.[1] || 0),
+            },
+          });
+        }
+      });
+
+      if (minCoord && maxCoord) {
+        ws["!ref"] = XLSX.utils.encode_range({
+          s: { r: minCoord.r, c: minCoord.c },
+          e: { r: maxCoord.r, c: maxCoord.c },
+        });
+      }
+    }
+
+    XLSX.utils.book_append_sheet(out, ws, xws.name);
+  });
+
+  return out;
+}

package/src/components/Switch/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据录入
+  order: 3
+title: Switch 开关
+---
+
+# Switch 开关
+
+> `Switch` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Switch } from "@hsu-react/ui";
+```