@cloudbase/weda-ui 0.2.14 → 0.2.17

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

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

@@ -0,0 +1,90 @@
+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;
+};

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

@@ -0,0 +1,119 @@
+.g-swiper {
+  overflow: hidden;
+  margin: auto;
+  width: 100%;
+  transition: height 0.15s ease-in;
+  position: relative;
+}
+
+.g-carousel {
+  height: 320px;
+}
+
+.g-swiper-list {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.g-swiper-item {
+  flex-direction: column;
+  flex-flow: column;
+  min-width: 100%;
+  max-height: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+.g-swiper.vertical {
+  display: flex;
+}
+
+.g-swiper.vertical .g-swiper-list {
+  display: block;
+}
+
+.g-swiper.vertical .g-swiper-item {
+  height: 100%;
+}
+
+.g-swiper-item > div > * {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+/* .g-swiper-item > div,
+.g-swiper-item > div > .weda-image {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+} */
+
+.g-swiper__pagination {
+  position: absolute;
+  bottom: 0;
+  margin: 10px 0;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+  z-index: 1;
+}
+
+.g-swiper__pagination-bulletm {
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 1px 1px 2px rgb(0 0 0 / 70%);
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  margin: 0 8px;
+}
+
+@media (max-width: 1024px) {
+  .g-swiper .g-swiper__turn-pre,
+  .g-swiper .g-swiper__turn-next {
+    display: none;
+  }
+}
+
+.g-swiper__turn-pre,
+.g-swiper__turn-next {
+  position: absolute;
+  box-sizing: content-box;
+  display: block;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+  font-size: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  padding: 20px 10px;
+  width: 23px;
+  height: 41px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.g-swiper__turn-pre {
+  left: 20px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAApCAYAAADeWrJ9AAAABGdBTUEAALGPC/xhBQAAAbpJREFUSA2t178rxHEcx/E7p/MrP9KRRbFcMZHBIBkMSjYyKEpXJIMkww3KcIOkxKAsBmWQDEQSgyRJUkKZFANJRBLy4+v51udT/oDXp569660e32933X1PKCQ8QRCEaZa6hWwo5OAZpp05GQ5mdzxtKmeBIkp88o8NgkU1POHgJTU85uBlZlT5UqQcvKKGRx28roZHHLzBzFC+FEkHbzKzlPCwg7eZ2Up40ME7angA8Id2KUd5x/0O3mPmKuFeB+8z85VwwsGHargb8JuOqEB5x12AX3RMhUq4w8EnzJgSbnfwKbNICbcBftI5FctgoDRqpXSyR5PuiwjMHqxRWiU7l1Rme9kBtAv00AddUVyGewi0md7ohir8XjZBG+mV7qhKBnsItJ6e6YFq/F42QWvpkZ6oTgZ7CLSa7umFGvxeNkEr6ZbsfWiSwR4CjdM1vVOL38smaDnZh8w+C20y2EOgpXRB9rXc4feyCVpCZ+4CCRnsIeAY2QPFfhX0+b1sghbQgbvAkAz2EHAe2e8ZO0m/l03QbNoynZOSwR4CzaQ10znjFPZ/k0xAeybYfxh2piTofwQ0QvPUaftfzME87zp8MlQAAAAASUVORK5CYII=);
+}
+
+.g-swiper__turn-next {
+  right: 20px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAApCAYAAADeWrJ9AAAABGdBTUEAALGPC/xhBQAAAZpJREFUSA21l7ErhHEYgO9cznUR6ZTBcAvFRMpCGQxKxstwJV1XlJQkyw0y3CJJLDJYZJEMSCKDJEmSQpkUA0lEEko+z3u9/oP3fevp1y3P87uv7/t+d6EQEwRBBhYgLJ9NB+kiyMyDbQBhBJZBZg5cAisFfRDMmF4akSGWb7CqgWmPQDHyNQ1MegSiyNc1kPcKbGlgwiuwrYFxj0AM+Y4Gch6BOPI9DYx5BfY1MOIVONDAsEegFPkh/MKQR6Ac8ZEGBrwCJxrIegVONZDxCFQiP4Mf6PMIJBCfayDtEahCfqGBHq/AlQZSRcaFEnwRJWXmZrdJuAGZDYiayBHVwi18Qz+YieuR3cMndJnsViTIGuERPqDDUtyM8BneoM1S3IrwFV6gxVLcjvAdnqDJUtyJUK7vAzRYirsRfsEd1FmKUwjlHpaHJGkpTiOU1+k11FiKsyq+ZK22FA8ilENYDoKEpXhUxcesFZbiHEIZ+X1SZinOF7RBsMsaNxEjCsOUijdZYyZikSCbVbH8o7B5F//vDmEvLIEcUWbzB99VPOowvSXGAAAAAElFTkSuQmCC);
+}
+
+.g-swiper__turn-pre:hover,
+.g-swiper__turn-next:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+._editor-iframe
+  ._wa-comp-container-empty-children:not(._wa-comp-slot-wrapper):after {
+  display: none;
+}