@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -0,0 +1,332 @@
+@font-face {
+  font-family: 'lcap-icon';
+  font-weight: normal;
+  font-style: normal;
+  src: url(data:application/font-woff2;charset=utf-8;base64,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)
+    format('woff2');
+}
+
+.lcap-icon {
+  font-size: 34px;
+  /* display: inline-block; */
+  font-family: 'lcap-icon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.lcap-icon-nointernet:before {
+  content: '\e900';
+}
+.lcap-icon-success:before {
+  content: '\e901';
+}
+.lcap-icon-warning:before {
+  content: '\e902';
+}
+.lcap-icon-pending:before {
+  content: '\e903';
+}
+.lcap-icon-refresh:before {
+  content: '\e904';
+}
+.lcap-icon-folder:before {
+  content: '\e905';
+}
+.lcap-icon-arrowup:before {
+  content: '\e906';
+}
+.lcap-icon-arrowdown:before {
+  content: '\e907';
+}
+.lcap-icon-arrowleft:before {
+  content: '\e908';
+}
+.lcap-icon-arrowright:before {
+  content: '\e909';
+}
+.lcap-icon-chevronup:before {
+  content: '\e90a';
+}
+.lcap-icon-chevrondown:before {
+  content: '\e90b';
+}
+.lcap-icon-chevronleft:before {
+  content: '\e90c';
+}
+.lcap-icon-chevronright:before {
+  content: '\e90d';
+}
+.lcap-icon-delete:before {
+  content: '\e90e';
+}
+.lcap-icon-edit:before {
+  content: '\e90f';
+}
+.lcap-icon-search:before {
+  content: '\e910';
+}
+.lcap-icon-check:before {
+  content: '\e911';
+}
+.lcap-icon-close:before {
+  content: '\e912';
+}
+.lcap-icon-add:before {
+  content: '\e913';
+}
+.lcap-icon-download:before {
+  content: '\e914';
+}
+.lcap-icon-success-fill:before {
+  content: '\e915';
+}
+.lcap-icon-close-fill:before {
+  content: '\e916';
+}
+.lcap-icon-minus-fill:before {
+  content: '\e917';
+}
+.lcap-icon-add-fill:before {
+  content: '\e918';
+}
+.lcap-icon-info-fill:before {
+  content: '\e919';
+}
+.lcap-icon-pending-fill:before {
+  content: '\e91a';
+}
+.lcap-icon-warning-fill:before {
+  content: '\e91b';
+}
+.lcap-icon-more:before {
+  content: '\e91c';
+}
+.lcap-icon-star:before {
+  content: '\e91d';
+}
+.lcap-icon-star-fill:before {
+  content: '\e91e';
+}
+.lcap-icon-location:before {
+  content: '\e91f';
+}
+.lcap-icon-question:before {
+  content: '\e920';
+}
+/* pc style */
+.weda-grid-navigation {
+  /* max-width: 1200px;
+  margin: 0 auto; */
+  width: 100%;
+}
+
+.weda-grid-navigation .weda-grid-navigation__wrapper {
+  width: 100%;
+  padding: 0 24px;
+}
+
+.weda-grid-navigation .weda-grid-navigation__row {
+  margin: 0;
+}
+
+.weda-grid-navigation .weda-grid-navigation__col {
+  padding: 0;
+}
+
+.weda-grid-navigation .weda-grid-navigation__col .wedatea2td-grid__box {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  /* align-items: center; */
+  padding: 16px 0;
+  text-align: center;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .wedatea2td-grid__box {
+  padding: 20px 0;
+}
+
+.weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__icon {
+  width: 56px;
+  height: 56px;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col
+  .weda-grid-navigation__fonticon {
+  font-size: 56px;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__icon {
+  width: 48px;
+  height: 48px;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__fonticon {
+  font-size: 48px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__icon {
+  width: 72px;
+  height: 72px;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__fonticon {
+  font-size: 72px;
+}
+
+.weda-grid-navigation .weda-grid-navigation__img {
+  width: 100%;
+  /* height: 100%; */
+}
+
+.weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__text {
+  font-size: 16px;
+  /* line-height: 24px; */
+  text-align: center;
+  color: rgba(0, 0, 0, 0.6);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-top: 12px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__text {
+  margin-top: 16px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__text {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__text {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+/* h5 style */
+.weda-grid-navigation.weda-grid-navigation-mobile {
+  margin: 0;
+  max-width: 100%;
+}
+
+.weda-grid-navigation-mobile .weda-grid-navigation__wrapper {
+  padding: 0 16px;
+}
+
+.weda-grid-navigation-mobile .weda-grid-navigation__col .wedatea2td-grid__box {
+  padding: 8px 0;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__row:first-child
+  .weda-grid-navigation__col
+  .wedatea2td-grid__box {
+  text-align: center;
+  padding-top: 16px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__row:last-child
+  .weda-grid-navigation__col
+  .wedatea2td-grid__box {
+  text-align: center;
+  padding-bottom: 16px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .wedatea2td-grid__box {
+  padding: 10px 0;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__row:first-child
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .wedatea2td-grid__box {
+  text-align: center;
+  padding-top: 20px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__row:last-child
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .wedatea2td-grid__box {
+  padding-bottom: 20px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col
+  .weda-grid-navigation__icon {
+  width: 36px;
+  height: 36px;
+}
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col
+  .weda-grid-navigation__fonticon {
+  font-size: 36px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__icon {
+  width: 32px;
+  height: 32px;
+}
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__fonticon {
+  font-size: 32px;
+}
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__fonticon {
+  font-size: 40px;
+}
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__icon {
+  width: 40px;
+  height: 40px;
+}
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col
+  .weda-grid-navigation__text,
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__text,
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__text {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 4px;
+}
+
+.weda-grid-navigation-mobile
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__text {
+  margin-top: 8px;
+}

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

@@ -0,0 +1,247 @@
+import React from 'react';
+import { CommonPropsType } from '../../types';
+import classNames from '../../utils/classnames';
+import { Row, Col, ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import weui from './../../utils/weui';
+import './index.css';
+import { IconFont } from 'tdesign-icons-react';
+
+/**
+ * Web端
+ */
+const CLASS_PREFIX = 'weda-grid-navigation';
+
+export default function NavLayout({
+  navOption,
+  mobileCol = 4,
+  pcCol = 4,
+  iconSize,
+  textColor,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  maxLines,
+  className,
+  style,
+}: H5NavLayoutProps) {
+  const platform = usePlatform();
+  // 等分列占比
+  const [colCount, setColCount] = React.useState(4);
+  const cls = classNames({
+    [CLASS_PREFIX]: true,
+    [className]: className,
+    [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+  });
+
+  const navList = React.useMemo(() => {
+    let list = [];
+    list.length = Math.floor(navOption.length / colCount);
+    list.forEach((item, index) => {
+      list[index] = [];
+    });
+    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;
+    });
+    return list;
+  }, [colCount, navOption]);
+
+  React.useEffect(() => {
+    setColCount(platform === 'h5' ? mobileCol : pcCol);
+  }, [mobileCol, pcCol]);
+
+  // 每个col的宽度百分比
+  const colStyle: React.CSSProperties = {
+    width: `${(1 / colCount) * 100}%`,
+  };
+  const mutiLabelStyle: React.CSSProperties = {
+    width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: `${maxLines ? maxLines : 'inherit'}`,
+    overflow: 'hidden',
+    color: `${textColor}`,
+    fontWeight: `${fontWeight}`,
+    fontSize: `${fontSize}` + 'px',
+    lineHeight: `${lineHeight == 'auto' ? 'normal' : lineHeight}`,
+  };
+
+  const navTap = (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,
+          });
+        } else {
+          return;
+        }
+        break;
+      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="navLayout" style={style}>
+        <div className={`${CLASS_PREFIX}__wrapper`}>
+          {navList.map((row, rowIndex) => {
+            return (
+              <Row className={`${CLASS_PREFIX}__row`} key={rowIndex}>
+                <>
+                  {row &&
+                    row.map(
+                      (
+                        colInfo: {
+                          tapStatus;
+                          title;
+                          iconSrc;
+                          icon: string;
+                          insideUrl;
+                          withParams;
+                          params;
+                          paramObj;
+                          newPage;
+                          outerUrl;
+                        },
+                        colIndex
+                      ) => {
+                        return (
+                          <Col
+                            style={{
+                              ...colStyle,
+                              cursor:
+                                colInfo?.tapStatus != 'tap'
+                                  ? 'pointer'
+                                  : 'auto',
+                            }}
+                            className={`${CLASS_PREFIX}__col ${CLASS_PREFIX}__col--${iconSize}`}
+                            key={colIndex}
+                          >
+                            <div
+                              data-testid={`${colIndex}_click`}
+                              onClick={() => navTap(colInfo)}
+                            >
+                              {!colInfo?.iconSrc ? (
+                                <IconShow onIcon={colInfo?.icon} />
+                              ) : (
+                                <div className={`${CLASS_PREFIX}__img`}>
+                                  <img
+                                    src={colInfo?.iconSrc}
+                                    className={`${CLASS_PREFIX}__icon`}
+                                  />
+                                </div>
+                              )}
+                              {colInfo?.title && (
+                                <div
+                                  className={`${CLASS_PREFIX}__text`}
+                                  style={mutiLabelStyle}
+                                >
+                                  {colInfo?.title}
+                                </div>
+                              )}
+                            </div>
+                          </Col>
+                        );
+                      }
+                    )}
+                </>
+              </Row>
+            );
+          })}
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}
+export interface H5NavLayoutProps extends CommonPropsType {
+  /**
+   * 导航配置
+   */
+  navOption?: Array<any>;
+  /**
+   * 移动端每行列数
+   */
+  mobileCol?: number;
+  /**
+   * PC端每行列数
+   */
+  pcCol?: number;
+  /**
+   * icon尺寸
+   */
+  iconSize?: 'medium' | 'samll' | 'big';
+  /**
+   * 标题颜色
+   */
+  textColor?: string;
+  /**
+   * 标题字重
+   */
+  fontWeight?: 'lighter' | 'normal' | 'bolder';
+  /**
+   * 最大行数
+   */
+  maxLines?: number;
+  /**
+   * 字号
+   */
+  fontSize?: number;
+  /**
+   * 行高
+   */
+  lineHeight: string;
+  /**
+   * 点击事件
+   */
+  navTap?: (colInfo) => void;
+}
+interface IIconShow {
+  onIcon?: String;
+}
+/**
+ * icon回显组件
+ */
+const IconShow = ({ onIcon }: IIconShow) => {
+  return (
+    <>
+      {onIcon?.includes('td:') ? (
+        <div>
+          <IconFont
+            name={onIcon?.split(':')[1]}
+            className={`${CLASS_PREFIX}__fonticon`}
+          />
+        </div>
+      ) : (
+        <div
+          className={`${CLASS_PREFIX}__fonticon lcap-icon lcap-icon-${onIcon}`}
+        ></div>
+      )}
+    </>
+  );
+};

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

@@ -35,6 +35,10 @@
   height: 100%;
 }
 
+.weda-ui.g-swiper .g-swiper-item > div  {
+  height: auto;
+}
+
 .g-swiper-item > div > * {
   width: 100%;
   height: auto;

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

@@ -82,7 +82,6 @@ export default function Swiper({
     setHeight(e.target.clientHeight);
   });
 
-
   const itemsClone = React.Children.map(children, (x, i) => {
     return (
       <div className="g-swiper-item" data-index={i}>
@@ -181,7 +180,7 @@ export default function Swiper({
         >
           {itemsClone[itemCount - 1]}
           {React.Children.map(children, (x, i) => {
-            return <SwiperItem setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
+            return <SwiperItem height={height} setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
           })}
           {itemsClone[0]}
         </Swipe>
@@ -238,8 +237,9 @@ const SwiperItem: React.FC<{
   setHeight: React.Dispatch<React.SetStateAction<number>>,
   currentIndex: number,
   index: number,
+  height: number,
   children?: React.ReactNode
-}> = ({setHeight, children, currentIndex, index}) => {
+}> = ({height, setHeight, children, currentIndex, index}) => {
   const firstChildRef = useRef<HTMLDivElement>(null);
   const syncHeight = useDebouncedCallback((e) => {
     setHeight(e.contentRect.height);
@@ -260,7 +260,12 @@ const SwiperItem: React.FC<{
       })}
       data-index={index}
     >
-      <div ref={firstChildRef}>
+      <div
+        ref={firstChildRef}
+        style={{
+          height: height > 0 ? '100%' : 'auto'
+        }}
+      >
         {children}
       </div>
     </div>

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

@@ -16,7 +16,7 @@ export interface PropsType extends CommonPropsType {
     // @deprecated
     name?: string;
   }[];
-  selectedIndex: number
+  selectedIndex: number|string
   [key: string]: React.ReactNode
   // [panel: `panel${number}`]: React.ReactNode; // require typescript@4.4
 }
@@ -30,4 +30,4 @@ export default function Tabs(props: PropsType) {
     return <TabsH5 {...props} />;
   }
   return platform === 'h5' ? <TabsH5 {...props} /> : <TabsPc {...props} />;
-}
+}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import './index.css';
 import classNames from '../../utils/classnames';
@@ -13,7 +13,10 @@ export default function TabsH5({
   style,
   ...restProps
 }: PropsType) {
-  const [currentIndex, setCurrentIndex] = useSyncValue(selectedIndex);
+  const [currentIndex, setCurrentIndex] = useSyncValue(
+    typeof selectedIndex === 'string' ?
+    parseInt(selectedIndex) : selectedIndex
+  );
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
     return {
@@ -21,7 +24,7 @@ export default function TabsH5({
       transform: `translate3d( ${currentIndex * 100}%, 0, 0)`
     };
   }, [tabs, currentIndex]);
-  
+
   return (
     <div data-testid="tabs" className={classNames("weda-tabs weda-ui", {
       [className]: className
@@ -63,4 +66,4 @@ export default function TabsH5({
       </div>
     </div>
   );
-}
+}

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

@@ -1,11 +1,11 @@
-a.weda-file-view-pc__single{
-    display: inline-block;
-    vertical-align: middle;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+a.weda-uploader-file-view__single {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
-a.weda-file-view-pc__single:hover{
-    text-decoration: underline;
+a.weda-uploader-file-view__single:hover {
+  text-decoration: underline;
 }