feat(Progress): complete refactoring (#387)

* feat(Progress): complete refactoring * feat(Progress): update demo * test: add test unit * fix: fir cr * fix: update api docs
Tencent · Jul 23, 2024 · d4b7c55 · d4b7c55
1 parent 9a1957c
commit d4b7c55
Show file tree

Hide file tree

Showing 27 changed files with 584 additions and 223 deletions.
diff --git a/site/mobile/components/DemoBlock.jsx b/site/mobile/components/DemoBlock.jsx
@@ -1,14 +1,28 @@
 import React from 'react';
+import classNames from 'classnames';
 import './style/index.less';
 
 const TDemoBlock = (prop) => {
-  const { children, title, summary } = prop;
+  const { title, summary, padding, children } = prop;
+
   return (
     <>
-      <div className="tdesign-mobile-demo-block">
-        {title && <h2 className="tdesign-mobile-demo-block__title">{title}</h2>}
-        {summary && <p className="tdesign-mobile-demo-block__summary">{summary}</p>}
-        {children}
+      <div className={classNames('tdesign-mobile-demo-block', { 'tdesign-mobile-demo-block_subtitle': !title })}>
+        {(title || summary) && (
+          <div className="tdesign-mobile-demo-block__header">
+            {title && <h2 className="tdesign-mobile-demo-block__title">{title}</h2>}
+            {summary && (
+              <p
+                className={classNames('tdesign-mobile-demo-block__summary', {
+                  'tdesign-mobile-demo-block_subtitle': !title,
+                })}
+              >
+                {summary}
+              </p>
+            )}
+          </div>
+        )}
+        <div className={classNames('tdesign-mobile-demo-block__slot', { 'with-padding': padding })}>{children}</div>
       </div>
     </>
   );

diff --git a/site/mobile/main.jsx b/site/mobile/main.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import '../style/mobile/index.less'
+import '../style/mobile/index.less';
 
 import '../../src/_common/style/mobile/_reset.less';
 import '../../src/_common/style/mobile/index.less';

diff --git a/site/style/mobile/demo.less b/site/style/mobile/demo.less
@@ -1,46 +1,77 @@
 .tdesign-mobile-demo {
-  background-color: #F6F6F6;
-  font-family: "PingFang SC";
+  background-color: #f6f6f6;
+  font-family: 'PingFang SC';
+  padding-bottom: 28px;
+  box-sizing: border-box;
 
-  &-header {
-    &__title {
-      padding: 24px 16px 8px 16px;
-      opacity: 1;
-      color: rgba(0, 0, 0, 0.9);
-      font-size: 20px;
-      font-weight: 700;
-      line-height: 28px;
-    }
-
-    &__summary {
-      opacity: 1;
-      color: rgba(0, 0, 0, 0.4);
-      font-size: 12px;
-      line-height: 22px;
-      padding: 0 16px;
-    }
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    padding: 24px 16px 0;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  .summary {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    margin: 8px 16px 0;
+    line-height: 22px;
   }
-
 
   &-block {
-    width: 100%;
+    margin: 32px 0 0;
 
-    &__title {
-      padding: 24px 16px 0;
-      font-size: 16px;
-      font-weight: 700;
+    &__header {
+      color: #000;
+      margin: 0 16px;
     }
 
-    &__title + &__summary {
-      padding: 8px 16px 16px;
+    &__title {
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 26px;
     }
 
     &__summary {
-      opacity: 1;
-      color: rgba(0, 0, 0, 0.4);
-      font-size: 12px;
+      margin-top: 8px;
+      font-size: 14px;
+      white-space: pre-line;
+      color: rgba(0, 0, 0, 0.6);
       line-height: 22px;
-      padding: 16px;
     }
+
+    &__slot {
+      margin-top: 16px;
+
+      &.with-padding {
+        margin: 16px 16px 0;
+      }
+    }
+  }
+}
+
+.tdesign-mobile-demo-block_notitle {
+  margin-top: 0px;
+
+  .tdesign-mobile-demo-block_subtitle {
+    margin-top: 24px;
+  }
+}
+
+.tdesign-mobile-demo-header {
+  &__title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    padding: 24px 16px 0;
+    color: rgba(0, 0, 0, 0.9);
+  }
+
+  &__summary {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.6);
+    margin: 8px 16px 0;
+    line-height: 22px;
   }
 }
diff --git a/site/test-coverage.js b/site/test-coverage.js
@@ -1,4 +1,6 @@
 module.exports = {
   button: { statements: '100%', branches: '66.66%', functions: '100%', lines: '100%' },
   configProvider: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  hooks: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+  progress: { statements: '84.37%', branches: '56.75%', functions: '85.71%', lines: '85.48%' },
 };
diff --git a/src/_common b/src/_common
diff --git a/src/progress/utils.ts → src/_util/linearGradient.ts b/src/progress/utils.ts → src/_util/linearGradient.ts
@@ -1,7 +1,7 @@
 export type Gradients = { [percent: string]: string };
 export type FromTo = { from: string; to: string };
 export type LinearGradient = { direction?: string } & (Gradients | FromTo);
-export function getBackgroundColor(color: string | string[] | LinearGradient): string {
+const getBackgroundColor = (color: string | string[] | LinearGradient): string => {
   if (typeof color === 'string') {
     return color;
   }
@@ -15,8 +15,9 @@ export function getBackgroundColor(color: string | string[] | LinearGradient): s
   let keys = Object.keys(rest);
   if (keys.length) {
     keys = keys.sort((a, b) => parseFloat(a.substr(0, a.length - 1)) - parseFloat(b.substr(0, b.length - 1)));
-    const tempArr = keys.map((key: any) => `${rest[key]} ${key}`);
+    const tempArr = keys.map((key) => `${rest[key]} ${key}`);
     return `linear-gradient(${direction}, ${tempArr.join(',')})`;
   }
   return `linear-gradient(${direction}, ${from}, ${to})`;
-}
+};
+export default getBackgroundColor;
diff --git a/src/common.ts b/src/common.ts
@@ -1,9 +1,9 @@
 /** React 特有全局类型 */
 
-import { ReactElement, ReactNode, CSSProperties, FormEvent } from 'react';
+import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, SyntheticEvent } from 'react';
 
 // TElement 表示 API 只接受传入组件
-export type TElement = ReactElement | (() => ReactElement);
+export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 // 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
 export type TNode<T = undefined> = T extends undefined ? ReactNode : (props: T) => ReactNode;
 
@@ -26,34 +26,62 @@ export interface StyledProps {
   className?: string;
   style?: CSSProperties;
 }
-/** 通用全局类型 */
+
+export interface UploadDisplayDragEvents {
+  onDrop?: (event: DragEvent<HTMLDivElement>) => void;
+  onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
+  onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
+  onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
+}
+
+export type ImageEvent<T = any> = SyntheticEvent<T>;
+
+/**
+ * 通用全局类型
+ * */
+export type PlainObject = { [key: string]: any };
 
 export type OptionData = {
   label?: string;
   value?: string | number;
-} & { [key: string]: any };
-
-export type TreeOptionData = {
-  children?: Array<TreeOptionData>;
-} & OptionData;
+} & PlainObject;
+
+export type TreeOptionData<T = string | number> = {
+  children?: Array<TreeOptionData<T>> | boolean;
+  /** option label content */
+  label?: string | TNode;
+  /** option search text */
+  text?: string;
+  /** option value */
+  value?: T;
+  /** option node content */
+  content?: string | TNode;
+} & PlainObject;
 
 export type SizeEnum = 'small' | 'medium' | 'large';
 
 export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
 
+export type LayoutEnum = 'vertical' | 'horizontal';
+
 export type ClassName = { [className: string]: any } | ClassName[] | string;
 
 export type CSSSelector = string;
 
 export interface KeysType {
   value?: string;
   label?: string;
+  disabled?: string;
+}
+
+export interface TreeKeysType extends KeysType {
+  children?: string;
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {
@@ -81,3 +109,22 @@ export interface TScroll {
    */
   type: 'lazy' | 'virtual';
 }
+
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;
+
+export interface ScrollToElementParams {
+  /** 跳转元素下标 */
+  index?: number;
+  /** 跳转元素距离顶部的距离 */
+  top?: number;
+  /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
+  time?: number;
+  behavior?: 'auto' | 'smooth';
+}
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key?: string | number;
+}
diff --git a/src/hooks/useDefaultProps.ts b/src/hooks/useDefaultProps.ts
@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+
+// defaultProps 将于 18.3.0 废弃，故需实现 hook 在组件内部兼容
+// https://github.com/facebook/react/pull/16210
+export default function useDefaultProps<T>(originalProps: T, defaultProps: Record<PropertyKey, any>): T {
+  return useMemo<T>(() => {
+    // eslint-disable-next-line
+    const props = Object.assign({}, originalProps);
+    Object.keys(defaultProps).forEach((key) => {
+      // https://github.com/facebook/react/blob/main/packages/react/src/jsx/ReactJSXElement.js#L719-L722
+      if (props[key] === undefined) {
+        props[key] = defaultProps[key];
+      }
+    });
+    return props;
+  }, [originalProps, defaultProps]);
+}