@cloudbase/weda-ui 2.0.27 → 3.1.1

package/{src → dist}/web/components/graphicCard/index.css

@@ -5,12 +5,12 @@
 
 .weda-graphic-card .weda-graphic-card__wrapper {
   width: 100%;
-  padding: 0 24px;
+  padding: 0 1.71429rem;
 }
 
 .weda-graphic-card .weda-graphic-card__row {
   margin: 0;
-  padding: 20px 0;
+  padding: 1.42857rem 0;
 }
 
 .weda-graphic-card .weda-graphic-card__col {
@@ -67,7 +67,7 @@
 }
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__icon {
   width: 100%;
-  height: 200px;
+  height: 14.28571rem;
 }
 
 .weda-graphic-card .weda-graphic-card__icon .weda-graphic-card__img {
@@ -108,38 +108,38 @@
   font-size: 1em;
   line-height: 1.5714em;
   color: #0052d9;
-  margin-right: 8px;
+  margin-right: 0.57143rem;
 }
 
 .weda-graphic-card .weda-graphic-card__btn-icon {
-  margin-bottom: 2px;
+  margin-bottom: 0.14286rem;
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
-  margin-top: 20px;
+  margin-top: 1.42857rem;
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
-  margin-top: 8px;
+  margin-top: 0.57143rem;
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn {
-  margin-top: 20px;
+  margin-top: 1.42857rem;
 }
 
 /* h5 style */
 .weda-graphic-card-mobile .weda-graphic-card__wrapper {
   width: 100%;
-  padding: 0 16px;
+  padding: 0 1.14286rem;
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__row {
-  padding: 18px 0;
-  margin: 0 -5.5px;
+  padding: 1.28571rem 0;
+  margin: 0 -0.39286rem;
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__col {
-  padding: 0 5.5px !important;
+  padding: 0 0.39286rem !important;
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__detail {
@@ -147,13 +147,13 @@
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__title {
-  margin-top: 16px;
+  margin-top: 1.14286rem;
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__desc {
-  margin-top: 6px;
+  margin-top: 0.42857rem;
 }
 
 .weda-graphic-card-mobile .weda-graphic-card__col .weda-graphic-card__btn {
-  margin-top: 16px;
+  margin-top: 1.14286rem;
 }

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './index.css';
+import type { CommonPropsType } from '../../types';
+export interface IGraphicCardPropsType extends CommonPropsType {
+    /**
+     * 导航配置
+     */
+    navOption?: Array<any>;
+    titleVisible: boolean;
+    titleColor: string;
+    titleFontWeight: string;
+    titleFontSize: number;
+    titleLineHeight: string;
+    titleMaxLines: number;
+    desColor: string;
+    desFontWeight: string;
+    desVisible: boolean;
+    desFontSize: number;
+    desLineHeight: string;
+    desMaxLines: number;
+    buttonVisible: boolean;
+    buttonText: string;
+    ColMobile: number;
+    ColPC: number;
+    percentageVisible: boolean;
+    iconWidthSize: string;
+    iconHeightSize: string;
+    textAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
+    imageStyle: any;
+}
+export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }: IGraphicCardPropsType): JSX.Element;

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

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import './index.css';
+import classNames from '../../utils/classnames';
+import { Row, Col, ConfigProvider, Button, Text } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { IconFont } from 'tdesign-icons-react';
+import Image from '../image';
+const CLASS_PREFIX = 'weda-graphic-card';
+export default function GraphicCard({ navOption, ColMobile, ColPC, iconWidthSize, iconHeightSize, titleVisible, desVisible, buttonVisible, textAlign, className, titleColor, titleFontWeight, titleFontSize, titleLineHeight, titleMaxLines, desColor, desFontWeight, desFontSize, desLineHeight, desMaxLines, buttonText, style, }) {
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    // 一个栅格的宽度
+    const [SingleGrid, setSingleGrid] = useState({ width: 10 });
+    const [colCount, setColCount] = React.useState(2);
+    const cls = classNames({
+        [CLASS_PREFIX]: true,
+        [className]: className,
+        [`${CLASS_PREFIX}-mobile`]: isH5,
+    });
+    const cardList = React.useMemo(() => {
+        const list = [];
+        const col = isH5 ? ColMobile : ColPC;
+        setColCount(col);
+        list.length = Math.floor(navOption.length / colCount);
+        list.forEach((item, index) => {
+            list[index] = [];
+        });
+        //debugger;
+        navOption.forEach((item, index) => {
+            const _index = Math.floor(index / colCount);
+            if (!list[_index] || list[_index].length <= 0) {
+                // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+                list[_index] = Array(colCount).fill(null);
+            }
+            const paramObj = {};
+            if (item === null || item === void 0 ? void 0 : item.params) {
+                for (const info of item.params) {
+                    paramObj[info.key] = info.value;
+                }
+            }
+            item.paramObj = paramObj;
+            list[_index][index - _index * colCount] = item;
+            list[_index][index - _index * colCount] = item;
+        });
+        return list;
+    }, [colCount, navOption, isH5]);
+    const elementStyle = document.createElement('body').style;
+    const vendor = (() => {
+        const transformNames = {
+            webkit: 'webkitTransform',
+            Moz: 'MozTransform',
+            O: 'OTransform',
+            ms: 'msTransform',
+            standard: 'transform',
+        };
+        for (const key in transformNames) {
+            if (elementStyle[transformNames[key]] !== undefined) {
+                return key;
+            }
+        }
+        return false;
+    })();
+    function prefixStyle(style) {
+        if (vendor === false) {
+            return false;
+        }
+        if (vendor === 'standard') {
+            return style;
+        }
+        return '-' + vendor + style.charAt(0).toUpperCase() + style.substr(1);
+    }
+    const boxStyle = prefixStyle('-box');
+    //标题样式
+    const titleStyle = {
+        display: `${boxStyle}`,
+        WebkitLineClamp: `${titleMaxLines ? titleMaxLines : 'inherit'}`,
+        overflow: 'hidden',
+        color: `${titleColor}`,
+        fontWeight: `${titleFontWeight}`,
+        fontSize: `${titleFontSize}` + 'px',
+        textAlign: `${textAlign}`,
+        lineHeight: `${titleLineHeight == 'auto' ? 'normal' : titleLineHeight}`,
+    };
+    const desStyle = {
+        display: `${boxStyle}`,
+        WebkitLineClamp: `${desMaxLines ? desMaxLines : 'inherit'}`,
+        overflow: 'hidden',
+        color: `${desColor}`,
+        fontWeight: `${desFontWeight}`,
+        fontSize: `${desFontSize}` + 'px',
+        textAlign: `${textAlign}`,
+        lineHeight: `${desLineHeight == 'auto' ? 'normal' : desLineHeight}`,
+    };
+    // 图片高度： 100% 基础下 H5: 1列 200px；2列 98px   PC： 3列 220px 4列 162px
+    const imageStyle = React.useMemo(() => {
+        let width = '100%';
+        let height = platform === 'h5' ? '200' : '220';
+        if (platform === 'h5' && ColMobile === 2) {
+            height = '98';
+        }
+        if (platform !== 'h5' && ColPC === 4) {
+            height = '162';
+        }
+        const numReg = /^\d+$/;
+        width = numReg.test(iconWidthSize) ? iconWidthSize + 'px' : iconWidthSize;
+        height = numReg.test(iconHeightSize)
+            ? iconHeightSize + 'px' //纯数字
+            : iconHeightSize.indexOf('%') == -1
+                ? iconHeightSize
+                : (Number(height) * parseInt(iconHeightSize)) / 100 + 'px';
+        return { width, height };
+    }, [iconWidthSize, iconHeightSize, ColMobile, ColPC, isH5]);
+    const tapTo = (colInfo = navOption[0]) => {
+        switch (colInfo === null || colInfo === void 0 ? void 0 : colInfo.tapStatus) {
+            case 'tap':
+                return null;
+            case 'inside':
+                if (colInfo.insideUrl) {
+                    app.navigateTo({
+                        mode: 'weDa',
+                        pageId: colInfo.insideUrl,
+                        params: (colInfo === null || colInfo === void 0 ? void 0 : colInfo.withParams) && (colInfo === null || colInfo === void 0 ? void 0 : colInfo.params.length) > 0
+                            ? colInfo.paramObj
+                            : null,
+                    });
+                }
+                break;
+            //return renderCancel();
+            case 'outer':
+                if (colInfo.newPage) {
+                    colInfo.outerUrl ? window.open(colInfo.outerUrl) : false;
+                }
+                else {
+                    colInfo.outerUrl ? (window.location.href = colInfo.outerUrl) : false;
+                }
+                break;
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: cls, "data-testid": "graphicCard", style: style },
+            React.createElement("div", { className: `${CLASS_PREFIX}__wrapper` }, cardList.map((row, rowIndex) => {
+                return (React.createElement(Row, { className: `${CLASS_PREFIX}__row`, key: rowIndex },
+                    React.createElement(React.Fragment, null, row &&
+                        row.map((col, colIndex) => {
+                            return (
+                            // 每列内容左右间距为0.1栅格列宽
+                            React.createElement(Col, { style: {
+                                    width: `${(1 / colCount) * 100}%`,
+                                    padding: `0 ${SingleGrid.width * 0.1}px`,
+                                    cursor: (col === null || col === void 0 ? void 0 : col.tapStatus) != 'tap' ? 'pointer' : 'auto',
+                                }, className: `${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`, key: colIndex },
+                                React.createElement("div", { className: "wedatea2td-grid__box", "data-testid": `${colIndex}_click`, onClick: () => tapTo(col) },
+                                    React.createElement("div", { className: `${CLASS_PREFIX}__col-body` },
+                                        col && (React.createElement("div", { className: `${CLASS_PREFIX}__icon`, style: imageStyle },
+                                            React.createElement(Image, { mode: 'scaleToFill', lazyLoad: false, maskClosable: false, imgPreview: false, fit: 'cover', alt: '', src: col === null || col === void 0 ? void 0 : col.icon, className: `${CLASS_PREFIX}__img` }))),
+                                        React.createElement("div", { className: `${CLASS_PREFIX}__detail` },
+                                            titleVisible && (col === null || col === void 0 ? void 0 : col.title) && (React.createElement("div", { className: `${CLASS_PREFIX}__title`, style: titleStyle }, col === null || col === void 0 ? void 0 : col.title)),
+                                            desVisible && (col === null || col === void 0 ? void 0 : col.des) && (React.createElement("div", { className: `${CLASS_PREFIX}__desc`, style: desStyle }, col === null || col === void 0 ? void 0 : col.des)))),
+                                    buttonVisible && col && (React.createElement(Button, { type: "link", className: `${CLASS_PREFIX}__btn` },
+                                        React.createElement(Text, { className: `${CLASS_PREFIX}__btn--text` }, buttonText),
+                                        React.createElement(IconFont, { name: "arrow-right", className: `${CLASS_PREFIX}__btn-icon` }))))));
+                        }))));
+            })))));
+}

package/dist/web/components/image/image.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { PropsType } from './index';
+interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
+    objectFit: React.CSSProperties['objectFit'];
+    isError: boolean;
+    setIsError: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, }: ImageInnerPropsType): JSX.Element;
+export {};

