@cloudbase/weda-ui 0.2.15 → 0.2.16

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

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

@@ -0,0 +1,417 @@
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import classNames from '../../utils/classnames';
+import Swipe from 'react-easy-swipe';
+import {
+  useDebouncedCallback,
+  useEventListener,
+  useResizeObserver,
+} from '@react-hookz/web';
+
+import './index.css';
+import { CommonPropsType } from '../../types';
+
+import Image from '../image';
+interface imagesItem {
+  image: string;
+  title: string;
+  tapMode: 'tap' | 'inside' | 'outer';
+  fit: React.CSSProperties['objectFit'];
+  height: string;
+  width: string;
+  insideUrl?: string;
+  outerUrl?: string;
+  newPage?: boolean;
+  params?: { key: string; value: string }[];
+}
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 是否启用指示点
+   */
+  indicatorDots: boolean;
+  /**
+   * 是否自动切换
+   */
+  autoplay: boolean;
+  /**
+   * 当前索引值
+   */
+  current: number;
+  interval: number;
+  duration: number;
+  circular: boolean;
+  vertical: boolean;
+  indicatorColor: string;
+  indicatorActiveColor: string;
+  images: Array<imagesItem>;
+}
+
+export default function Carousel({
+  className,
+  style = {},
+  autoplay = true,
+  circular = true,
+  vertical = false,
+  indicatorDots,
+  indicatorColor = 'rgba(200, 200, 200, 0.9)',
+  indicatorActiveColor = 'rgba(0, 0, 0, 0.9)',
+  duration = 500,
+  interval = 5000,
+  current = 0,
+  events = {},
+  id,
+  images,
+}: PropsType) {
+  const itemCount = images.length;
+  current = Math.max(0, Math.min(itemCount - 1, current));
+
+  const [currentIndex, setCurrentIndex] = useState(current);
+  const [swipeStyle, setSwipeStyle] = useState(null);
+  const [height, setHeight] = useState(0);
+
+  const { change = () => {} } = events;
+
+  // 自动切换
+  useEffect(() => {
+    if (autoplay) {
+      const timer = setInterval(() => {
+        setIndex(currentIndex + 1);
+      }, interval);
+
+      return () => clearInterval(timer);
+    }
+  }, [currentIndex, autoplay]);
+
+  // 触发切换
+  const pre = useRef({ index: currentIndex }).current;
+  useEffect(() => {
+    updateSwipeStyle(currentIndex, pre.index, itemCount);
+    change({
+      current: currentIndex,
+    });
+    return () => {
+      pre.index = currentIndex;
+    };
+  }, [currentIndex, vertical]);
+
+  const outerWrapRef = useRef<HTMLDivElement>();
+  useEventListener(outerWrapRef, 'load', (e) => {
+    setHeight(e.target.clientHeight);
+  });
+
+  const itemsClone = images.map((x, i) => {
+    return (
+      <div className="g-swiper-item" data-index={i} key={i}>
+        <Image
+          mode={'scaleToFill'}
+          lazyLoad={false}
+          maskClosable={false}
+          imgPreview={false}
+          src={x.image}
+          alt={'图片'}
+          fit={x.fit}
+          style={{
+            height: x.height ? x.height : 'auto',
+            width: x.width ? x.width : '100%',
+          }}
+        />
+      </div>
+    );
+  });
+
+  const setIndex = (index) => {
+    if (index >= itemCount) {
+      index = 0;
+    }
+    if (index < 0) {
+      index = itemCount - 1;
+    }
+    setCurrentIndex(index);
+  };
+
+  // 设置容器样式、动画
+  // TODO fix settimeout mess
+  const updateSwipeStyle = (to, cur, length) => {
+    let style;
+    // 最后向前到最开始
+    if (to === 0 && cur === length - 1) {
+      circular &&
+        setSwipeStyle({
+          transform: `translate3d(0, 0, 0)`,
+        });
+      setTimeout(() => {
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -100%, 0)`
+            : `translate3d(-100%, 0, 0)`,
+          transitionDuration: `${duration}ms`,
+        });
+      }, 50);
+      return;
+    }
+
+    // 第一个后退到最后
+    if (to === length - 1 && cur === 0) {
+      circular &&
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+        });
+      setTimeout(() => {
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+          transitionDuration: `${duration}ms`,
+        });
+      }, 50);
+      return;
+    }
+
+    style = {
+      transform: vertical
+        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+    };
+    if (to !== cur) {
+      style.transitionDuration = `${duration}ms`;
+    }
+    setSwipeStyle(style);
+  };
+
+  return (
+    <div
+      className={classNames('g-swiper weda-ui g-carousel', className, {
+        vertical: vertical,
+      })}
+      style={{ height: height ? height : 'auto', ...style }}
+      ref={outerWrapRef}
+      id={id}
+      data-testid="carousel"
+    >
+      {itemCount > 0 ? (
+        <Swipe
+          className="g-swiper-list"
+          style={swipeStyle}
+          tolerance={20}
+          onSwipeLeft={() => {
+            vertical || setIndex(currentIndex + 1);
+          }}
+          onSwipeRight={() => {
+            vertical || setIndex(currentIndex - 1);
+          }}
+          onSwipeDown={() => {
+            vertical && setIndex(currentIndex - 1);
+          }}
+          onSwipeUp={() => {
+            vertical && setIndex(currentIndex + 1);
+          }}
+        >
+          {itemsClone[itemCount - 1]}
+          {images.map((x, i) => {
+            return (
+              <SwiperItem
+                setHeight={setHeight}
+                currentIndex={currentIndex}
+                index={i}
+                key={i}
+                imagesValue={x}
+              >
+                <Image
+                  mode={'scaleToFill'}
+                  lazyLoad={false}
+                  maskClosable={false}
+                  imgPreview={false}
+                  fit={x.fit}
+                  src={x.image}
+                  alt={'图片'}
+                  style={{
+                    height: x.height ? x.height : 'auto',
+                    width: x.width ? x.width : '100%',
+                  }}
+                />
+              </SwiperItem>
+            );
+          })}
+          {itemsClone[0]}
+        </Swipe>
+      ) : null}
+
+      {indicatorDots ? (
+        <div className="g-swiper__pagination">
+          {images.map((x, i) => {
+            return (
+              <a
+                key={i}
+                href="#"
+                className="g-swiper__pagination-bulletm"
+                data-testid="g-swiper__pagination-bulletm"
+                style={{
+                  backgroundColor:
+                    currentIndex === i ? indicatorActiveColor : indicatorColor,
+                }}
+                onClick={(e) => {
+                  setIndex(i);
+                  e.preventDefault();
+                }}
+                data-index={i}
+              ></a>
+            );
+          })}
+        </div>
+      ) : (
+        false
+      )}
+      <a
+        href="#"
+        className="g-swiper__turn-pre"
+        onClick={(ev) => {
+          ev.preventDefault();
+          setIndex(currentIndex - 1);
+        }}
+      >
+        上一页
+      </a>
+      <a
+        href="#"
+        className="g-swiper__turn-next"
+        onClick={(ev) => {
+          ev.preventDefault();
+          setIndex(currentIndex + 1);
+        }}
+      >
+        下一页
+      </a>
+    </div>
+  );
+}
+
+const SwiperItem: React.FC<{
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
+  currentIndex: number;
+  index: number;
+  children?: React.ReactNode;
+  imagesValue: imagesItem;
+}> = ({ setHeight, children, currentIndex, index, imagesValue }) => {
+  const firstChildRef = useRef<HTMLDivElement>(null);
+  const syncHeight = useDebouncedCallback(
+    (e) => {
+      // console.log('e.contentRect.height', e.contentRect.height);
+      setHeight(e.contentRect.height);
+    },
+    [setHeight],
+    500,
+    2000
+  ); // 必须debounce延迟，让resize完成后再设置高度
+
+  // 因为有loading 所以得用resizeobserver
+  // @ts-ignore
+  useResizeObserver(firstChildRef, (e) => {
+    if (currentIndex === index) {
+      syncHeight(e);
+    }
+  });
+
+  const getLinkUrl = (url, params) => {
+    // URL 构造函数不支持 '//xxx.com' 的格式
+    if (url && url.indexOf('//') === 0) {
+      url = location.protocol + url;
+    }
+    // "proto:" 或 "//" 起头的是绝对路径
+    let isAbosolutePath = /^(?:[a-z]+:)/i.test(url);
+    let base,
+      path,
+      href,
+      paramObj = {},
+      urlObj;
+    if (!isAbosolutePath) {
+      // 相对地址使用站位域名，不实际使用
+      base =
+        location.origin && location.origin !== 'null'
+          ? location.origin
+          : 'https://we.da';
+    }
+
+    try {
+      urlObj = new URL(url, base);
+      params.forEach((x) => {
+        urlObj.searchParams.append(x.key, x.value);
+      });
+
+      href = urlObj.href;
+      path = urlObj.pathname;
+
+      for (const [key, value] of urlObj.searchParams) {
+        paramObj[key] = value;
+      }
+
+      // 相对地址去掉站位域名
+      if (!isAbosolutePath) {
+        href = urlObj.pathname + urlObj.search + urlObj.hash;
+        href = href.replace(/^\//, '');
+      }
+    } catch (e) {
+      // 非法 url
+      isAbosolutePath = true;
+      href = url;
+      path = '';
+      paramObj = params.reduce((p, x) => {
+        p[x.key] = x.value;
+        return p;
+      }, {});
+    }
+    let res = {
+      path,
+      isAbosolutePath,
+      href,
+    };
+    return res;
+  };
+
+  const handleImage = (e) => {
+    const { insideUrl, outerUrl, tapMode, params, newPage } = imagesValue;
+    if (tapMode === 'tap') {
+      return;
+    } else if (tapMode === 'inside' && !insideUrl) {
+      return;
+    } else if (tapMode === 'outer' && !outerUrl) {
+      return;
+    }
+    let selectedUrl = tapMode === 'inside' ? insideUrl : outerUrl;
+    let { path, isAbosolutePath, href } = getLinkUrl(selectedUrl, []);
+    let paramObj =
+      params &&
+      params.length > 0 &&
+      params.reduce((p, x) => {
+        p[x.key] = x.value;
+        return p;
+      }, {});
+    if (tapMode === 'inside') {
+      if (!isAbosolutePath) {
+        e.preventDefault();
+        app.navigateTo({
+          pageId: path,
+          packageName: '',
+          mode: 'weDa',
+          params: paramObj,
+        });
+      }
+    } else if (tapMode === 'outer') {
+      newPage ? window.open(href) : (location.href = href);
+    }
+  };
+  return (
+    <div
+      className={classNames('g-swiper-item', {
+        current: index === currentIndex,
+      })}
+      data-index={index}
+      onClick={handleImage}
+      data-testid="swiper-item"
+    >
+      <div ref={firstChildRef}>{children}</div>
+    </div>
+  );
+};

package/src/web/components/chart/statisticsCard/index.css

@@ -0,0 +1,62 @@
+/* pc style */
+.weda-statistics-card {
+  background: #ffffff;
+  border: 1px solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+.weda-statistics-card.weda-statistics-card-pc {
+  width: 276px;
+  min-height: 128px;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 28px 24px;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 8px;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 32px;
+  line-height: 44px;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+/* h5 style */
+.weda-statistics-card.weda-statistics-card-mobile {
+  max-width: 100%;
+  min-height: 140px;
+}
+.weda-statistics-card-mobile .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 40px 24px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__detail {
+  margin-top: 4px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__count {
+  font-size: 28px;
+  line-height: 34px;
+}