@cloudbase/weda-ui 0.2.6-alhpa.0 → 0.2.9

package/src/web/components/form/uploader/{uploaderPc.jsx → uploader.pc.jsx}

@@ -18,7 +18,7 @@ import * as PropTypes from 'prop-types';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
-const IMAGE_TYPES = [
+export const IMAGE_TYPES = [
   'image/jpg',
   'image/png',
   'image/tif',
@@ -31,7 +31,15 @@ const IMAGE_TYPES = [
  * 上传图片-官方组件
  */
 // eslint-disable-next-line react/prop-types
-export function UploaderPC({layout, className, id, style,title,tips, ...props }) {
+export function UploaderPC({
+  layout,
+  className,
+  id,
+  style,
+  title,
+  tips,
+  ...props
+}) {
   const cls = classNames({
     'weda-ui': true,
     [CLASS_PREFIX]: true,
@@ -40,25 +48,24 @@ export function UploaderPC({layout, className, id, style,title,tips, ...props })
   });
   return (
     <div className={cls} id={id} style={style}>
-        <div className={`${CLASS_PREFIX}__header`}>
-          {title && <div className={`${CLASS_PREFIX}__title`}>{title}</div>}
-          {tips && (
-            <div className={`${CLASS_PREFIX}__description`}>{tips || ''}</div>
-          )}
-        </div>
-        <UploaderPCInner {...props} />
+      <div className={`${CLASS_PREFIX}__header`}>
+        {title && <div className={`${CLASS_PREFIX}__title`}>{title}</div>}
+        {tips && (
+          <div className={`${CLASS_PREFIX}__description`}>{tips || ''}</div>
+        )}
+      </div>
+      <UploaderPCInner {...props} />
     </div>
-);
+  );
 }
 
-
 export function UploaderPCInner(props) {
   let {
     tips = '',
     btnTitle = '上传图片',
     maxUploadCount = 9,
     maxSize = 10,
-    defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
+    value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
     acceptTypes = IMAGE_TYPES,
     uploadPath = 'weda-uploader',
     uploadFileName = 'image',
@@ -67,8 +74,6 @@ export function UploaderPCInner(props) {
     onChange,
   } = props;
 
-
-  
   // 上传中
   const [uploading, setUploading] = React.useState(false);
   //上传进度
@@ -77,13 +82,11 @@ export function UploaderPCInner(props) {
   const [fileIDList, setfileIDList] = React.useState([]);
   const prevValueRef = React.useRef();
   React.useEffect(() => {
-    if(prevValueRef.current !== defaultValue) {
-
+    if (prevValueRef.current !== defaultValue) {
       let initialValue = []
-      .concat(defaultValue)
-      .filter((d) => typeof d === 'string' && d !== '');
+        .concat(defaultValue)
+        .filter((d) => typeof d === 'string' && d !== '');
       if (single) {
-        maxUploadCount = 1;
         initialValue = initialValue[0] ? [initialValue[0]] : [];
       }
       setfileIDList(initialValue);
@@ -164,7 +167,7 @@ export function UploaderPCInner(props) {
   const deleteHandle = (fileID) => {
     setfileIDList((list) => list.filter((d) => d !== fileID));
   };
-  
+
   // 转换后的属性
   const extraProps = {};
   extraProps['accept'] =
@@ -176,42 +179,52 @@ export function UploaderPCInner(props) {
 
   return (
     <ConfigProvider classPrefix="wedatea2td">
-        <div className="_weda-fn-upload-result">
-          {fileIDList.map((d) => (
-            <div className="_weda-fn-upload-result__item" key={d}>
-              <TcbImage fileID={d} />
-              <div className="_weda-fn-upload-result__op">
-                <Button
-                  onClick={() => deleteHandle(d)}
-                  className={`${CLASS_PREFIX}__btn`}
-                  >
-                  删除
-                </Button>
-              </div>
+      <div className="_weda-fn-upload-result">
+        {fileIDList.map((d) => (
+          <div className="_weda-fn-upload-result__item" key={d}>
+            <TcbImage fileID={d} />
+            <div className="_weda-fn-upload-result__op">
+              <Button
+                onClick={() => deleteHandle(d)}
+                className={`${CLASS_PREFIX}__btn`}
+              >
+                删除
+              </Button>
             </div>
-          ))}
-          {uploading && (
-            <div className="_weda-fn-upload-result__item">
-              <div className="_weda-fn-upload-result__status" key="_place_image">
-                <Icon type="loading" />
-                {!!progress && <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">上传{progress}%...</span>}
-              </div>
+          </div>
+        ))}
+        {uploading && (
+          <div className="_weda-fn-upload-result__item">
+            <div className="_weda-fn-upload-result__status" key="_place_image">
+              <Icon type="loading" />
+              {!!progress && (
+                <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
+                  上传{progress}%...
+                </span>
+              )}
             </div>
-          )}
-          <div className={`${CLASS_PREFIX}__input-box`}>
-          {fileIDList.length < maxUploadCount &&
-          <Upload {...extraProps} beforeUpload={beforeHandle}>
+          </div>
+        )}
+        <div className={`${CLASS_PREFIX}__input-box`}>
+          {(fileIDList.length < maxUploadCount ||
+            (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+            <Upload {...extraProps} beforeUpload={beforeHandle}>
               <li className="_weda-fn-upload-result__item _weda-fn-upload-result__item--upload">
-              <div className="_weda-fn-upload-result__status">
-                <i className="wedatea2td-icon wedatea2td-icon-plus" role="img" aria-label="plus"></i>
-                <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">{btnTitle}</span>
-              </div>
-            </li>
-          </Upload>
-          }
-        </div>
+                <div className="_weda-fn-upload-result__status">
+                  <i
+                    className="wedatea2td-icon wedatea2td-icon-plus"
+                    role="img"
+                    aria-label="plus"
+                  ></i>
+                  <span className="wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset">
+                    {btnTitle}
+                  </span>
+                </div>
+              </li>
+            </Upload>
+          )}
         </div>
-        
+      </div>
     </ConfigProvider>
   );
 }
@@ -229,7 +242,7 @@ export const TcbImage = (props) => {
         const _src = await getTempFileURL(fileID);
         _src ? setSrc(_src) : setIsError(true);
       } catch (e) {
-        message.error('图片加载失败');
+        message.error({ content: '图片加载失败' });
       }
     };
     isCloudFileID(fileID) ? getSrc() : setSrc(fileID);
@@ -278,16 +291,16 @@ UploaderPCInner.propTypes = {
   uploadFileName: PropTypes.string, // 上传文件名称
   single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
   events: PropTypes.objectOf(PropTypes.func), // 事件
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
   onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
   style: PropTypes.object,
   id: PropTypes.string,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
 
 TcbImage.propTypes = {
   fileID: PropTypes.string, // 云存储id
   isZoom: PropTypes.bool, // 是否点击放大
   onError: PropTypes.func, // 图片显示错误事件
-};
+};

package/src/web/components/image/image.jsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { usePlatform } from '../../utils/platform';
 import { ConfigProvider, ImagePreview } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { useGesture } from '@use-gesture/react';
 
 ImageInner.propTypes = {
   objectFit: PropTypes.string,
@@ -11,17 +12,21 @@ ImageInner.propTypes = {
   src: PropTypes.string,
   alt: PropTypes.string,
   lazyLoad: PropTypes.bool,
+  isError: PropTypes.bool,
   setIsError: PropTypes.func,
   maskClosable: PropTypes.bool,
   imgPreview: PropTypes.bool
 };
 
+const failImgBase64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=';
+
 export function ImageInner({
   objectFit,
   style,
   className,
   alt,
   src,
+  isError,
   setIsError,
   events,
   lazyLoad,
@@ -35,7 +40,55 @@ export function ImageInner({
       setImgShow(false);
     }
   };
-  if(platform === 'h5' || !imgPreview) {
+
+  const [showHeight, setShowHeight] = React.useState(0);
+  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 [previewScale, setPreviewScale] = React.useState(1);
+  React.useEffect(() => {
+    // 防止触发浏览器的放大缩小
+    const handler = e => e.preventDefault();
+    document.addEventListener('gesturestart', handler);
+    document.addEventListener('gesturechange', handler);
+    return () => {
+      document.removeEventListener('gesturestart', handler);
+      document.removeEventListener('gesturechange', handler);
+    };
+  }, []);
+
+  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);
+      
+    },
+  }, {
+    drag: {
+      delay: true,
+      preventDefault: true,
+    },
+    pinch: {
+      scaleBounds: {min: 0.6, max: 5},
+      pointer: {
+        touch: true
+      }
+    }
+  });
+
+  if(platform === 'h5' || !imgPreview || isError) {
     return (
       <>
         <img
@@ -47,6 +100,11 @@ export function ImageInner({
           alt={alt}
           src={src}
           onLoad={(e) => {
+            /* @type {HTMLImageElement} */
+            const img = e.target;
+            const {naturalHeight, naturalWidth} = img;
+            realHeight.current = naturalHeight;
+            realWidth.current = naturalWidth;
             setIsError(false);
             events.load && events.load({}, { originEvent: e });
           }}
@@ -56,7 +114,16 @@ export function ImageInner({
           }}
           onClick={
             () => {
-              if(imgPreview) {
+              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);
               }
             }
@@ -68,8 +135,15 @@ export function ImageInner({
             <div onClick={() => setImgShow(false)} className="weda-img-modal-close-btn">
               <i className="weui-icon-clear" style={{color: 'white'}}></i>
             </div>
-            <div className="weda-img-preview" style={{
-              backgroundImage: `url(${src})`
+            
+            {/* 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>
         }

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

@@ -23,6 +23,7 @@
   right: 0;
   top: 0;
   bottom: 0;
+  z-index: 150;
 }
 
 .weda-img-modal-close-btn {
@@ -33,3 +34,19 @@
   z-index: 99;
   color: white;
 }
+
+.weda-image.weda-image-error {
+  position: relative;
+  display: inline-block;
+}
+
+.weda-image:not([src]):before,
+.weda-image-error::before {
+    content: '';
+    background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}

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

@@ -54,6 +54,7 @@ export default function Image({
       className={cls}
       alt={alt}
       src={realSrc}
+      isError={isError}
       setIsError={setIsError}
       events={events}
       lazyLoad={lazyLoad}

package/src/web/components/index.js

@@ -1,71 +1,36 @@
 import '../wedatheme/style-package/index.css';
 
-import Button from './button';
-import Markdown from './markdown';
-import Text from './text';
-import Container from './container';
-import Image from './image';
-import Slot from './slot';
-import ScrollView from './scrollView';
-import Swiper from './swiper';
-import Modal from './modal';
-import RichText from './richText';
-import RichTextView from './richTextView';
-import Link from './link';
-import Drawer from './drawer';
-import UploaderView from './uploaderView';
+export { default as Button } from './button';
+export { default as Text } from './text';
+export { default as Container } from './container';
+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 Modal } from './modal';
+export { default as RichText } from './richText';
+export { default as RichTextView } from './richTextView';
+export { default as Link } from './link';
+export { default as Drawer } from './drawer';
+export { default as UploaderView } from './uploaderView';
 // picker
-import Picker from './picker/picker';
-import DatePicker from './picker/datePicker';
-import TimePicker from './picker/timePicker';
+export { default as Picker } from './picker/picker';
+export { default as DatePicker } from './picker/datePicker';
+export { default as TimePicker } from './picker/timePicker';
 // form
-import Form from './form/form';
-import Input from './form/input';
-import Textarea from './form/textarea';
-import Checkbox from './form/checkbox';
-import Radio from './form/radio';
-import Switch from './form/switch';
-import Select from './form/select';
-import Uploader from './form/uploader';
-import Tips from './form/tips';
-import Tabs from './tabs';
-import EnumSelect from './form/enumSelect';
-// import MapPosition from './form/position';
+export { default as Form } from './form/form';
+export { default as Input } from './form/input';
+export { default as Textarea } from './form/textarea';
+export { default as Checkbox } from './form/checkbox';
+export { default as Radio } from './form/radio';
+export { default as Switch } from './form/switch';
+export { default as Select } from './form/select';
+export { default as Uploader } from './form/uploader';
+export { default as Tips } from './form/tips';
+export { default as Tabs } from './tabs';
+export { default as EnumSelect } from './form/enumSelect';
 // open
 // import Auth from './auth';
 
 import 'weui/dist/style/weui.css';
 import '../weda-ui.css';
-
-export default {
-  Button,
-  Markdown,
-  Text,
-  Container,
-  Image,
-  Picker,
-  DatePicker,
-  TimePicker,
-  Input,
-  Textarea,
-  Radio,
-  Checkbox,
-  Switch,
-  Form,
-  Select,
-  // Auth,
-  Slot,
-  Uploader,
-  ScrollView,
-  Swiper,
-  Tips,
-  Modal,
-  RichText,
-  RichTextView,
-  UploaderView,
-  Link,
-  Drawer,
-  Tabs,
-  EnumSelect,
-  // MapPosition,
-};

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

@@ -1,13 +1,3 @@
-.weda-RichTextView {
-  width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .weda-RichTextView {
-    height: 100px;
-  }
-}
-
 .weda-RichTextView blockquote {
   margin: 0 0 10px;
   padding: 15px 20px;

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

@@ -86,15 +86,4 @@ RichTextView.propTypes = {
    */
   style: PropTypes.object,
   id: PropTypes.string
-};
-
-/**
- * 默认属性
- */
-RichTextView.defaultProps = {
-  value: '',
-  style: {
-    width: '100%',
-    height: '100%',
-  },
-};
+};

package/src/web/components/tabs/{index.js → index.jsx}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
-import TabsH5 from './tabsH5';
-import TabsPc from './tabsPc';
+import TabsH5 from './tabs.h5';
+import TabsPc from './tabs.pc';
 
 export default function Tabs(props) {
   const platform = usePlatform();
 
   return platform === 'h5' ? <TabsH5 {...props} /> : <TabsPc {...props} />;
-}
+}

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

@@ -1,58 +1,19 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import * as PropTypes from 'prop-types';
 
 import './index.css';
 import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/useSyncValue';
 
 export default function TabsH5({
   tabs,
+  selectedIndex,
   events,
   className,
-  panel1,
-  panel2,
-  panel3,
-  panel4,
-  panel5,
-  panel6,
-  panel7,
-  panel8,
-  panel9,
-  panel10,
-  panel11,
-  panel12,
-  panel13,
-  panel14,
-  panel15,
-  panel16,
-  panel17,
-  panel18,
-  panel19,
-  panel20,
-  style
+  style,
+  ...restProps
 }) {
-  const cachePanel = {
-    panel1,
-    panel2,
-    panel3,
-    panel4,
-    panel5,
-    panel6,
-    panel7,
-    panel8,
-    panel9,
-    panel10,
-    panel11,
-    panel12,
-    panel13,
-    panel14,
-    panel15,
-    panel16,
-    panel17,
-    panel18,
-    panel19,
-    panel20
-  };
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useSyncValue(selectedIndex);
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
     return {
@@ -81,7 +42,7 @@ export default function TabsH5({
               key={name || index}
               onClick={(event) => {
                 setCurrentIndex(index);
-                events && events.change(tabs[index], { event });
+                events && events.change({id: index, label: title}, { event });
               }}
             >
             {title}
@@ -98,7 +59,7 @@ export default function TabsH5({
       <div className={classNames({
         'weda-tabs__panel': true,
       })}>
-        {cachePanel[`panel${currentIndex + 1}`]}
+        {restProps[`panel${currentIndex + 1}`]}
       </div>
     </div>
   );
@@ -109,6 +70,7 @@ 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,