package/dist/web/components/image/image.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ConfigProvider, ImagePreview } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { useGesture } from '@use-gesture/react';
+export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, }) {
+    const platform = usePlatform();
+    const [imgShow, setImgShow] = React.useState(false);
+    const onMaskClick = () => {
+        if (maskClosable) {
+            setImgShow(false);
+        }
+    };
+    const [showHeight, setShowHeight] = React.useState(0);
+    const realWidth = React.useRef(0);
+    const realHeight = React.useRef(0);
+    const [offsetHeight, setOffsetHeight] = React.useState(0);
+    const [translateX, setTranslateX] = React.useState(0);
+    const [translateY, setTranslateY] = React.useState(0);
+    const [previewScale, setPreviewScale] = React.useState(1);
+    React.useEffect(() => {
+        // 防止触发浏览器的放大缩小
+        const handler = (e) => e.preventDefault();
+        document.addEventListener('gesturestart', handler);
+        document.addEventListener('gesturechange', handler);
+        return () => {
+            document.removeEventListener('gesturestart', handler);
+            document.removeEventListener('gesturechange', handler);
+        };
+    }, []);
+    const bind = useGesture({
+        onClick: ({ event }) => {
+            // 防止冒泡出发关闭预览
+            event.stopPropagation();
+        },
+        onPinch: ({ offset }) => {
+            const [s] = offset;
+            setPreviewScale(s);
+        },
+        onDrag: ({ offset, event }) => {
+            event.stopPropagation();
+            const [x, y] = offset;
+            setTranslateX(x);
+            setTranslateY(y);
+        },
+    }, {
+        drag: {
+            delay: true,
+            preventDefault: true,
+        },
+        pinch: {
+            scaleBounds: { min: 0.6, max: 5 },
+            pointer: {
+                touch: true,
+            },
+        },
+    });
+    if (platform === 'h5' || !imgPreview || isError) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("img", { style: {
+                    objectFit,
+                    ...style,
+                }, className: className, alt: alt, src: src, onLoad: (e) => {
+                    const img = e.target;
+                    const { naturalHeight, naturalWidth } = img;
+                    realHeight.current = naturalHeight;
+                    realWidth.current = naturalWidth;
+                    setIsError(false);
+                    events.load && events.load({}, { originEvent: e });
+                }, onError: (e) => {
+                    setIsError(true);
+                    events.error && events.error({}, { originEvent: e });
+                }, onClick: (e) => {
+                    if (imgPreview && !isError) {
+                        setTranslateX(0);
+                        setTranslateY(0);
+                        setPreviewScale(1);
+                        const windowHeight = window.innerHeight;
+                        const windowWidth = window.innerWidth;
+                        let ratio = realWidth.current / realHeight.current;
+                        if (Number.isNaN(ratio)) {
+                            ratio = 1;
+                        }
+                        const height = windowWidth / ratio;
+                        setOffsetHeight(windowHeight / 2 - height / 2);
+                        setShowHeight(height);
+                        setImgShow(true);
+                    }
+                    events.tap && events.tap({}, { originEvent: e });
+                }, loading: lazyLoad ? 'lazy' : undefined }),
+            imgShow && (React.createElement("div", { className: "weda-img-mask", onClick: onMaskClick },
+                React.createElement("div", { onClick: () => setImgShow(false), className: "weda-img-modal-close-btn" },
+                    React.createElement("i", { className: "weui-icon-clear", style: { color: 'white' } })),
+                React.createElement("div", { ...bind(), className: "weda-img-preview", style: {
+                        touchAction: 'none',
+                        backgroundImage: `url(${src})`,
+                        width: '100%',
+                        height: showHeight,
+                        marginTop: offsetHeight,
+                        transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+                    } })))));
+    }
+    else {
+        return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(ImagePreview, { previewSrc: src, maskClosable: maskClosable, className: className, style: { ...style, objectFit } }, (open) => (React.createElement("img", { style: {
+                    objectFit,
+                    cursor: 'zoom-in',
+                    ...style,
+                }, className: className, alt: alt, src: src, onLoad: (e) => {
+                    setIsError(false);
+                    events.load && events.load({}, { originEvent: e });
+                }, onError: (e) => {
+                    setIsError(true);
+                    events.error && events.error({}, { originEvent: e });
+                }, loading: lazyLoad ? 'lazy' : undefined, onClick: (e) => {
+                    open();
+                    events.tap && events.tap({}, { originEvent: e });
+                } })))));
+    }
+}

