@cloudbase/weda-ui 0.2.13 → 0.2.16

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

@@ -0,0 +1,309 @@
+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';
+
+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>
+                                <Icon
+                                  type="btnback"
+                                  className={`${CLASS_PREFIX}__btn--icon`}
+                                />
+                              </Button>
+                            )}
+                          </div>
+                        </Col>
+                      );
+                    })}
+                </>
+              </Row>
+            );
+          })}
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}

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

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 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>>
+interface ImageInnerPropsType extends Omit<PropsType, 'fit' | 'mode'> {
+  objectFit: React.CSSProperties['objectFit'];
+  isError: boolean;
+  setIsError: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export function ImageInner({
   objectFit,
@@ -20,12 +19,12 @@ export function ImageInner({
   events,
   lazyLoad,
   maskClosable,
-  imgPreview
+  imgPreview,
 }: ImageInnerPropsType) {
   const platform = usePlatform();
   const [imgShow, setImgShow] = React.useState(false);
   const onMaskClick = () => {
-    if(maskClosable) {
+    if (maskClosable) {
       setImgShow(false);
     }
   };
@@ -34,12 +33,12 @@ export function ImageInner({
   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 [translateX, setTranslateX] = React.useState(0);
+  const [translateY, setTranslateY] = React.useState(0);
   const [previewScale, setPreviewScale] = React.useState(1);
   React.useEffect(() => {
     // 防止触发浏览器的放大缩小
-    const handler = e => e.preventDefault();
+    const handler = (e) => e.preventDefault();
     document.addEventListener('gesturestart', handler);
     document.addEventListener('gesturechange', handler);
     return () => {
@@ -48,36 +47,38 @@ export function ImageInner({
     };
   }, []);
 
-  const bind = useGesture({
-    onClick: ({event}) => {
-      // 防止冒泡出发关闭预览
-      event.stopPropagation();
+  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);
+      },
     },
-    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
-      }
+    {
+      drag: {
+        delay: true,
+        preventDefault: true,
+      },
+      pinch: {
+        scaleBounds: { min: 0.6, max: 5 },
+        pointer: {
+          touch: true,
+        },
+      },
     }
-  });
+  );
 
-  if(platform === 'h5' || !imgPreview || isError) {
+  if (platform === 'h5' || !imgPreview || isError) {
     return (
       <>
         <img
@@ -90,7 +91,7 @@ export function ImageInner({
           src={src}
           onLoad={(e) => {
             const img = e.target as HTMLImageElement;
-            const {naturalHeight, naturalWidth} = img;
+            const { naturalHeight, naturalWidth } = img;
             realHeight.current = naturalHeight;
             realWidth.current = naturalWidth;
             setIsError(false);
@@ -100,74 +101,86 @@ export function ImageInner({
             setIsError(true);
             events.error && events.error({}, { originEvent: e });
           }}
-          onClick={
-            () => {
-              if(imgPreview && !isError) {
-                setTranslateX(0);
-                setTranslateY(0);
-                setPreviewScale(1);
-                const windowHeight = window.innerHeight;
-                const windowWidth = window.innerWidth;
-                const ratio = (realWidth.current / realHeight.current);
-                const height = windowWidth / ratio;
-                setOffsetHeight(windowHeight / 2 - (height / 2));
-                setShowHeight(height);
-                setImgShow(true);
+          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>
+        {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>
-            
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <div {...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
+              // 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,
-          }}
+        <ImagePreview
+          previewSrc={src}
+          maskClosable={maskClosable}
           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={open}
-        />}
-      </ImagePreview>
+          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

@@ -7,7 +7,7 @@ import { ImageInner } from './image';
 import { CommonPropsType } from '../../types';
 
 
-const defaultSrc = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+'
+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,

package/src/web/components/index.js

@@ -1,4 +1,4 @@
-import '../wedatheme/style-package/index.css';
+import '@tcwd/style-wedatheme/index.css';
 import loadable from '@loadable/component';
 import { fallback } from '../utils/loading-fallback';
 
@@ -39,6 +39,7 @@ export { default as Image } from './image';
 export { default as Slot } from './slot';
 export { default as ScrollView } from './scrollView';
 export { default as Swiper } from './swiper';
+export { default as Carousel } from './carousel';
 export { default as Modal } from './modal';
 export { default as RichText } from './richText';
 export { default as RichTextView } from './richTextView';
@@ -62,8 +63,19 @@ export { default as Uploader } from './form/uploader';
 export { default as UploaderFile } from './form/uploaderFile';
 export { default as Tips } from './form/tips';
 export { default as Tabs } from './tabs';
+
+export { default as Location } from './form/location';
+
 export { default as EnumSelect } from './form/enumSelect';
+export { default as Calendar } from './calendar';
+export { default as NavLayout } from './navLayout';
+
+// Data Contaier
+export { default as ListView } from './listView';
+export { default as DataView } from './dataView';
 
+export { default as StatisticsCard } from './chart/statisticsCard';
+export { default as GraphicCard } from './graphicCard';
 // open
 // import Auth from './auth';
 

package/src/web/components/listView/arrow-right-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1719 12.0002L8.22192 7.05023L9.63592 5.63623L15.9999 12.0002L9.63592 18.3642L8.22192 16.9502L13.1719 12.0002Z" fill="#09121F"/>
+</svg>