@cloudbase/weda-ui 0.2.14 → 0.2.17

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/bar/index.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { CommonPropsType } from '../../../types';
+import { DataSource, Xfield, Yfield } from '../common/core/type';
+import EchartBar from '../common/core/eChartBar';
+import { useWedaChart } from '../common/useChart';
+import classNames from '../../../utils/classnames';
+interface PropsType extends CommonPropsType {
+  directionType?: string;
+  isPile?: boolean;
+  isTitle?: boolean;
+  title?: string;
+  titleLocation?: string;
+  dataSource?: DataSource;
+  filterData?: string;
+  setColor?: Array<string>;
+  xField?: Xfield;
+  xStatistics?: string;
+  groupKey?: Xfield;
+  groupKeyTimeSpan?: string;
+  xIsCountEmpty?: boolean;
+  yField?: Yfield;
+  isLegend?: boolean;
+  legend?: string;
+  legend2?: string;
+  isXaxisName?: boolean;
+  xAxisName?: string;
+  isXaxisAxisLabelShow?: boolean;
+  isXaxisAxisTickShow?: boolean;
+  isXaxisAxisLabelRotate?: boolean;
+  isYAxisSplitlineLinestyleWidth?: boolean;
+  yAxisSplitlineLinestyleType?: string;
+  yAxisMax?: number;
+  yAxisMin?: number;
+  isYAxisName?: boolean;
+  yAxisName?: string;
+  isSeriesShowSymbol?: boolean;
+  isYAxisShow?: boolean;
+  isUnit?: boolean;
+  unit?: string;
+  decimalDigits?: number;
+  suffix?: string;
+}
+export default function Bar({
+  directionType,
+  isPile,
+  id,
+  style,
+  className,
+  isTitle,
+  title,
+  titleLocation,
+  dataSource,
+  setColor,
+  filterData,
+  xField,
+  xStatistics,
+  groupKey,
+  groupKeyTimeSpan,
+  xIsCountEmpty,
+  yField,
+  isLegend,
+  legend,
+  legend2,
+  isXaxisName,
+  xAxisName,
+  isXaxisAxisLabelShow,
+  isXaxisAxisTickShow,
+  isXaxisAxisLabelRotate,
+  isYAxisSplitlineLinestyleWidth,
+  yAxisSplitlineLinestyleType,
+  yAxisMax,
+  yAxisMin,
+  isYAxisName,
+  yAxisName,
+  isSeriesShowSymbol,
+  isYAxisShow,
+  isUnit,
+  unit,
+  decimalDigits,
+  suffix,
+}: PropsType) {
+  const domRef = useRef<HTMLDivElement>();
+  useWedaChart(domRef, EchartBar, {
+    directionType,
+    isPile,
+    setColor,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    xField,
+    xStatistics,
+    groupKey,
+    groupKeyTimeSpan,
+    xIsCountEmpty,
+    yField,
+    isLegend,
+    legend,
+    legend2,
+    isXaxisName,
+    xAxisName,
+    isXaxisAxisLabelShow,
+    isXaxisAxisTickShow,
+    isXaxisAxisLabelRotate,
+    isYAxisSplitlineLinestyleWidth,
+    yAxisSplitlineLinestyleType,
+    yAxisMax,
+    yAxisMin,
+    isYAxisName,
+    yAxisName,
+    isSeriesShowSymbol,
+    isYAxisShow,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  });
+  const inlineStyle = {
+    height: '380px',
+    width: '100%',
+    backgroundColor: '#ffffff',
+    ...style,
+  };
+  return (
+    <div
+      id={id}
+      data-testid="bar"
+      ref={domRef}
+      style={inlineStyle}
+      className={classNames({
+        'weda-ui-chart-bar': true,
+        'echart-wrapper-canvas': true,
+        'echart-dark-body': true,
+        [className]: className,
+      })}
+    />
+  );
+}

package/src/web/components/chart/common/config/bar.js

@@ -0,0 +1,49 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const barH5 = {
+    xAxis: {
+      name: 'X轴名',
+      nameTextStyle: { align: 'center' },
+      axisLabel: {
+        show: true, // 刻度标签显示
+        rotate: 0, // 字体倾斜
+      },
+      axisTick: {
+        show: true, // 刻度显示
+      },
+      inverse:false,
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+      show: true, // y轴刻度线
+      name: 'Y轴名',
+      splitLine: {
+        lineStyle: {
+          width: 1, // 网格线宽度，为0则不显示
+          type: 'dashed', //solid,dashed,dotted
+        },
+      },
+      axisLabel: { padding: [0, -10, 0, 0] },
+      min: null,
+      max: null,
+    },
+    series: [
+      {
+        name: 'demo',
+        data: [0, 932, 901, 934, 1290, 1330, 1320],
+        type: 'bar',
+        itemStyle: {
+          color: 'green',
+        },
+        showSymbol: true, //是否显示线条上数据标签
+        label: {
+          show: true, // 显示线条上的数据
+        },
+      },
+    ],
+  };
+  return barH5;
+};
+export default getConfig;

package/src/web/components/chart/common/config/global.js

@@ -0,0 +1,16 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const globalH5 = {
+    title: {
+      text: 'demo实例',
+      show: true,
+      left: '50%',
+    },
+    legend: {
+      top: '88%',
+    },
+    tooltip: {},
+  };
+  return globalH5;
+};
+export default getConfig;

package/src/web/components/chart/common/config/line.js

@@ -0,0 +1,50 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const lineH5 = {
+    xAxis: {
+      name: 'X轴名',
+      nameTextStyle: { align: 'center' },
+      axisLabel: {
+        show: true, // 刻度标签显示
+        rotate: 0, // 字体倾斜
+      },
+      axisTick: {
+        show: true, // 刻度显示
+      },
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+      show: true, // y轴刻度线
+      name: 'Y轴名',
+      splitLine: {
+        lineStyle: {
+          width: 1, // 网格线宽度，为0则不显示
+          type: 'dashed', //solid,dashed,dotted
+        },
+      },
+      axisLabel: {
+        padding: [0, -10, 0, 0],
+      },
+      min: null,
+      max: null,
+    },
+    series: [
+      {
+        name: 'demo',
+        connectNulls: true,
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        showSymbol: true, //是否显示线条上数据标签
+        label: {
+          show: true, // 显示线条上的数据
+        },
+      },
+    ],
+  };
+  return lineH5;
+};
+
+module.exports = getConfig;

package/src/web/components/chart/common/config/pie.js

@@ -0,0 +1,37 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const pieH5 = {
+    series: [
+      {
+        // name: 'demo',
+        data: [
+          { value: 820, name: '实例数据1', tooltip: {}, itemStyle: {} },
+          { value: 932, name: '实例数据2', tooltip: {}, itemStyle: {} },
+          { value: 901, name: '实例数据3', tooltip: {}, itemStyle: {} },
+          { value: 934, name: '实例数据4', tooltip: {}, itemStyle: {} },
+          { value: 1290, name: '实例数据5', tooltip: {}, itemStyle: {} },
+        ],
+        label: {
+          show: true,
+          position: 'inner',
+          normal: {
+            formatter: null,
+            position: 'inner',
+          },
+        },
+        type: 'pie',
+        radius: '70%',
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+
+  return pieH5;
+};
+export default getConfig;