@cloudbase/weda-ui 3.1.0 → 3.1.3

package/dist/web/components/calendar/index.js

@@ -0,0 +1,181 @@
+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';
+import { emptyArray } from '../../utils/constant';
+// 抽取配置常量
+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 = emptyArray, }) {
+    // '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 (React.createElement("div", { "data-testid": "weda-calendar", className: classNames(blockName, 'weda-ui', platform === 'h5' ? `${blockName}-h5` : `${blockName}-pc`, {
+            [className]: className,
+        }), style: style },
+        React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement("div", { className: blockName + '__control_pc', "data-testid": "weda-calendar-control-pc" }, visible ? (React.createElement("div", { className: blockName + '__control-section' },
+                React.createElement("div", { className: blockName + '__control-section-cell' },
+                    React.createElement(Select, { appearance: "button", size: controlSectionSize, value: String(year), options: yearSelectOptions(), onChange: (selectYear) => setYear(parseInt(selectYear)) })),
+                React.createElement("div", { className: blockName + '__control-section-cell' },
+                    React.createElement(Select, { appearance: "button", size: controlSectionSize, value: String(month), options: monthSelectOptions(), onChange: (selectMonth) => setMonth(parseInt(selectMonth)) })))) : (React.createElement("div", { className: `${blockName}__current-date` }, `${year} 年 ${month} 月`)))),
+        React.createElement("div", { className: blockName + '__control_h5', "data-testid": "weda-calendar-control-h5" },
+            visible && (React.createElement("div", { className: blockName + '_prevMonth wedatea2td-icon-arrowleft--line', onClick: () => {
+                    // 上一个月
+                    setYear(month === 1 ? year - 1 : year);
+                    setMonth(month === 1 ? 12 : month - 1);
+                } })),
+            React.createElement("div", { className: `${blockName}__current-date` }, `${year}年${month}月`),
+            visible && (React.createElement("div", { className: blockName + '_nextMonth wedatea2td-icon-arrowright--line', onClick: () => {
+                    // 下一个月
+                    setYear(month === 12 ? year + 1 : year);
+                    setMonth(month === 12 ? 1 : month + 1);
+                } }))),
+        React.createElement("div", { className: blockName + '__panel' },
+            React.createElement("table", { className: blockName + '__table' },
+                colHeaderList.length > 0 && (React.createElement("thead", { className: blockName + '__table-head' },
+                    React.createElement("tr", { className: blockName + '__table-head-row' }, colHeaderList.map((item) => (React.createElement("th", { key: item.day, className: blockName + '__table-head-cell' }, item.text)))))),
+                React.createElement("tbody", { className: blockName + '__table-body' }, dateList.map((dateRow, dateRowIndex) => (React.createElement("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 (React.createElement("td", { key: String(dateCellIndex), className: classNames(`${blockName}__table-body-cell`, isNow, dateCell.isCurrent ? 'is-checked' : '', dateCell.belongTo !== 0 ? 'is-disabled' : '', dateCell.disabled ? 'is-invalid' : '') },
+                        React.createElement("div", { className: blockName + '__table-body-cell-value' },
+                            dateCell.date.getDate(),
+                            React.createElement("div", { className: `${blockName}__table-body-cell-bg` }),
+                            dateCell.marked && dateCell.marked !== '' && (React.createElement("div", { style: { backgroundColor: `${dateCell.marked}` }, className: blockName + '__table-body-cell-marked', "data-testid": "weda-calendar-cell-marked" })))));
+                })))))))));
+}
+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/dist/web/components/calendar/util.d.ts

@@ -0,0 +1,13 @@
+export function getDay(dt: any): number;
+export function createDateList(year: any, month: any, firstDayOfWeek: any, currentValue: any, format: any): {
+    mode: string;
+    belongTo: any;
+    isCurrent: any;
+    day: number;
+    weekOrder: any;
+    date: any;
+    formattedDate: string;
+    filterDate: any;
+    formattedFilterDate: any;
+    isShowWeekend: boolean;
+}[][];

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

@@ -0,0 +1,74 @@
+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/dist/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: 22.85714rem;
+}
+
+.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: 0.71429rem 0;
+  padding: 0;
+  text-align: center;
+  width: 100%;
+  z-index: 1;
+}
+
+.g-swiper__pagination-bulletm {
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0.07143rem 0.07143rem 0.14286rem rgb(0 0 0 / 70%);
+  width: 0.57143rem;
+  height: 0.57143rem;
+  display: inline-block;
+  margin: 0 0.57143rem;
+}
+
+@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: 1.42857rem 0.71429rem;
+  width: 1.64286rem;
+  height: 2.92857rem;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.g-swiper__turn-pre {
+  left: 1.42857rem;
+  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: 1.42857rem;
+  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/dist/web/components/carousel/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import './index.css';
+import type { CommonPropsType } from '../../types';
+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): JSX.Element;
+export {};

package/dist/web/components/carousel/index.js

@@ -0,0 +1,240 @@
+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 Image from '../image';
+import { emptyObject } from '../../utils/constant';
+export default function Carousel({ className, style, autoplay, circular, vertical, indicatorDots, indicatorColor, indicatorActiveColor, duration, interval, current, events = emptyObject, id, images, }) {
+    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();
+    useEventListener(outerWrapRef, 'load', (e) => {
+        setHeight(e.target.clientHeight);
+    });
+    const itemsClone = images.map((x, i) => {
+        return (React.createElement("div", { className: "g-swiper-item", "data-index": i, key: i },
+            React.createElement(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%',
+                } })));
+    });
+    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 (React.createElement("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 ? (React.createElement(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 (React.createElement(SwiperItem, { setHeight: setHeight, currentIndex: currentIndex, index: i, key: i, imagesValue: x },
+                    React.createElement(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%',
+                        } })));
+            }),
+            itemsClone[0])) : null,
+        indicatorDots ? (React.createElement("div", { className: "g-swiper__pagination" }, images.map((x, i) => {
+            return (React.createElement("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 }));
+        }))) : (false),
+        React.createElement("a", { href: "#", className: "g-swiper__turn-pre", onClick: (ev) => {
+                ev.preventDefault();
+                setIndex(currentIndex - 1);
+            } }, "\u4E0A\u4E00\u9875"),
+        React.createElement("a", { href: "#", className: "g-swiper__turn-next", onClick: (ev) => {
+                ev.preventDefault();
+                setIndex(currentIndex + 1);
+            } }, "\u4E0B\u4E00\u9875")));
+}
+const SwiperItem = ({ setHeight, children, currentIndex, index, imagesValue }) => {
+    const firstChildRef = useRef(null);
+    const syncHeight = useDebouncedCallback((e) => {
+        // console.log('e.contentRect.height', e.contentRect.height);
+        setHeight(e.contentRect.height);
+    }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
+    // 因为有loading 所以得用resizeobserver
+    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;
+            }, {});
+        }
+        const 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;
+        }
+        const selectedUrl = tapMode === 'inside' ? insideUrl : outerUrl;
+        const { path, isAbosolutePath, href } = getLinkUrl(selectedUrl, []);
+        const 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 (React.createElement("div", { className: classNames('g-swiper-item', {
+            current: index === currentIndex,
+        }), "data-index": index, onClick: handleImage, "data-testid": "swiper-item" },
+        React.createElement("div", { ref: firstChildRef }, children)));
+};