@cloudbase/weda-ui 0.2.8 → 0.2.12

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

@@ -1,7 +1,23 @@
 import * as React from 'react';
+import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import './index.css';
-import * as PropTypes from 'prop-types';
+
+export interface PropsType extends CommonPropsType {
+  /**
+   * 内容
+   */
+   content?: string;
+   /**
+    * 链接地址
+    */
+   url?: string;
+   /**
+    * 参数
+    */
+   params?: {key: string, value: string}[];
+   contentSlot?: React.ReactNode;
+}
 
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
 // 当前窗口相对地址交给平台
@@ -13,7 +29,7 @@ export default function Link({
   className,
   contentSlot,
   params = [], // TODO 格式定义
-}) {
+}: PropsType) {
   url = url.trim();
   const cls = classNames({
     'weda-link': true,
@@ -97,37 +113,4 @@ export default function Link({
       {content}
     </a>
   );
-}
-
-Link.propTypes = {
-  // 系统属性
-  /**
-   * 类名
-   */
-  className: PropTypes.string,
-  /**
-   * 事件
-   */
-  events: PropTypes.objectOf(PropTypes.func),
-  /**
-   * 内联样式
-   */
-  style: PropTypes.object,
-  // 组件属性
-  /**
-   * 内容
-   */
-  content: PropTypes.string,
-  /**
-   * 链接地址
-   */
-  url: PropTypes.string,
-  /**
-   * 参数
-   */
-  params: PropTypes.array,
-
-  contentSlot: PropTypes.any,
-};
-
-Link.defaultProps = {};
+}

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

@@ -1,8 +1,19 @@
 import * as React from 'react';
-import { Modal, Button } from 'tea-component';
+import { Modal, Button, ModalProps, ConfigProvider } from 'tea-component';
+import { unknownFunction } from '../../types';
 import classNames from '../../utils/classnames';
 
-export default function WeDaModal(_props) {
+export interface PropTypes extends ModalProps {
+  content: string,
+  customButton: React.ReactNode,
+  customContent: React.ReactNode,
+  isDefaultButton: boolean,
+  emit?: unknownFunction,
+  events: Record<string, unknownFunction>,
+
+}
+
+export default function WeDaModal(_props: PropTypes) {
   const {
     className,
     content,
@@ -11,34 +22,37 @@ export default function WeDaModal(_props) {
     customContent,
     isDefaultButton,
     emit,
+    events,
     ...props
   } = _props;
 
   return (
+  <ConfigProvider classPrefix="wedatea2td">
     <Modal
       className={classNames('weda-ui', 'lcap-modal', 'container', className)}
       visible={visible}
       onClose={() => {
-        emit('close');
+        emit('close', {});
       }}
       {...props}
-    >
+      >
       <Modal.Body>{content ? content : customContent}</Modal.Body>
       <Modal.Footer>
         {isDefaultButton ? (
           <Button
-            type="primary"
-            onClick={() => {
-              emit('confirm');
-              // events.confirm();
-            }}
+          type="primary"
+          onClick={() => {
+            emit('confirm', {});
+            // events.confirm();
+          }}
           >
             确定
           </Button>
         ) : (
           customButton
-        )}
+          )}
       </Modal.Footer>
     </Modal>
+  </ConfigProvider>
   );
 }

package/src/web/components/picker/{datePicker.jsx → datePicker.tsx}

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
 
-export default function DatePicker(props) {
+export interface PropsType extends CommonPropsType {
+  start: string;
+  end: string;
+  defaultValue: string;
+  title: string;
+  children?: React.ReactNode|undefined
+}
+
+export default function DatePicker(props: PropsType) {
   const { start, end, defaultValue, title, children, className } = props;
   const click = function () {
     let fixedDefaultValue = undefined;
@@ -37,13 +45,4 @@ export default function DatePicker(props) {
       {children}
     </div>
   );
-}
-
-DatePicker.propTypes = {
-  start: PropTypes.string,
-  end: PropTypes.string,
-  defaultValue: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
+}

package/src/web/components/picker/{picker.jsx → picker.tsx}

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
-
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
+
+export interface PropsType extends CommonPropsType {
+  title?: string
+}
 
-export default function Picker(props) {
+export default function Picker(props: PropsType) {
   const { title, children, className } = props;
   const click = function () {
     weui.picker(
@@ -53,10 +56,4 @@ export default function Picker(props) {
       {children}
     </div>
   );
-}
-
-Picker.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
+}

package/src/web/components/picker/{timePicker.jsx → timePicker.tsx}

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
+import { CommonPropsType } from '../../types';
 
-export default function TimePicker(props) {
-  const { title, defaultValue, children, className } = props;
+export interface PropsType extends CommonPropsType {
+  defaultValue?: string;
+  title?: string;
+}
+export default function TimePicker(props: PropsType) {
+  const { title = '时间', defaultValue = '', children, className } = props;
 
   const click = function () {
     const hour = [];
@@ -49,16 +53,4 @@ export default function TimePicker(props) {
       {children}
     </div>
   );
-}
-
-TimePicker.propTypes = {
-  title: PropTypes.string,
-  defaultValue: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string,
-};
-
-TimePicker.defaultProps = {
-  title: '时间',
-  defaultValue: '',
-};
+}

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

@@ -1,10 +1,11 @@
+// @ts-ignore
 import React, { useEffect, useState } from 'react';
 import BraftEditor from 'braft-editor';
-import { useSetState } from 'react-use';
+import { useSetState } from '../../utils/useSetState';
 import * as PropsTypes from 'prop-types';
 import { ContentUtils } from 'braft-utils';
 import classNames from '../../utils/classnames';
-import FormCell from '../form/formcell';
+
 import { getCloudInstance, getTempFileURL } from '../../utils/tcb';
 import {
   message,
@@ -149,6 +150,7 @@ export default function RichText({
               }
             }}
             excludeControls={['media', 'fullscreen']}
+            /** @ts-ignore */
             extendControls={extendControls}
             handleKeyCommand={(command, editState) => {
               const newState = ContentUtils.handleKeyCommand(
@@ -194,6 +196,7 @@ export const CustomUploader = (props) => {
   const getBase64 = (file) => {
     const reader = new FileReader();
     reader.onloadend = () => {
+      // @ts-ignore
       setState({ previewImg: reader.result });
     };
     reader.readAsDataURL(file);

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import classNames from '../../utils/classnames';
+import { getTempFileURL } from '../../utils/tcb';
+import './index.css';
+import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
+import { CommonPropsType } from '../../types';
+
+export interface PropsType extends CommonPropsType {
+    value: string
+}
+
+export default function RichTextView({
+  value = '',
+  className,
+  style,
+  id
+}: PropsType) {
+  let parseValue = value;
+  try {
+    parseValue = JSON.parse(value);
+  } catch (e) {}
+  const cls = classNames({
+    'weda-ui': true,
+    'weda-RichTextView': true,
+    [className]: className,
+  });
+  const [displayValue, setDisplayValue] = useState('');
+  const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
+  const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
+
+  let tempValue = parseValue
+    .toString()
+    .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+
+  const getSrc = async (img) => {
+    const url = img.replace(regex, '$1');
+    if (img.includes('cloud://')) {
+      const newURL = await getTempFileURL(url);
+      if (newURL) {
+        tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
+        setDisplayValue(tempValue);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setDisplayValue(tempValue);
+    try {
+      const imgs = parseValue.match(regex);
+      if (imgs && imgs.length > 0) {
+        imgs.forEach((img) => {
+          getSrc(img);
+        });
+      }
+    } catch (e) {}
+  }, [value]);
+
+  return (
+    displayValue && (
+      <div className={cls} style={style}
+        id={id}
+      >
+        <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
+      </div>
+    )
+  );
+}

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

@@ -1,12 +1,22 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
+import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 
+export interface PropsType extends CommonPropsType {
+  scrollX?: boolean;
+  scrollY?: boolean;
+  scrollTop?: number;
+  scrollLeft?: number;
+  scrollIntoView?: string;
+  upperThreshold?: number;
+  lowerThreshold?: number;
+  domRef?: any;
+}
+
 export default function ScrollView({
   id,
-  scrollY,
-  scrollX,
+  scrollX = false,
+  scrollY = true,
   style,
   scrollTop,
   scrollLeft,
@@ -23,7 +33,7 @@ export default function ScrollView({
   const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
   const [scrollTopPos, setScrollTopPos] = React.useState(0);
 
-  const scrollViewRef = domRef || React.useRef(null);
+  const scrollViewRef = domRef || React.useRef<HTMLElement>(null);
 
   const handleOnScroll = function (e) {
     const detail = {
@@ -35,7 +45,6 @@ export default function ScrollView({
     const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
     const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
     let delta;
-    // console.log(">>>>", deltaY, deltaX,e.target.scrollLeft,e.target.scrollTop)
     // 横向滚动
     if (Math.abs(deltaX) > Math.abs(deltaY)) {
       delta = deltaX;
@@ -101,8 +110,8 @@ export default function ScrollView({
   React.useEffect(() => {
     if (scrollIntoView) {
       const children = scrollViewRef.current.children;
-      const item = Array.from(children).find(
-        (item) => item && item.id === scrollIntoView
+      const item: any = Array.from(children).find(
+        (item: any) => item && item.id === scrollIntoView
       );
       scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
       scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
@@ -136,28 +145,4 @@ export default function ScrollView({
       {children}
     </div>
   );
-}
-
-ScrollView.propTypes = {
-  scrollX: PropTypes.bool,
-  scrollY: PropTypes.bool,
-  scrollTop: PropTypes.number,
-  scrollLeft: PropTypes.number,
-  scrollIntoView: PropTypes.string,
-  upperThreshold: PropTypes.number,
-  lowerThreshold: PropTypes.number,
-  domRef: PropTypes.any,
-  children: PropTypes.any,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.string,
-  events: PropTypes.objectOf(PropTypes.func),
-};
-
-ScrollView.defaultProps = {
-  scrollX: false,
-  scrollY: true,
-  upperThreshold: 50,
-  lowerThreshold: 50,
-  events: {},
-};
+}

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 
-export default function Slot({ compositeParent, name, className }) {
+export interface PropsType {
+  className?: string,
+  name: string,
+  compositeParent: any
+
+}
+export default function Slot({ compositeParent, name, className }: PropsType) {
   if (!compositeParent) {
     console.warn('Slot组件只能用于实现复合组件');
     // 兼容编辑器点击，可选中 Slot 组件
@@ -12,10 +17,4 @@ export default function Slot({ compositeParent, name, className }) {
     );
   }
   return compositeParent.props.data[name] || null;
-}
-
-Slot.propTypes = {
-  className: PropTypes.string,
-  name: PropTypes.string,
-  compositeParent: PropTypes.any,
-};
+}

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

@@ -35,7 +35,7 @@
   height: 100%;
 }
 
-.g-swiper-item > * {
+.g-swiper-item > div > * {
   width: 100%;
   height: auto;
   max-width: 100%;

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 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,11 @@ 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;
+  const outerWrapRef = useRef<HTMLDivElement>();
+  useEventListener(outerWrapRef, 'load', (e) => {
+    setHeight(e.target.clientHeight);
+  });
 
-        if (h && height) {
-          setHeight(Math.min(h, height));
-        } else {
-          setHeight(Math.max(h, height));
-        }
-      }
-    },
-    [height]
-  );
 
   const itemsClone = React.Children.map(children, (x, i) => {
     return (
@@ -148,9 +158,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 +181,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 setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
           })}
           {itemsClone[0]}
         </Swipe>
@@ -234,40 +232,35 @@ 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,
+  children?: React.ReactNode
+}> = ({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}>
+        {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} />;
+}