build: resolve build errors

Tencent · Jun 29, 2022 · b62056e · b62056e
1 parent e3e36bb
commit b62056e
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 28 deletions.
diff --git a/src/_util/renderToContainer.ts b/src/_util/renderToContainer.ts
@@ -8,7 +8,7 @@ export type GetContainer = HTMLElement | (() => HTMLElement) | null;
 export function renderToContainer(getContainer: GetContainer, node: ReactElement) {
   if (canUseDom && getContainer) {
     const container = resolveContainer(getContainer);
-    return createPortal(node, container) as ReactPortal;
+    return createPortal(node, container as Element) as ReactPortal;
   }
   return node;
 }
diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -32,7 +32,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
   const { classPrefix } = useContext(ConfigContext);
   const name = useMemo(() => `${classPrefix}-badge`, [classPrefix]);
   const hasChildren = useMemo(() => !!(content || children), [content, children]);
-  const isRibbon = useMemo(() => !dot && shape === 'ribbon', [shape, dot]);
+  // const isRibbon = useMemo(() => !dot && shape === 'ribbon', [shape, dot]);
 
   // 徽标自定义样式
   const computedStyle = useMemo(() => {
@@ -49,7 +49,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
   // 徽标外层样式类
   const badgeClasses = cls({
     [`${name}`]: true,
-    [`${name}__ribbon--outer`]: isRibbon,
+    // [`${name}__ribbon--outer`]: isRibbon,
   });
 
   // 徽标内层样式类

diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
@@ -45,7 +45,7 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
     maxContentRow = 5,
     icon,
     contentDisabled,
-    borderless = false,
+    // borderless = false,
   } = props;
   const [internalChecked, setInternalChecked] = useDefault(checked, defaultChecked, onChange);
 
@@ -136,7 +136,8 @@ const Checkbox = forwardRef((_props: CheckBoxProps, ref: Ref<HTMLInputElement>)
           </span>}
         </div>
         {/* 下边框 */}
-        { !borderless && <div className={`${classPrefix}-checkbox__border ${classPrefix}-checkbox__border--${align}`}></div>}
+        {/* { !borderless && <div className={`${classPrefix}-checkbox__border ${classPrefix}-checkbox__border--${align}`}></div>} */}
+        { <div className={`${classPrefix}-checkbox__border ${classPrefix}-checkbox__border--${align}`}></div> }
       </div>
     </>
   );

diff --git a/src/checkbox/CheckboxGroup.tsx b/src/checkbox/CheckboxGroup.tsx
@@ -114,7 +114,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
             checkedSet.delete(checkValue);
           }
 
-          setInternalValue(Array.from(checkedSet), { e });
+          setInternalValue(Array.from(checkedSet), { e, current: e.target, type: checked ? 'check' : 'uncheck' });
         },
       };
     },
@@ -144,9 +144,9 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
                     const vs = v as CheckboxOptionObj;
                     // CheckAll 的 checkBox 不存在 value,故用 checkAll_index 来保证尽量不和用户的 value 冲突.
                     return vs.checkAll ? (
-                      <Checkbox {...v} key={`checkAll_${index}`} indeterminate={indeterminate} />
+                      <Checkbox {...v as Object} key={`checkAll_${index}`} indeterminate={indeterminate} />
                     ) : (
-                      <Checkbox {...v} key={vs.value} disabled={vs.disabled || disabled} />
+                      <Checkbox {...v as Object} key={vs.value} disabled={vs.disabled || disabled} />
                     );
                   }
                   default:

diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
@@ -81,7 +81,6 @@ export interface TdCheckboxProps {
    * 多选框的值
    */
   value?: string | number;
-  borderless: boolean;
   /**
    * 值变化时触发
    */

diff --git a/src/image/Image.tsx b/src/image/Image.tsx
@@ -5,7 +5,7 @@ import { useInViewport } from 'ahooks';
 import useConfig from '../_util/useConfig';
 import { TdImageProps } from './type';
 
-export interface ImageProps extends TdImageProps, React.ImgHTMLAttributes<HTMLImageElement> {}
+export interface ImageProps extends TdImageProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading' | 'onError' | 'onLoad'> {}
 
 const Image: FC<ImageProps> = React.memo((props) => {
   const {

diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
@@ -45,7 +45,7 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
     maxLabelRow = 3,
     name,
     value,
-    borderless = false,
+    // borderless = false,
     onChange,
   } = props;
 
@@ -143,7 +143,8 @@ const Radio = forwardRef((_props: RadioProps, ref: Ref<HTMLDivElement>) => {
         </span>}
       </span>
       {/* 下边框 */}
-      { !borderless && <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>}
+      { <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>}
+      {/* { !borderless && <div className={`${classPrefix}__border ${classPrefix}__border--${align}`}></div>} */}
       <div ></div>
     </div>
   );

diff --git a/src/radio/type.ts b/src/radio/type.ts
@@ -70,7 +70,6 @@ export interface TdRadioProps {
    * 单选按钮的值
    */
   value?: RadioValue;
-  borderless: boolean;
   /**
    * 选中状态变化时触发
    */

diff --git a/src/swiper/Swiper.tsx b/src/swiper/Swiper.tsx
@@ -6,12 +6,13 @@ import { StyledProps } from '../common';
 import noop from '../_util/noop';
 import useConfig from '../_util/useConfig';
 import SwiperItem from './SwiperItem';
+import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 
 export interface SwiperProps extends TdSwiperProps, StyledProps {
   children?: React.ReactNode;
 }
 
-const Swiper: React.FC<SwiperProps> = (props) => {
+const Swiper = forwardRefWithStatics((props: SwiperProps) => {
   const {
     // animation = 'slide', // 轮播切换动画效果类型（暂时没用）
     autoplay = true, // 是否自动播放
@@ -182,7 +183,7 @@ const Swiper: React.FC<SwiperProps> = (props) => {
    * 触摸事件处理方法
    */
   // 触摸滑动事件 - 开始
-  const handleTouchStart = (e: TouchEvent) => {
+  const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
     isHovering.current = true;
     clearTimer();
@@ -195,7 +196,7 @@ const Swiper: React.FC<SwiperProps> = (props) => {
 
   // 触摸滑动事件 - 滑动中
   const handleTouchMove = useCallback(
-    (e: TouchEvent) => {
+    (e: React.TouchEvent) => {
       e.stopPropagation();
 
       if (moveStartSite) {
@@ -224,7 +225,7 @@ const Swiper: React.FC<SwiperProps> = (props) => {
   );
 
   // 触摸滑动事件 - 结束
-  const handleTouchEnd = (e: TouchEvent) => {
+  const handleTouchEnd = (e: React.TouchEvent) => {
     e.stopPropagation();
     if (touchMoveDistance / swiperOuterWidth <= -0.3) {
       // swiperTo(currentIndex + 1, { source: 'touch' });
@@ -309,13 +310,13 @@ const Swiper: React.FC<SwiperProps> = (props) => {
         ref={wrapperRef}
         className={`${classPrefix}-swiper__container`}
         style={wrapperStyle}
-        onTouchStart={(e) => handleTouchStart(e)}
-        onTouchMove={(e) => handleTouchMove(e)}
-        onTouchEnd={(e) => handleTouchEnd(e)}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
       >
         {swiperItemList}
       </div>
-      {navigation && 'minShowNum' in navigation && childrenLength < navigation.minShowNum ? null : (
+      {navigation && childrenLength < navigation?.minShowNum ? null : (
         <>
           {/* 渲染底部导航 */}
           {navigation && 'type' in navigation && (
@@ -356,9 +357,10 @@ const Swiper: React.FC<SwiperProps> = (props) => {
       )}
     </div>
   );
-};
+}, {
+  SwiperItem
+});
 
-Swiper.SwiperItem = SwiperItem;
 Swiper.displayName = 'Swiper';
 
 export default Swiper;
diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md
@@ -17,7 +17,7 @@ duration | Number | 300 | 滑动动画时长 | N
 height | Number | - | 当使用垂直方向滚动时的高度 | N
 interval | Number | 5000 | 轮播间隔时间 | N
 loop | Boolean | true | 是否循环播放 | N
-navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
+navigation | Object | - | 【TNode类型暂不支持】导航器全部配置。TS 类型：`SwiperNavigation | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N
 onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'touch' | ''`<br/> | N
 
 ### SwiperNavigation

diff --git a/src/swiper/type.ts b/src/swiper/type.ts
@@ -54,7 +54,7 @@ export interface TdSwiperProps {
   /**
    * 导航器全部配置
    */
-  navigation?: SwiperNavigation | TNode;
+  navigation?: SwiperNavigation;
   /**
    * 轮播切换时触发
    */

diff --git a/src/tag/CheckTag.tsx b/src/tag/CheckTag.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, Ref } from 'react';
 import classNames from 'classnames';
 import { Icon } from 'tdesign-icons-react';
 import useConfig from '../_util/useConfig';
@@ -12,7 +12,7 @@ export interface TagCheckProps extends TdCheckTagProps {
 }
 
 const TagCheck: React.FC<TagCheckProps> = React.memo(
-  forwardRef((props, ref) => {
+  forwardRef((props, ref: Ref<HTMLButtonElement>) => {
     const {
       checked = undefined,
       defaultChecked = undefined,

diff --git a/src/toast/hooks/useMessageCssTransition.ts b/src/toast/hooks/useMessageCssTransition.ts
@@ -34,7 +34,7 @@ const useMessageCssTransition = ({ contentRef, classPrefix, el }: UseMessageCssT
           contentEle.style.display = 'none';
         }
         // 删除createElement创建的div元素
-        if (el) {
+        if (el instanceof Element) {
           const unmountResult = ReactDOM.unmountComponentAtNode(el);
           if (unmountResult) {
             (el as any).parentNode.removeChild(el);