All files / src/datepicker/_example PickerWithSegmentExample.jsx

25.81% Statements 8/31
0% Branches 0/6
10% Functions 1/10
25.81% Lines 8/31

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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135              1x   1x             1x               1x 1x   1x 1x                                     1x                                                                                                                                                                              
import React, { useState } from "react";
import moment from "moment";
import { DatePicker } from "@tencent/tea-component/lib/datepicker";
import { Justify } from "@tencent/tea-component/lib/justify";
import { Segment } from "@tencent/tea-component/lib/segment";
import { Text } from "@tencent/tea-component/lib/text";
 
const { RangePicker } = DatePicker;
 
const options = [
  { text: "今天", value: "1" },
  { text: "昨天", value: "2" },
  { text: "近7天", value: "3" },
  { text: "近30天", value: "4" },
];
 
const rangeMap = {
  "1": [moment(), moment()],
  "2": [moment().subtract(1, "d"), moment().subtract(1, "d")],
  "3": [moment().subtract(6, "d"), moment()],
  "4": [moment().subtract(29, "d"), moment()],
};
 
export default () => {
  const [segmentValue1, setSegmentValue1] = useState(null);
  const [segmentValue2, setSegmentValue2] = useState(null);
 
  const [value1, setValue1] = useState(null);
  const [value2, setValue2] = useState(null);
 
  function setRangeValue(value, setter) {
    const range = rangeMap[value];
    setter(range);
    return range;
  }
 
  function getSegmentValue(dates) {
    const [start, end] = dates;
    return Object.entries(rangeMap).reduce((prev, cur) => {
      const [key, range] = cur;
      if (start.isSame(range[0], "day") && end.isSame(range[1], "day")) {
        return key;
      }
      return prev;
    }, null);
  }
 
  return (
    <>
      <section>
        <h3>快捷选项栏</h3>
        <Justify
          left={
            <>
              <Segment
                value={segmentValue1}
                options={options}
                onChange={value => {
                  setSegmentValue1(value);
                  const range = setRangeValue(value, setValue1);
                  console.log(
                    range[0].format("YYYY/MM/DD"),
                    range[1].format("YYYY/MM/DD")
                  );
                }}
              />
              <RangePicker
                value={value1}
                onChange={value => {
                  setValue1(value);
                  setSegmentValue1(getSegmentValue(value));
                  console.log(
                    value[0].format("YYYY/MM/DD"),
                    value[1].format("YYYY/MM/DD")
                  );
                }}
              />
            </>
          }
        />
      </section>
      <section>
        <h3>预设快捷选项</h3>
        <RangePicker
          header={
            <Segment
              rimless
              value={segmentValue2}
              options={options}
              onChange={value => {
                setSegmentValue2(value);
                const range = setRangeValue(value, setValue2);
                console.log(
                  range[0].format("YYYY/MM/DD"),
                  range[1].format("YYYY/MM/DD")
                );
              }}
            />
          }
          value={value2}
          onChange={value => {
            setValue2(value);
            setSegmentValue2(getSegmentValue(value));
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            );
          }}
        />
      </section>
      <section>
        <h3>自定义头部</h3>
        <RangePicker
          onChange={value => {
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            );
          }}
          range={[moment("2019-01-01"), null]}
          disabledDate={date => {
            return (
              !date.isAfter(moment(), "day") &&
              !date.isBefore(moment("2019-01-01"), "day")
            );
          }}
          header={
            <Text theme="weak">提示:仅支持选择从 2019-01-01 至今的数据</Text>
          }
        />
      </section>
    </>
  );
};