All files / src/datepicker TimeSupportWrapper.tsx

0% Statements 0/18
0% Branches 0/14
0% Functions 0/6
0% Lines 0/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116                                                                                                                                                                                                                                       
import React from "react";
import { Moment, isMoment } from "moment";
import CalendarPart from "../calendar/CalendarPart";
import { Button } from "../button";
import { CommonDatePickerProps } from "./DatePickerProps";
import { useTranslation } from "../i18n";
import {
  CalendarTableType,
  showTimeType,
  RangeDateType,
} from "../calendar/DateProps";
import { CalendarTableProps } from "../calendar/CalendarTable";
import { Omit } from "../_type";
import { useConfig } from "../_util/config-context";
 
interface TimeSupportWrapperProps extends CommonDatePickerProps {
  /**
   * Render Props
   */
  children: (props: any) => React.ReactNode;
 
  /**
   * 确定回调
   */
  onOk?: (event: React.MouseEvent) => void;
 
  /**
   * 当前展示的日历类型
   */
  type?: CalendarTableType | [CalendarTableType, CalendarTableType];
 
  /**
   * 日历类型改变回调
   */
  onTypeChange?: (
    types: CalendarTableType | [CalendarTableType, CalendarTableType]
  ) => void;
 
  /**
   * 是否开启时间选择
   */
  showTime?: showTimeType<Moment | RangeDateType>;
}
 
function hasValue(value) {
  if (Array.isArray(value)) {
    return isMoment(value[0]) && isMoment(value[1]);
  }
  return isMoment(value);
}
 
export function TimeSupportWrapper({
  onOk,
  children,
  ...props
}: TimeSupportWrapperProps & Omit<CalendarTableProps, "type">) {
  const t = useTranslation();
  const { classPrefix } = useConfig();
 
  const { value, type, onTypeChange, showTime } = props;
 
  if (!showTime) {
    return <CalendarPart.Body>{children(props)}</CalendarPart.Body>;
  }
 
  function setType(value: CalendarTableType) {
    if (Array.isArray(type)) {
      onTypeChange([value, value]);
      return;
    }
    onTypeChange(value);
  }
 
  function isTimeType() {
    if (Array.isArray(type)) {
      return type[0] === "time" && type[1] === "time";
    }
    return type === "time";
  }
 
  return (
    <>
      <CalendarPart.Body>{children(props)}</CalendarPart.Body>
      <CalendarPart.Footer
        left={
          <div className={`${classPrefix}-date-status`}>
            {isTimeType() ? (
              <Button
                type="link"
                onClick={() => setType("date")}
                style={{ textDecoration: "none" }}
              >
                {t.selectDate}
              </Button>
            ) : (
              <Button
                type="link"
                onClick={() => setType("time")}
                disabled={!hasValue(value)}
                style={{ textDecoration: "none" }}
              >
                {t.selectTime}
              </Button>
            )}
          </div>
        }
        right={
          <Button type="primary" onClick={onOk} disabled={!hasValue(value)}>
            {t.okText}
          </Button>
        }
      />
    </>
  );
}