@cloudbase/weda-ui 2.0.28 → 3.1.2

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

@@ -1,310 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import './index.css';
-import { CommonPropsType } from '../../types';
-import classNames from '../../utils/classnames';
-import { Row, Col, ConfigProvider, Button, Icon, Text } from 'tea-component';
-import { usePlatform } from '../../utils/platform';
-import { IconFont } from 'tdesign-icons-react';
-
-const CLASS_PREFIX = 'weda-graphic-card';
-
-export interface IGraphicCardPropsType extends CommonPropsType {
-  /**
-   * 导航配置
-   */
-  navOption?: Array<any>;
-  titleVisible: boolean;
-  titleColor: string;
-  titleFontWeight: string;
-  titleFontSize: number;
-  titleLineHeight: string;
-  titleMaxLines: number;
-  desColor: string;
-  desFontWeight: string;
-  desVisible: boolean;
-  desFontSize: number;
-  desLineHeight: string;
-  desMaxLines: number;
-  buttonVisible: boolean;
-  buttonText: string;
-  ColMobile: number;
-  ColPC: number;
-  percentageVisible: boolean;
-  iconWidthSize: string;
-  iconHeightSize: string;
-  textAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
-  imageStyle: any;
-}
-
-export default function GraphicCard({
-  navOption,
-  ColMobile,
-  ColPC,
-  percentageVisible,
-  iconWidthSize,
-  iconHeightSize,
-  titleVisible,
-  desVisible,
-  buttonVisible,
-  textAlign,
-  className,
-  titleColor,
-  titleFontWeight,
-  titleFontSize,
-  titleLineHeight,
-  titleMaxLines,
-  desColor,
-  desFontWeight,
-  desFontSize,
-  desLineHeight,
-  desMaxLines,
-  buttonText,
-  style,
-}: IGraphicCardPropsType) {
-  const platform = usePlatform();
-  const isH5: boolean = platform === 'h5';
-  // 一个栅格的宽度
-  const [SingleGrid, setSingleGrid] = useState({ width: 10 });
-  const [colCount, setColCount] = React.useState(2);
-  const cls = classNames({
-    [CLASS_PREFIX]: true,
-    [className]: className,
-    [`${CLASS_PREFIX}-mobile`]: isH5,
-  });
-
-  const cardList = React.useMemo(() => {
-    let list = [];
-    const col = isH5 ? ColMobile : ColPC;
-    setColCount(col);
-    list.length = Math.floor(navOption.length / colCount);
-    list.forEach((item, index) => {
-      list[index] = [];
-    });
-    //debugger;
-    navOption.forEach((item, index) => {
-      const _index = Math.floor(index / colCount);
-      if (!list[_index] || list[_index].length <= 0) {
-        // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
-        list[_index] = Array.apply(null, Array(colCount));
-      }
-      const paramObj = {};
-      if (item?.params) {
-        for (let info of item.params) {
-          paramObj[info.key] = info.value;
-        }
-      }
-      item.paramObj = paramObj;
-      list[_index][index - _index * colCount] = item;
-      list[_index][index - _index * colCount] = item;
-    });
-    return list;
-  }, [colCount, navOption, isH5]);
-  const elementStyle = document.createElement('body').style;
-  let vendor = (() => {
-    let transformNames = {
-      webkit: 'webkitTransform',
-      Moz: 'MozTransform',
-      O: 'OTransform',
-      ms: 'msTransform',
-      standard: 'transform',
-    };
-
-    for (let key in transformNames) {
-      if (elementStyle[transformNames[key]] !== undefined) {
-        return key;
-      }
-    }
-
-    return false;
-  })();
-  function prefixStyle(style) {
-    if (vendor === false) {
-      return false;
-    }
-
-    if (vendor === 'standard') {
-      return style;
-    }
-
-    return '-' + vendor + style.charAt(0).toUpperCase() + style.substr(1);
-  }
-  const boxStyle = prefixStyle('-box');
-  //标题样式
-  const titleStyle = {
-    display: `${boxStyle}`,
-    WebkitLineClamp: `${titleMaxLines ? titleMaxLines : 'inherit'}`,
-    overflow: 'hidden',
-    color: `${titleColor}`,
-    fontWeight: `${titleFontWeight}`,
-    fontSize: `${titleFontSize}` + 'px',
-    textAlign: `${textAlign}`,
-    lineHeight: `${titleLineHeight == 'auto' ? 'normal' : titleLineHeight}`,
-  } as React.CSSProperties;
-  const desStyle = {
-    display: `${boxStyle}`,
-    WebkitLineClamp: `${desMaxLines ? desMaxLines : 'inherit'}`,
-    overflow: 'hidden',
-    color: `${desColor}`,
-    fontWeight: `${desFontWeight}`,
-    fontSize: `${desFontSize}` + 'px',
-    textAlign: `${textAlign}`,
-    lineHeight: `${desLineHeight == 'auto' ? 'normal' : desLineHeight}`,
-  } as React.CSSProperties;
-
-  // 图片高度： 100% 基础下 H5: 1列 200px；2列 98px   PC： 3列 220px 4列 162px
-  const imageStyle = React.useMemo(() => {
-    let width = '100%';
-    let height = platform === 'h5' ? '200' : '220';
-    if (platform === 'h5' && ColMobile === 2) {
-      height = '98';
-    }
-
-    if (platform !== 'h5' && ColPC === 4) {
-      height = '162';
-    }
-    const numReg = /^\d+$/;
-    width = numReg.test(iconWidthSize) ? iconWidthSize + 'px' : iconWidthSize;
-    height = numReg.test(iconHeightSize)
-      ? iconHeightSize + 'px' //纯数字
-      : iconHeightSize.indexOf('%') == -1
-      ? iconHeightSize
-      : (Number(height) * parseInt(iconHeightSize)) / 100 + 'px';
-    return { width, height };
-  }, [iconWidthSize, iconHeightSize, ColMobile, ColPC, isH5]);
-
-  const detailStyle = React.useMemo(() => {
-    let docWidth = (document.documentElement.clientWidth - 24 * 2) / 12;
-    setSingleGrid({ width: docWidth });
-    if (textAlign == 'left') {
-      return {
-        paddingRight: `${docWidth * 0.5 - docWidth * 0.1}px`,
-        paddingLeft: 0,
-      };
-    } else if (textAlign == 'right') {
-      return {
-        paddingLeft: `${docWidth * 0.5 - docWidth * 0.1}px`,
-        paddingRight: 0,
-      };
-    } else {
-      return {
-        paddingLeft: `${(docWidth * 0.5 - docWidth * 0.1) / 2}px`,
-        paddingRight: `${(docWidth * 0.5 - docWidth * 0.1) / 2}px`,
-      };
-    }
-  }, [textAlign, isH5]);
-
-  const tapTo = (colInfo = navOption[0]) => {
-    switch (colInfo?.tapStatus) {
-      case 'tap':
-        return null;
-      case 'inside':
-        if (colInfo.insideUrl) {
-          app.navigateTo({
-            mode: 'weDa',
-            pageId: colInfo.insideUrl,
-            params:
-              colInfo?.withParams && colInfo?.params.length > 0
-                ? colInfo.paramObj
-                : null,
-          });
-        }
-        break;
-      //return renderCancel();
-      case 'outer':
-        if (colInfo.newPage) {
-          colInfo.outerUrl ? window.open(colInfo.outerUrl) : false;
-        } else {
-          colInfo.outerUrl ? (window.location.href = colInfo.outerUrl) : false;
-        }
-        break;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <div className={cls} data-testid="graphicCard" style={style}>
-        <div className={`${CLASS_PREFIX}__wrapper`}>
-          {cardList.map((row, rowIndex) => {
-            return (
-              <Row className={`${CLASS_PREFIX}__row`} key={rowIndex}>
-                <>
-                  {row &&
-                    row.map((col, colIndex) => {
-                      return (
-                        // 每列内容左右间距为0.1栅格列宽
-                        <Col
-                          style={{
-                            width: `${(1 / colCount) * 100}%`,
-                            padding: `0 ${SingleGrid.width * 0.1}px`,
-                            cursor:
-                              col?.tapStatus != 'tap' ? 'pointer' : 'auto',
-                          }}
-                          className={`${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${textAlign}`}
-                          key={colIndex}
-                        >
-                          <div
-                            className="wedatea2td-grid__box"
-                            data-testid={`${colIndex}_click`}
-                            onClick={() => tapTo(col)}
-                          >
-                            <div className={`${CLASS_PREFIX}__col-body`}>
-                              {col && (
-                                <div
-                                  className={`${CLASS_PREFIX}__icon`}
-                                  style={imageStyle}
-                                >
-                                  <img
-                                    src={col?.icon}
-                                    className={`${CLASS_PREFIX}__img`}
-                                  />
-                                </div>
-                              )}
-                              {/* 详情右侧间距为0.5栅格列宽 */}
-                              <div className={`${CLASS_PREFIX}__detail`}>
-                                {titleVisible && col?.title && (
-                                  <div
-                                    className={`${CLASS_PREFIX}__title`}
-                                    style={titleStyle}
-                                  >
-                                    {col?.title}
-                                  </div>
-                                )}
-                                {desVisible && col?.des && (
-                                  <div
-                                    className={`${CLASS_PREFIX}__desc`}
-                                    style={desStyle}
-                                  >
-                                    {col?.des}
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                            {buttonVisible && col && (
-                              <Button
-                                type="link"
-                                className={`${CLASS_PREFIX}__btn`}
-                              >
-                                <Text className={`${CLASS_PREFIX}__btn--text`}>
-                                  {buttonText}
-                                </Text>
-                                <IconFont
-                                  name="arrow-right"
-                                  className={`${CLASS_PREFIX}__btn-icon`}
-                                />
-                              </Button>
-                            )}
-                          </div>
-                        </Col>
-                      );
-                    })}
-                </>
-              </Row>
-            );
-          })}
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}

package/src/web/components/image/image.tsx

@@ -1,187 +0,0 @@
-import * as React from 'react';
-import { ConfigProvider, ImagePreview } from 'tea-component';
-import { usePlatform } from '../../utils/platform';
-import { useGesture } from '@use-gesture/react';
-import { PropsType } from './index';
-interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
-  objectFit: React.CSSProperties['objectFit'];
-  isError: boolean;
-  setIsError: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export function ImageInner({
-  objectFit,
-  style,
-  className,
-  alt,
-  src,
-  isError,
-  setIsError,
-  events,
-  lazyLoad,
-  maskClosable,
-  imgPreview,
-}: ImageInnerPropsType) {
-  const platform = usePlatform();
-  const [imgShow, setImgShow] = React.useState(false);
-  const onMaskClick = () => {
-    if (maskClosable) {
-      setImgShow(false);
-    }
-  };
-
-  const [showHeight, setShowHeight] = React.useState(0);
-  const realWidth = React.useRef(0);
-  const realHeight = React.useRef(0);
-  const [offsetHeight, setOffsetHeight] = React.useState(0);
-  const [translateX, setTranslateX] = React.useState(0);
-  const [translateY, setTranslateY] = React.useState(0);
-  const [previewScale, setPreviewScale] = React.useState(1);
-  React.useEffect(() => {
-    // 防止触发浏览器的放大缩小
-    const handler = (e) => e.preventDefault();
-    document.addEventListener('gesturestart', handler);
-    document.addEventListener('gesturechange', handler);
-    return () => {
-      document.removeEventListener('gesturestart', handler);
-      document.removeEventListener('gesturechange', handler);
-    };
-  }, []);
-
-  const bind = useGesture(
-    {
-      onClick: ({ event }) => {
-        // 防止冒泡出发关闭预览
-        event.stopPropagation();
-      },
-      onPinch: ({ offset }) => {
-        const [s] = offset;
-        setPreviewScale(s);
-      },
-      onDrag: ({ offset, event }) => {
-        event.stopPropagation();
-        const [x, y] = offset;
-        setTranslateX(x);
-        setTranslateY(y);
-      },
-    },
-    {
-      drag: {
-        delay: true,
-        preventDefault: true,
-      },
-      pinch: {
-        scaleBounds: { min: 0.6, max: 5 },
-        pointer: {
-          touch: true,
-        },
-      },
-    }
-  );
-
-  if (platform === 'h5' || !imgPreview || isError) {
-    return (
-      <>
-        <img
-          style={{
-            objectFit,
-            ...style,
-          }}
-          className={className}
-          alt={alt}
-          src={src}
-          onLoad={(e) => {
-            const img = e.target as HTMLImageElement;
-            const { naturalHeight, naturalWidth } = img;
-            realHeight.current = naturalHeight;
-            realWidth.current = naturalWidth;
-            setIsError(false);
-            events.load && events.load({}, { originEvent: e });
-          }}
-          onError={(e) => {
-            setIsError(true);
-            events.error && events.error({}, { originEvent: e });
-          }}
-          onClick={(e) => {
-            if (imgPreview && !isError) {
-              setTranslateX(0);
-              setTranslateY(0);
-              setPreviewScale(1);
-              const windowHeight = window.innerHeight;
-              const windowWidth = window.innerWidth;
-              let ratio = realWidth.current / realHeight.current;
-              if (Number.isNaN(ratio)) {
-                ratio = 1;
-              }
-              const height = windowWidth / ratio;
-              setOffsetHeight(windowHeight / 2 - height / 2);
-              setShowHeight(height);
-              setImgShow(true);
-            }
-            events.tap && events.tap({}, { originEvent: e });
-          }}
-          loading={lazyLoad ? 'lazy' : undefined}
-        />
-        {imgShow && (
-          <div className="weda-img-mask" onClick={onMaskClick}>
-            <div
-              onClick={() => setImgShow(false)}
-              className="weda-img-modal-close-btn"
-            >
-              <i className="weui-icon-clear" style={{ color: 'white' }}></i>
-            </div>
-            <div
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...bind()}
-              className="weda-img-preview"
-              style={{
-                touchAction: 'none',
-                backgroundImage: `url(${src})`,
-                width: '100%',
-                height: showHeight,
-                marginTop: offsetHeight,
-                transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
-              }}
-            ></div>
-          </div>
-        )}
-      </>
-    );
-  } else {
-    return (
-      <ConfigProvider classPrefix="wedatea2td">
-        <ImagePreview
-          previewSrc={src}
-          maskClosable={maskClosable}
-          className={className}
-          style={{ ...style, objectFit }}
-        >
-          {(open) => (
-            <img
-              style={{
-                objectFit,
-                cursor: 'zoom-in',
-                ...style,
-              }}
-              className={className}
-              alt={alt}
-              src={src}
-              onLoad={(e) => {
-                setIsError(false);
-                events.load && events.load({}, { originEvent: e });
-              }}
-              onError={(e) => {
-                setIsError(true);
-                events.error && events.error({}, { originEvent: e });
-              }}
-              loading={lazyLoad ? 'lazy' : undefined}
-              onClick={(e) => {
-                open();
-                events.tap && events.tap({}, { originEvent: e });
-              }}
-            />
-          )}
-        </ImagePreview>
-      </ConfigProvider>
-    );
-  }
-}

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

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-
-import classNames from '../../utils/classnames';
-import './index.css';
-import { ImageInner } from './image';
-import type { CommonPropsType } from '../../types';
-
-const defaultSrc =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+';
-type TMode =
-  | 'scaleToFill'
-  | 'aspectFit'
-  | 'aspectFill'
-  | 'widthFix'
-  | 'heightFix'
-  | 'top'
-  | 'bottom'
-  | 'center'
-  | 'left'
-  | 'right'
-  | 'top left'
-  | 'top right'
-  | 'bottom left'
-  | 'bottom right';
-export interface PropsType
-  extends CommonPropsType,
-    Pick<HTMLImageElement, 'src' | 'alt'> {
-  mode: TMode;
-  lazyLoad: boolean;
-  maskClosable: boolean;
-  imgPreview: boolean;
-  fit: React.CSSProperties['objectFit'];
-}
-
-export default function Image({
-  // 系统属性
-  className,
-  events = {},
-  style = {},
-  // 组件属性
-  src,
-  alt,
-  mode,
-  lazyLoad,
-  imgPreview,
-  maskClosable,
-  fit,
-}: PropsType) {
-  const [isError, setIsError] = useState(false);
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-image': true,
-    'weda-image-error': isError,
-    [className]: className,
-  });
-  const objectFit = fit || getObjectFitByWxImageMode(mode);
-  const [realSrc, setRealSrc] = useState(
-    /^cloud:\/\//.test(src) ? undefined : src
-  );
-
-  useEffect(() => {
-    if (/^cloud:\/\//.test(src)) {
-      window.app.cloud
-        .getTempFileURL(src)
-        .then((res) => {
-          setRealSrc(res || '');
-        })
-        .catch(() => {
-          setRealSrc('');
-        });
-    } else {
-      setRealSrc(src);
-    }
-  }, [src]);
-
-  return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (
-    <ImageInner
-      objectFit={objectFit}
-      style={style}
-      className={cls}
-      alt={alt}
-      src={realSrc}
-      isError={isError}
-      setIsError={setIsError}
-      events={events}
-      lazyLoad={lazyLoad}
-      imgPreview={imgPreview}
-      maskClosable={maskClosable}
-    />
-  ) : null;
-}
-
-function getObjectFitByWxImageMode(
-  mode: TMode
-): React.CSSProperties['objectFit'] {
-  const array = [
-    {
-      mode: 'scaleToFill',
-      h5: 'fill',
-    },
-    {
-      mode: 'aspectFit',
-      h5: 'contain',
-    },
-    {
-      mode: 'aspectFill',
-      h5: 'cover',
-    },
-    {
-      mode: 'widthFix',
-      h5: 'cover',
-    },
-    {
-      mode: 'heightFix',
-      h5: 'contain',
-    },
-  ] as const;
-  const item = array.find((item) => item.mode === mode);
-  return item?.h5;
-}