@cloudbase/weda-ui 3.1.0 → 3.1.1

package/dist/web/components/swiper/index.css

@@ -0,0 +1,106 @@
+.g-swiper {
+  overflow: hidden;
+  margin: auto;
+  width: 100%;
+  transition: height 0.15s ease-in;
+  position: relative;
+}
+
+.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%;
+}
+
+.weda-ui.g-swiper .g-swiper-item > div {
+  height: auto;
+}
+
+.g-swiper-item > div > * {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.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);
+}

package/dist/web/components/swiper/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import './index.css';
+import type { CommonPropsType } from '../../types';
+export interface PropsType extends CommonPropsType {
+    /**
+     * 是否启用指示点
+     */
+    indicatorDots: boolean;
+    /**
+     * 是否自动切换
+     */
+    autoplay: boolean;
+    /**
+     * 当前索引值
+     */
+    current: number;
+    interval: number;
+    duration: number;
+    circular: boolean;
+    vertical: boolean;
+    indicatorColor: string;
+    indicatorActiveColor: string;
+}
+export default function Swiper({ children, className, style, autoplay, circular, vertical, indicatorDots, indicatorColor, indicatorActiveColor, duration, interval, current, events, id, }: PropsType): JSX.Element;

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

@@ -0,0 +1,149 @@
+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) {
+            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)`,
+                });
+            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;
+        }
+        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/web/components/tabs/index.css

@@ -0,0 +1,64 @@
+.weda-tabs {
+  width: 100%;
+}
+.weda-tabs__panel {
+  min-height: 3.57143rem;
+}
+.weda-tabs__nav {
+  width: 100%;
+  height: 3.21429rem;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  position: relative;
+  white-space: nowrap;
+  border-bottom: 0.07143rem solid #eee;
+  overflow-x: auto;
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+}
+.weda-tabs__nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.weda-tabs__nav-cell {
+  flex-basis: 0;
+  flex-grow: 1;
+  height: 100%;
+  font-size: 1em;
+  color: #000;
+  box-sizing: border-box;
+  padding: 0 1.14286rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20%;
+}
+.weda-tabs__nav-cell.active {
+  color: #0052d9;
+}
+.weda-tabs__nav-cell.scroll {
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 20%;
+}
+.weda-tabs__nav-sticky {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transition: transform 0.3s ease;
+  padding: 0 1.14286rem;
+  box-sizing: border-box;
+  min-width: 20%;
+}
+.weda-tabs__nav-sticky::after {
+  display: block;
+  content: '';
+  width: 100%;
+  border-top: 0.14286rem solid #0052d9;
+}

package/dist/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/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/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/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/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/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/web/components/text/index.css

@@ -0,0 +1,26 @@
+.weda-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  /* -webkit-line-clamp: 1;
+  white-space: pre-line; */
+}
+.weda-text.level_1 {
+  font-size: 4.57143rem !important;
+}
+.weda-text.level_2 {
+  font-size: 4rem !important;
+}
+.weda-text.level_3 {
+  font-size: 3.42857rem !important;
+}
+.weda-text.level_4 {
+  font-size: 2.85714rem !important;
+}
+.weda-text.level_5 {
+  font-size: 2.28571rem !important;
+}
+.weda-text.level_6 {
+  font-size: 1.71429rem !important;
+}

package/dist/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/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/web/components/uploaderFileView/index.css

@@ -0,0 +1,11 @@
+a.weda-uploader-file-view__single {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+a.weda-uploader-file-view__single:hover {
+  text-decoration: underline;
+}

package/dist/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/web/components/uploaderFileView/index.js

@@ -0,0 +1,61 @@
+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 { getTempFileURL } from '../../utils/tcb';
+import './index.css';
+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 [src, setSrc] = React.useState('');
+    React.useEffect(() => {
+        const fetchFileId = async (id) => {
+            if (isCloudFileID(id)) {
+                try {
+                    const fileSrc = await getTempFileURL(id);
+                    setSrc(fileSrc);
+                }
+                catch (e) { }
+            }
+            else {
+                setSrc(id);
+            }
+        };
+        fetchFileId(fileID);
+    }, [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/web/components/uploaderView/index.css

@@ -0,0 +1,31 @@
+.g-uploader-view {
+  margin: 0;
+  padding: 0;
+}
+
+.g-uploader-view .g-uploader-view__image-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.g-uploader-view .g-uploader-view__image-box {
+  height: 7.14286rem;
+  width: 7.14286rem;
+  margin-right: 0.57143rem;
+  margin-bottom: 0.57143rem;
+  background: #f2f2f2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.g-uploader-view .g-uploader-view__empty {
+  padding: 0.57143rem;
+  background-image: url('https://main.qcloudimg.com/raw/c85c9a875e9754545ee19f20438b2caa.svg');
+}
+
+.g-uploader-view .g-uploader-view__image {
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+}

package/dist/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;
+}