@cloudbase/weda-ui 0.2.15 → 0.2.16

package/src/mp/utils/tcb.js

@@ -12,3 +12,21 @@ export async function getTempFileURL(data) {
     return await getApp().app.cloud.getTempFileURL(data);
   }
 }
+
+/**
+ * 调用微搭后端API服务
+ */
+export async function callWedaApi(param) {
+  if (getApp().app.cloud.callWedaApi) {
+    return await getApp().app.cloud.callWedaApi(param);
+  }
+}
+
+/**
+ * 云函数获取数据
+ */
+export async function callDataSource(param) {
+  if (getApp().app.cloud.callDataSource) {
+    return await getApp().app.cloud.callDataSource(param);
+  }
+}

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

@@ -0,0 +1,382 @@
+ /* weda_calendar */
+
+/* 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-section .tea-dropdown .tea-dropdown__header {
+  background: #E7E7E7;
+  border-radius: 3px;
+  padding: 5px 32px 5px 12px;
+  height: 32px;
+
+}
+
+.weda-calendar-pc .weda-calendar__control-section .tea-dropdown .tea-dropdown__value {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
+  font-size: 14px;
+  line-height: 22px;
+  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 {
+  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: 14px;
+  line-height: 22px;
+  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: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  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: 20px;
+  height: 20px;
+}
+
+.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: 14px;
+  line-height: 22px;
+  font-weight: bold;
+}
+
+.weda-calendar-h5 .weda-calendar__panel {
+  height: 306px;
+  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: 12px;
+  line-height: 20px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 20px;
+  -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: 12px;
+  line-height: 20px;
+  -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: 14px;
+  text-align: center;
+  border-radius: 50%;
+  width: 40px;
+  line-height: 40px;
+  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: 24px;
+  height: 24px;
+  background: #0052D9;
+  border-radius: 100%;
+  left: calc(50% - 12px);
+  top: calc(50% - 12px);
+  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

@@ -0,0 +1,312 @@
+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 = true,
+  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,
+};