@cloudbase/weda-ui 2.0.28 → 3.1.2

package/src/web/components/lottery/index.tsx

@@ -1,567 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useState, useEffect } from 'react';
-import { usePlatform } from '../../utils/platform';
-import classNames from '../../utils/classnames';
-import './index.css';
-import type { CommonPropsType } from '../../types';
-import { ConfigProvider } from 'tea-component';
-import LotteryAction from './lotteryUtil';
-
-const CLASS_PREFIX = 'weda-lottery';
-const lotteryAction = new LotteryAction();
-export default function Lottery({
-  className,
-  id,
-  style,
-  prizeList,
-  enablePrize,
-  prizeResult,
-  events,
-}: PropsType) {
-  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 = () => {
-    let list = [];
-    if (prizeList == null) {
-      return list;
-    }
-    for (let i = 0; i < 8; i++) {
-      if (i < prizeList.length) {
-        let 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;
-  };
-
-  const startLottery = () => {
-    setLotteryList(lotteryListDefault());
-    setBtnActived(true);
-    if (lotteryAction.isStart) return;
-    events?.clickLotteryButton();
-    setIsStartLottery(true);
-  };
-
-  useEffect(() => {
-    setLotteryList(lotteryListDefault());
-  }, [prizeList]);
-
-  useEffect(() => {
-    lotteryAction.animationCallback = ({ idx, isEnd }) => {
-      setActivedId(idx == -1 ? 0 : idx);
-      if (isEnd) {
-        setBtnActived(false);
-        let list = lotteryList.map((item, index) => {
-          if (index === idx - 1) {
-            item.selected = true;
-          } else {
-            item.selected = false;
-          }
-          return item;
-        });
-        setLotteryList(list);
-        setActivedId(-1);
-        setTimeout(() => {
-          events.finishLottery({
-            prize: idx,
-            result: list[idx - 1],
-          });
-          //延迟700毫秒显示的视觉效果更好，否则看不清结果就弹出dialog盖住了
-        }, 700);
-      }
-    };
-  }, [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]);
-
-  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: string | number) => {
-    if (!targetValue) return -1;
-    let 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: number, unit: string | number) => {
-    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);
-      }
-    }
-  }, [style]);
-
-  const renderDot = (direction: string, list: string[]) => {
-    return (
-      <>
-        <div
-          className={classNames(
-            `${CLASS_PREFIX}__dot`,
-            `${CLASS_PREFIX}__dot-${direction}`
-          )}
-        >
-          {list.map((item, index) => {
-            return (
-              <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',
-                }}
-              ></div>
-            );
-          })}
-        </div>
-      </>
-    );
-  };
-
-  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 (
-    <ConfigProvider classPrefix="wedatea2td">
-      <div className="body" key="lottery" data-testid="lottery">
-        <div className={cls} id={id} style={style}>
-          <div className={`${CLASS_PREFIX}__wrap`}>
-            {dotList.map((dot, index) => {
-              return (
-                <div key={index}>
-                  {dot.single && (
-                    <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`
-                            : '',
-                      }}
-                    ></div>
-                  )}
-                  {!dot.single && (
-                    <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)}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-            <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`,
-              }}
-            >
-              <div className={`${CLASS_PREFIX}__inner-wrap`}>
-                <ul className={`${CLASS_PREFIX}__list`}>
-                  {lotteryList.map((item, index) => {
-                    return (
-                      <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)`
-                              : '',
-                        }}
-                      >
-                        <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 && (
-                            <div
-                              className={`${CLASS_PREFIX}__turntable-cell-image`}
-                              style={{
-                                height: `${(heightRatio * 40) / 14}rem`,
-                              }}
-                            >
-                              <img
-                                src={item.src}
-                                alt={item.desc}
-                                className={`${CLASS_PREFIX}__turntable-cell-icon`}
-                                style={{
-                                  width: `${(widthRatio * 40) / 14}rem`,
-                                  height: `${(heightRatio * 40) / 14}rem`,
-                                }}
-                              />
-                            </div>
-                          )}
-                          {item.desc && (
-                            <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}
-                            </div>
-                          )}
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
-                <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)`,
-                  }}
-                >
-                  <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`,
-                    }}
-                  >
-                    <div className={`${CLASS_PREFIX}__btn`}>
-                      <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}
-                      >
-                        <p
-                          className={`${CLASS_PREFIX}__btn-text`}
-                          style={{
-                            fontSize: `${(widthRatio * 18) / 14}rem`,
-                            lineHeight: `${(widthRatio * 22) / 14}rem`,
-                          }}
-                        >
-                          开始抽奖
-                        </p>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}
-
-export interface PropsType extends CommonPropsType {
-  /**
-   * 奖品列表
-   */
-  prizeList: any;
-  /**
-   * 启动抽奖
-   */
-  enablePrize: boolean;
-  /**
-   * 抽奖结果
-   */
-  prizeResult: string;
-}

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

@@ -1,130 +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() {
-    // 当前位置
-    this.idx = -1;
-    // 开始抽奖
-    this.isStart = false;
-    // 结束位置
-    this.endId = undefined;
-    // 抽奖速度
-    this.speed = 0;
-    // 持续时长
-    this.duration = 2000;
-    // 长度
-    this.maxIdx = 8;
-    // 回调动作
-    this.animationCallback = ({ idx, isEnd }) => {};
-    // 是否异常
-    this.isError = false;
-    // 是否加速
-    this.isSpeedUp = false;
-    //超时时间
-    this.timeout = 6000;
-  }
-
-  start(prizeResult, errorCallback) {
-    setTimeout(() => {
-      this.isStart = false;
-      let reg = /^\+?[1-9]\d*$/;
-      if (!reg.test(prizeResult)) {
-        this.isError = true;
-        if (errorCallback) {
-          errorCallback();
-        }
-      }
-    }, this.duration);
-    // 在转动时长的一半，开始减速转动
-    setTimeout(() => {
-      this.isSpeedUp = false;
-    }, this.duration / 2);
-    // 超时，当出现一些意外的情况终止动画
-    setTimeout(() => {
-      if (this.endId === undefined) {
-        this.end(prizeResult);
-      }
-    }, this.timeout);
-    this.isStart = true;
-    this.isError = false;
-    this.isSpeedUp = true;
-    this.loop();
-  }
-
-  end(prizeResult) {
-    this.endId = prizeResult;
-  }
-
-  error() {
-    this.isError = true;
-  }
-
-  stop() {
-    this.isStart = false;
-    this.end(-1);
-    clearTimeout(this.timer);
-  }
-
-  pointOnCubicBezier(cp, t) {
-    let x =
-      Math.pow(1 - t, 2) * cp[0] +
-      2 * t * (1 - t) * cp[1] +
-      Math.pow(t, 2) * cp[2];
-    return x;
-  }
-
-  loop() {
-    const { animationCallback } = this;
-    this.timer = setTimeout(() => {
-      const over = !this.isStart && this.endId !== undefined;
-      // emit
-      animationCallback({ idx: this.idx, isEnd: false });
-      // compare
-      if (this.idx < this.maxIdx) {
-        this.idx++;
-      } else {
-        this.idx = 1;
-      }
-      // continue
-      if (!(over && String(this.idx) === String(this.endId)) && !this.isError) {
-        if (this.isSpeedUp) {
-          const point = this.pointOnCubicBezier([500, 50, 100], 1 / 10);
-          this.speed = point;
-          if (this.speed < 100) {
-            this.speed = 100;
-          }
-        } else {
-          const point = this.pointOnCubicBezier([100, 50, 500], 1 / 10);
-          this.speed = point;
-          if (this.speed > 1000) {
-            this.speed = 1000;
-          }
-        }
-        this.loop();
-      } else {
-        if (this.isError) return;
-        animationCallback({ idx: this.idx, isEnd: true });
-        this.idx = -1;
-      }
-    }, this.speed);
-  }
-}