@cloudbase/weda-ui 3.3.0 → 3.3.2

package/dist/src/web/components/listView/interface.d.ts

@@ -1,127 +0,0 @@
-import React from 'react';
-/**
- * 数据容器公共属性
- */
-export interface IDataContainer {
-    /**
-     * 数据源类型
-     */
-    dataSourceType: 'data-model' | 'connector' | 'custom-connector';
-    /**
-     * 连接器
-     */
-    bindConnectMetadata?: {
-        datasource: {
-            name?: string;
-        };
-    };
-    /**
-     * 连接器方法
-     */
-    connectorMethod?: {
-        name?: string;
-        inParams?: string[];
-        outParams?: string[];
-        title?: string;
-    };
-    /**
-     * 数据模型
-     */
-    datasource?: {
-        name?: string;
-        extra?: {
-            viewId?: string;
-            methodName?: string;
-        };
-    };
-    /**
-     * 连接器查询入参
-     */
-    connectorParams?: object;
-    /**
-     * 数据筛选
-     */
-    where?: {
-        groupLogic?: null | 'or' | 'and';
-        logicData?: {
-            keyType?: 'field' | 'var-font';
-            key: string;
-            rel: 'eq' | 'neq' | 'lt' | 'gt' | 'gte' | 'lte' | 'in' | 'nin' | 'search';
-            value: any;
-            valueType?: 'const' | 'var-font' | 'relative-amount' | 'field';
-            expression?: string | boolean;
-            logic?: null | 'or' | 'and' | string;
-            extra?: {
-                type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | string;
-                format?: string | null;
-                isExpression?: boolean;
-            };
-        }[];
-    }[];
-    /**
-     * 容器事件
-     */
-    events?: {
-        queryEmpty?: any;
-        querySuccess?: any;
-        queryFail?: any;
-        onDataChange?: (param: any) => any;
-    };
-    /**
-     * 类
-     */
-    className?: string;
-    /**
-     * app.cloud 对象依赖，默认会从 window.app 取值
-     */
-    appCloud?: {
-        callDataSource?: any;
-        isInIde?: any;
-    };
-    /**
-     * 子元素
-     */
-    children?: React.ReactNode | undefined;
-    /**
-     * 其他属性
-     */
-    [key: string]: any;
-}
-/**
- * 数据容器-列表视图
- */
-export interface IListView extends IDataContainer {
-    /**
-     * 数据字段
-     */
-    orderBy?: string;
-    /**
-     * 数据类型
-     */
-    orderType?: 'desc' | 'asc';
-    /**
-     * 模板
-     */
-    template?: 'simpleList' | 'detailList' | 'imageTextList' | 'cardList' | 'none';
-    /**
-     * 显示行数
-     */
-    pageSize?: number;
-    /**
-     * 分页类型，加载更多|底部刷新｜分页器
-     */
-    pagination?: 'loadMoreButton' | 'bottomLoad' | 'pagination' | 'none';
-    /**
-     * 调用 onDataChange 之前的数据转换，如列表视图需要接受 array，而数据视图需要接受 object
-     */
-    beforeDataChange?: (param: any) => any;
-    /**
-     * 是否展示回调recoreds字段
-     */
-    isRecords?: boolean;
-}
-/**
- * 查询状态
- * 成功｜失败｜空｜加载中｜初始化
- */
-export declare type IStatus = 'success' | 'fail' | 'empty' | 'loading' | '';

package/dist/src/web/components/listView/interface.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import './index.css';
-import type { CommonPropsType, ICompRef } from '../../types';
-declare type TCompRef = ICompRef<{
-    start: () => void;
-}>;
-declare const _default: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<TCompRef>>;
-export default _default;
-export interface PropsType extends CommonPropsType {
-    /**
-     * 奖品列表
-     */
-    prizeList: any;
-    /**
-     * 启动抽奖
-     */
-    enablePrize: boolean;
-    /**
-     * 抽奖结果
-     */
-    prizeResult: string;
-}

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

