@cloudbase/weda-ui 0.2.15 → 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,5 +1,4 @@
 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';

package/src/web/components/index.js

@@ -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>

package/src/web/components/listView/index.css

@@ -0,0 +1,139 @@
+.weda-list-view__containor {
+  overflow-y: auto;
+  max-height: 100%;
+  overflow-x: hidden;
+}
+
+.weda-list-view-card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 3px;
+}
+
+/* 加载更多 */
+.weda-list-view__containor .weda-list-view__more {
+  width: 100%;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__bottom-load {
+  padding-top: 1px;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
+  padding-top: 10px;
+  padding-bottom: 14px;
+  font-size: 12px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* 加载更多 ... */
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-symbol {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 20px;
+  padding-bottom: 18px;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__symbol-item {
+  width: 8px;
+  height: 8px;
+  background: #c4c4c4;
+  margin-left: 6px;
+  border-radius: 50%;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__symbol-item:first-child {
+  width: 6px;
+  height: 6px;
+  margin-left: 0;
+}
+
+/* 加载更多 分页 */
+.weda-list-view__containor .weda-list-view__more {
+  background-color: #fff;
+}
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__more-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 10px 18px 12px 16px;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next {
+  font-size: 12px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 24px;
+  cursor: pointer;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre.active,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre::before,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next::after {
+  position: absolute;
+  content: '';
+  width: 24px;
+  height: 24px;
+  top: 10px;
+  opacity: 0.2;
+  background-image: url(arrow-right-line.svg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-pre::before,
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-next::after {
+  opacity: 1;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre::before {
+  left: 16px;
+  transform: rotate(180deg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next::after {
+  right: 18px;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-text {
+  font-size: 12px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+}