@cloudbase/weda-ui 2.0.11 → 2.0.12

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

@@ -2,10 +2,14 @@ import * as React from 'react';
 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 {
+  useDebouncedCallback,
+  useEventListener,
+  useResizeObserver,
+} from '@react-hookz/web';
 
 import './index.css';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   /**
@@ -180,7 +184,16 @@ export default function Swiper({
         >
           {itemsClone[itemCount - 1]}
           {React.Children.map(children, (x, i) => {
-            return <SwiperItem height={height} setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
+            return (
+              <SwiperItem
+                height={height}
+                setHeight={setHeight}
+                currentIndex={currentIndex}
+                index={i}
+              >
+                {x}
+              </SwiperItem>
+            );
           })}
           {itemsClone[0]}
         </Swipe>
@@ -234,21 +247,26 @@ export default function Swiper({
 }
 
 const SwiperItem: React.FC<{
-  setHeight: React.Dispatch<React.SetStateAction<number>>,
-  currentIndex: number,
-  index: number,
-  height: number,
-  children?: React.ReactNode
-}> = ({height, setHeight, children, currentIndex, index}) => {
+  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完成后再设置高度
+  const syncHeight = useDebouncedCallback(
+    (e) => {
+      setHeight(e.contentRect.height);
+    },
+    [setHeight],
+    500,
+    2000
+  ); // 必须debounce延迟，让resize完成后再设置高度
 
   // 因为有loading 所以得用resizeobserver
   // @ts-ignore
   useResizeObserver(firstChildRef, (e) => {
-    if(currentIndex === index) {
+    if (currentIndex === index) {
       syncHeight(e);
     }
   });
@@ -263,11 +281,11 @@ const SwiperItem: React.FC<{
       <div
         ref={firstChildRef}
         style={{
-          height: height > 0 ? '100%' : 'auto'
+          height: height > 0 ? '100%' : 'auto',
         }}
       >
         {children}
       </div>
     </div>
   );
-};
+};

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

@@ -62,4 +62,4 @@
   content: '';
   width: 100%;
   border-top: 2px solid #0052d9;
-}
+}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import loadable from '@loadable/component';
-import { CommonPropsType } from '../../types';
+// import loadable from '@loadable/component';
+import type { CommonPropsType } from '../../types';
 import { usePlatform } from '../../utils/platform';
-import { fallback } from '../../utils/loading-fallback';
+// import { fallback } from '../../utils/loading-fallback';
 import TabsH5 from './tabs.h5';
 import TabsPc from './tabs.pc';
 
@@ -17,9 +17,9 @@ export interface PropsType extends CommonPropsType {
     // @deprecated
     name?: string;
   }[];
-  selectedIndex: number|string
-  isMultipleSlot: boolean
-  [key: string]: React.ReactNode
+  selectedIndex: number | string;
+  isMultipleSlot: boolean;
+  [key: string]: React.ReactNode;
   // [panel: `panel${number}`]: React.ReactNode; // require typescript@4.4
 }
 

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

@@ -3,8 +3,12 @@ import React, { useEffect, useMemo } from 'react';
 import './index.css';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
-import {PropsType} from './index';
-import { useCustomCompareEffect, usePrevious, useSyncedRef } from '@react-hookz/web';
+import { PropsType } from './index';
+import {
+  useCustomCompareEffect,
+  usePrevious,
+  useSyncedRef,
+} from '@react-hookz/web';
 import isObjectEqual from '../../utils/isObjectEqual';
 
 export default function TabsH5({
@@ -17,27 +21,28 @@ export default function TabsH5({
   ...restProps
 }: PropsType) {
   const [currentIndex, setCurrentIndex] = useSyncValue(
-    typeof selectedIndex === 'string' ?
-    parseInt(selectedIndex) : selectedIndex
+    typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex
   );
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
     return {
-      width: `${1 / length * 100}%`,
-      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`
+      width: `${(1 / length) * 100}%`,
+      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`,
     };
   }, [tabs, currentIndex]);
 
   const eventRef = useSyncedRef(events);
-  useCustomCompareEffect(() => {
-    eventRef.current.change(
-      {
+  useCustomCompareEffect(
+    () => {
+      eventRef.current.change({
         id: currentIndex,
         label: tabs[currentIndex]?.title,
         value: tabs[currentIndex]?.value,
-      },
-    );
-  }, [currentIndex, tabs], isObjectEqual);
+      });
+    },
+    [currentIndex, tabs],
+    isObjectEqual
+  );
   return (
     <div
       data-testid="tabs"

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

@@ -1,4 +1,8 @@
-import { useCustomCompareEffect, useMountEffect, useSyncedRef } from '@react-hookz/web';
+import {
+  useCustomCompareEffect,
+  useMountEffect,
+  useSyncedRef,
+} from '@react-hookz/web';
 import * as React from 'react';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
@@ -6,7 +10,6 @@ import isObjectEqual from '../../utils/isObjectEqual';
 import { useSyncValue } from '../../utils/useSyncValue';
 import { PropsType } from './index';
 
-
 export default function TabsPc({
   tabs = [],
   selectedIndex,
@@ -16,48 +19,56 @@ export default function TabsPc({
   isMultipleSlot = true,
   ...restProps
 }: PropsType) {
-
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
   const _tabs = React.useMemo(() => {
-    return Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
-      return {
-        id: index.toString(),
-        label: item.title,
-        value: item.value
-      };
-    });
+    return (
+      Array.isArray(tabs) &&
+      tabs.length &&
+      tabs.map((item, index) => {
+        return {
+          id: index.toString(),
+          label: item.title,
+          value: item.value,
+        };
+      })
+    );
   }, [tabs]);
 
   const eventsRef = useSyncedRef(events);
-  useCustomCompareEffect(() => {
-    eventsRef.current && eventsRef.current.change({
-      id: _tabs[activeIndex]?.id,
-      label: _tabs[activeIndex]?.label,
-      value: _tabs[activeIndex]?.value,
-    });
-  }, [activeIndex, _tabs], isObjectEqual);
+  useCustomCompareEffect(
+    () => {
+      eventsRef.current &&
+        eventsRef.current.change({
+          id: _tabs[activeIndex]?.id,
+          label: _tabs[activeIndex]?.label,
+          value: _tabs[activeIndex]?.value,
+        });
+    },
+    [activeIndex, _tabs],
+    isObjectEqual
+  );
   const onActive = (e) => {
     setActiveIndex(e.id);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
-    <TeaTabs  style={style} tabs={_tabs} activeId={String(activeIndex)} onActive={onActive} className={classNames(
-      "weda-tabs_pc",
-      {
-        [className]: className
-      }
-      )}>
-      {_tabs?.map(
-        (item, index) => (
-          <TabPanel
-          key={item.id}
-          id={item.id}
-          >
-            {isMultipleSlot ? restProps[`panel${index + 1}`] : restProps['panel1']}
+      <TeaTabs
+        style={style}
+        tabs={_tabs}
+        activeId={String(activeIndex)}
+        onActive={onActive}
+        className={classNames('weda-tabs_pc', {
+          [className]: className,
+        })}
+      >
+        {_tabs?.map((item, index) => (
+          <TabPanel key={item.id} id={item.id}>
+            {isMultipleSlot
+              ? restProps[`panel${index + 1}`]
+              : restProps['panel1']}
           </TabPanel>
-        )
-        )}
-    </TeaTabs>
-  </ConfigProvider>
+        ))}
+      </TeaTabs>
+    </ConfigProvider>
   );
 }

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

@@ -23,4 +23,4 @@
 }
 .weda-text.level_6 {
   font-size: 24px !important;
-}
+}

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

@@ -0,0 +1,42 @@
+.weda-ui_video {
+  height: 500px;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+}
+
+.weda-ui_video-h5 {
+  height: 250px;
+}
+
+.weda-ui_video_control .vjs-control-bar {
+  background: none !important;
+}
+
+.weda-ui_video__video-wrap {
+  padding-top: 0 !important;
+  height: 100% !important;
+}
+
+.vjs-paused .vjs-big-play-button,
+.vjs-paused.vjs-has-started .vjs-big-play-button {
+  display: block;
+}
+
+.vjs-slider-vertical .vjs-volume-level:before {
+  left: -0.5em !important;
+}
+
+.weda-ui_video__video-loading {
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}

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

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import './index.css';
+import { usePlatform, isCloudFileID } from '../../utils/platform';
+import { getTempFileURL } from '../../utils/tcb';
+import classNames from '../../utils/classnames';
+import type { CommonPropsType } from '../../types';
+import { ConfigProvider, Icon } from 'tea-component';
+
+const { useEffect, useRef, useMemo, useState } = React;
+export interface VideoProps {
+  videoDataSource: string;
+  posterImage: string;
+  autoPlay: boolean;
+  loopPlay: boolean;
+  mutePlay: boolean;
+  controlBarStatus: boolean;
+  startTime: number;
+  endTime: number;
+}
+
+export type WedaVideoProps = Partial<CommonPropsType & VideoProps>;
+
+const MimetypesKind = {
+  opus: 'video/ogg',
+  ogv: 'video/ogg',
+  mp4: 'video/mp4',
+  mov: 'video/mp4',
+  m4v: 'video/mp4',
+  mkv: 'video/x-matroska',
+  m4a: 'audio/mp4',
+  mp3: 'audio/mpeg',
+  aac: 'audio/aac',
+  caf: 'audio/x-caf',
+  flac: 'audio/flac',
+  oga: 'audio/ogg',
+  wav: 'audio/wav',
+  m3u8: 'application/x-mpegURL',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp',
+};
+
+const CLASS_PREFIX = 'weda-ui_video';
+
+const WedaVideo: React.FC<WedaVideoProps> = ({
+  className,
+  style,
+  id,
+  videoDataSource,
+  posterImage,
+  autoPlay,
+  loopPlay,
+  mutePlay,
+  controlBarStatus,
+  startTime,
+  endTime,
+}) => {
+  const platform = usePlatform();
+  const cls = classNames({
+    [className]: className,
+    [CLASS_PREFIX]: true,
+    [`${CLASS_PREFIX}-h5`]: platform === 'h5',
+    'weda-ui_video_control': !controlBarStatus,
+  });
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const playerRef = useRef(null);
+
+  const [realSrc, setRealSrc] = useState(null);
+  const [videoModalStatus, setVideoModalStatus] = useState(true);
+  const [videoErrMsg, setVideoErrMsg] = useState('');
+
+  const videoType = useMemo(() => {
+    return realSrc?.substring(realSrc.lastIndexOf('.') + 1).toLowerCase();
+  }, [realSrc]);
+
+  useEffect(() => {
+    async function getCloudUrl(fileID) {
+      if (isCloudFileID(fileID)) {
+        try {
+          const fileSrc = await getTempFileURL(fileID);
+          setVideoErrMsg('');
+          setRealSrc(fileSrc);
+        } catch (err) {
+          console.error('getCloudUrl error', err);
+          setVideoErrMsg('获取云文件资源失败');
+          setRealSrc('');
+        }
+      } else {
+        setRealSrc(videoDataSource);
+      }
+    }
+    getCloudUrl(videoDataSource);
+  }, [videoDataSource]);
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!playerRef.current) {
+      const videoOptions = {
+        poster: posterImage,
+        autoplay: autoPlay, //自动播放
+        bigPlayButton: true, //全屏按钮
+        loop: loopPlay, //循环播放
+        muted: mutePlay, // 是否静音
+        controls: controlBarStatus, //显示控制栏
+        language: 'zh-CN', // 设置语言
+        fluid: true, // 自适应宽高
+        controlBar: {
+          children: [
+            { name: 'playToggle' }, // 底部暂停按钮
+            { name: 'currentTimeDisplay' }, // 当前已播放时间
+            { name: 'progressControl' }, // 进度条
+            { name: 'durationDisplay' }, // 总时间
+            {
+              name: 'volumePanel', // 音量控制
+              inline: false, // 不使用水平方式
+            },
+            { name: 'FullscreenToggle' }, // 全屏按钮
+          ],
+        },
+        sources: [
+          {
+            src: realSrc || 'no',
+            type: MimetypesKind[videoType] || 'video/mp4',
+          },
+        ],
+      };
+      playerRef.current = videojs(videoElement, videoOptions, () => {
+        players.currentTime(startTime); //指定播放时间
+        setVideoModalStatus(false);
+        setVideoErrMsg('');
+      });
+      const players = playerRef.current;
+      // 指定结束时间
+      if (endTime) {
+        players.on('timeupdate', () => {
+          //播放时间改变
+          const currentTime = players.currentTime();
+          if (startTime >= endTime) return;
+          if (currentTime > endTime) {
+            players.currentTime(startTime);
+            setTimeout(() => {
+              !loopPlay && players.pause();
+            }, 200);
+          }
+        });
+      }
+      players.on('canplaythrough', function () {
+        setVideoModalStatus(false);
+        setVideoErrMsg('');
+      });
+      players.on('error', function () {
+        setVideoErrMsg(
+          `视频资源加载出错，错误信息：${players?.error().message}`
+        );
+        setVideoModalStatus(true);
+      });
+    }
+  }, [videoRef]);
+
+  useEffect(() => {
+    // 切换视频源
+    if (playerRef.current && videoType) {
+      let srcOption = [
+        {
+          src: realSrc,
+          type: MimetypesKind[videoType],
+        },
+      ];
+      playerRef.current.src(srcOption);
+      playerRef.current.load(realSrc);
+    }
+  }, [realSrc]);
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div className={cls} id={id} style={style} data-testid="wedaVideo">
+        <div data-vjs-player>
+          <video
+            ref={videoRef}
+            className={`video-js vjs-big-play-centered ${CLASS_PREFIX}__video-wrap`}
+          />
+        </div>
+        {videoModalStatus && (
+          <div className={`${CLASS_PREFIX}__video-loading`}>
+            {realSrc === null ? <Icon type="loading" /> : videoErrMsg}
+          </div>
+        )}
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default WedaVideo;

package/src/web/utils/constant.ts

@@ -4,7 +4,8 @@ export const TitleType = {
   NONE: 'none',
 } as const;
 
-export const LOAD_ERR_IMG_BASE64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=' as const;
+export const LOAD_ERR_IMG_BASE64 =
+  'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=' as const;
 
 export const REL_DICT = {
   equal: 'eq', // 等于

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

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

package/src/web/utils/lodash.ts

@@ -1,2 +1,2 @@
 // https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L11973
-export const isNil = (val: any): val is (null | undefined) => val == null;
+export const isNil = (val: any): val is null | undefined => val == null;

package/src/web/utils/useSetState.ts

@@ -6,9 +6,13 @@ export const useSetState = <T extends object>(
   const [state, set] = useState<T>(initialState);
   const setState = useCallback((patch) => {
     set((prevState) =>
-      Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch)
+      Object.assign(
+        {},
+        prevState,
+        patch instanceof Function ? patch(prevState) : patch
+      )
     );
   }, []);
 
   return [state, setState];
-};
+};

package/src/web/weda-ui.css

@@ -73,3 +73,16 @@ body .weda-ui {
 .weui-picker a:link:hover {
   text-decoration: none;
 }
+
+.wedatea2td-form.wedatea2td-form--vertical .wedatea2td-form__label label {
+  width: auto; /* vertcal 情况下label不固定宽度 */
+}
+
+.weda-ui .weui-btn_input-clear {
+  visibility: hidden; /* visibilty 防止居中而且宽度auto时，出现输入时宽度抖动 */
+  display: inline;
+}
+.weui-input:focus:not(:placeholder-shown) + .weui-btn_input-clear {
+  visibility: visible;
+  display: inline;
+}