package/{src → dist}/web/components/image/index.css

@@ -28,8 +28,8 @@
 
 .weda-img-modal-close-btn {
   position: fixed;
-  top: 16px;
-  right: 16px;
+  top: 1.14286rem;
+  right: 1.14286rem;
   display: inline-block;
   z-index: 99;
   color: white;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.css';
+import type { CommonPropsType } from '../../types';
+declare type TMode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+export interface PropsType extends CommonPropsType, Pick<HTMLImageElement, 'src' | 'alt'> {
+    mode: TMode;
+    lazyLoad: boolean;
+    maskClosable: boolean;
+    imgPreview: boolean;
+    fit: React.CSSProperties['objectFit'] | ('widthFix' | 'heightFix');
+}
+export default function Image({ className, events, style, src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }: PropsType): JSX.Element;
+export {};

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import classNames from '../../utils/classnames';
+import './index.css';
+import { ImageInner } from './image';
+import { emptyObject } from '../../utils/constant';
+export default function Image({ 
+// 系统属性
+className, events = emptyObject, style, 
+// 组件属性
+src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }) {
+    const [isError, setIsError] = useState(false);
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-image': true,
+        'weda-image-error': isError,
+        [className]: className,
+    });
+    const objectFit = fit || getObjectFitByWxImageMode(mode);
+    const [realSrc, setRealSrc] = useState(/^cloud:\/\//.test(src) ? undefined : src);
+    useEffect(() => {
+        if (/^cloud:\/\//.test(src)) {
+            window.app.cloud
+                .getTempFileURL(src)
+                .then((res) => {
+                setRealSrc(res || '');
+            })
+                .catch(() => {
+                setRealSrc('');
+            });
+        }
+        else {
+            setRealSrc(src);
+        }
+    }, [src]);
+    /**
+     * 模拟小程序的widthFix、heightFix模式
+     */
+    const realFit = useMemo(() => {
+        if (objectFit === 'widthFix' || objectFit === 'heightFix') {
+            return 'scale-down';
+        }
+        else {
+            return objectFit;
+        }
+    }, [objectFit]);
+    const realStyle = useMemo(() => {
+        if (objectFit === 'widthFix') {
+            return {
+                ...style,
+                height: 'auto',
+            };
+        }
+        else if (objectFit === 'heightFix') {
+            return {
+                ...style,
+                width: 'auto',
+            };
+        }
+        else {
+            return style;
+        }
+    }, [style, fit]);
+    return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (React.createElement(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable })) : null;
+}
+function getObjectFitByWxImageMode(mode) {
+    const array = [
+        {
+            mode: 'scaleToFill',
+            h5: 'fill',
+        },
+        {
+            mode: 'aspectFit',
+            h5: 'contain',
+        },
+        {
+            mode: 'aspectFill',
+            h5: 'cover',
+        },
+        {
+            mode: 'widthFix',
+            h5: 'cover',
+        },
+        {
+            mode: 'heightFix',
+            h5: 'contain',
+        },
+    ];
+    const item = array.find((item) => item.mode === mode);
+    return item === null || item === void 0 ? void 0 : item.h5;
+}

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

