sunmao-sdk/src/component/FormRender/widgets/antd/dateRange.jsx

榫卯-开箱即用赋能-sdk

/**
 * Updated by Tw93 on 2019-12-08.
 * 日历多选组件
 */
import { useState, useMemo } from "react";
import { DatePicker, TimePicker } from "antd";
import RangeHoc from "../../components/rangeHoc";
import { isObject } from "lodash";

const { RangePicker: DateRange } = DatePicker;
const { RangePicker: TimeRange } = TimePicker;

export default function dateRange(p) {
  const { format = "dateTime" } = p.schema;
  const onChange = (value, string) =>
    p.onChange(p.name, value ? string : value);
  const RangeComponent = format === "time" ? TimeRange : DateRange;

  const _rangeDay = useMemo(() => {
    let ret = 0;
    try {
      ret = parseInt(p.options.rangeDay) - 1; // 最多可选几天
    } catch {
    } finally {
      return ret;
    }
  }, [p.options?.rangeDay]);
  // 最多可选多少天
  const [dates, setDates] = useState(null);
  // 设置不可选
  const disabledDate = current => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], "days") > _rangeDay;
    const tooEarly = dates[1] && dates[1].diff(current, "days") > _rangeDay;
    return !!tooEarly || !!tooLate;
  };
  // 重置可选像
  const onOpenChange = open => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };
  // 重置可选像
  const onCalendarChange = val => setDates(val);

  const disabledInfo = _rangeDay
    ? {
        options: {
          onCalendarChange: onCalendarChange,
          onOpenChange: onOpenChange,
          disabledDate: disabledDate
        },
        value: dates || p.value
      }
    : {};

  const hocProps = { ...p, ...disabledInfo, onChange, RangeComponent };
  return <RangeHoc {...hocProps} />;
}