@cloudbase/weda-ui 0.2.17 → 2.0.8

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

@@ -0,0 +1,567 @@
+/* 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 { 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 (
+                <>
+                  {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
+              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

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