Merge remote-tracking branch 'upstream/feature' into master

ant-design · Dec 8, 2022 · 62f0c5a · 62f0c5a
2 parents d1cf4fd + 816cf10
commit 62f0c5a
Show file tree

Hide file tree

Showing 237 changed files with 15,066 additions and 11,671 deletions.
diff --git a/.dumi/theme/builtins/Palette/index.tsx b/.dumi/theme/builtins/Palette/index.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore
 import Palette from '../../common/Color/Palette';
 
 export default Palette;
diff --git a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import JsonML from 'jsonml.js/lib/utils';
 // @ts-ignore
 import toReactComponent from 'jsonml-to-react-element';
-// @ts-ignore
 import Prism from 'prismjs';
 import { useLocation, useIntl, type IPreviewerProps } from 'dumi';
 import { ping } from '../../utils';

diff --git a/.dumi/theme/common/BrowserFrame.jsx b/.dumi/theme/common/BrowserFrame.jsx
diff --git a/.dumi/theme/common/BrowserFrame.tsx b/.dumi/theme/common/BrowserFrame.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div className="browser-mockup with-url">{children}</div>
+);
+
+export default BrowserFrame;
diff --git a/.dumi/theme/common/CodePenIcon.jsx → .dumi/theme/common/CodePenIcon.tsx b/.dumi/theme/common/CodePenIcon.jsx → .dumi/theme/common/CodePenIcon.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = () => (
+const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 15 15" fill="currentColor">
     <path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
   </svg>
 );
 
-const CodePenIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const CodePenIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default CodePenIcon;
diff --git a/.dumi/theme/common/CodePreview.jsx → .dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.jsx → .dumi/theme/common/CodePreview.tsx
@@ -8,31 +8,25 @@ const LANGS = {
   jsx: 'JavaScript',
 };
 
