@cloudbase/weda-ui 2.0.28 → 3.1.2

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

@@ -1,63 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import classNames from '../../utils/classnames';
-import { getTempFileURL } from '../../utils/tcb';
-import './index.css';
-import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
-import type { CommonPropsType } from '../../types';
-import destr from 'destr';
-
-export interface PropsType extends CommonPropsType {
-  value: string;
-}
-
-export default function RichTextView({
-  value = '',
-  className,
-  style,
-  id,
-}: PropsType) {
-  let parseValue = destr(value);
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-RichTextView': true,
-    [className]: className,
-  });
-  const [displayValue, setDisplayValue] = useState('');
-  const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
-  const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
-
-  let tempValue = parseValue
-    .toString()
-    .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
-
-  const getSrc = async (img) => {
-    const url = img.replace(regex, '$1');
-    if (img.includes('cloud://')) {
-      const newURL = await getTempFileURL(url);
-      if (newURL) {
-        tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
-        setDisplayValue(tempValue);
-      }
-    }
-  };
-
-  useEffect(() => {
-    setDisplayValue(tempValue);
-    try {
-      const imgs = parseValue.match(regex);
-      if (imgs && imgs.length > 0) {
-        imgs.forEach((img) => {
-          getSrc(img);
-        });
-      }
-    } catch (e) {}
-  }, [value]);
-
-  return (
-    displayValue && (
-      <div className={cls} style={style} id={id}>
-        <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
-      </div>
-    )
-  );
-}

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

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import type { CommonPropsType } from '../../types';
-import classNames from '../../utils/classnames';
-
-export interface PropsType extends CommonPropsType {
-  scrollX?: boolean;
-  scrollY?: boolean;
-  scrollTop?: number;
-  scrollLeft?: number;
-  scrollIntoView?: string;
-  upperThreshold?: number;
-  lowerThreshold?: number;
-  domRef?: any;
-}
-
-export default function ScrollView({
-  id,
-  scrollX = false,
-  scrollY = true,
-  style,
-  scrollTop,
-  scrollLeft,
-  scrollIntoView,
-  className,
-  children,
-  upperThreshold = 50,
-  lowerThreshold = 50,
-  domRef,
-  events,
-}) {
-  const [toUpper, setToUpper] = React.useState(false);
-  const [toLower, setToLower] = React.useState(false);
-  const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
-  const [scrollTopPos, setScrollTopPos] = React.useState(0);
-
-  const scrollViewRef = domRef || React.useRef<HTMLElement>(null);
-
-  const handleOnScroll = function (e) {
-    const detail = {
-      scrollLeft: e.target.scrollLeft,
-      scrollTop: e.target.scrollTop,
-      scrollHeight: e.target.scrollHeight,
-      scrollWidth: e.target.scrollWidth,
-    };
-    const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
-    const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
-    let delta;
-    // 横向滚动
-    if (Math.abs(deltaX) > Math.abs(deltaY)) {
-      delta = deltaX;
-      setScrollLeftPos(e.target.scrollLeft);
-      if (scrollX && e.target.scrollLeft <= upperThreshold) {
-        delta < 0 && setToUpper(true);
-      } else {
-        setToUpper(false);
-      }
-
-      if (
-        scrollX &&
-        e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
-          e.target.scrollWidth
-      ) {
-        delta > 0 && setToLower(true);
-      } else {
-        setToLower(false);
-      }
-    } else {
-      delta = deltaY;
-      setScrollTopPos(e.target.scrollTop);
-
-      if (scrollY && e.target.scrollTop <= upperThreshold) {
-        delta < 0 && setToUpper(true);
-      } else {
-        setToUpper(false);
-      }
-
-      if (
-        scrollY &&
-        e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
-          e.target.scrollHeight
-      ) {
-        delta > 0 && setToLower(true);
-      } else {
-        setToLower(false);
-      }
-    }
-
-    // console.log("delta", deltaY, deltaX
-
-    events.scroll(detail, { originEvent: e });
-  };
-
-  React.useEffect(() => {
-    // @ts-ignore
-    scrollViewRef.current.scrollTop = scrollTop;
-  }, [scrollTop]);
-  React.useEffect(() => {
-    // @ts-ignore
-    scrollViewRef.current.scrollLeft = scrollLeft;
-  }, [scrollLeft]);
-
-  React.useEffect(() => {
-    toUpper && events.scrolltoupper();
-  }, [toUpper]);
-
-  React.useEffect(() => {
-    toLower && events.scrolltolower();
-  }, [toLower]);
-
-  React.useEffect(() => {
-    if (scrollIntoView) {
-      const children = scrollViewRef.current.children;
-      const item: any = Array.from(children).find(
-        (item: any) => item && item.id === scrollIntoView
-      );
-      scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
-      scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
-      // console.log('children', children, item)
-    }
-  }, [scrollIntoView]);
-
-  const webStyles = {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    // whiteSpace: scroll === 'y' ? 'normal' : 'nowrap',
-    overflowX: `${scrollX ? 'auto' : 'hidden'}`,
-    overflowY: `${scrollY ? 'auto' : 'hidden'}`,
-    ...style,
-  };
-  const cls = classNames({
-    'weda-ui': true,
-    'g-scroll-view': true,
-    [className]: className,
-  });
-
-  return (
-    <div
-      id={id}
-      style={webStyles}
-      ref={scrollViewRef}
-      className={cls}
-      onScrollCapture={handleOnScroll}
-    >
-      {children}
-    </div>
-  );
-}

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import Button from '../../components/button';
-import { CommonPropsType } from '../../types';
-
-const Share = (props: PropsType) => <Button {...props} />;
-
-export interface PropsType extends CommonPropsType {
-  /**
-   * 按钮标题
-   */
-  text?: string;
-  /**
-   * 按钮风格
-   */
-  type?: 'primary' | 'warn' | 'wechat' | 'default';
-  /**
-   * 按钮大小
-   */
-  size?: 'default' | 'mini' | 'large';
-  /**
-   * 分享标题
-   */
-  title?: string;
-  /**
-   * 选择页面
-   */
-  path?: string;
-  /**
-   * 携带参数
-   */
-  withParams?: boolean;
-  /**
-   * 参数
-   */
-  params?: any;
-}
-
-export default Share;

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-export interface PropsType {
-  className?: string;
-  name: string;
-  compositeParent: any;
-}
-export default function Slot({ compositeParent, name, className }: PropsType) {
-  if (!compositeParent) {
-    console.warn('Slot组件只能用于实现复合组件');
-    // 兼容编辑器点击，可选中 Slot 组件
-    return (
-      <div className={'weda-ui' + className ? ` ${className}` : ''}>
-        {'Slot - ' + name}
-      </div>
-    );
-  }
-  return compositeParent.props.data[name] || null;
-}

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

