@cloudbase/weda-ui 2.0.27 → 3.1.1

package/src/web/components/calendar/index.jsx

@@ -1,312 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { usePlatform } from '../../utils/platform';
-import { ConfigProvider, Select } from 'tea-component';
-import * as PropTypes from 'prop-types';
-import classNames from '../../utils/classnames';
-import dayjs from 'dayjs';
-import { createDateList } from './util';
-import './index.css';
-
-// 抽取配置常量
-const blockName = 'weda-calendar'; // 类名前缀
-const minYear = 1970; // 最早选择年份
-const firstDayOfWeek = 1; // 日历从周一开始
-const format = 'YYYY-MM-DD';
-const controlSectionSize = 'auto'; // 操作栏控件尺寸
-const week = ['一', '二', '三', '四', '五', '六', '日']; // 表头日历星期展示方式
-const isShowWeekend = true; // 是否显示周末
-
-export default function Calendar({
-  className,
-  style,
-  initVisible,
-  initValue,
-  configData = [],
-}) {
-  // 'h5' || 'pc'
-  const platform = usePlatform();
-  const visible = typeof initVisible === 'boolean' ? initVisible : true;
-  // dayjs.Dayjs
-  const [value, setValue] = useState(dayjs());
-  // number
-  const [year, setYear] = useState(dayjs().year());
-  const [month, setMonth] = useState(parseInt(dayjs().format('M'), 10));
-
-  useEffect(() => {
-    if (initValue !== null && initValue !== '') {
-      setValue(dayjs(initValue));
-      setYear(dayjs(initValue).year());
-      setMonth(parseInt(dayjs(initValue).format('M'), 10));
-    }
-  }, [initValue]);
-
-  // 年份、月份 Select 选择框选项
-  const [yearSelectList, monthSelectList] = useMemo(() => {
-    const yearList = [];
-    const monthList = [];
-
-    // 年列表
-    const yearBegin = Math.min(minYear, year - 50);
-    const yearEnd = Math.max(minYear, year + 50); // parseInt(dayjs().format('YYYY-MM-DD'));
-
-    for (let i = yearBegin; i <= yearEnd; i++) {
-      yearList.push({
-        value: i,
-      });
-    }
-    // 月列表
-    for (let i = 1; i <= 12; i++) {
-      monthList.push({
-        value: i,
-      });
-    }
-
-    return [yearList, monthList];
-  }, [year, month]);
-
-  // 匹配数据
-  const _dateList = (configList) => {
-    const _map = new Map();
-    const configArr = JSON.parse(JSON.stringify(configData));
-    // 补日期的零
-    configArr &&
-      configArr.length &&
-      configArr.map((item) => {
-        if (item.matchDate === '' || item.matchDate === undefined) return;
-        const date = item.matchDate.split('-');
-        const day = date[2].split('');
-        if (day.length === 1) {
-          date[2] = `0${date[2]}`;
-          item.matchDate = date.join('-');
-        }
-      });
-    for (const item of configArr) {
-      _map.set(item.matchDate, item);
-    }
-    return configList.map((item) => {
-      return item.reduce((res, i) => {
-        if (_map.has(i.formattedDate)) {
-          const _disabled = _map.get(i.formattedDate)['disabled'];
-          const _marked = _map.get(i.formattedDate)['marked'];
-          i['disabled'] =
-            _disabled !== undefined ? JSON.parse(_disabled) : false;
-          i['marked'] = _marked;
-        }
-        res.push(i);
-        return res;
-      }, []);
-    });
-  };
-
-  // 日历单元格数据
-  const dateList = useMemo(
-    () => _dateList(createDateList(year, month, firstDayOfWeek, value, format)),
-    [year, month, firstDayOfWeek, format, value, configData]
-  );
-
-  // 表头数组
-  const colHeaderList = useMemo(() => {
-    const weekTextArr = week;
-    const list = [];
-    for (let i = firstDayOfWeek; i <= 7; i++) {
-      if (!isShowWeekend && i > 5) {
-        break;
-      }
-      list.push({
-        day: i,
-        text: weekTextArr[i - 1],
-      });
-    }
-    if (firstDayOfWeek > 1) {
-      for (let i = 1; i < firstDayOfWeek; i++) {
-        if (!isShowWeekend && i > 5) {
-          break;
-        }
-        list.push({
-          day: i,
-          text: weekTextArr[i - 1],
-        });
-      }
-    }
-    return list;
-  }, [firstDayOfWeek, isShowWeekend, week]);
-
-  // 补零
-  // const fix0 = (num) => {
-  //   return num < 10 ? `0${num}` : num;
-  // };
-  const yearSelectOptions = () => {
-    return yearSelectList.map((item) => ({
-      text: `${item.value} 年`,
-      value: `${item.value}`,
-    }));
-  };
-
-  const monthSelectOptions = () => {
-    return monthSelectList.map((item) => ({
-      text: `${item.value} 月`,
-      value: `${item.value}`,
-    }));
-  };
-
-  return (
-    <div
-      data-testid="weda-calendar"
-      className={classNames(
-        blockName,
-        'weda-ui',
-        platform === 'h5' ? `${blockName}-h5` : `${blockName}-pc`,
-        {
-          [className]: className,
-        }
-      )}
-      style={style}
-    >
-      {/* 操作部分 PC*/}
-      <ConfigProvider classPrefix="wedatea2td">
-        <div
-          className={blockName + '__control_pc'}
-          data-testid="weda-calendar-control-pc"
-        >
-          {visible ? (
-            <div className={blockName + '__control-section'}>
-              {/* 年份选择框 */}
-              <div className={blockName + '__control-section-cell'}>
-                <Select
-                  appearance="button"
-                  size={controlSectionSize}
-                  value={String(year)}
-                  options={yearSelectOptions()}
-                  onChange={(selectYear) => setYear(parseInt(selectYear))}
-                />
-              </div>
-              {/* 月份选择框 */}
-              <div className={blockName + '__control-section-cell'}>
-                <Select
-                  appearance="button"
-                  size={controlSectionSize}
-                  value={String(month)}
-                  options={monthSelectOptions()}
-                  onChange={(selectMonth) => setMonth(parseInt(selectMonth))}
-                />
-              </div>
-            </div>
-          ) : (
-            <div
-              className={`${blockName}__current-date`}
-            >{`${year} 年 ${month} 月`}</div>
-          )}
-        </div>
-      </ConfigProvider>
-
-      {/* H5 */}
-      <div
-        className={blockName + '__control_h5'}
-        data-testid="weda-calendar-control-h5"
-      >
-        {visible && (
-          <div
-            className={blockName + '_prevMonth wedatea2td-icon-arrowleft--line'}
-            onClick={() => {
-              // 上一个月
-              setYear(month === 1 ? year - 1 : year);
-              setMonth(month === 1 ? 12 : month - 1);
-            }}
-          ></div>
-        )}
-        <div
-          className={`${blockName}__current-date`}
-        >{`${year}年${month}月`}</div>
-        {visible && (
-          <div
-            className={
-              blockName + '_nextMonth wedatea2td-icon-arrowright--line'
-            }
-            onClick={() => {
-              // 下一个月
-              setYear(month === 12 ? year + 1 : year);
-              setMonth(month === 12 ? 1 : month + 1);
-            }}
-          ></div>
-        )}
-      </div>
-
-      {/* 主体部分 */}
-      <div className={blockName + '__panel'}>
-        <table className={blockName + '__table'}>
-          {/* 表头部分 */}
-          {colHeaderList.length > 0 && (
-            <thead className={blockName + '__table-head'}>
-              <tr className={blockName + '__table-head-row'}>
-                {colHeaderList.map((item) => (
-                  <th
-                    key={item.day}
-                    className={blockName + '__table-head-cell'}
-                  >
-                    {item.text}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-          )}
-          <tbody className={blockName + '__table-body'}>
-            {dateList.map((dateRow, dateRowIndex) => (
-              <tr
-                key={String(dateRowIndex)}
-                className={blockName + '__table-body-row'}
-              >
-                {dateRow.map((dateCell, dateCellIndex) => {
-                  if (!isShowWeekend && [6, 7].indexOf(dateCell.day) >= 0)
-                    return null;
-                  const isNow =
-                    (dateCell.formattedDate === dayjs().format('YYYY-MM-DD') &&
-                      'is-now') ||
-                    '';
-                  return (
-                    <td
-                      key={String(dateCellIndex)}
-                      className={classNames(
-                        `${blockName}__table-body-cell`,
-                        isNow,
-                        dateCell.isCurrent ? 'is-checked' : '',
-                        dateCell.belongTo !== 0 ? 'is-disabled' : '',
-                        dateCell.disabled ? 'is-invalid' : ''
-                      )}
-                    >
-                      <div className={blockName + '__table-body-cell-value'}>
-                        {dateCell.date.getDate()}
-                        <div
-                          className={`${blockName}__table-body-cell-bg`}
-                        ></div>
-                        {dateCell.marked && dateCell.marked !== '' && (
-                          <div
-                            style={{ backgroundColor: `${dateCell.marked}` }}
-                            className={blockName + '__table-body-cell-marked'}
-                            data-testid="weda-calendar-cell-marked"
-                          ></div>
-                        )}
-                      </div>
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-Calendar.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  /** 传入日期 '2021-01-01' */
-  initValue: PropTypes.string,
-  /** 平台 'h5' || 'pc'*/
-  platform: PropTypes.string,
-  /** 时间控制器 */
-  initVisible: PropTypes.bool,
-  /** 展示配置 */
-  configData: PropTypes.array,
-};

package/src/web/components/calendar/util.js

@@ -1,90 +0,0 @@
-import dayjs from 'dayjs';
-
-/**
- * 获取一个日期是周几（1~7）
- */
-export const getDay = (dt) => {
-  let day = dayjs(dt).day();
-  if (day === 0) {
-    day = 7;
-  }
-  return day;
-};
-
-/**
- * 创建日历单元格数据
- * @param year 日历年份
- * @param month 日历月份
- * @param firstDayOfWeek 周起始日（1~7）
- * @param currentValue 当前日期
- * @param format 日期格式
- */
-export const createDateList = (
-  year,
-  month,
-  firstDayOfWeek,
-  currentValue,
-  format
-) => {
-  const createCellData = (belongTo, isCurrent, date, weekOrder) => {
-    const day = getDay(date);
-    return {
-      mode: 'month',
-      belongTo,
-      isCurrent,
-      day,
-      weekOrder,
-      date,
-      formattedDate: dayjs(date).format(format),
-      filterDate: null,
-      formattedFilterDate: null,
-      isShowWeekend: true,
-    };
-  };
-
-  const monthFirstDay = dayjs(`${year}-${month}`);
-  const rowList = [];
-  let list = [];
-  let weekCount = 1;
-
-  // 添加上个月中会在本月显示的最后几天日期
-  // getDay(monthFirstDay.toDate()) 获取每月第一天是周几
-  const lastMonthDaysCount =
-    (getDay(monthFirstDay.toDate()) - firstDayOfWeek + 7) % 7;
-  for (let i = 0; i < lastMonthDaysCount; i++) {
-    // 获取显示在当前月的日历中，上月日期数据
-    // monthFirstDay.subtract(num, 'day' | 'month' | 'year') 表示以当月第一天日期为基准，在 日|月|年 数字上减去num
-    const dayObj = monthFirstDay.subtract(i + 1, 'day');
-    list.unshift(createCellData(-1, false, dayObj.toDate(), weekCount));
-  }
-
-  // 添加本月日期
-  // 获取本月最后一天是几号
-  const monthDaysCount = monthFirstDay.endOf('month').daysInMonth();
-  for (let i = 0; i < monthDaysCount; i++) {
-    const dayObj = monthFirstDay.add(i, 'day');
-    list.push(
-      createCellData(0, currentValue.isSame(dayObj), dayObj.toDate(), weekCount)
-    );
-    if (list.length === 7) {
-      rowList.push(list);
-      list = [];
-      weekCount += 1;
-    }
-  }
-
-  // 添加下月日期
-  if (list.length) {
-    // 获取当月最后一天
-    const monthLastDay = dayjs(`${year}-${month}`).endOf('month');
-    // 获取下月在当月日历中的天数
-    const nextMonthDaysCount = 7 - list.length;
-    for (let i = 0; i < nextMonthDaysCount; i++) {
-      const dayObj = monthLastDay.add(i + 1, 'day');
-      list.push(createCellData(1, false, dayObj.toDate(), weekCount));
-    }
-    rowList.push(list);
-  }
-
-  return rowList;
-};