手把手带你用React撸一个日程组件

目录

• 业务背景
• 使用技术
• 技术难点
• 设计思路

• 😱一脸懵逼苦
• 🙄开始构思
• 🌲目录结构
• 🛠拆分组件

• Container容器组件
• CalendatrHeader头部容器组件
• ScheduleCantainer详细日程容器

• 左侧刻度
• ScheduleItem日程容器条目

type dataType = {
  startTime: DOMTimeStamp; // 开始时间戳
  endTime: DOMTimeStamp; // 结束时间戳
  [propsName: string]: any; // 业务数据
};
type ContainerType = {
  data: dataType[]; // 业务数据
  initDay?: DOMTimeStamp; // 初始化时间戳
  onChange?: (params: DOMTimeStamp) => void; // 改变日期时的onChange方法
  height?: number; // ScheduleCantainer容器的高度
  scheduleRender?: ({
    data: dataType,
    timestampRange: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; // 传入的回调, 会接收到当前这条数据的业务数据, 当前业务数据所在的时间戳范围;
  businessRender?: ({ timestamp: DOMTimeStamp }) => React.ReactNode; // 传入的业务组件, 查询前端蔡徐坤那个, 看图, 想起来了吗?
  mode?: 'day' | 'week'; // 初始化展示日和天的模式
};

const Container: React.FC<ContainerType> = ({
  initDay,
  onChange,
  scheduleRender,
  businessRender,
  data,
  height = 560,
  mode = 'day',
}) => {
  // 当前选择日期时间戳
  const [targetDay, setTargetDay] = useState<DOMTimeStamp>(initDay);
  // 切换日和周
  const [switchWeekandDay, setSwitchWeekandDay] = useState<'day' | 'week'>(mode);
  return (
    <div className={style.Calendar_Container}>
      <CalendatrHeader
        targetDay={targetDay}
        setTargetDay={(timestamp) => {
          onChange(timestamp);
          setTargetDay(timestamp);
        }}
        businessRender={businessRender}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={setSwitchWeekandDay}
      />
      <ScheduleCantainer
        height={height}
        data={data}
        targetDay={targetDay}
        scheduleRender={scheduleRender}
      />
    </div>
  );
};

const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };

const CalendatrHeader: React.FC<CalendatrHeaderType> = ({
  targetDay,
  setTargetDay,
  switchWeekandDay,
  businessRender,
  setSwitchWeekandDay,
}) => {
  // 当前一周的日期
  const [dateTextList, setDateTextList] = useState<WeekType | []>([]);
  // 这个状态是在切换周的时候, 直接增加或者减少一周的时间戳, 下一周或者上一周的日期就会被自动算出来;
  const [currTime, setCurrTime] = useState<number>(targetDay); 
  useEffect(() => {
    setDateTextList(calcWeekDayList(targetDay));
  }, [targetDay]);
  // 根据当前时间戳, 计算之前和之后天数的日期, 由于星期是固定不变的, 所以只计算当前一周的日期就好了
  const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };
  const onChangeWeek: (type: 'prevWeek' | 'nextWeek', switchWay: 'week' | 'day') => void = (
    type,
    switchWay,
  ) => {
    if (switchWay === 'week') {
      const calcWeekTime =
        type === 'prevWeek' ? currTime - 3600 * 1000 * 24 * 7 : currTime + 3600 * 1000 * 24 * 7;
      setCurrTime(calcWeekTime);
      setDateTextList([...calcWeekDayList(calcWeekTime)]);
    }
    if (switchWay === 'day') {
      const calcWeekTime =
        type === 'prevWeek' ? targetDay - 3600 * 1000 * 24 : targetDay + 3600 * 1000 * 24;
      setCurrTime(calcWeekTime);
      setTargetDay(calcWeekTime);
    }
  };
  return (
    <div className={style.Calendar_Header}>
      <DailyOptions
        targetDay={targetDay}
        setCurrTime={setCurrTime}
        setTargetDay={setTargetDay}
        dateTextList={dateTextList}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={(value) => {
          setSwitchWeekandDay(value);
          if (value === 'week') {
            setDateTextList(calcWeekDayList(targetDay));
          }
        }}
        onChangeWeek={(type) => onChangeWeek(type, switchWeekandDay)}
      />
      {switchWeekandDay === 'week' && (
        <WeeklyOptions
          targetDay={targetDay}
          setTargetDay={setTargetDay}
          dateTextList={dateTextList}
        />
      )}
      <div className={style.Calendar_Header_businessRender}>
        <div className={style.Calendar_Header_Zone}>GMT+8</div>
        {businessRender({ timestamp: targetDay })}
      </div>
    </div>
  );
};

const ScheduleItem: React.FC<ScheduleItemType> = ({
  timestampRange,
  dataItem,
  scheduleRender,
  width,
  dataItemLength,
}) => {
  // 计算容器高度
  const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;
  const calcTop: (startTime: number) => number = (startTime) => moment(startTime).minute() / 2;
  // 计算 ScheduleItem 宽度
  const calcWidth: (w: number, d: number) => string = (w, d) =>
    width === 0 || dataItemLength * width < 347 ? '100%' : `${d * w}px`;
  return (
    <div style={{ position: 'relative' }} className={style.Calendar_ScheduleItem_Fath}>
      <div
        className={style.Calendar_ScheduleItem}
        style={{ width: calcWidth(width, dataItemLength) }}
      >
        {dataItem.map((data, index) => {
          return (
            <Fragment key={index}>
              {data.startTime >= timestampRange[0] && data.startTime < timestampRange[1] && (
                <div
                  className={`${style.Calendar_ScheduleItem_container} Calendar_ScheduleItem_container`}
                  style={{
                    height: `${calcHeight([data.startTime, data.endTime]) || 30}px`,
                    top: calcTop(data.startTime),
                  }}
                >
                  {scheduleRender({ data, timestampRange })}
                </div>
              )}
            </Fragment>
          );
        })}
      </div>
    </div>
  );
};

scheduleRender?: ({
    data: dataType,
    timestampRange: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; 

const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;

[
  {
    startTime: 1626057075000, // 开始时间
    endTime: 1626070875000, // 结束时间
    value: 'any', // 业务数据
  },
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
];

for (let i = 0; i < HoursList.length; i++) {
      resule.push({
        timestampRange: [todayTime + i * 3600 * 1000, todayTime + (i + 1) * 3600 * 1000],
        dataItem: [ // 由于当前一个时间段, 日程可能冲突, 所以要有一个list传入组件
          ...data.filter((item) => {
            return (
              item.startTime >= todayTime + i * 3600 * 1000 &&
              item.startTime < todayTime + (i + 1) * 3600 * 1000
            );
          }),
        ],
      });
    }