@cloudbase/weda-ui 2.0.28 → 3.1.0

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

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

@@ -1,119 +0,0 @@
-.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

@@ -1,417 +0,0 @@
-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 type { 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,
-  circular,
-  vertical,
-  indicatorDots,
-  indicatorColor,
-  indicatorActiveColor,
-  duration,
-  interval,
-  current,
-  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>
-  );
-};