@cloudbase/weda-ui 3.1.9 → 3.2.1

package/dist/src/web/components/swiper/index.js

@@ -0,0 +1,153 @@
+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 { emptyObject } from '../../utils/constant';
+export default function Swiper({ children, 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 = emptyObject, id, }) {
+    const itemCount = React.Children.count(children);
+    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) {
+            // 自动切换
+            // eslint-disable-next-line rulesdir/no-timer
+            const timer = setInterval(() => {
+                setIndex(currentIndex + 1);
+            }, interval);
+            return () => clearInterval(timer);
+        }
+    }, [currentIndex, autoplay, itemCount]);
+    // 触发切换
+    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 = React.Children.map(children, (x, i) => {
+        return (React.createElement("div", { className: "g-swiper-item", "data-index": i }, x));
+    });
+    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) => {
+        // 最后向前到最开始
+        if (to === 0 && cur === length - 1) {
+            circular &&
+                setSwipeStyle({
+                    transform: `translate3d(0, 0, 0)`,
+                });
+            // 不知道
+            // eslint-disable-next-line rulesdir/no-timer
+            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)`,
+                });
+            // eslint-disable-next-line rulesdir/no-timer
+            setTimeout(() => {
+                setSwipeStyle({
+                    transform: vertical
+                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+                    transitionDuration: `${duration}ms`,
+                });
+            }, 50);
+            return;
+        }
+        const 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', className, {
+            vertical: vertical,
+        }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id },
+        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],
+            React.Children.map(children, (x, i) => {
+                return (React.createElement(SwiperItem, { height: height, setHeight: setHeight, currentIndex: currentIndex, index: i }, x));
+            }),
+            itemsClone[0])) : null,
+        indicatorDots ? (React.createElement("div", { className: "g-swiper__pagination" }, React.Children.map(children, (x, i) => {
+            return (React.createElement("a", { href: "#", className: "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 = ({ height, setHeight, children, currentIndex, index }) => {
+    const firstChildRef = useRef(null);
+    const syncHeight = useDebouncedCallback((e) => {
+        setHeight(e.contentRect.height);
+    }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
+    // 因为有loading 所以得用resizeobserver
+    useResizeObserver(firstChildRef, (e) => {
+        if (currentIndex === index) {
+            syncHeight(e);
+        }
+    });
+    return (React.createElement("div", { className: classNames('g-swiper-item', {
+            current: index === currentIndex,
+        }), "data-index": index },
+        React.createElement("div", { ref: firstChildRef, style: {
+                height: height > 0 ? '100%' : 'auto',
+            } }, children)));
+};

package/dist/src/web/components/tabs/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { CommonPropsType } from '../../types';
+export interface PropsType extends CommonPropsType {
+    tabs: Readonly<{
+        title: string;
+        value: string;
+        name?: string;
+    }[]>;
+    selectedIndex: number | string;
+    isMultipleSlot: boolean;
+    [key: string]: React.ReactNode;
+}
+export default function Tabs(props: PropsType): JSX.Element;

package/dist/src/web/components/tabs/index.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { usePlatform } from '../../utils/platform';
+// import { fallback } from '../../utils/loading-fallback';
+import TabsH5 from './tabs.h5';
+import TabsPc from './tabs.pc';
+export default function Tabs(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(TabsPc, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(TabsH5, { ...props });
+    }
+    return platform === 'h5' ? React.createElement(TabsH5, { ...props }) : React.createElement(TabsPc, { ...props });
+}

package/dist/src/web/components/tabs/tabs.h5.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.css';
+import { PropsType } from './index';
+export default function TabsH5({ tabs, selectedIndex, events, className, style, isMultipleSlot, ...restProps }: PropsType): JSX.Element;

package/dist/src/web/components/tabs/tabs.h5.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import './index.css';
+import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/useSyncValue';
+import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { emptyArray } from '../../utils/constant';
+export default function TabsH5({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    const [currentIndex, setCurrentIndex] = useSyncValue(typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex);
+    const stickyStyle = useMemo(() => {
+        const length = tabs.length;
+        return {
+            width: `${(1 / length) * 100}%`,
+            transform: `translate3d( ${currentIndex * 100}%, 0, 0)`,
+        };
+    }, [tabs, currentIndex]);
+    const eventRef = useSyncedRef(events);
+    useCustomCompareEffect(() => {
+        var _a, _b;
+        eventRef.current.change({
+            id: currentIndex,
+            label: (_a = tabs[currentIndex]) === null || _a === void 0 ? void 0 : _a.title,
+            value: (_b = tabs[currentIndex]) === null || _b === void 0 ? void 0 : _b.value,
+        });
+    }, [currentIndex, tabs], isObjectEqual);
+    return (React.createElement("div", { "data-testid": "tabs", className: classNames('weda-tabs weda-ui', {
+            [className]: className,
+        }), style: style },
+        React.createElement("div", { className: "weda-tabs__nav" }, tabs === null || tabs === void 0 ? void 0 :
+            tabs.map(({ name, title }, index) => (React.createElement("div", { className: classNames('weda-tabs__nav-cell', {
+                    active: currentIndex === index,
+                    scroll: currentIndex > 5,
+                }), key: name || index, onClick: () => {
+                    setCurrentIndex(index);
+                } }, title))),
+            React.createElement("div", { className: "weda-tabs__nav-sticky", style: stickyStyle })),
+        React.createElement("div", { className: classNames({
+                'weda-tabs__panel': true,
+            }) }, isMultipleSlot
+            ? restProps[`panel${currentIndex + 1}`]
+            : restProps['panel1'])));
+}

package/dist/src/web/components/tabs/tabs.pc.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PropsType } from './index';
+export default function TabsPc({ tabs, selectedIndex, events, className, style, isMultipleSlot, ...restProps }: PropsType): JSX.Element;

package/dist/src/web/components/tabs/tabs.pc.js

@@ -0,0 +1,40 @@
+import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
+import * as React from 'react';
+import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { emptyArray } from '../../utils/constant';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useSyncValue } from '../../utils/useSyncValue';
+export default function TabsPc({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
+    const _tabs = React.useMemo(() => {
+        return (Array.isArray(tabs) &&
+            tabs.length &&
+            tabs.map((item, index) => {
+                return {
+                    id: index.toString(),
+                    label: item.title,
+                    value: item.value,
+                };
+            }));
+    }, [tabs]);
+    const eventsRef = useSyncedRef(events);
+    useCustomCompareEffect(() => {
+        var _a, _b, _c;
+        eventsRef.current &&
+            eventsRef.current.change({
+                id: (_a = _tabs[activeIndex]) === null || _a === void 0 ? void 0 : _a.id,
+                label: (_b = _tabs[activeIndex]) === null || _b === void 0 ? void 0 : _b.label,
+                value: (_c = _tabs[activeIndex]) === null || _c === void 0 ? void 0 : _c.value,
+            });
+    }, [activeIndex, _tabs], isObjectEqual);
+    const onActive = (e) => {
+        setActiveIndex(e.id);
+    };
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(TeaTabs, { style: style, tabs: _tabs, activeId: String(activeIndex), onActive: onActive, className: classNames('weda-tabs_pc', {
+                [className]: className,
+            }) }, _tabs === null || _tabs === void 0 ? void 0 : _tabs.map((item, index) => (React.createElement(TabPanel, { key: item.id, id: item.id }, isMultipleSlot
+            ? restProps[`panel${index + 1}`]
+            : restProps['panel1']))))));
+}

package/dist/src/web/components/text/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { CommonPropsType, unknownFunction } from '../../types';
+import './index.css';
+export interface PropsType extends CommonPropsType {
+    text: string;
+    level: string;
+    maxLines: number;
+    space: boolean;
+    userSelect: boolean;
+    contenteditable: HTMLParagraphElement['contentEditable'];
+    onInput?: unknownFunction;
+    onBlur?: unknownFunction;
+}
+export default function Text({ text, maxLines, space, userSelect, style, className, events, id, level, contenteditable, onInput, onBlur, }: PropsType): JSX.Element;

package/dist/src/web/components/text/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import './index.css';
+export default function Text({ text, maxLines, space, userSelect, style, className, events, id, level, contenteditable, onInput, onBlur, }) {
+    const textStyle = {
+        WebkitLineClamp: maxLines,
+        whiteSpace: space ? 'pre-wrap' : 'pre-line',
+    };
+    if (!userSelect) {
+        textStyle.userSelect = 'none';
+    }
+    const levelName = level === '0' || !level ? '' : `level_${level}`;
+    const inlineStyle = React.useMemo(() => ({ ...textStyle, ...style }), [textStyle, style]);
+    return (React.createElement("p", { 
+        //@ts-expect-error contentEditable type def sucks
+        contentEditable: contenteditable, onInput: onInput, onBlur: onBlur, style: inlineStyle, className: classNames('weda-text', 'weda-ui', className, levelName), id: id, onClick: (e) => events.tap({}, { originEvent: e }) }, text));
+}

package/dist/src/web/components/uploaderFileView/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 上传文件回显，传showType强制展示某端样式，否则根据平台自动判断
+ */
+export default function UploaderFileView({ value, className, single, showType, ...rest }: {
+    [x: string]: any;
+    value: any;
+    className: any;
+    single?: boolean;
+    showType: any;
+}): JSX.Element;

package/dist/src/web/components/uploaderFileView/index.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
+import { UploadFileH5 } from '../form/uploaderFile/uploadFile.h5';
+import { filterStrList, isCloudFileID, downloadFile, usePlatform, transFileCloudidToName, } from '../../utils/platform';
+import './index.css';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
+const CLASS_PREFIX = 'weda-uploader-file-view';
+/**
+ * 上传文件回显，传showType强制展示某端样式，否则根据平台自动判断
+ */
+export default function UploaderFileView({ value, className, single = true, // 展示为单行 a 标签
+showType, // 展示端为 pc 还是 h5 样式
+...rest }) {
+    const fileIDList = filterStrList(value);
+    if (single) {
+        return React.createElement(FileView, { fileID: fileIDList[0] });
+    }
+    else {
+        const platform = usePlatform();
+        const showTypeMix = showType ? (showType === 'h5' ? 'h5' : 'pc') : platform;
+        const uploadFileProps = {
+            ...rest,
+            className: `${CLASS_PREFIX} ${className}`,
+            decorator: null,
+            labelVisible: false,
+            value: fileIDList,
+            isEdit: false,
+        };
+        return showTypeMix === 'pc' ? (React.createElement(UploadFilePc, { ...uploadFileProps })) : (React.createElement(UploadFileH5, { ...uploadFileProps }));
+    }
+}
+/**
+ * 单个文件回显，用在表格里面
+ */
+const FileView = ({ fileID }) => {
+    const { data: src } = useTempUrl(fileID);
+    const title = React.useMemo(() => {
+        if (isCloudFileID(fileID)) {
+            return transFileCloudidToName(fileID);
+        }
+        else {
+            return fileID;
+        }
+    }, [fileID]);
+    return (React.createElement("a", { title: title, onClick: () => downloadFile(src), className: `${CLASS_PREFIX}__single` }, title));
+};

package/dist/src/web/components/uploaderView/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import './index.css';
+import type { CommonPropsType } from '../../types';
+/**
+ * 图片上传-展示组件
+ */
+export default function UploaderView({ srcList, // 兼容 cloud:和https: 协议，兼容 字符串和字符串数组
+alt, gutter, height, width, events, isZoom, isEmptyPlace, className, id, style, }: PropsType): JSX.Element;
+export interface PropsType extends CommonPropsType {
+    srcList?: string[] | string;
+    alt?: string;
+    isZoom?: boolean;
+    gutter?: number;
+    height?: number;
+    width?: number;
+    isEmptyPlace?: boolean;
+}

package/dist/src/web/components/uploaderView/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { TcbImage } from '../form/uploader/uploader.pc';
+import classNames from '../../utils/classnames';
+import './index.css';
+import { emptyObject } from '../../utils/constant';
+const CLASS_PREFIX = 'g-uploader-view';
+/**
+ * 图片上传-展示组件
+ */
+export default function UploaderView({ srcList, // 兼容 cloud:和https: 协议，兼容 字符串和字符串数组
+alt = '[加载失败]', gutter = 8, height = 100, width = 100, events = emptyObject, isZoom = true, isEmptyPlace = true, className, id, style, }) {
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+    });
+    // 成功事件，返回加载成功的链接
+    const [successList, setSuccessList] = React.useState([]);
+    // 失败事件，返回加载失败的链接
+    const [errorList, setErrorList] = React.useState([]);
+    React.useEffect(() => {
+        events.load && events.load({ success: successList, error: errorList });
+    }, [successList, errorList]);
+    const boxStyle = {
+        marginRight: gutter,
+        marginBottom: gutter,
+        height: height,
+        width: width,
+    };
+    const values = []
+        .concat(srcList)
+        .filter((d) => typeof d === 'string' && d !== '');
+    return (React.createElement("div", { className: cls, id: id, style: style },
+        React.createElement("div", { className: `${CLASS_PREFIX}__image-list` },
+            values.map((d, i) => {
+                const imgProps = {
+                    fileID: d,
+                    className: `${CLASS_PREFIX}__image`,
+                    alt: alt,
+                    isZoom,
+                    onLoad: () => setSuccessList((list) => [...list, d]),
+                    onError: () => setErrorList((list) => [...list, d]),
+                };
+                return (React.createElement("div", { className: `${CLASS_PREFIX}__image-box`, key: `${d}-${i}`, style: boxStyle, title: d },
+                    React.createElement(TcbImage, { ...imgProps })));
+            }),
+            values.length === 0 && isEmptyPlace && (React.createElement("div", { className: `${CLASS_PREFIX}__image-box`, style: boxStyle },
+                React.createElement("img", { className: `${CLASS_PREFIX}__image`, alt: "\u6682\u65E0\u56FE\u7247" }))))));
+}

package/dist/src/web/components/userInfo/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+declare const UserInfo: (props: PropsType) => JSX.Element;
+export interface PropsType extends CommonPropsType {
+    /**
+     * 按钮标题
+     */
+    text?: string;
+    /**
+     * 按钮风格
+     */
+    type?: 'primary' | 'warn' | 'wechat' | 'default';
+    /**
+     * 按钮大小
+     */
+    size?: 'default' | 'mini' | 'large';
+    /**
+     * 信息用途
+     */
+    usage?: string;
+    /**
+     * 语言
+     */
+    language?: string;
+}
+export default UserInfo;

package/dist/src/web/components/userInfo/index.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import Button from '../../components/button';
+const UserInfo = (props) => React.createElement(Button, { ...props });
+export default UserInfo;

package/dist/src/web/components/wedaVideo/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import 'video.js/dist/video-js.css';
+import './index.css';
+import type { CommonPropsType } from '../../types';
+export interface VideoProps {
+    videoDataSource: string;
+    posterImage: string;
+    autoPlay: boolean;
+    loopPlay: boolean;
+    mutePlay: boolean;
+    controlBarStatus: boolean;
+    startTime: number;
+    endTime: number;
+}
+export declare type WedaVideoProps = Partial<CommonPropsType & VideoProps>;
+declare const WedaVideo: React.FC<WedaVideoProps>;
+export default WedaVideo;

package/dist/src/web/components/wedaVideo/index.js

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import './index.css';
+import { usePlatform, isCloudFileID, isInIde } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { ConfigProvider, Icon } from 'tea-component';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
+const { useEffect, useRef, useMemo, useState } = React;
+const MimetypesKind = {
+    opus: 'video/ogg',
+    ogv: 'video/ogg',
+    mp4: 'video/mp4',
+    mov: 'video/mp4',
+    m4v: 'video/mp4',
+    mkv: 'video/x-matroska',
+    m4a: 'audio/mp4',
+    mp3: 'audio/mpeg',
+    aac: 'audio/aac',
+    caf: 'audio/x-caf',
+    flac: 'audio/flac',
+    oga: 'audio/ogg',
+    wav: 'audio/wav',
+    m3u8: 'application/x-mpegURL',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+};
+const CLASS_PREFIX = 'weda-ui_video';
+const WedaVideo = ({ className, style, id, videoDataSource, posterImage, autoPlay, loopPlay, mutePlay, controlBarStatus, startTime, endTime, }) => {
+    const platform = usePlatform();
+    const cls = classNames({
+        [className]: className,
+        [CLASS_PREFIX]: true,
+        [`${CLASS_PREFIX}-h5`]: platform === 'h5',
+        'weda-ui_video_control': !controlBarStatus,
+    });
+    const videoRef = useRef(null);
+    const playerRef = useRef(null);
+    const [videoModalStatus, setVideoModalStatus] = useState(true);
+    const [videoErrMsg, setVideoErrMsg] = useState('');
+    const { data: realSrc, error } = useTempUrl(videoDataSource);
+    const videoType = useMemo(() => {
+        return realSrc === null || realSrc === void 0 ? void 0 : realSrc.substring(realSrc.lastIndexOf('.') + 1).toLowerCase();
+    }, [realSrc]);
+    if (error) {
+        console.error('getCloudUrl error', error);
+        setVideoErrMsg('获取云文件资源失败');
+    }
+    useEffect(() => {
+        const videoElement = videoRef.current;
+        if (!playerRef.current) {
+            const videoOptions = {
+                poster: posterImage,
+                autoplay: autoPlay,
+                bigPlayButton: true,
+                loop: loopPlay,
+                muted: mutePlay,
+                controls: controlBarStatus,
+                language: 'zh-CN',
+                fluid: true,
+                controlBar: {
+                    children: [
+                        { name: 'playToggle' },
+                        { name: 'currentTimeDisplay' },
+                        { name: 'progressControl' },
+                        { name: 'durationDisplay' },
+                        {
+                            name: 'volumePanel',
+                            inline: false, // 不使用水平方式
+                        },
+                        { name: 'FullscreenToggle' }, // 全屏按钮
+                    ],
+                },
+                sources: [
+                    {
+                        src: realSrc || 'no',
+                        type: MimetypesKind[videoType] || 'video/mp4',
+                    },
+                ],
+            };
+            playerRef.current = videojs(videoElement, videoOptions, () => {
+                players.currentTime(startTime); //指定播放时间
+                setVideoModalStatus(false);
+                setVideoErrMsg('');
+            });
+            const players = playerRef.current;
+            // 指定结束时间
+            if (endTime) {
+                players.on('timeupdate', () => {
+                    //播放时间改变
+                    const currentTime = players.currentTime();
+                    if (startTime >= endTime)
+                        return;
+                    if (currentTime > endTime) {
+                        players.currentTime(startTime);
+                        // eslint-disable-next-line rulesdir/no-timer
+                        setTimeout(() => {
+                            !loopPlay && players.pause();
+                        }, 200);
+                    }
+                });
+            }
+            players.on('canplaythrough', function () {
+                setVideoModalStatus(false);
+                setVideoErrMsg('');
+            });
+            players.on('error', function () {
+                let errorMsg = `视频资源加载出错，错误信息：${players === null || players === void 0 ? void 0 : players.error().message}`;
+                const pattern = new RegExp('^(((https?)://)|/resources/)[^\\s]+$');
+                if (isInIde() &&
+                    !pattern.test(videoDataSource) &&
+                    !isCloudFileID(videoDataSource)) {
+                    errorMsg = '请在预览区查看视频效果';
+                }
+                console.log('player error', errorMsg);
+                setVideoErrMsg(errorMsg);
+                setVideoModalStatus(true);
+            });
+        }
+    }, [videoRef]);
+    useEffect(() => {
+        // 切换视频源
+        if (playerRef.current && videoType) {
+            const srcOption = [
+                {
+                    src: realSrc,
+                    type: MimetypesKind[videoType],
+                },
+            ];
+            playerRef.current.src(srcOption);
+            playerRef.current.load(realSrc);
+        }
+    }, [realSrc]);
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: cls, id: id, style: style, "data-testid": "wedaVideo" },
+            React.createElement("div", { "data-vjs-player": true },
+                React.createElement("video", { ref: videoRef, className: `video-js vjs-big-play-centered ${CLASS_PREFIX}__video-wrap` })),
+            videoModalStatus && (React.createElement("div", { className: `${CLASS_PREFIX}__video-loading` }, realSrc === null ? React.createElement(Icon, { type: "loading" }) : videoErrMsg)))));
+};
+export default WedaVideo;

package/dist/src/web/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./components";
+declare namespace _default {
+    export { components };
+    export { actions };
+}
+export default _default;
+import * as components from "./components";
+import * as actions from "./actions";

package/dist/src/web/index.js

@@ -0,0 +1,4 @@
+import * as components from './components';
+import * as actions from './actions';
+export * from './components';
+export default { components, actions };

package/dist/src/web/utils/classnames.d.ts

@@ -0,0 +1,2 @@
+export default classNames;
+declare function classNames(...args: any[]): any;