@cloudbase/weda-ui 2.0.28 → 3.1.2

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

@@ -1,417 +0,0 @@
-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 type { 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,
-  circular,
-  vertical,
-  indicatorDots,
-  indicatorColor,
-  indicatorActiveColor,
-  duration,
-  interval,
-  current,
-  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

@@ -1,140 +0,0 @@
-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(opts: PropsType) {
-  const {
-    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,
-  } = opts;
-  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

@@ -1,49 +0,0 @@
-/** 根据当前环境获取 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

@@ -1,16 +0,0 @@
-/** 根据当前环境获取 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

@@ -1,50 +0,0 @@
-/** 根据当前环境获取 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;
-};
-
-export default getConfig;

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

@@ -1,37 +0,0 @@
-/** 根据当前环境获取 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;