@cloudbase/weda-ui 0.2.11 → 0.2.15

package/src/web/components/swiper/{index.jsx → index.tsx}

@@ -1,27 +1,49 @@
 import * as React from 'react';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import * as propTypes from 'prop-types';
+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 { 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,
-  circular,
-  vertical,
+  autoplay = true,
+  circular = true,
+  vertical = false,
   indicatorDots,
-  indicatorColor,
-  indicatorActiveColor,
+  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));
 
@@ -55,23 +77,10 @@ export default function Swiper({
     };
   }, [currentIndex, vertical]);
 
-  const cb = useCallback(
-    (node) => {
-      if (node) {
-        const h =
-          node.children[0] &&
-          node.children[0].getBoundingClientRect() &&
-          node.children[0].getBoundingClientRect().height;
-
-        if (h && height) {
-          setHeight(Math.min(h, height));
-        } else {
-          setHeight(Math.max(h, height));
-        }
-      }
-    },
-    [height]
-  );
+  const outerWrapRef = useRef<HTMLDivElement>();
+  useEventListener(outerWrapRef, 'load', (e) => {
+    setHeight(e.target.clientHeight);
+  });
 
   const itemsClone = React.Children.map(children, (x, i) => {
     return (
@@ -148,9 +157,7 @@ export default function Swiper({
         vertical: vertical,
       })}
       style={{ height: height ? height : 'auto', ...style }}
-      onLoad={(e) => {
-        cb(e.target.closest('.g-swiper-item'));
-      }}
+      ref={outerWrapRef}
       id={id}
     >
       {itemCount > 0 ? (
@@ -173,17 +180,7 @@ export default function Swiper({
         >
           {itemsClone[itemCount - 1]}
           {React.Children.map(children, (x, i) => {
-            return (
-              <div
-                className={classNames('g-swiper-item', {
-                  current: i === currentIndex,
-                })}
-                ref={cb}
-                data-index={i}
-              >
-                {x}
-              </div>
-            );
+            return <SwiperItem height={height} setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
           })}
           {itemsClone[0]}
         </Swipe>
@@ -213,18 +210,20 @@ export default function Swiper({
         false
       )}
       <a
-        href="javascript:;"
+        href="#"
         className="g-swiper__turn-pre"
-        onClick={() => {
+        onClick={(ev) => {
+          ev.preventDefault();
           setIndex(currentIndex - 1);
         }}
       >
         上一页
       </a>
       <a
-        href="javascript:;"
+        href="#"
         className="g-swiper__turn-next"
-        onClick={() => {
+        onClick={(ev) => {
+          ev.preventDefault();
           setIndex(currentIndex + 1);
         }}
       >
@@ -234,40 +233,41 @@ export default function Swiper({
   );
 }
 
-Swiper.defaultProps = {
-  current: 0,
-  duration: 500,
-  indicatorDots: true,
-  autoplay: true,
-  circular: true,
-  interval: 5000,
-  vertical: false,
-  indicatorColor: 'rgba(200, 200, 200, 0.9)',
-  indicatorActiveColor: 'rgba(0, 0, 0, 0.9)',
-};
+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完成后再设置高度
 
-Swiper.propTypes = {
-  /**
-   * 是否启用指示点
-   */
-  indicatorDots: propTypes.bool,
-  /**
-   * 是否自动切换
-   */
-  autoplay: propTypes.bool,
-  /**
-   * 当前索引值
-   */
-  current: propTypes.number,
-  interval: propTypes.number,
-  duration: propTypes.number,
-  circular: propTypes.bool,
-  vertical: propTypes.bool,
-  indicatorColor: propTypes.string,
-  indicatorActiveColor: propTypes.string,
-  children: propTypes.any,
-  className: propTypes.string,
-  style: propTypes.object,
-  events: propTypes.objectOf(propTypes.func),
-  id: propTypes.string,
-};
+  // 因为有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.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import loadable from '@loadable/component';
+import { 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;
+
+    // @deprecated
+    name?: string;
+  }[];
+  selectedIndex: number
+  [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} />;
+}

package/src/web/components/tabs/{tabs.h5.jsx → tabs.h5.tsx}

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import * as PropTypes from 'prop-types';
 
 import './index.css';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
+import {PropsType} from './index';
 
 export default function TabsH5({
   tabs,
@@ -12,7 +12,7 @@ export default function TabsH5({
   className,
   style,
   ...restProps
-}) {
+}: PropsType) {
   const [currentIndex, setCurrentIndex] = useSyncValue(selectedIndex);
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
@@ -23,7 +23,7 @@ export default function TabsH5({
   }, [tabs, currentIndex]);
   
   return (
-    <div className={classNames("weda-tabs weda-ui", {
+    <div data-testid="tabs" className={classNames("weda-tabs weda-ui", {
       [className]: className
     })} style={style}>
       <div className="weda-tabs__nav">
@@ -63,33 +63,4 @@ export default function TabsH5({
       </div>
     </div>
   );
-}
-
-
-TabsH5.propTypes = {
-  tabs: PropTypes.array,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  selectedIndex: PropTypes.number,
-  events: PropTypes.objectOf(PropTypes.func),
-  panel1: PropTypes.node,
-  panel2: PropTypes.node,
-  panel3: PropTypes.node,
-  panel4: PropTypes.node,
-  panel5: PropTypes.node,
-  panel6: PropTypes.node,
-  panel7: PropTypes.node,
-  panel8: PropTypes.node,
-  panel9: PropTypes.node,
-  panel10: PropTypes.node,
-  panel11: PropTypes.node,
-  panel12: PropTypes.node,
-  panel13: PropTypes.node,
-  panel14: PropTypes.node,
-  panel15: PropTypes.node,
-  panel16: PropTypes.node,
-  panel17: PropTypes.node,
-  panel18: PropTypes.node,
-  panel19: PropTypes.node,
-  panel20: PropTypes.node,
-};
+}

package/src/web/components/tabs/{tabs.pc.jsx → tabs.pc.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
+import { PropsType } from './index';
 
 
 export default function TabsPc({
@@ -12,28 +12,23 @@ export default function TabsPc({
   className,
   style,
   ...restProps
-}) {
+}: PropsType) {
 
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
   const _tabs = Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
     return {
-      id: index,
+      id: index.toString(),
       label: item.title
     };
   });
 
-
-
-  // React.useEffect(() => {
-  //   console.log('render');
-  // });
   const onActive = (e) => {
     setActiveIndex(e.id);
     events && events.change(e);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
-    <TeaTabs  style={style} tabs={_tabs} activeId={activeIndex} onActive={onActive} className={classNames(
+    <TeaTabs  style={style} tabs={_tabs} activeId={String(activeIndex)} onActive={onActive} className={classNames(
       "weda-tabs_pc",
       {
         [className]: className
@@ -44,7 +39,6 @@ export default function TabsPc({
           <TabPanel
           key={item.id}
           id={item.id}
-          label={item.label}
           >
             {restProps[`panel${index + 1}`]}
           </TabPanel>
@@ -53,32 +47,4 @@ export default function TabsPc({
     </TeaTabs>
   </ConfigProvider>
   );
-}
-
-TabsPc.propTypes = {
-  tabs: PropTypes.array,
-  className: PropTypes.string,
-  selectedIndex: PropTypes.number,
-  style: PropTypes.object,
-  events: PropTypes.objectOf(PropTypes.func),
-  panel1: PropTypes.node,
-  panel2: PropTypes.node,
-  panel3: PropTypes.node,
-  panel4: PropTypes.node,
-  panel5: PropTypes.node,
-  panel6: PropTypes.node,
-  panel7: PropTypes.node,
-  panel8: PropTypes.node,
-  panel9: PropTypes.node,
-  panel10: PropTypes.node,
-  panel11: PropTypes.node,
-  panel12: PropTypes.node,
-  panel13: PropTypes.node,
-  panel14: PropTypes.node,
-  panel15: PropTypes.node,
-  panel16: PropTypes.node,
-  panel17: PropTypes.node,
-  panel18: PropTypes.node,
-  panel19: PropTypes.node,
-  panel20: PropTypes.node,
-};
+}

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

@@ -6,3 +6,21 @@
   /* -webkit-line-clamp: 1;
   white-space: pre-line; */
 }
+.weda-text.level_1 {
+  font-size: 64px !important;
+}
+.weda-text.level_2 {
+  font-size: 56px !important;
+}
+.weda-text.level_3 {
+  font-size: 48px !important;
+}
+.weda-text.level_4 {
+  font-size: 40px !important;
+}
+.weda-text.level_5 {
+  font-size: 32px !important;
+}
+.weda-text.level_6 {
+  font-size: 24px !important;
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { CommonPropsType, unknownFunction } from '../../types';
+import './index.css';
+
+export interface PropsType extends CommonPropsType {
+  text: string,
+  level: string,
+  maxLines: number,
+  space: boolean,
+  userSelect: boolean,
+  textAlign: string,
+  textColor: string,
+  contenteditable: HTMLParagraphElement['contentEditable'],
+  onInput: unknownFunction,
+  onBlur: unknownFunction
+
+}
+export default function Text({
+  text = '文本内容',
+  maxLines = 2,
+  space = false,
+  userSelect = true,
+  textAlign = '',
+  textColor = '',
+  style = {},
+  className,
+  events,
+  id,
+  level = '0',
+  contenteditable,
+  onInput,
+  onBlur
+}: PropsType) {
+  const textStyle: React.CSSProperties = {
+    WebkitLineClamp: maxLines,
+    whiteSpace: space ? 'pre-wrap' : 'pre-line',
+  };
+
+  if (!userSelect) {
+    textStyle.userSelect = 'none';
+  }
+  const levelName = level === '0' ? '' : `level_${level}`;
+
+  // 添加文本颜色属性
+  let style2 = {};
+  if (textColor !== "") {
+    style2 = {color: textColor};
+  }
+
+  // 添加对齐属性
+  if (textAlign !== "") {
+    style2 = {...style2, textAlign};
+  }
+  return (
+    <p
+      //@ts-expect-error contentEditable type def sucks
+      contentEditable={contenteditable}
+      onInput={onInput}
+      onBlur={onBlur}
+      style={{  ...style, ...textStyle, ...style2 }}
+      className={classNames('weda-text', 'weda-ui', className, levelName)}
+      id={id}
+      onClick={(e) => events.tap({}, { originEvent: e })}
+    >
+      {text}
+    </p>
+  );
+}

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

@@ -0,0 +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-file-view-pc__single:hover{
+    text-decoration: underline;
+}

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { UploadFilePc } from '../form/uploaderFile/uploadFile.pc';
+import {
+  filterStrList,
+  isCloudFileID,
+  downloadFile,
+} from '../../utils/platform';
+import { getTempFileURL } from '../../utils/tcb';
+import './index.css';
+
+const CLASS_PREFIX = 'weda-file-view-pc';
+
+/**
+ * 上传文件回显
+ * single 表示单个文件回显
+ */
+export default function UploaderFileView({
+  value,
+  className,
+  single = true,
+  ...rest
+}) {
+  const fileIDList = filterStrList(value);
+  if(single){
+    return <FileView fileID={fileIDList[0]}/>;
+  }else{
+    return (
+      <UploadFilePc
+        className={`${CLASS_PREFIX} ${className}`}
+        decorator={null}
+        {...rest}
+        value={fileIDList}
+        isEdit={false}
+      />
+    );
+  }
+}
+
+/**
+ * 单个文件回显
+ */
+const FileView = ({ fileID }) => {
+  const [src, setSrc] = React.useState('');
+
+  React.useEffect(() => {
+    const fetchFileId = async (id) => {
+      if (isCloudFileID(id)) {
+        try {
+          const fileSrc = await getTempFileURL(id);
+          setSrc(fileSrc);
+        } catch (e) {}
+      } else {
+        setSrc(id);
+      }
+    };
+    fetchFileId(fileID);
+  }, [fileID]);
+
+  const title = React.useMemo(() => {
+    if (isCloudFileID(fileID)) {
+      const uuidReg = /file-[0-9a-f]{8}(-[0-9a-f]{4}){3}-[0-9a-f]{12}-/;
+      const lastIndex = `${fileID}`.lastIndexOf('/');
+      const name = `${fileID}`.slice(lastIndex + 1);
+      const title = name.replace(uuidReg, '');
+      return title;
+    } else {
+      return fileID;
+    }
+  }, [fileID]);
+  return (
+      <a title={title} onClick={() => downloadFile(src)} className={`${CLASS_PREFIX}__single`}>
+      {title}
+      </a>
+  );
+};

package/src/web/components/uploaderView/{index.jsx → index.tsx}

@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import { TcbImage } from '../form/uploader/uploader.pc';
 import classNames from '../../utils/classnames';
 import './index.css';
+import { CommonPropsType } from '../../types';
 
 const CLASS_PREFIX = 'g-uploader-view';
 
@@ -20,8 +21,8 @@ export default function UploaderView({
   isEmptyPlace = true,
   className,
   id,
-  style
-}) {
+  style,
+}: PropsType) {
   const cls = classNames({
     [CLASS_PREFIX]: true,
     [className]: className,
@@ -80,16 +81,12 @@ export default function UploaderView({
   );
 }
 
-UploaderView.propTypes = {
-  srcList: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 图片 src 列表
-  alt: PropTypes.string, // 替代文字
-  isZoom: PropTypes.bool, // 能否点击放大
-  gutter: PropTypes.number, // 图片间距
-  height: PropTypes.number, // 图片最大高度
-  width: PropTypes.number, // 图片最大宽度
-  isEmptyPlace: PropTypes.bool, // 是否展示空值
-  events: PropTypes.objectOf(PropTypes.func), // 组件事件
-  className: PropTypes.string, // 类，修改测试story,测试2
-  id: PropTypes.string,
-  style: PropTypes.object
-};
+export interface PropsType extends CommonPropsType {
+  srcList?: string[] | string;
+  alt?: string; // 替代文字
+  isZoom?: boolean; // 能否点击放大
+  gutter?: number; // 图片间距
+  height?: number; // 图片最大高度
+  width?: number; // 图片最大宽度
+  isEmptyPlace?: boolean; // 是否显示空值
+}

package/src/web/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="resize-observer-browser" />
+
+import * as React from "react";
+export type unknownFunction = (...args: unknown[]) => unknown
+export interface CommonPropsType {
+    style?: React.CSSProperties,
+    id?: string,
+    events?: Record<string, unknownFunction>;
+    className?: string,
+    children?: React.ReactNode | undefined
+}
+
+
+declare global {
+    var app: any
+    interface Window { 
+        app: any;
+    }
+
+}

package/src/web/utils/constant.js

@@ -3,3 +3,5 @@ export const TitleType = {
   TOP: 'top',
   NONE: 'none',
 };
+
+export const LOAD_ERR_IMG_BASE64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';

package/src/web/utils/loading-fallback.tsx

@@ -0,0 +1,2 @@
+import * as React from "react";
+export const fallback =  <div>组件加载中...</div>;