@@ -0,0 +1,47 @@
+export { default as Button } from "./button";
+export const Text: any;
+export { default as Container } from "./container";
+export const Image: any;
+export { default as Slot } from "./slot";
+export { default as ScrollView } from "./scrollView";
+export { default as Swiper } from "./swiper";
+export { default as Carousel } from "./carousel";
+export { default as Modal } from "./modal";
+export const RichText: any;
+export { default as RichTextView } from "./richTextView";
+export { default as Link } from "./link";
+export { default as Drawer } from "./drawer";
+export { default as UploaderView } from "./uploaderView";
+export { default as UploaderFileView } from "./uploaderFileView";
+export const WedaVideo: any;
+export { default as Picker } from "./picker/picker";
+export { default as DatePicker } from "./picker/datePicker";
+export { default as TimePicker } from "./picker/timePicker";
+export { default as Form } from "./form/form";
+export { default as Input } from "./form/input";
+export { default as Textarea } from "./form/textarea";
+export { default as Checkbox } from "./form/checkbox";
+export { default as Radio } from "./form/radio";
+export { default as Switch } from "./form/switch";
+export { default as Select } from "./form/select";
+export { default as Uploader } from "./form/uploader";
+export { default as UploaderFile } from "./form/uploaderFile";
+export { default as Tips } from "./form/tips";
+export { default as Tabs } from "./tabs";
+export { default as Location } from "./form/location";
+export const EnumSelect: any;
+export const Calendar: any;
+export { default as NavLayout } from "./navLayout";
+export { default as ListView } from "./listView";
+export { default as NavigationBar } from "./navigationBar";
+export const Line: any;
+export const Bar: any;
+export const Pie: any;
+export { default as DataView } from "./dataView";
+export { default as StatisticsCard } from "./chart/statisticsCard";
+export { default as GraphicCard } from "./graphicCard";
+export { default as UserInfo } from "./userInfo";
+export { default as Phone } from "./phone";
+export { default as PhoneCode } from "./phoneCode";
+export { default as Share } from "./share";
+export { default as Lottery } from "./lottery";