@cloudbase/weda-ui 0.2.13 → 0.2.16

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

@@ -0,0 +1,417 @@
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import classNames from '../../utils/classnames';
+import Swipe from 'react-easy-swipe';
+import {
+  useDebouncedCallback,
+  useEventListener,
+  useResizeObserver,
+} from '@react-hookz/web';
+
+import './index.css';
+import { CommonPropsType } from '../../types';
+
+import Image from '../image';
+interface imagesItem {
+  image: string;
+  title: string;
+  tapMode: 'tap' | 'inside' | 'outer';
+  fit: React.CSSProperties['objectFit'];
+  height: string;
+  width: string;
+  insideUrl?: string;
+  outerUrl?: string;
+  newPage?: boolean;
+  params?: { key: string; value: string }[];
+}
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 是否启用指示点
+   */
+  indicatorDots: boolean;
+  /**
+   * 是否自动切换
+   */
+  autoplay: boolean;
+  /**
+   * 当前索引值
+   */
+  current: number;
+  interval: number;
+  duration: number;
+  circular: boolean;
+  vertical: boolean;
+  indicatorColor: string;
+  indicatorActiveColor: string;
+  images: Array<imagesItem>;
+}
+
+export default function Carousel({
+  className,
+  style = {},
+  autoplay = true,
+  circular = true,
+  vertical = false,
+  indicatorDots,
+  indicatorColor = 'rgba(200, 200, 200, 0.9)',
+  indicatorActiveColor = 'rgba(0, 0, 0, 0.9)',
+  duration = 500,
+  interval = 5000,
+  current = 0,
+  events = {},
+  id,
+  images,
+}: PropsType) {
+  const itemCount = images.length;
+  current = Math.max(0, Math.min(itemCount - 1, current));
+
+  const [currentIndex, setCurrentIndex] = useState(current);
+  const [swipeStyle, setSwipeStyle] = useState(null);
+  const [height, setHeight] = useState(0);
+
+  const { change = () => {} } = events;
+
+  // 自动切换
+  useEffect(() => {
+    if (autoplay) {
+      const timer = setInterval(() => {
+        setIndex(currentIndex + 1);
+      }, interval);
+
+      return () => clearInterval(timer);
+    }
+  }, [currentIndex, autoplay]);
+
+  // 触发切换
+  const pre = useRef({ index: currentIndex }).current;
+  useEffect(() => {
+    updateSwipeStyle(currentIndex, pre.index, itemCount);
+    change({
+      current: currentIndex,
+    });
+    return () => {
+      pre.index = currentIndex;
+    };
+  }, [currentIndex, vertical]);
+
+  const outerWrapRef = useRef<HTMLDivElement>();
+  useEventListener(outerWrapRef, 'load', (e) => {
+    setHeight(e.target.clientHeight);
+  });
+
+  const itemsClone = images.map((x, i) => {
+    return (
+      <div className="g-swiper-item" data-index={i} key={i}>
+        <Image
+          mode={'scaleToFill'}
+          lazyLoad={false}
+          maskClosable={false}
+          imgPreview={false}
+          src={x.image}
+          alt={'图片'}
+          fit={x.fit}
+          style={{
+            height: x.height ? x.height : 'auto',
+            width: x.width ? x.width : '100%',
+          }}
+        />
+      </div>
+    );
+  });
+
+  const setIndex = (index) => {
+    if (index >= itemCount) {
+      index = 0;
+    }
+    if (index < 0) {
+      index = itemCount - 1;
+    }
+    setCurrentIndex(index);
+  };
+
+  // 设置容器样式、动画
+  // TODO fix settimeout mess
+  const updateSwipeStyle = (to, cur, length) => {
+    let style;
+    // 最后向前到最开始
+    if (to === 0 && cur === length - 1) {
+      circular &&
+        setSwipeStyle({
+          transform: `translate3d(0, 0, 0)`,
+        });
+      setTimeout(() => {
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -100%, 0)`
+            : `translate3d(-100%, 0, 0)`,
+          transitionDuration: `${duration}ms`,
+        });
+      }, 50);
+      return;
+    }
+
+    // 第一个后退到最后
+    if (to === length - 1 && cur === 0) {
+      circular &&
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+        });
+      setTimeout(() => {
+        setSwipeStyle({
+          transform: vertical
+            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+          transitionDuration: `${duration}ms`,
+        });
+      }, 50);
+      return;
+    }
+
+    style = {
+      transform: vertical
+        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+    };
+    if (to !== cur) {
+      style.transitionDuration = `${duration}ms`;
+    }
+    setSwipeStyle(style);
+  };
+
+  return (
+    <div
+      className={classNames('g-swiper weda-ui g-carousel', className, {
+        vertical: vertical,
+      })}
+      style={{ height: height ? height : 'auto', ...style }}
+      ref={outerWrapRef}
+      id={id}
+      data-testid="carousel"
+    >
+      {itemCount > 0 ? (
+        <Swipe
+          className="g-swiper-list"
+          style={swipeStyle}
+          tolerance={20}
+          onSwipeLeft={() => {
+            vertical || setIndex(currentIndex + 1);
+          }}
+          onSwipeRight={() => {
+            vertical || setIndex(currentIndex - 1);
+          }}
+          onSwipeDown={() => {
+            vertical && setIndex(currentIndex - 1);
+          }}
+          onSwipeUp={() => {
+            vertical && setIndex(currentIndex + 1);
+          }}
+        >
+          {itemsClone[itemCount - 1]}
+          {images.map((x, i) => {
+            return (
+              <SwiperItem
+                setHeight={setHeight}
+                currentIndex={currentIndex}
+                index={i}
+                key={i}
+                imagesValue={x}
+              >
+                <Image
+                  mode={'scaleToFill'}
+                  lazyLoad={false}
+                  maskClosable={false}
+                  imgPreview={false}
+                  fit={x.fit}
+                  src={x.image}
+                  alt={'图片'}
+                  style={{
+                    height: x.height ? x.height : 'auto',
+                    width: x.width ? x.width : '100%',
+                  }}
+                />
+              </SwiperItem>
+            );
+          })}
+          {itemsClone[0]}
+        </Swipe>
+      ) : null}
+
+      {indicatorDots ? (
+        <div className="g-swiper__pagination">
+          {images.map((x, i) => {
+            return (
+              <a
+                key={i}
+                href="#"
+                className="g-swiper__pagination-bulletm"
+                data-testid="g-swiper__pagination-bulletm"
+                style={{
+                  backgroundColor:
+                    currentIndex === i ? indicatorActiveColor : indicatorColor,
+                }}
+                onClick={(e) => {
+                  setIndex(i);
+                  e.preventDefault();
+                }}
+                data-index={i}
+              ></a>
+            );
+          })}
+        </div>
+      ) : (
+        false
+      )}
+      <a
+        href="#"
+        className="g-swiper__turn-pre"
+        onClick={(ev) => {
+          ev.preventDefault();
+          setIndex(currentIndex - 1);
+        }}
+      >
+        上一页
+      </a>
+      <a
+        href="#"
+        className="g-swiper__turn-next"
+        onClick={(ev) => {
+          ev.preventDefault();
+          setIndex(currentIndex + 1);
+        }}
+      >
+        下一页
+      </a>
+    </div>
+  );
+}
+
+const SwiperItem: React.FC<{
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
+  currentIndex: number;
+  index: number;
+  children?: React.ReactNode;
+  imagesValue: imagesItem;
+}> = ({ setHeight, children, currentIndex, index, imagesValue }) => {
+  const firstChildRef = useRef<HTMLDivElement>(null);
+  const syncHeight = useDebouncedCallback(
+    (e) => {
+      // console.log('e.contentRect.height', e.contentRect.height);
+      setHeight(e.contentRect.height);
+    },
+    [setHeight],
+    500,
+    2000
+  ); // 必须debounce延迟，让resize完成后再设置高度
+
+  // 因为有loading 所以得用resizeobserver
+  // @ts-ignore
+  useResizeObserver(firstChildRef, (e) => {
+    if (currentIndex === index) {
+      syncHeight(e);
+    }
+  });
+
+  const getLinkUrl = (url, params) => {
+    // URL 构造函数不支持 '//xxx.com' 的格式
+    if (url && url.indexOf('//') === 0) {
+      url = location.protocol + url;
+    }
+    // "proto:" 或 "//" 起头的是绝对路径
+    let isAbosolutePath = /^(?:[a-z]+:)/i.test(url);
+    let base,
+      path,
+      href,
+      paramObj = {},
+      urlObj;
+    if (!isAbosolutePath) {
+      // 相对地址使用站位域名，不实际使用
+      base =
+        location.origin && location.origin !== 'null'
+          ? location.origin
+          : 'https://we.da';
+    }
+
+    try {
+      urlObj = new URL(url, base);
+      params.forEach((x) => {
+        urlObj.searchParams.append(x.key, x.value);
+      });
+
+      href = urlObj.href;
+      path = urlObj.pathname;
+
+      for (const [key, value] of urlObj.searchParams) {
+        paramObj[key] = value;
+      }
+
+      // 相对地址去掉站位域名
+      if (!isAbosolutePath) {
+        href = urlObj.pathname + urlObj.search + urlObj.hash;
+        href = href.replace(/^\//, '');
+      }
+    } catch (e) {
+      // 非法 url
+      isAbosolutePath = true;
+      href = url;
+      path = '';
+      paramObj = params.reduce((p, x) => {
+        p[x.key] = x.value;
+        return p;
+      }, {});
+    }
+    let res = {
+      path,
+      isAbosolutePath,
+      href,
+    };
+    return res;
+  };
+
+  const handleImage = (e) => {
+    const { insideUrl, outerUrl, tapMode, params, newPage } = imagesValue;
+    if (tapMode === 'tap') {
+      return;
+    } else if (tapMode === 'inside' && !insideUrl) {
+      return;
+    } else if (tapMode === 'outer' && !outerUrl) {
+      return;
+    }
+    let selectedUrl = tapMode === 'inside' ? insideUrl : outerUrl;
+    let { path, isAbosolutePath, href } = getLinkUrl(selectedUrl, []);
+    let paramObj =
+      params &&
+      params.length > 0 &&
+      params.reduce((p, x) => {
+        p[x.key] = x.value;
+        return p;
+      }, {});
+    if (tapMode === 'inside') {
+      if (!isAbosolutePath) {
+        e.preventDefault();
+        app.navigateTo({
+          pageId: path,
+          packageName: '',
+          mode: 'weDa',
+          params: paramObj,
+        });
+      }
+    } else if (tapMode === 'outer') {
+      newPage ? window.open(href) : (location.href = href);
+    }
+  };
+  return (
+    <div
+      className={classNames('g-swiper-item', {
+        current: index === currentIndex,
+      })}
+      data-index={index}
+      onClick={handleImage}
+      data-testid="swiper-item"
+    >
+      <div ref={firstChildRef}>{children}</div>
+    </div>
+  );
+};

package/src/web/components/chart/statisticsCard/index.css

@@ -0,0 +1,62 @@
+/* pc style */
+.weda-statistics-card {
+  background: #ffffff;
+  border: 1px solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+.weda-statistics-card.weda-statistics-card-pc {
+  width: 276px;
+  min-height: 128px;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 28px 24px;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 8px;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 32px;
+  line-height: 44px;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+/* h5 style */
+.weda-statistics-card.weda-statistics-card-mobile {
+  max-width: 100%;
+  min-height: 140px;
+}
+.weda-statistics-card-mobile .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 40px 24px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__detail {
+  margin-top: 4px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__count {
+  font-size: 28px;
+  line-height: 34px;
+}