@hsu-react/ui 0.0.1

package/src/components/Copy/index.tsx

@@ -0,0 +1,140 @@
+import React, { ReactNode, useState } from "react";
+
+import Icon from "../Icon";
+import TurndownService from "turndown";
+import classNames from "classnames";
+import { message } from "antd";
+import styles from "./index.module.less";
+
+export interface CopyProps {
+  id: string;
+  isMessage?: true;
+  md?: boolean;
+  text?: string;
+  copyIcon?: ReactNode;
+  copyedIcon?: ReactNode;
+  hideIcon?: boolean;
+}
+
+const Copy: React.FC<CopyProps> = (props) => {
+  const {
+    id,
+    isMessage = true,
+    md = true,
+    text,
+    copyIcon,
+    copyedIcon,
+    hideIcon = false,
+  } = props;
+  const [copyed, setCopyed] = useState<boolean>(false);
+
+  const onCopy = () => {
+    let content = document.getElementById(id);
+
+    if (content) {
+      try {
+        if (md) {
+          const turndownService = new TurndownService();
+
+          const markdown = turndownService.turndown(content);
+
+          const div = document.createElement("div");
+          div.append(markdown);
+
+          content = div;
+        }
+
+        navigator.clipboard
+          .writeText(content.innerText)
+          .then(() => {
+            if (isMessage) {
+              message.success("复制成功");
+            } else {
+              setCopyed(true);
+
+              setTimeout(() => {
+                setCopyed(false);
+              }, 2000);
+            }
+          })
+          .catch(() => {
+            if (isMessage) {
+              message.error("复制失败");
+            } else {
+              setCopyed(false);
+            }
+          });
+      } catch {
+        if (md) {
+          const turndownService = new TurndownService();
+
+          const markdown = turndownService.turndown(content);
+
+          const div = document.createElement("div");
+          div.append(markdown);
+          div.id = id;
+          div.style.width = "0px";
+          div.style.height = "0px";
+
+          document.body.appendChild(div);
+
+          content = div;
+        }
+
+        const range = document.createRange();
+        const selection = window.getSelection();
+        try {
+          selection?.removeAllRanges();
+          range.selectNode(content);
+          selection?.addRange(range);
+          document.execCommand("copy");
+          selection?.removeAllRanges();
+
+          if (md) {
+            document.body.removeChild(content);
+          }
+
+          if (isMessage) {
+            message.success("复制成功");
+          } else {
+            setCopyed(true);
+
+            setTimeout(() => {
+              setCopyed(false);
+            }, 2000);
+          }
+        } catch {
+          if (isMessage) {
+            message.error("复制失败");
+          } else {
+            setCopyed(false);
+          }
+        }
+      }
+    }
+  };
+
+  return (
+    <>
+      {copyed ? (
+        <div className={classNames(styles.Copyed)}>
+          {!hideIcon &&
+            (copyedIcon ?? (
+              <Icon icon="ci:check" className={classNames(styles.icon)} />
+            ))}
+          已复制！
+        </div>
+      ) : (
+        <div className={classNames(styles.Copy)} onClick={onCopy}>
+          {!hideIcon &&
+            (copyIcon ?? (
+              <Icon icon="ci:copy" className={classNames(styles.icon)} />
+            ))}
+          {text ?? "复制"}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Copy;

package/src/components/DatePicker/RangePicker/index.module.less

@@ -0,0 +1,47 @@
+.RangePickerWrap {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  width: 100%;
+  height: 100%;
+}
+
+.pickerSelect {
+  width: 80px;
+  min-width: 80px;
+}
+
+.RangePicker {
+  width: 0;
+  flex: 1;
+  height: 100%;
+
+  border-radius: 6px;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: inherit;
+
+  .ant-picker-input {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    text-align: inherit;
+
+    input {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+      text-align: inherit;
+    }
+  }
+}
+
+.rangePickerPopup {
+  position: fixed;
+}

package/src/components/DatePicker/RangePicker/index.tsx

@@ -0,0 +1,214 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DatePicker } from "antd";
+import { RangePickerProps as AntdRangePickerProps } from "antd/es/date-picker";
+import dayjs from "dayjs";
+import styles from "./index.module.less";
+import classNames from "classnames";
+import { PickerRef } from "rc-picker";
+import Select, { SelectOption, SelectProps } from "../../Select";
+import { defaultModalPickerGetPopupContainer } from "../defaultModalPickerGetPopupContainer";
+
+type Picker = "date" | "week" | "month" | "quarter" | "year" | "time";
+
+const PickerOptions: SelectOption[] = [
+  { label: "日期", value: "date" },
+  { label: "周", value: "week" },
+  { label: "月份", value: "month" },
+  { label: "季度", value: "quarter" },
+  { label: "年份", value: "year" },
+];
+
+export interface RangePickerProps extends Omit<
+  AntdRangePickerProps,
+  "onChange" | "value" | "defaultValue"
+> {
+  value?: string[];
+  defaultValue?: string[];
+  picker?: Picker;
+  showPicker?: boolean;
+  pickerHide?: Array<Picker>;
+  pickerSelectProps?: SelectProps;
+  pickerOptions?: SelectOption[];
+  onChange?: (date?: string[], picker?: Picker) => void;
+}
+
+const RangePicker: React.FC<RangePickerProps> = (props) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    picker: pickerProps,
+    showPicker = false,
+    pickerHide = [],
+    pickerSelectProps,
+    pickerOptions,
+    className,
+    disabled,
+    showTime,
+    popupClassName,
+    getPopupContainer,
+    ...rangePickerConfig
+  } = props;
+  const ref = useRef<PickerRef>(null);
+  const [picker, setPicker] = useState<Picker>(pickerProps ?? "date");
+  const prevPickerRef = useRef<Picker | undefined>(pickerProps);
+  const isInitializedRef = useRef(false);
+  const onChangeRef = useRef(onChange);
+  const valueRef = useRef(value);
+  const defaultValueRef = useRef(defaultValue);
+  const showTimeRef = useRef(showTime);
+  const selectDisabled =
+    pickerSelectProps?.disabled ??
+    (typeof disabled === "boolean"
+      ? disabled
+      : Array.isArray(disabled)
+      ? disabled.every(Boolean)
+      : false);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    valueRef.current = value;
+    defaultValueRef.current = defaultValue;
+    showTimeRef.current = showTime;
+  }, [onChange, value, defaultValue, showTime]);
+
+  const formatDateByPicker = useCallback(
+    (dateValue: dayjs.Dayjs, pickerType: Picker): string => {
+      if (pickerType === "date") {
+        if (showTimeRef.current) {
+          return dateValue.format("YYYY-MM-DD HH:mm:ss");
+        }
+        return dateValue.format("YYYY-MM-DD");
+      } else if (pickerType === "week") {
+        return dateValue.format("YYYY-wo");
+      } else if (pickerType === "month") {
+        return dateValue.format("YYYY-MM");
+      } else if (pickerType === "quarter") {
+        return dateValue.format("YYYY-Q");
+      } else if (pickerType === "year") {
+        return dateValue.format("YYYY");
+      } else if (pickerType === "time") {
+        return dateValue.format("HH:mm:ss");
+      }
+      return "";
+    },
+    [],
+  );
+
+  const handlePickerChange = useCallback(
+    (newPicker: Picker) => {
+      if (!onChangeRef.current) {
+        return;
+      }
+
+      const currentValue = valueRef.current ?? defaultValueRef.current;
+      if (currentValue?.length) {
+        const date = currentValue.map((item) =>
+          formatDateByPicker(dayjs(item.toString()), newPicker),
+        );
+        onChangeRef.current(date, newPicker);
+      } else {
+        onChangeRef.current(undefined, newPicker);
+      }
+    },
+    [formatDateByPicker],
+  );
+
+  useEffect(() => {
+    if (pickerProps !== undefined) {
+      const prevPicker = prevPickerRef.current;
+
+      if (!isInitializedRef.current) {
+        isInitializedRef.current = true;
+      } else if (prevPicker !== undefined && prevPicker !== pickerProps) {
+        handlePickerChange(pickerProps);
+      }
+
+      setPicker(pickerProps);
+      prevPickerRef.current = pickerProps;
+    }
+  }, [handlePickerChange, pickerProps]);
+
+  return (
+    <div className={classNames(styles.RangePickerWrap, className)}>
+      {showPicker && picker !== "time" && (
+        <Select
+          {...pickerSelectProps}
+          className={classNames(
+            styles.pickerSelect,
+            pickerSelectProps?.className,
+          )}
+          disabled={selectDisabled}
+          options={(pickerOptions ?? PickerOptions).filter(
+            (item) => !pickerHide.includes(item.value as Picker),
+          )}
+          onChange={(v, o) => {
+            pickerSelectProps?.onChange?.(v, o);
+            const newPicker = v as Picker;
+            handlePickerChange(newPicker);
+            setPicker(newPicker);
+            prevPickerRef.current = newPicker;
+          }}
+          value={picker}
+          allowClear={false}
+          showSearch={false}
+        />
+      )}
+      <DatePicker.RangePicker
+        {...rangePickerConfig}
+        ref={ref}
+        popupClassName={classNames(styles.rangePickerPopup, popupClassName)}
+        getPopupContainer={getPopupContainer ?? defaultModalPickerGetPopupContainer}
+        className={styles.RangePicker}
+        picker={picker}
+        disabled={disabled}
+        showTime={showTime}
+        defaultValue={
+          Array.isArray(defaultValue)
+            ? (defaultValue?.map((i) => dayjs(new Date(i!.toString()))) as [
+                dayjs.Dayjs,
+                dayjs.Dayjs,
+              ])
+            : defaultValue
+        }
+        value={
+          Array.isArray(value)
+            ? (value?.map((i) => dayjs(new Date(i!.toString()))) as [
+                dayjs.Dayjs,
+                dayjs.Dayjs,
+              ])
+            : value
+        }
+        onChange={(dates) => {
+          if (!dates) {
+            onChange?.(undefined, picker);
+          } else {
+            let date: string[] = [];
+
+            if (picker === "date") {
+              date = dates?.map((i) => {
+                return showTime
+                  ? dayjs(i).format("YYYY-MM-DD HH:mm:ss")
+                  : dayjs(i).format("YYYY-MM-DD");
+              });
+            } else if (picker === "week") {
+              date = dates?.map((i) => dayjs(i).format("YYYY-wo"));
+            } else if (picker === "month") {
+              date = dates?.map((i) => dayjs(i).format("YYYY-MM"));
+            } else if (picker === "quarter") {
+              date = dates?.map((i) => dayjs(i).format("YYYY-Q"));
+            } else if (picker === "year") {
+              date = dates?.map((i) => dayjs(i).format("YYYY"));
+            } else if (picker === "time") {
+              date = dates?.map((i) => dayjs(i).format("HH:mm:ss"));
+            }
+
+            onChange?.(date, picker);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default RangePicker;

package/src/components/DatePicker/StepPicker/index.module.less

@@ -0,0 +1,27 @@
+.StepPicker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 5px;
+
+  .icon {
+    &.ant-btn-icon-only {
+      width: 32px;
+      height: 32px;
+    }
+
+    border-radius: 4px;
+
+    font-size: 16px;
+  }
+
+  .time {
+    width: 32px;
+    min-width: max-content;
+    height: 32px;
+    padding: 0px 4px;
+
+    font-size: 16px;
+    border-radius: 4px;
+  }
+}

package/src/components/DatePicker/StepPicker/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import styles from "./index.module.less";
+import dayjs from "dayjs";
+import Button from "../../Button";
+import classNames from "classnames";
+import Icon from "../../Icon";
+
+const formatMap = {
+  day: "DD日",
+  month: "MM月",
+  year: "YYYY年",
+};
+
+const returnFormat = {
+  day: "YYYY-MM-DD",
+  month: "YYYY-MM",
+  year: "YYYY",
+};
+
+interface ItemProps {
+  className?: string;
+}
+
+export interface StepPickerProps {
+  step?: number;
+  picker?: "day" | "month" | "year";
+  onChange?: (date: string) => void;
+  value?: string;
+  className?: string;
+  disabled?: boolean;
+  prevItemProps?: ItemProps;
+  nextItemProps?: ItemProps;
+  timeItemProps?: ItemProps;
+  minDate?: string;
+  maxDate?: string;
+}
+
+const StepPicker: React.FC<StepPickerProps> = (props) => {
+  const {
+    step = 1,
+    picker = "day",
+    onChange,
+    value,
+    className,
+    disabled,
+    prevItemProps,
+    nextItemProps,
+    timeItemProps,
+    minDate,
+    maxDate,
+  } = props;
+  const [date, setDate] = useState<dayjs.Dayjs>(value ? dayjs(value) : dayjs());
+
+  return (
+    <div className={classNames(styles.StepPicker, className)}>
+      <Button
+        {...prevItemProps}
+        className={classNames(styles.icon, prevItemProps?.className)}
+        onClick={() => {
+          if (
+            !!minDate &&
+            date.subtract(step, picker).isBefore(dayjs(minDate))
+          ) {
+            return;
+          }
+
+          setDate(date.subtract(step, picker));
+          onChange?.(date.subtract(step, picker).format(returnFormat[picker]));
+        }}
+        icon={<Icon icon="ant-design:left-outlined" />}
+        disabled={
+          disabled ||
+          (!!minDate && date.subtract(step, picker).isBefore(dayjs(minDate)))
+        }
+      />
+      <Button
+        type="primary"
+        disabled={disabled}
+        className={styles.time}
+        {...timeItemProps}
+      >
+        {date.format(formatMap[picker])}
+      </Button>
+      <Button
+        {...nextItemProps}
+        className={classNames(styles.icon, nextItemProps?.className)}
+        onClick={() => {
+          if (!!maxDate && date.isAfter(dayjs(maxDate))) {
+            return;
+          }
+          setDate(date.add(step, picker));
+          onChange?.(date.add(step, picker).format(returnFormat[picker]));
+        }}
+        icon={<Icon icon="ant-design:right-outlined" />}
+        disabled={disabled || (!!maxDate && date.isAfter(dayjs(maxDate)))}
+      />
+    </div>
+  );
+};
+
+export default StepPicker;

package/src/components/DatePicker/defaultModalPickerGetPopupContainer.ts

@@ -0,0 +1,7 @@
+/**
+ * 将日期浮层挂到当前 antd Modal 的 wrap 上，避免父级 overflow:hidden（如嵌入弹窗）裁切；
+ * 与数据资源等大屏 BaseModal 内原先独立弹窗的常见表现一致。非弹窗场景回退 document.body。
+ */
+export function defaultModalPickerGetPopupContainer(node: HTMLElement) {
+  return (node.closest(".ant-modal-wrap") as HTMLElement) ?? document.body;
+}

package/src/components/DatePicker/index.md

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

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

@@ -0,0 +1,39 @@
+.DatePicker {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  width: 100%;
+  height: 100%;
+  max-height: max-content;
+
+  border-radius: 6px;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: inherit;
+
+  .pickerSelect {
+    width: 80px;
+    min-width: 80px;
+  }
+
+  .ant-picker {
+    height: 100%;
+    width: 100%;
+
+    border-radius: inherit;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    text-align: inherit;
+  }
+}
+
+.datePickerPopup {
+  position: fixed;
+}