site: add internationalization for docs (ant-design#44263)

* site: add internationalization for docs * fix * Update .dumi/theme/common/Color/ColorPaletteTool.tsx Co-authored-by: MadCcc <[email protected]> Signed-off-by: lijianan <[email protected]> * fix: fix * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]>
ammar-knowledge · Aug 18, 2023 · 3b913cf · 3b913cf
1 parent ce687c5
commit 3b913cf
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 74 deletions.
diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx
@@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react';
 import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
+
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
     setPrimaryColorInstance(color);
   };
+
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return <span className="color-palette-picker-validation">{text.trim()}</span>;
@@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
       <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 value={primaryColor} onChange={handleChangeColor} />

diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
-  const [primaryColorInstance, setPrimaryColorInstance] = useState(null);
+  const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
 
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
@@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => {
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return (
@@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => {
   return (
     <div className="color-palette-horizontal color-palette-horizontal-dark">
       <div className="main-color">
-        {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
+        <ColorPatterns color={primaryColor} backgroundColor={backgroundColor} dark />
       </div>
       <div className="color-palette-picker">
         <Row>

diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx
@@ -9,11 +9,15 @@ interface ColorPatternsProps {
   backgroundColor?: string;
 }
 
-const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
+const ColorPatterns: React.FC<ColorPatternsProps> = ({ color, dark, backgroundColor }) => {
   const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
-  return uniq(colors).map((colorString, i) => (
-    <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
-  ));
+  return (
+    <>
+      {uniq(colors).map((colorString, i) => (
+        <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
+      ))}
+    </>
+  );
 };
 
 export default ColorPatterns;
diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
@@ -16,74 +16,74 @@ const useStyle = createStyles(({ token, css, cx }) => {
   `;
   return {
     wrapper: css`
-          width: 400px;
-          border: 1px solid ${token.colorBorderSecondary};
-          border-radius: ${token.borderRadiusOuter};
-          padding: 5px;
-        `,
+      width: 400px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusOuter};
+      padding: 5px;
+    `,
     dateCell: css`
-          position: relative;
-          &:before {
-            content: '';
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            margin: auto;
-            max-width: 40px;
-            max-height: 40px;
-            background: transparent;
-            transition: background 300ms;
-            border-radius: ${token.borderRadiusOuter}px;
-            border: 1px solid transparent;
-            box-sizing: border-box;
-          }
-          &:hover:before {
-            background: rgba(0, 0, 0, 0.04);
-          }
-        `,
+      position: relative;
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        max-width: 40px;
+        max-height: 40px;
+        background: transparent;
+        transition: background 300ms;
+        border-radius: ${token.borderRadiusOuter}px;
+        border: 1px solid transparent;
+        box-sizing: border-box;
+      }
+      &:hover:before {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    `,
     today: css`
-          &:before {
-            border: 1px solid ${token.colorPrimary};
-          }
+      &:before {
+        border: 1px solid ${token.colorPrimary};
+      }
     `,
     text: css`
-          position: relative;
-          z-index: 1;
-      `,
+      position: relative;
+      z-index: 1;
+    `,
     lunar,
     current: css`
-            color: ${token.colorTextLightSolid};
-            &:before {
-              background: ${token.colorPrimary};
-            }
-            &:hover:before {
-              background: ${token.colorPrimary};
-              opacity: .8;
-            }
-            .${cx(lunar)} {
-              color: ${token.colorTextLightSolid};
-              opacity: .9;
-            }
-          `,
+      color: ${token.colorTextLightSolid};
+      &:before {
+        background: ${token.colorPrimary};
+      }
+      &:hover:before {
+        background: ${token.colorPrimary};
+        opacity: 0.8;
+      }
+      .${cx(lunar)} {
+        color: ${token.colorTextLightSolid};
+        opacity: 0.9;
+      }
+    `,
     monthCell: css`
-          width: 120px;
-          color: ${token.colorTextBase};
-          border-radius: ${token.borderRadiusOuter}px;
-          padding: 5px 0;
-          &:hover {
-            background: rgba(0, 0, 0, 0.04);
-          }
-        `,
+      width: 120px;
+      color: ${token.colorTextBase};
+      border-radius: ${token.borderRadiusOuter}px;
+      padding: 5px 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    `,
     monthCellCurrent: css`
-          color: ${token.colorTextLightSolid};
-          background: ${token.colorPrimary};
-          &:hover {
-            background: ${token.colorPrimary};
-            opacity: .8;
-          }
-        `,
+      color: ${token.colorTextLightSolid};
+      background: ${token.colorPrimary};
+      &:hover {
+        background: ${token.colorPrimary};
+        opacity: 0.8;
+      }
+    `,
   };
 });
 

diff --git a/package.json b/package.json
@@ -159,7 +159,7 @@
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@ant-design/compatible": "^5.1.1",
+    "@ant-design/compatible": "^5.1.2",
     "@ant-design/happy-work-theme": "^1.0.0",
     "@ant-design/tools": "^17.0.0",
     "@antv/g6": "^4.8.13",