@cloudbase/weda-ui 2.0.26 → 3.1.0

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.css

@@ -1,106 +0,0 @@
-.g-swiper {
-  overflow: hidden;
-  margin: auto;
-  width: 100%;
-  transition: height 0.15s ease-in;
-  position: relative;
-}
-
-.g-swiper-list {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.g-swiper-item {
-  flex-direction: column;
-  flex-flow: column;
-  min-width: 100%;
-  max-height: 100%;
-  margin: 0;
-  text-align: center;
-}
-
-.g-swiper.vertical {
-  display: flex;
-}
-
-.g-swiper.vertical .g-swiper-list {
-  display: block;
-}
-
-.g-swiper.vertical .g-swiper-item {
-  height: 100%;
-}
-
-.weda-ui.g-swiper .g-swiper-item > div {
-  height: auto;
-}
-
-.g-swiper-item > div > * {
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: cover;
-}
-
-.g-swiper__pagination {
-  position: absolute;
-  bottom: 0;
-  margin: 10px 0;
-  padding: 0;
-  text-align: center;
-  width: 100%;
-  z-index: 1;
-}
-
-.g-swiper__pagination-bulletm {
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 1px 1px 2px rgb(0 0 0 / 70%);
-  width: 8px;
-  height: 8px;
-  display: inline-block;
-  margin: 0 8px;
-}
-
-@media (max-width: 1024px) {
-  .g-swiper .g-swiper__turn-pre,
-  .g-swiper .g-swiper__turn-next {
-    display: none;
-  }
-}
-
-.g-swiper__turn-pre,
-.g-swiper__turn-next {
-  position: absolute;
-  box-sizing: content-box;
-  display: block;
-  top: 50%;
-  transform: translate3d(0, -50%, 0);
-  font-size: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-  padding: 20px 10px;
-  width: 23px;
-  height: 41px;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.g-swiper__turn-pre {
-  left: 20px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAApCAYAAADeWrJ9AAAABGdBTUEAALGPC/xhBQAAAbpJREFUSA2t178rxHEcx/E7p/MrP9KRRbFcMZHBIBkMSjYyKEpXJIMkww3KcIOkxKAsBmWQDEQSgyRJUkKZFANJRBLy4+v51udT/oDXp569660e32933X1PKCQ8QRCEaZa6hWwo5OAZpp05GQ5mdzxtKmeBIkp88o8NgkU1POHgJTU85uBlZlT5UqQcvKKGRx28roZHHLzBzFC+FEkHbzKzlPCwg7eZ2Up40ME7angA8Id2KUd5x/0O3mPmKuFeB+8z85VwwsGHargb8JuOqEB5x12AX3RMhUq4w8EnzJgSbnfwKbNICbcBftI5FctgoDRqpXSyR5PuiwjMHqxRWiU7l1Rme9kBtAv00AddUVyGewi0md7ohir8XjZBG+mV7qhKBnsItJ6e6YFq/F42QWvpkZ6oTgZ7CLSa7umFGvxeNkEr6ZbsfWiSwR4CjdM1vVOL38smaDnZh8w+C20y2EOgpXRB9rXc4feyCVpCZ+4CCRnsIeAY2QPFfhX0+b1sghbQgbvAkAz2EHAe2e8ZO0m/l03QbNoynZOSwR4CzaQ10znjFPZ/k0xAeybYfxh2piTofwQ0QvPUaftfzME87zp8MlQAAAAASUVORK5CYII=);
-}
-
-.g-swiper__turn-next {
-  right: 20px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAApCAYAAADeWrJ9AAAABGdBTUEAALGPC/xhBQAAAZpJREFUSA21l7ErhHEYgO9cznUR6ZTBcAvFRMpCGQxKxstwJV1XlJQkyw0y3CJJLDJYZJEMSCKDJEmSQpkUA0lEEko+z3u9/oP3fevp1y3P87uv7/t+d6EQEwRBBhYgLJ9NB+kiyMyDbQBhBJZBZg5cAisFfRDMmF4akSGWb7CqgWmPQDHyNQ1MegSiyNc1kPcKbGlgwiuwrYFxj0AM+Y4Gch6BOPI9DYx5BfY1MOIVONDAsEegFPkh/MKQR6Ac8ZEGBrwCJxrIegVONZDxCFQiP4Mf6PMIJBCfayDtEahCfqGBHq/AlQZSRcaFEnwRJWXmZrdJuAGZDYiayBHVwi18Qz+YieuR3cMndJnsViTIGuERPqDDUtyM8BneoM1S3IrwFV6gxVLcjvAdnqDJUtyJUK7vAzRYirsRfsEd1FmKUwjlHpaHJGkpTiOU1+k11FiKsyq+ZK22FA8ilENYDoKEpXhUxcesFZbiHEIZ+X1SZinOF7RBsMsaNxEjCsOUijdZYyZikSCbVbH8o7B5F//vDmEvLIEcUWbzB99VPOowvSXGAAAAAElFTkSuQmCC);
-}
-
-.g-swiper__turn-pre:hover,
-.g-swiper__turn-next:hover {
-  background-color: rgba(0, 0, 0, 0.5);
-}

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.css

@@ -1,64 +0,0 @@
-.weda-tabs {
-  width: 100%;
-}
-.weda-tabs__panel {
-  min-height: 50px;
-}
-.weda-tabs__nav {
-  width: 100%;
-  height: 45px;
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  position: relative;
-  white-space: nowrap;
-  border-bottom: 1px solid #eee;
-  overflow-x: auto;
-  scrollbar-width: none;
-  /* firefox */
-  -ms-overflow-style: none;
-  /* IE 10+ */
-}
-.weda-tabs__nav::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-.weda-tabs__nav-cell {
-  flex-basis: 0;
-  flex-grow: 1;
-  height: 100%;
-  font-size: 1em;
-  color: #000;
-  box-sizing: border-box;
-  padding: 0 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20%;
-}
-.weda-tabs__nav-cell.active {
-  color: #0052d9;
-}
-.weda-tabs__nav-cell.scroll {
-  flex-basis: auto;
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: 20%;
-}
-.weda-tabs__nav-sticky {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  transition: transform 0.3s ease;
-  padding: 0 16px;
-  box-sizing: border-box;
-  min-width: 20%;
-}
-.weda-tabs__nav-sticky::after {
-  display: block;
-  content: '';
-  width: 100%;
-  border-top: 2px solid #0052d9;
-}

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} />;
-}