-const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
+interface CodePreviewProps {
+  codes?: Record<PropertyKey, string>;
+  toReactComponent?: (node: any) => React.ReactNode;
+  onCodeTypeChange?: (activeKey: string) => void;
+}
+
+const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCodeTypeChange }) => {
   const langList = Object.keys(codes).sort().reverse();
 
-  let content;
+  let content: React.ReactNode;
 
   if (langList.length === 1) {
-    content = toReactComponent([
-      'pre',
-      {
-        lang: langList[0],
-        highlighted: codes[langList[0]],
-      },
-    ]);
+    content = toReactComponent(['pre', { lang: langList[0], highlighted: codes[langList[0]] }]);
   } else {
     content = (
       <Tabs centered onChange={onCodeTypeChange}>
         {langList.map((lang) => (
           <TabPane tab={LANGS[lang]} key={lang}>
-            {toReactComponent([
-              'pre',
-              {
-                lang,
-                highlighted: codes[lang],
-              },
-            ])}
+            {toReactComponent(['pre', { lang, highlighted: codes[lang] }])}
           </TabPane>
         ))}
       </Tabs>

diff --git a/.dumi/theme/common/CodeSandboxIcon.jsx → .dumi/theme/common/CodeSandboxIcon.tsx b/.dumi/theme/common/CodeSandboxIcon.jsx → .dumi/theme/common/CodeSandboxIcon.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = () => (
+const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 1024 1024" fill="currentColor">
     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
   </svg>
 );
 
-const CodeSandboxIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const CodeSandboxIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default CodeSandboxIcon;
diff --git a/.dumi/theme/common/Color/ColorBlock.jsx → .dumi/theme/common/Color/ColorBlock.tsx b/.dumi/theme/common/Color/ColorBlock.jsx → .dumi/theme/common/Color/ColorBlock.tsx
@@ -2,7 +2,13 @@ import React, { Component } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { message } from 'antd';
 
-export default class ColorBlock extends Component {
+interface ColorBlockProps {
+  color: string;
+  index: number;
+  dark?: boolean;
+}
+
+class ColorBlock extends Component<ColorBlockProps> {
   getTextStyle() {
     const { color, index, dark } = this.props;
     const colorMap = {
@@ -25,7 +31,7 @@ export default class ColorBlock extends Component {
   render() {
     const { color, index } = this.props;
     return (
-      <CopyToClipboard text={color} onCopy={this.onCopied} title="click to copy color">
+      <CopyToClipboard text={color} onCopy={this.onCopied}>
         <div className="main-color-item" style={this.getTextStyle()}>
           color-{index}
           <span className="main-color-value">{color.toLowerCase()}</span>
@@ -34,3 +40,5 @@ export default class ColorBlock extends Component {
     );
   }
 }
+
+export default ColorBlock;
diff --git a/...i/theme/common/Color/ColorPaletteTool.jsx → ...i/theme/common/Color/ColorPaletteTool.tsx b/...i/theme/common/Color/ColorPaletteTool.jsx → ...i/theme/common/Color/ColorPaletteTool.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'dumi';
 import ColorPicker from './ColorPicker';
@@ -6,18 +7,17 @@ import ColorPatterns from './ColorPatterns';
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
-export default class ColorPaletteTool extends Component {
+class ColorPaletteTool extends Component {
   state = {
     primaryColor: '#1890ff',
     primaryColorInstance: null,
   };
 
-  handleChangeColor = (e, color) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      primaryColor: value,
-      primaryColorInstance: color,
-    });
+  handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ primaryColor: value, primaryColorInstance: color });
   };
 
   renderColorValidation() {
@@ -45,12 +45,10 @@ export default class ColorPaletteTool extends Component {
         <div className="color-palette-pick">
           <FormattedMessage id="app.docs.color.pick-primary" />
         </div>
-        <div className="main-color">
-          <ColorPatterns color={primaryColor} />
-        </div>
+        <div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
         <div className="color-palette-picker">
           <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-            <ColorPicker type="chrome" color={primaryColor} onChange={this.handleChangeColor} />
+            <ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
           </span>
           <span className="color-palette-picker-value">{primaryColor}</span>
           {this.renderColorValidation()}
@@ -59,3 +57,5 @@ export default class ColorPaletteTool extends Component {
     );
   }
 }
+
+export default ColorPaletteTool;
diff --git a/...eme/common/Color/ColorPaletteToolDark.jsx → ...eme/common/Color/ColorPaletteToolDark.tsx b/...eme/common/Color/ColorPaletteToolDark.jsx → ...eme/common/Color/ColorPaletteToolDark.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'dumi';
 import { Row, Col } from 'antd';
@@ -7,26 +8,25 @@ import ColorPatterns from './ColorPatterns';
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
-export default class ColorPaletteTool extends Component {
+class ColorPaletteTool extends Component {
   state = {
     primaryColor: '#1890ff',
     backgroundColor: '#141414',
     primaryColorInstance: null,
   };
 
-  handleChangeColor = (e, color) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      primaryColor: value,
-      primaryColorInstance: color,
-    });
+  handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ primaryColor: value, primaryColorInstance: color });
   };
 
-  handleChangeBackgroundColor = (e) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      backgroundColor: value,
-    });
+  handleChangeBackgroundColor = (e: string | ChangeEvent) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ backgroundColor: value });
   };
 
   renderColorValidation() {
@@ -56,7 +56,7 @@ export default class ColorPaletteTool extends Component {
     return (
       <div className="color-palette-horizontal color-palette-horizontal-dark">
         <div className="main-color">
-          <ColorPatterns color={primaryColor} dark backgroundColor={backgroundColor} />
+          {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
         </div>
         <div className="color-palette-picker">
           <Row>
@@ -67,11 +67,7 @@ export default class ColorPaletteTool extends Component {
               <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
                 <Row>
                   <Col span={18}>
-                    <ColorPicker
-                      type="chrome"
-                      color={primaryColor}
-                      onChange={this.handleChangeColor}
-                    />
+                    <ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
                   </Col>
                   <Col span={6}>
                     <span className="color-palette-pick-hex">{primaryColor}</span>
@@ -87,7 +83,6 @@ export default class ColorPaletteTool extends Component {
                 <Row>
                   <Col span={18}>
                     <ColorPicker
-                      type="chrome"
                       color={backgroundColor}
                       onChange={this.handleChangeBackgroundColor}
                     />
@@ -105,3 +100,5 @@ export default class ColorPaletteTool extends Component {
     );
   }
 }
+
+export default ColorPaletteTool;
diff --git a/.dumi/theme/common/Color/ColorPalettes.jsx b/.dumi/theme/common/Color/ColorPalettes.jsx