@cloudbase/weda-ui 2.0.26 → 3.1.0

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

@@ -1,416 +0,0 @@
-/* weda_calendar */
-
-.weda-calendar {
-  font-size: 14px;
-}
-
-/* pc 日历样式 start */
-.weda-calendar.weda-calendar-pc {
-  background: #ffffff;
-  border: 0.5px solid #dcdcdc;
-  box-sizing: border-box;
-  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05),
-    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  min-width: 560px;
-}
-
-.weda-calendar-pc .weda-calendar__control_h5 {
-  display: none;
-}
-
-.weda-calendar-pc .weda-calendar__control_pc {
-  padding: 32px;
-  display: flex;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.weda-calendar-pc .weda-calendar__control-section {
-  display: flex;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 100%;
-  margin-right: 16px;
-}
-
-.weda-calendar-pc .weda-calendar__control-section:last-child {
-  margin-right: 0;
-}
-
-.weda-calendar-pc
-  .weda-calendar__control-section
-  .weda-calendar__control-section-cell {
-  height: 100%;
-  margin-right: 8px;
-}
-
-.weda-calendar-pc
-  .weda-calendar__control-section
-  .weda-calendar__control-section-cell:last-child {
-  margin-right: 0;
-}
-
-.weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
-  font-size: 1em;
-  line-height: 1.57142em;
-  color: rgba(0, 0, 0, 0.9);
-}
-
-.weda-calendar-pc .weda-calendar__panel {
-  position: relative;
-  padding: 0 32px 32px 32px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.weda-calendar .weda-calendar__table {
-  font-size: inherit;
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-head {
-  display: block;
-  width: 100%;
-  margin-bottom: 8px;
-  box-sizing: border-box;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-head-row,
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-row {
-  display: flex;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  width: 100%;
-  padding-bottom: 0;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell {
-  cursor: default;
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  height: 100%;
-  padding: 0;
-  font-size: 1em;
-  line-height: 1.57142em;
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 12px;
-  position: relative;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell:last-child,
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell:last-child {
-  margin-right: 0;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-body {
-  width: 100%;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell {
-  flex: 1;
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  border-top: 1px solid #e7e7e7;
-  padding: 0;
-  height: 87.4px;
-  display: flex;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
-  margin-left: 0;
-  margin-right: 12px;
-  position: relative;
-  justify-content: flex-start;
-  color: rgba(0, 0, 0, 0.26);
-}
-
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled,
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
-  cursor: not-allowed;
-}
-
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
-  background: #f3f3f3;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-now {
-  border-top-color: #0052d9;
-  background: #ecf2fe;
-}
-
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 1.57142em;
-  color: rgba(0, 0, 0, 0.9);
-  margin-top: 3px;
-  position: relative;
-}
-
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled
-  .weda-calendar__table-body-cell-value {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-.weda-calendar
-  .weda-calendar__table
-  .weda-calendar__table-body-cell
-  .weda-calendar__table-body-cell-marked {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  left: 50%;
-  transform: translate(-50%);
-  bottom: -10px;
-}
-
-/* pc 日历样式 end */
-
-/* h5 日历样式 start */
-
-.weda-calendar.weda-calendar-h5 {
-  background: #ffffff;
-  width: 100%;
-  opacity: 0.9;
-}
-
-.weda-calendar-h5 .weda-calendar__control_pc {
-  display: none;
-}
-
-.weda-calendar__control_h5 {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 16px 16px 0 16px;
-  position: relative;
-  text-align: center;
-}
-.weda-calendar__control_h5 .wedatea2td-icon-arrowleft--line,
-.weda-calendar__control_h5 .wedatea2td-icon-arrowright--line {
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-
-.weda-calendar__control_h5
-  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line,
-.weda-calendar__control_h5
-  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
-  position: absolute;
-  top: 17px;
-  width: 1.42857em;
-  height: 1.42857em;
-}
-
-.weda-calendar__control_h5
-  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line {
-  left: 16px;
-}
-.weda-calendar__control_h5
-  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
-  right: 16px;
-}
-
-.weda-calendar__control_h5 .weda-calendar__current-date {
-  font-size: 1em;
-  line-height: 1.57142em;
-  font-weight: bold;
-}
-
-.weda-calendar-h5 .weda-calendar__panel {
-  height: 21.85714em;
-  padding: 20px 16px 16px 16px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.weda-calendar-h5 .weda-calendar__table {
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  justify-self: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-}
-
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head {
-  margin-bottom: 0;
-}
-
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head-cell {
-  font-size: 0.85714em;
-  line-height: 20px;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 0.85714em;
-  line-height: 1.428571em;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.weda-calendar-h5 .weda-calendar__table-body {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  justify-self: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-row {
-  width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  flex: 1;
-}
-
-.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-cell {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  border: none;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 0.85714em;
-  line-height: 1.42857em;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  flex-direction: row;
-}
-
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-now {
-  border: none;
-  background: transparent;
-}
-
-.weda-calendar-h5
-  .weda-calendar__table-body
-  .weda-calendar__table-body-cell-value {
-  font-size: 1em;
-  text-align: center;
-  border-radius: 50%;
-  width: 40px;
-  line-height: 2.85714em;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-now
-  .weda-calendar__table-body-cell-value {
-  color: #fff;
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-now
-  .weda-calendar__table-body-cell-bg {
-  position: absolute;
-  width: 1.714285em;
-  height: 1.714285em;
-  background: #0052d9;
-  border-radius: 100%;
-  left: calc(50% - 0.85714em);
-  top: calc(50% - 0.85714em);
-  z-index: -1;
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell
-  .weda-calendar__table-body-cell-marked {
-  width: 4px;
-  height: 4px;
-  top: calc(50% + 14px);
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-disabled
-  .weda-calendar__table-body-cell-value {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid {
-  background: transparent;
-}
-
-.weda-calendar-h5
-  .weda-calendar__table
-  .weda-calendar__table-body-cell.is-invalid
-  .weda-calendar__table-body-cell-value {
-  color: #c5c5c5;
-}
-
-/* h5 日历样式 end */

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,
-};