@@ -1,291 +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';
-
-export interface PropsType extends CommonPropsType {
-  /**
-   * 是否启用指示点
-   */
-  indicatorDots: boolean;
-  /**
-   * 是否自动切换
-   */
-  autoplay: boolean;
-  /**
-   * 当前索引值
-   */
-  current: number;
-  interval: number;
-  duration: number;
-  circular: boolean;
-  vertical: boolean;
-  indicatorColor: string;
-  indicatorActiveColor: string;
-}
-
-export default function Swiper({
-  children,
-  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,
-}: PropsType) {
-  const itemCount = React.Children.count(children);
-  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 = React.Children.map(children, (x, i) => {
-    return (
-      <div className="g-swiper-item" data-index={i}>
-        {x}
-      </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', className, {
-        vertical: vertical,
-      })}
-      style={{ height: height ? height : 'auto', ...style }}
-      ref={outerWrapRef}
-      id={id}
-    >
-      {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]}
-          {React.Children.map(children, (x, i) => {
-            return (
-              <SwiperItem
-                height={height}
-                setHeight={setHeight}
-                currentIndex={currentIndex}
-                index={i}
-              >
-                {x}
-              </SwiperItem>
-            );
-          })}
-          {itemsClone[0]}
-        </Swipe>
-      ) : null}
-
-      {indicatorDots ? (
-        <div className="g-swiper__pagination">
-          {React.Children.map(children, (x, i) => {
-            return (
-              <a
-                href="#"
-                className="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;
-  height: number;
-  children?: React.ReactNode;
-}> = ({ height, setHeight, children, currentIndex, index }) => {
-  const firstChildRef = useRef<HTMLDivElement>(null);
-  const syncHeight = useDebouncedCallback(
-    (e) => {
-      setHeight(e.contentRect.height);
-    },
-    [setHeight],
-    500,
-    2000
-  ); // 必须debounce延迟，让resize完成后再设置高度
-
-  // 因为有loading 所以得用resizeobserver
-  // @ts-ignore
-  useResizeObserver(firstChildRef, (e) => {
-    if (currentIndex === index) {
-      syncHeight(e);
-    }
-  });
-  const wrapRef = useRef<HTMLDivElement>();
-  return (
-    <div
-      className={classNames('g-swiper-item', {
-        current: index === currentIndex,
-      })}
-      data-index={index}
-    >
-      <div
-        ref={firstChildRef}
-        style={{
-          height: height > 0 ? '100%' : 'auto',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-// import loadable from '@loadable/component';
-import type { CommonPropsType } from '../../types';
-import { usePlatform } from '../../utils/platform';
-// import { fallback } from '../../utils/loading-fallback';
-import TabsH5 from './tabs.h5';
-import TabsPc from './tabs.pc';
-
-// const TabsH5 = loadable(() => import('./tabs.h5'), { fallback });
-// const TabsPc = loadable(() => import('./tabs.pc'), { fallback });
-
-export interface PropsType extends CommonPropsType {
-  tabs: {
-    title: string;
-    value: string;
-
-    // @deprecated
-    name?: string;
-  }[];
-  selectedIndex: number | string;
-  isMultipleSlot: boolean;
-  [key: string]: React.ReactNode;
-  // [panel: `panel${number}`]: React.ReactNode; // require typescript@4.4
-}
-
-export default function Tabs(props: PropsType) {
-  const platform = usePlatform();
-  if (props?.showType === 'pc') {
-    return <TabsPc {...props} />;
-  }
-  if (props?.showType === 'h5') {
-    return <TabsH5 {...props} />;
-  }
-  return platform === 'h5' ? <TabsH5 {...props} /> : <TabsPc {...props} />;
-}

package/src/web/components/tabs/tabs.h5.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-
-import './index.css';
-import classNames from '../../utils/classnames';
-import { useSyncValue } from '../../utils/useSyncValue';
-import { PropsType } from './index';
-import {
-  useCustomCompareEffect,
-  usePrevious,
-  useSyncedRef,
-} from '@react-hookz/web';
-import isObjectEqual from '../../utils/isObjectEqual';
-
-export default function TabsH5({
-  tabs = [],
-  selectedIndex,
-  events,
-  className,
-  style,
-  isMultipleSlot = true,
-  ...restProps
-}: PropsType) {
-  const [currentIndex, setCurrentIndex] = useSyncValue(
-    typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex
-  );
-  const stickyStyle = useMemo(() => {
-    const length = tabs.length;
-    return {
-      width: `${(1 / length) * 100}%`,
-      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`,
-    };
-  }, [tabs, currentIndex]);
-
-  const eventRef = useSyncedRef(events);
-  useCustomCompareEffect(
-    () => {
-      eventRef.current.change({
-        id: currentIndex,
-        label: tabs[currentIndex]?.title,
-        value: tabs[currentIndex]?.value,
-      });
-    },
-    [currentIndex, tabs],
-    isObjectEqual
-  );
-  return (
-    <div
-      data-testid="tabs"
-      className={classNames('weda-tabs weda-ui', {
-        [className]: className,
-      })}
-      style={style}
-    >
-      <div className="weda-tabs__nav">
-        {tabs?.map(({ name, title }, index) => (
-          <div
-            className={classNames('weda-tabs__nav-cell', {
-              active: currentIndex === index,
-              scroll: currentIndex > 5,
-            })}
-            key={name || index}
-            onClick={() => {
-              setCurrentIndex(index);
-            }}
-          >
-            {title}
-          </div>
-        ))}
-
-        <div className="weda-tabs__nav-sticky" style={stickyStyle}></div>
-      </div>
-
-      <div
-        className={classNames({
-          'weda-tabs__panel': true,
-        })}
-      >
-        {isMultipleSlot
-          ? restProps[`panel${currentIndex + 1}`]
-          : restProps['panel1']}
-      </div>
-    </div>
-  );
-}