@cloudbase/weda-ui 3.2.0 → 3.3.0

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

@@ -0,0 +1,127 @@
+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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,385 @@
+/* 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

@@ -0,0 +1,23 @@
+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;
+}