@@ -1,385 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useState, useEffect, useCallback, useImperativeHandle, useMemo, } from 'react';
-import { usePlatform } from '../../utils/platform';
-import classNames from '../../utils/classnames';
-import './index.css';
-import { ConfigProvider } from 'tea-component';
-import LotteryAction from './lotteryUtil';
-const CLASS_PREFIX = 'weda-lottery';
-const lotteryAction = new LotteryAction();
-export default React.forwardRef(function Lottery({ className, id, style, prizeList, enablePrize, prizeResult, events }, ref) {
-    const platform = usePlatform();
-    const [activedId, setActivedId] = useState(-1);
-    const [isStartLottery, setIsStartLottery] = useState(false);
-    const [lotteryList, setLotteryList] = useState([]);
-    const [btnActived, setBtnActived] = useState(false);
-    //获取初始化默认数据，数据不足8条设置默认，超过8条获取前8条
-    const lotteryListDefault = useMemo(() => {
-        const list = [];
-        if (prizeList == null) {
-            return list;
-        }
-        for (let i = 0; i < 8; i++) {
-            if (i < prizeList.length) {
-                const prize = prizeList[i];
-                list.push({
-                    idx: i + 1,
-                    selected: false,
-                    desc: prize.title,
-                    src: prize.image,
-                });
-            }
-            else {
-                list.push({
-                    idx: i + 1,
-                    selected: false,
-                    desc: '',
-                    src: '',
-                });
-            }
-        }
-        return list;
-    }, [prizeList]);
-    const startLottery = useCallback(() => {
-        setLotteryList(lotteryListDefault);
-        setBtnActived(true);
-        if (lotteryAction.isStart)
-            return;
-        events === null || events === void 0 ? void 0 : events.clickLotteryButton();
-        setIsStartLottery(true);
-    }, [lotteryListDefault, events]);
-    useImperativeHandle(ref, () => {
-        return {
-            methods: {
-                start: startLottery,
-            },
-        };
-    }, [startLottery]);
-    useEffect(() => {
-        setLotteryList(lotteryListDefault);
-    }, [lotteryListDefault]);
-    useEffect(() => {
-        lotteryAction.animationCallback = ({ idx, isEnd }) => {
-            setActivedId(idx == -1 ? 0 : idx);
-            if (isEnd) {
-                setBtnActived(false);
-                const list = lotteryList.map((item, index) => {
-                    if (index === idx - 1) {
-                        item.selected = true;
-                    }
-                    else {
-                        item.selected = false;
-                    }
-                    return item;
-                });
-                setLotteryList(list);
-                setActivedId(-1);
-                // eslint-disable-next-line rulesdir/no-timer
-                setTimeout(() => {
-                    events.finishLottery({
-                        prize: idx,
-                        result: list[idx - 1],
-                    });
-                    // 延迟700毫秒显示的视觉效果更好，否则看不清结果就弹出dialog盖住了
-                }, 700);
-            }
-        };
-    }, [events, lotteryList]);
-    useEffect(() => {
-        // 当满足开启抽奖条件并且点击了开奖开关时，启用抽奖
-        if (enablePrize && isStartLottery) {
-            lotteryAction.start(prizeResult, () => {
-                window.app.showToast({
-                    title: '网络异常',
-                    icon: 'none',
-                });
-            });
-            // 当不选取变量作为结果的时候，按照设置给定结果
-            lotteryAction.end(prizeResult);
-            setIsStartLottery(false);
-        }
-        else if (!enablePrize) {
-            //立马停止抽奖
-            lotteryAction.stop();
-        }
-    }, [isStartLottery, enablePrize, prizeResult]);
-    useEffect(() => {
-        // 设置抽奖结果
-        lotteryAction.end(prizeResult);
-    }, [prizeResult]);
-    const [widthRatio, setWidthRatio] = useState(1);
-    const [heightRatio, setHeightRatio] = useState(1);
-    // 上下5个球的宽度
-    const [dotWidth, setDotWidth] = useState(217 / 14);
-    // 左右5个球的高度
-    const [dotHeight, setDotHeight] = useState(217 / 14);
-    const standardWidth = 326;
-    const standardHeight = 326;
-    const cls = classNames({
-        [CLASS_PREFIX]: true,
-        [className]: className,
-        [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
-    });
-    // 将获取的style 转化为 px, 用户输入的单位可能有(纯数字，px, rem, %, rpx)
-    // 注： 前端输入宽高，不带单位和带rem单位，code 中获取的都是rem 单位，也就是输入1304，输出‘46.5714rem’； 输入‘1304rem’, 输出‘1304rem’， 所以rem目前不支持正常的比列
-    // 带上px单位和不带单位，输出的都是rem，且转化的值一样的，所以不需要特殊处理，也就是 输入 1304 和 1304px ,前端拿到的都是‘46.5714rem’
-    // rpx 是小程序的单位，并且在pc 上加病没作用，所以rpx 不处理
-    // % 暂时也不处理，因为不确定用户的百分比是以什么为标准的
-    const getStyleUnit = (targetValue) => {
-        if (!targetValue)
-            return -1;
-        const value = targetValue.toString();
-        // 获取单位
-        const fotData = value.match(/^\d+(?:\.\d+)?([a-zA-Z%]+)?$/);
-        let unit = 'rem';
-        if (fotData && fotData[1]) {
-            unit = fotData[1];
-        }
-        return unit;
-    };
-    const getRatio = (value, unit) => {
-        let actualValue;
-        if (unit.toString() === 'rem') {
-            actualValue = value * 14 * 2;
-        }
-        return actualValue;
-    };
-    // 通过页面配置拿到用户设置的宽，高,直接获取的宽和高，会被转化为rem, 需要将rem 转为 px. 规则： e/2/14
-    // css 输出的px到页面rem, 转化规则为： e/14
-    useEffect(() => {
-        if (!style || style == undefined || platform === 'h5') {
-            setWidthRatio(1);
-            setDotWidth(217 / 14);
-            setHeightRatio(1);
-            setDotHeight(217 / 14);
-            return;
-        }
-        if (style && style !== undefined) {
-            // 如果宽和高不存在，则还远吗比例为默认值-1，也就是保持视觉稿默认的宽和高
-            if (!style.width) {
-                setWidthRatio(1);
-                setDotWidth(217 / 14);
-            }
-            if (!style.height) {
-                setHeightRatio(1);
-                setDotHeight(217 / 14);
-            }
-            if (style.width) {
-                // 现将获取的rem 转化为px
-                const actualValue = getRatio(parseFloat(style.width.toString()), getStyleUnit(style.width));
-                // setWidthRatio();
-                const setValue = Math.floor((actualValue / (standardWidth * 2)) * 1000) / 1000;
-                setWidthRatio(setValue);
-                const dotWidth = (setValue * 43 * 4 + setValue * 9 * 5) / 14;
-                setDotWidth(dotWidth);
-            }
-            if (style.height) {
-                // 现将获取的rem 转化为px
-                const actualValue = getRatio(parseFloat(style.height.toString()), getStyleUnit(style.height));
-                const setValue = Math.floor((actualValue / (standardHeight * 2)) * 1000) / 1000;
-                setHeightRatio(setValue);
-                const dotHeight = (setValue * 43 * 4 + setValue * 9 * 5) / 14;
-                setDotHeight(dotHeight);
-            }
-        }
-    }, [platform, style]);
-    const renderDot = (direction, list) => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classNames(`${CLASS_PREFIX}__dot`, `${CLASS_PREFIX}__dot-${direction}`) }, list.map((item, index) => {
-                return (React.createElement("div", { key: index, className: `${CLASS_PREFIX}__dot-item`, style: {
-                        width: `${(9 * widthRatio) / 14}rem`,
-                        height: `${(9 * heightRatio) / 14}rem`,
-                        marginBottom: `${direction}` === 'vertical'
-                            ? `${(43 * heightRatio) / 14}rem`
-                            : '0',
-                        marginRight: `${direction}` === 'horizontal'
-                            ? `${(43 * widthRatio) / 14}rem`
-                            : '0',
-                    } }));
-            }))));
-    };
-    const dotList = [
-        {
-            single: true,
-            position: 'left-top',
-            direction: '',
-            list: [],
-        },
-        {
-            single: true,
-            position: 'left-bottom',
-            direction: '',
-            list: [],
-        },
-        {
-            single: true,
-            position: 'right-top',
-            direction: '',
-            list: [],
-        },
-        {
-            single: true,
-            position: 'right-bottom',
-            direction: '',
-            list: [],
-        },
-        {
-            single: false,
-            position: 'top',
-            direction: 'horizontal',
-            list: ['1', '2', '3', '4', '5'],
-        },
-        {
-            single: false,
-            position: 'bottom',
-            direction: 'horizontal',
-            list: ['1', '2', '3', '4', '5'],
-        },
-        {
-            single: false,
-            position: 'left',
-            direction: 'vertical',
-            list: ['1', '2', '3', '4', '5'],
-        },
-        {
-            single: false,
-            position: 'right',
-            direction: 'vertical',
-            list: ['1', '2', '3', '4', '5'],
-        },
-    ];
-    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
-        React.createElement("div", { className: "body", key: "lottery", "data-testid": "lottery" },
-            React.createElement("div", { className: cls, id: id, style: style },
-                React.createElement("div", { className: `${CLASS_PREFIX}__wrap` },
-                    dotList.map((dot, index) => {
-                        return (React.createElement("div", { key: index },
-                            dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: classNames(`${CLASS_PREFIX}__dot-single`, `${CLASS_PREFIX}__dot-${dot.position}`), style: {
-                                    width: `${(9 * widthRatio) / 14}rem`,
-                                    height: `${(9 * heightRatio) / 14}rem`,
-                                    top: `${dot.position}` === 'left-top' ||
-                                        `${dot.position}` === 'right-top'
-                                        ? `${(9 * heightRatio) / 14}rem`
-                                        : '',
-                                    bottom: `${dot.position}` === 'left-bottom' ||
-                                        `${dot.position}` === 'right-bottom'
-                                        ? `${(9 * heightRatio) / 14}rem`
-                                        : '',
-                                    left: `${dot.position}` === 'left-top' ||
-                                        `${dot.position}` === 'left-bottom'
-                                        ? `${(6 * widthRatio) / 14}rem`
-                                        : '',
-                                    right: `${dot.position}` === 'right-top' ||
-                                        `${dot.position}` === 'right-bottom'
-                                        ? `${(6 * widthRatio) / 14}rem`
-                                        : '',
-                                } })),
-                            !dot.single && (React.createElement("div", { key: `${dot.direction}-${index}`, className: `${CLASS_PREFIX}__dot-${dot.position}`, style: {
-                                    left: `${dot.position}` === 'top' ||
-                                        `${dot.position}` === 'bottom'
-                                        ? `calc((${'100%'} - ${dotWidth}rem) / 2)`
-                                        : `${dot.position}` === 'left'
-                                            ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
-                                            : '',
-                                    top: `${dot.position}` === 'left' ||
-                                        `${dot.position}` === 'right'
-                                        ? `calc((100% - ${dotHeight}rem) / 2)`
-                                        : `${dot.position}` === 'top'
-                                            ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
-                                            : '',
-                                    bottom: `${dot.position}` === 'bottom'
-                                        ? `${(heightRatio * 18 - heightRatio * 9) / 2 / 14}rem`
-                                        : '',
-                                    right: `${dot.position}` === 'right'
-                                        ? `${(widthRatio * 18 - widthRatio * 9) / 2 / 14}rem`
-                                        : '',
-                                } }, true && renderDot(dot.direction, dot.list)))));
-                    }),
-                    React.createElement("div", { className: `${CLASS_PREFIX}__inner`, style: {
-                            paddingTop: `${(18 * heightRatio) / 14}rem`,
-                            paddingBottom: `${(18 * heightRatio) / 14}rem`,
-                            paddingLeft: `${(18 * widthRatio) / 14}rem`,
-                            paddingRight: `${(18 * widthRatio) / 14}rem`,
-                        } },
-                        React.createElement("div", { className: `${CLASS_PREFIX}__inner-wrap` },
-                            React.createElement("ul", { className: `${CLASS_PREFIX}__list` }, lotteryList.map((item, index) => {
-                                return (React.createElement("li", { "data-testid": "lottery-item", key: index, className: classNames(`${CLASS_PREFIX}__turntable-item`, item.idx === activedId ? 'is-actived' : '', item.selected ? 'is-selected' : ''), style: {
-                                        width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
-                                        height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
-                                        top: `${index}` == '0' ||
-                                            `${index}` == '1' ||
-                                            `${index}` == '2'
-                                            ? `${(heightRatio * 8) / 14}rem`
-                                            : `${index}` == '3'
-                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
-                                                : '',
-                                        bottom: `${index}` == '4' ||
-                                            `${index}` == '5' ||
-                                            `${index}` == '6'
-                                            ? `${(heightRatio * 8) / 14}rem`
-                                            : `${index}` == '7'
-                                                ? `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`
-                                                : '',
-                                        right: `${index}` == '2' ||
-                                            `${index}` == '3' ||
-                                            `${index}` == '4'
-                                            ? `${(widthRatio * 8) / 14}rem`
-                                            : '',
-                                        left: `${index}` == '0' ||
-                                            `${index}` == '6' ||
-                                            `${index}` == '7'
-                                            ? `${(widthRatio * 8) / 14}rem`
-                                            : `${index}` == '1' || `${index}` == '5'
-                                                ? `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3 + ${(widthRatio * 8 * 2) / 14}rem)`
-                                                : '',
-                                    } },
-                                    React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell`, style: {
-                                            borderLeftWidth: `${(4 * widthRatio) / 14}rem`,
-                                            borderRightWidth: `${(4 * widthRatio) / 14}rem`,
-                                            borderTopWidth: `${(4 * heightRatio) / 14}rem`,
-                                            borderBottomWidth: `${(4 * heightRatio) / 14}rem`,
-                                            paddingTop: `${(8 * heightRatio) / 14}rem`,
-                                            paddingBottom: `${(8 * heightRatio) / 14}rem`,
-                                            paddingLeft: `${(2 * widthRatio) / 14}rem`,
-                                            paddingRight: `${(2 * widthRatio) / 14}rem`,
-                                        } },
-                                        item.src && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-image`, style: {
-                                                height: `${(heightRatio * 40) / 14}rem`,
-                                            } },
-                                            React.createElement("img", { src: item.src, alt: item.desc, className: `${CLASS_PREFIX}__turntable-cell-icon`, style: {
-                                                    width: `${(widthRatio * 40) / 14}rem`,
-                                                    height: `${(heightRatio * 40) / 14}rem`,
-                                                } }))),
-                                        item.desc && (React.createElement("div", { className: `${CLASS_PREFIX}__turntable-cell-desc`, style: {
-                                                marginTop: `${(heightRatio * 6) / 14}rem`,
-                                                fontSize: `${(widthRatio * 12) / 14}rem`,
-                                                lineHeight: `${(heightRatio * 17) / 14}rem`,
-                                            } }, item.desc)))));
-                            })),
-                            React.createElement("div", { className: classNames(`${CLASS_PREFIX}__turntable-btn`, btnActived ? 'is-actived' : ''), style: {
-                                    width: `calc((${'100%'} - ${(widthRatio * 8 * 4) / 14}rem) / 3)`,
-                                    height: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3)`,
-                                    top: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
-                                    left: `calc((${'100%'} - ${(heightRatio * 8 * 4) / 14}rem) / 3 + ${(heightRatio * 8 * 2) / 14}rem)`,
-                                } },
-                                React.createElement("div", { className: `${CLASS_PREFIX}__btn-inner`, style: {
-                                        paddingTop: `${(9 * heightRatio) / 14}rem`,
-                                        paddingBottom: `${(9 * heightRatio) / 14}rem`,
-                                        paddingLeft: `${(9 * widthRatio) / 14}rem`,
-                                        paddingRight: `${(9 * widthRatio) / 14}rem`,
-                                    } },
-                                    React.createElement("div", { className: `${CLASS_PREFIX}__btn` },
-                                        React.createElement("a", { "data-testid": "start-lottery", className: `${CLASS_PREFIX}__btn-image`, style: {
-                                                paddingTop: `${(11 * heightRatio) / 14}rem`,
-                                                paddingBottom: `${(11 * heightRatio) / 14}rem`,
-                                                paddingLeft: `${(15 * widthRatio) / 14}rem`,
-                                                paddingRight: `${(15 * widthRatio) / 14}rem`,
-                                            }, onClick: startLottery },
-                                            React.createElement("p", { className: `${CLASS_PREFIX}__btn-text`, style: {
-                                                    fontSize: `${(widthRatio * 18) / 14}rem`,
-                                                    lineHeight: `${(widthRatio * 22) / 14}rem`,
-                                                } },
-                                                "\u5F00\u59CB",
-                                                React.createElement("br", null),
-                                                "\u62BD\u5956"))))))))))));
-});

package/dist/src/web/components/lottery/lotteryUtil.d.ts

@@ -1,23 +0,0 @@
-export default class LotteryAction {
-    idx: number;
-    isStart: boolean;
-    endId: any;
-    speed: number;
-    duration: number;
-    maxIdx: number;
-    animationCallback: ({ idx, isEnd }: {
-        idx: any;
-        isEnd: any;
-    }) => void;
-    isError: boolean;
-    isSpeedUp: boolean;
-    timeout: number;
-    timer: any;
-    constructor();
-    start(prizeResult: any, errorCallback: any): void;
-    end(prizeResult: any): void;
-    error(): void;
-    stop(): void;
-    pointOnCubicBezier(cp: any, t: any): number;
-    loop(): void;
-}