form-driver 0.4.25 → 0.4.27

package/src/ui/editor/basic/ARangePicker.tsx

@@ -1,17 +1,16 @@
 import React, { Component, RefObject } from "react";
 import { DatePicker } from "antd";
-import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import zhCN from "antd/lib/date-picker/locale/zh_CN";
 import moment from "moment";
 import { DatePicker as DatePickerM } from "antd-mobile";
 import { Button as AntButton } from "antd";
-import ReactDOM from "react-dom";
 import { RangePickerProps } from "antd/lib/date-picker";
 import _ from "lodash";
-import { Viewer, ViewerState } from '../../BaseViewer';
-import { MUtil } from '../../../framework/MUtil';
+import { Viewer, ViewerState } from "../../BaseViewer";
+import { MUtil } from "../../../framework/MUtil";
 import { MProp } from "../../../framework/Schema";
-import { MDateRangeType } from '../../../types/MDateRangeType';
-import { assembly } from '../../../framework/Assembly';
+import { MDateRangeType } from "../../../types/MDateRangeType";
+import { assembly } from "../../../framework/Assembly";
 
 export type ARangePickerData = [
   // 开始时间
@@ -19,25 +18,31 @@ export type ARangePickerData = [
   // 结束时间
   string | null | undefined,
   // 是否至今，如果true，结束时间是无效的
-  boolean | null | undefined
+  boolean | null | undefined,
 ];
 
 type AntData = [moment.Moment | null, moment.Moment | null];
 
 interface State extends ViewerState {
   mobileDlg: boolean;
-  mobileStep: 'start' | 'end';
+  mobileStep: "start" | "end";
   mobileStartDate?: Date;
 }
 
 export class ARangePicker extends Viewer<State> {
-  _pickerRef: RefObject<any> = React.createRef();
+  _pickerRef: RefObject<HTMLDivElement> = React.createRef();
   _onCalendarChangeValue?: AntData | null;
+  _panelClickedDate?: moment.Moment | null; // showTime 模式下通过面板点击事件捕获的日期
   _startConfirmed = false; // 标记开始日期是否已确认，用于区分 onClose 是取消还是确认后的自动触发
 
   constructor(p: MProp) {
     super(p);
-    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false, mobileStep: 'start' };
+    this.state = {
+      ctrlVersion: 1,
+      noValidate: false,
+      mobileDlg: false,
+      mobileStep: "start",
+    };
   }
 
   componentDidUpdate() {
@@ -50,21 +55,27 @@ export class ARangePicker extends Viewer<State> {
 
   _patchTillnow() {
     const v = super.getValue();
-    if (_.get(v, "[2]")) { // tillnow
-      const dom = ReactDOM.findDOMNode(this._pickerRef.current);
+    if (_.get(v, "[2]")) {
+      // tillnow
+      const dom = this._pickerRef.current;
       if (dom) {
-        // @ts-ignore
         let r = dom.querySelector(":nth-child(3)");
-        r.innerHTML = "<input readonly disabled size='12' autocomplete='off' value='至今' style='color: black'>";
+        if (r) {
+          r.innerHTML =
+            "<input readonly disabled size='12' autocomplete='off' value='至今' style='color: black'>";
+        }
       }
     }
   }
 
   /**
    * RangePicker的数据转换成json上的数据类型
-   * @param r 
+   * @param r
    */
-  _rangePicker2Data(v: AntData | null | undefined, tillNow: boolean): ARangePickerData | undefined {
+  _rangePicker2Data(
+    v: AntData | null | undefined,
+    tillNow: boolean,
+  ): ARangePickerData | undefined {
     if (!v) {
       return undefined;
     }
@@ -74,12 +85,13 @@ export class ARangePicker extends Viewer<State> {
 
   /**
    * json上的数据转换成RangePicker的数据
-   * @param d 
+   * @param d
    */
   _data2rangePicker(d: ARangePickerData): AntData {
     const dataFormat = this.props.schema.dataFormat ?? "x";
     // 若 tillNow=true，结束时间传 null，避免 RangePicker 缓存旧结束时间
-    const endTime = d[2] === true ? null : (d[1] ? moment(d[1], dataFormat) : null);
+    const endTime =
+      d[2] === true ? null : d[1] ? moment(d[1], dataFormat) : null;
     return [d[0] ? moment(d[0], dataFormat) : null, endTime];
   }
 
@@ -87,45 +99,76 @@ export class ARangePicker extends Viewer<State> {
     const p = this.props.schema.props ?? {};
     let rangePickerData = this._data2rangePicker(this.getValue() ?? []);
     if (MUtil.phoneLike()) {
-      let show = MDateRangeType.toReadableN(assembly, this.props.schema, super.getValue());
+      let show = MDateRangeType.toReadableN(
+        assembly,
+        this.props.schema,
+        super.getValue(),
+      );
 
       // 根据 precision 配置确定移动端 DatePicker 精度（使用扁平化属性 dateRangePrecision）
-      const mobilePrecision = (this.props.schema.dateRangePrecision || 'day') as 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
-
-      return <>
-        <div className="backfill" onClick={() => this.setState({ mobileDlg: true, mobileStep: 'start' })}> {show ?? '请点击选择'} </div>
-        {/* 移动端：使用两步 DatePickerM 选择开始和结束日期 */}
-        <DatePickerM
-          key={`start_${mobilePrecision}`}
-          visible={this.state.mobileDlg && this.state.mobileStep === 'start'}
-          precision={mobilePrecision}
-          title="选择开始日期"
-          min={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
-          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
-          onConfirm={(val) => {
-            this._startConfirmed = true;
-            this.setState({ mobileStartDate: val, mobileStep: 'end' });
-          }}
-          onClose={() => {
-            // antd-mobile v5 确认时会同时触发 onConfirm 和 onClose
-            // 用实例变量同步判断：确认后的 onClose 应忽略，仅用户主动取消时才关闭
-            if (this._startConfirmed) {
-              this._startConfirmed = false;
-              return;
+      const mobilePrecision = (this.props.schema.dateRangePrecision ||
+        "day") as "year" | "month" | "day" | "hour" | "minute" | "second";
+
+      return (
+        <>
+          <div
+            className="backfill"
+            onClick={() =>
+              this.setState({ mobileDlg: true, mobileStep: "start" })
+            }
+          >
+            {" "}
+            {show ?? "请点击选择"}{" "}
+          </div>
+          {/* 移动端：使用两步 DatePickerM 选择开始和结束日期 */}
+          <DatePickerM
+            key={`start_${mobilePrecision}`}
+            visible={this.state.mobileDlg && this.state.mobileStep === "start"}
+            precision={mobilePrecision}
+            title="选择开始日期"
+            min={
+              this.props.schema.min
+                ? new Date(this.props.schema.min)
+                : undefined
+            }
+            max={
+              this.props.schema.max
+                ? new Date(this.props.schema.max)
+                : undefined
             }
-            this.setState({ mobileDlg: false });
-          }}
-        />
-        <DatePickerM
-          key={`end_${mobilePrecision}`}
-          visible={this.state.mobileDlg && this.state.mobileStep === 'end'}
-          precision={mobilePrecision}
-          title={
-            // 如果允许"至今"且开始时间不在未来，在标题区域展示"至今"按钮
-            !this.props.schema.dateRange?.hideTillNow
-            && !this.props.schema.dateRange?.showTime
-            && !(this.state.mobileStartDate && this.state.mobileStartDate > new Date())
-              ? <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
+            onConfirm={(val) => {
+              this._startConfirmed = true;
+              this.setState({ mobileStartDate: val, mobileStep: "end" });
+            }}
+            onClose={() => {
+              // antd-mobile v5 确认时会同时触发 onConfirm 和 onClose
+              // 用实例变量同步判断：确认后的 onClose 应忽略，仅用户主动取消时才关闭
+              if (this._startConfirmed) {
+                this._startConfirmed = false;
+                return;
+              }
+              this.setState({ mobileDlg: false });
+            }}
+          />
+          <DatePickerM
+            key={`end_${mobilePrecision}`}
+            visible={this.state.mobileDlg && this.state.mobileStep === "end"}
+            precision={mobilePrecision}
+            title={
+              // 如果允许"至今"且开始时间不在未来，在标题区域展示"至今"按钮
+              !this.props.schema.dateRange?.hideTillNow &&
+              !(
+                this.state.mobileStartDate &&
+                this.state.mobileStartDate > new Date()
+              ) ? (
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 12,
+                  }}
+                >
                   <span>选择结束日期</span>
                   <AntButton
                     size="small"
@@ -134,96 +177,252 @@ export class ARangePicker extends Viewer<State> {
                       const startDate = this.state.mobileStartDate;
                       if (startDate) {
                         super.changeValueEx(
-                          this._rangePicker2Data([moment(startDate), moment()], true),
-                          true, true
+                          this._rangePicker2Data(
+                            [moment(startDate), moment()],
+                            true,
+                          ),
+                          true,
+                          true,
                         );
                       }
                       this.setState({ mobileDlg: false });
                     }}
-                  >至今</AntButton>
+                  >
+                    至今
+                  </AntButton>
                 </div>
-              : "选择结束日期"
-          }
-          min={this.state.mobileStartDate || (this.props.schema.min ? new Date(this.props.schema.min) : undefined)}
-          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
-          onConfirm={(val: any) => {
-            const startDate = this.state.mobileStartDate;
-            if (startDate) {
-              // 防御：结束日期不能早于开始日期
-              const finalEnd = val < startDate ? startDate : val;
-              super.changeValueEx(this._rangePicker2Data([moment(startDate), moment(finalEnd)], false), true, true);
+              ) : (
+                "选择结束日期"
+              )
             }
-            this.setState({ mobileDlg: false });
-          }}
-          onClose={() => {
-            // 回退到第一步，让用户可以重新选择开始日期
-            this.setState({ mobileStep: 'start' });
-          }}
-        />
-      </>
+            min={
+              this.state.mobileStartDate ||
+              (this.props.schema.min
+                ? new Date(this.props.schema.min)
+                : undefined)
+            }
+            max={
+              this.props.schema.max
+                ? new Date(this.props.schema.max)
+                : undefined
+            }
+            onConfirm={(val: any) => {
+              const startDate = this.state.mobileStartDate;
+              if (startDate) {
+                // 防御：结束日期不能早于开始日期
+                const finalEnd = val < startDate ? startDate : val;
+                super.changeValueEx(
+                  this._rangePicker2Data(
+                    [moment(startDate), moment(finalEnd)],
+                    false,
+                  ),
+                  true,
+                  true,
+                );
+              }
+              this.setState({ mobileDlg: false });
+            }}
+            onClose={() => {
+              // 回退到第一步，让用户可以重新选择开始日期
+              this.setState({ mobileStep: "start" });
+            }}
+          />
+        </>
+      );
     } else {
       // 根据 precision 配置确定 PC 端 picker 模式和 showTime（使用扁平化属性 dateRangePrecision）
       const precision = this.props.schema.dateRangePrecision;
-      const pcShowTime = precision === 'minute' || this.props.schema.dateRange?.showTime;
-      const hideFooter = this.props.schema.dateRange?.hideTillNow || pcShowTime;
+      const pcShowTime =
+        precision === "minute" || this.props.schema.dateRange?.showTime;
+      const hideFooter = this.props.schema.dateRange?.hideTillNow;
 
       // 动态构建额外属性，避免 showTime 和 picker 同时传入导致类型冲突
       const extraProps: any = {};
-      if (precision === 'year') {
-        extraProps.picker = 'year';
-      } else if (precision === 'month') {
-        extraProps.picker = 'month';
+      if (precision === "year") {
+        extraProps.picker = "year";
+      } else if (precision === "month") {
+        extraProps.picker = "month";
       } else if (pcShowTime) {
         // precision 为 minute 时只展示时分，不展示秒
-        extraProps.showTime = precision === 'minute' ? { format: 'HH:mm' } : true;
+        extraProps.showTime =
+          precision === "minute" ? { format: "HH:mm" } : true;
         // 同步设置输入框的显示格式，避免 showTime.format 只影响面板列而输入框仍显示秒
-        if (precision === 'minute') {
-          extraProps.format = 'YYYY-MM-DD HH:mm';
+        if (precision === "minute") {
+          extraProps.format = "YYYY-MM-DD HH:mm";
         }
       }
 
+      // "至今"按钮的点击处理函数
+      const handleTillNow = () => {
+        // 优先级：onCalendarChange 记录的值 > 面板点击捕获的日期 > 已有默认值 > 当前时间
+        const fromCalendarChange = this._onCalendarChangeValue?.[0];
+        const fromPanelClick = this._panelClickedDate;
+        let startMoment =
+          fromCalendarChange ??
+          fromPanelClick ??
+          rangePickerData?.[0] ??
+          moment();
+
+        // 如果开始时间来自面板点击（只有日期没有时间），将当前时刻的时分附加上去
+        if (!fromCalendarChange && fromPanelClick) {
+          const now = moment();
+          startMoment = startMoment
+            .clone()
+            .hour(now.hour())
+            .minute(now.minute())
+            .second(0);
+        }
+
+        super.changeValueEx(
+          this._rangePicker2Data([startMoment, moment()], true),
+          true,
+          true,
+        );
+      };
+
+      // 判断是否应展示"至今"按钮
+      const showTillNow = !hideFooter;
+
       // 构造元素
-      return <DatePicker.RangePicker
-        ref={this._pickerRef}
-        key={`${this.state.ctrlVersion}_${this.props.schema.dateRangePrecision ?? 'day'}`}
-        renderExtraFooter={hideFooter
-          ? undefined
-          : (mode) => {
-            // 如果开始时间超过当前时间（未来时间），不展示"至今"按钮
-            const startMoment = this._onCalendarChangeValue?.[0];
-            if (startMoment && startMoment.isAfter(moment())) {
-              return null;
+      return (
+        <div ref={this._pickerRef}>
+          <DatePicker.RangePicker
+            key={`${this.state.ctrlVersion}_${
+              this.props.schema.dateRangePrecision ?? "day"
+            }`}
+            panelRender={
+              pcShowTime && showTillNow
+                ? (panelNode) => {
+                    // showTime 模式下：通过事件委托捕获面板上日期单元格的点击
+                    // 同时在 footer 的"确定"按钮同一行注入"至今"按钮
+                    return (
+                      <div
+                        onClick={(e) => {
+                          const target = e.target as HTMLElement;
+                          const cell = target.closest?.(".ant-picker-cell");
+                          if (cell) {
+                            // 排除 disabled 状态的日期单元格
+                            if (
+                              cell.classList.contains(
+                                "ant-picker-cell-disabled",
+                              )
+                            )
+                              return;
+                            const title = cell.getAttribute("title");
+                            if (title) {
+                              const parsed = moment(title, "YYYY-MM-DD");
+                              // 校验 moment 解析有效性，无效日期不记录
+                              if (parsed.isValid()) {
+                                this._panelClickedDate = parsed;
+                              }
+                            }
+                          }
+                        }}
+                        ref={(el) => {
+                          // 面板渲染后，将"至今"按钮注入到 .ant-picker-ok 内部，确定按钮之后
+                          // 这样两者在同一个 flex item 中，确定在左、至今在右
+                          if (!el) return;
+                          const okLi = el.querySelector(".ant-picker-ok");
+                          if (!okLi) return;
+
+                          // 开始时间在未来时，移除已有的至今按钮并不再注入
+                          const previewStart =
+                            this._onCalendarChangeValue?.[0] ??
+                            this._panelClickedDate ??
+                            rangePickerData?.[0];
+                          if (previewStart && previewStart.isAfter(moment())) {
+                            const existingBtn =
+                              okLi.querySelector(".till-now-btn");
+                            if (existingBtn) existingBtn.remove();
+                            return;
+                          }
+
+                          if (!okLi.querySelector(".till-now-btn")) {
+                            const tillNowBtn = document.createElement("button");
+                            tillNowBtn.className =
+                              "ant-btn ant-btn-sm till-now-btn";
+                            tillNowBtn.textContent = "至今";
+                            tillNowBtn.style.cssText = "margin-left: 8px;";
+                            // 使用具名函数以便于清理；先移除可能的旧监听再添加，防止重复绑定
+                            const onTillNowClick = (e: Event) => {
+                              e.stopPropagation();
+                              handleTillNow();
+                            };
+                            tillNowBtn.addEventListener(
+                              "click",
+                              onTillNowClick,
+                            );
+                            okLi.appendChild(tillNowBtn);
+                          }
+                        }}
+                      >
+                        {panelNode}
+                      </div>
+                    );
+                  }
+                : undefined
             }
-            return <div style={{ textAlign: "right" }}>
-              <AntButton
-                size="small" style={{ width: "100px", display: "inline-block", marginTop: "5px" }}
-                onClick={() => {
-                  super.changeValueEx(this._rangePicker2Data(this._onCalendarChangeValue, true), true, true);
-                }}>至今</AntButton>
-            </div>;
-          }
-        }
-        bordered={this.props.hideBorder ? false : true}
-        style={{ width: "300px" }}
-        locale={zhCN}
-        defaultValue={rangePickerData}
-        onCalendarChange={(d) => {
-          this._onCalendarChangeValue = d;
-        }}
-        onChange={(vv) => {
-          // 用户清空日期范围时，直接置空
-          if (!vv) {
-            super.changeValueEx(undefined, true, true);
-            return;
-          }
-          const currentData = super.getValue();
-          const isTillNow = _.get(currentData, '[2]') === true;
-          // 若当前是"至今"且用户只改了开始时间（结束时间仍为 null），保留 tillNow
-          const newTillNow = isTillNow && vv[1] == null;
-          super.changeValueEx(this._rangePicker2Data(vv, newTillNow), true, true);
-        }}
-        {...extraProps}
-      />;
+            renderExtraFooter={
+              !pcShowTime && showTillNow
+                ? (mode) => {
+                    // 非 showTime 模式：使用 renderExtraFooter 展示"至今"按钮
+                    const previewStart =
+                      this._onCalendarChangeValue?.[0] ?? rangePickerData?.[0];
+                    if (previewStart && previewStart.isAfter(moment())) {
+                      return null;
+                    }
+                    return (
+                      <div style={{ textAlign: "right" }}>
+                        <AntButton
+                          size="small"
+                          style={{
+                            width: "100px",
+                            display: "inline-block",
+                            marginTop: "5px",
+                          }}
+                          onClick={handleTillNow}
+                        >
+                          至今
+                        </AntButton>
+                      </div>
+                    );
+                  }
+                : undefined
+            }
+            bordered={this.props.hideBorder ? false : true}
+            style={{ width: "360px" }}
+            locale={zhCN}
+            defaultValue={rangePickerData}
+            onCalendarChange={(d) => {
+              this._onCalendarChangeValue = d;
+              // 用户开始新一轮选择时清理面板点击缓存，避免上一轮过时数据污染
+              this._panelClickedDate = null;
+            }}
+            onOpenChange={(open) => {
+              if (!open) {
+                this._panelClickedDate = null;
+              }
+            }}
+            onChange={(vv) => {
+              // 用户清空日期范围时，直接置空
+              if (!vv) {
+                super.changeValueEx(undefined, true, true);
+                return;
+              }
+              const currentData = super.getValue();
+              const isTillNow = _.get(currentData, "[2]") === true;
+              // 若当前是"至今"且用户只改了开始时间（结束时间仍为 null），保留 tillNow
+              const newTillNow = isTillNow && vv[1] == null;
+              super.changeValueEx(
+                this._rangePicker2Data(vv, newTillNow),
+                true,
+                true,
+              );
+            }}
+            {...extraProps}
+          />
+        </div>
+      );
     }
   }
 }

package/types/ui/editor/basic/ARangePicker.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 import moment from "moment";
-import { Viewer, ViewerState } from '../../BaseViewer';
+import { Viewer, ViewerState } from "../../BaseViewer";
 import { MProp } from "../../../framework/Schema";
 export type ARangePickerData = [
     string | null | undefined,
@@ -10,12 +10,13 @@ export type ARangePickerData = [
 type AntData = [moment.Moment | null, moment.Moment | null];
 interface State extends ViewerState {
     mobileDlg: boolean;
-    mobileStep: 'start' | 'end';
+    mobileStep: "start" | "end";
     mobileStartDate?: Date;
 }
 export declare class ARangePicker extends Viewer<State> {
-    _pickerRef: RefObject<any>;
+    _pickerRef: RefObject<HTMLDivElement>;
     _onCalendarChangeValue?: AntData | null;
+    _panelClickedDate?: moment.Moment | null;
     _startConfirmed: boolean;
     constructor(p: MProp);
     componentDidUpdate(): void;