fix(colorPicker): fix colorMode i18n (#3403)

* fix(colorPicker): fix colorMode i18n

* feat: use common constants

* chore: update common

* chore: update common

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/color-picker/panel/format/index.tsx

@@ -5,7 +5,7 @@ import upperCase from 'lodash/upperCase';
 import { TdColorHandler } from '../../../color-picker/interfaces';
 import { TdColorPickerProps } from '../../type';
 import props from '../../props';
-import { FORMATS } from '../../const';
+import { FORMATS } from '../../../_common/js/color-picker/constants';
 import { Color } from '../../utils';
 import { Select as TSelect, Option as TOption } from '../../../select';
 import { Input as TInput } from '../../../input';
@@ -60,7 +60,6 @@ export default defineComponent({
     };
   },
   render(h) {
-    const formats: TdColorPickerProps['format'][] = [...FORMATS];
     const { baseClassName, handleModeChange } = this;
     const newProps = {
       ...this.$props,
@@ -84,7 +83,7 @@ export default defineComponent({
             onChange={handleModeChange}
             disabled={this.disabled}
           >
-            {formats.map((item) => (
+            {FORMATS.map((item) => (
               <t-option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
             ))}
           </t-select>

src/color-picker/panel/header.tsx

@@ -2,10 +2,11 @@ import {
   defineComponent, PropType, ref, watch,
 } from '@vue/composition-api';
 import props from '../props';
-import { COLOR_MODES } from '../const';
+import { COLOR_MODES } from '../../_common/js/color-picker/constants';
 import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
 import { TdColorHandler, TdColorModes } from '../interfaces';
 import { useBaseClassName } from '../hooks';
+import { useConfig } from '../../hooks';
 
 export default defineComponent({
   name: 'PanelHeader',
@@ -28,6 +29,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { globalConfig } = useConfig('colorPicker');
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
     watch(
@@ -37,6 +39,7 @@ export default defineComponent({
       },
     );
     return {
+      globalConfig,
       baseClassName,
       modeValue,
     };
@@ -49,23 +52,19 @@ export default defineComponent({
     return (
       <div class={`${baseClassName}__head`}>
         <div class={`${baseClassName}__mode`}>
-          {this.colorModes?.length === 1 ? (
-            COLOR_MODES[this.colorModes[0]]
-          ) : (
-            <t-radio-group
-              variant="default-filled"
-              size="small"
-              disabled={this.disabled}
-              v-model={this.modeValue}
-              onChange={this.handleModeChange}
-            >
-              {Object.keys(COLOR_MODES).map((key) => (
-                <t-radio-button key={key} value={key}>
-                  {COLOR_MODES[key]}
-                </t-radio-button>
-              ))}
-            </t-radio-group>
-          )}
+          <t-radio-group
+            variant="default-filled"
+            size="small"
+            disabled={this.disabled}
+            v-model={this.modeValue}
+            onChange={this.handleModeChange}
+          >
+            {this.colorModes.map((key) => (
+              <t-radio-button key={key} value={key}>
+                {Reflect.get(this.globalConfig, COLOR_MODES[key as keyof typeof COLOR_MODES])}
+              </t-radio-button>
+            ))}
+          </t-radio-group>
         </div>
       </div>
     );

src/color-picker/panel/index.tsx

@@ -9,7 +9,7 @@ import {
   DEFAULT_LINEAR_GRADIENT,
   TD_COLOR_USED_COLORS_MAX_SIZE,
   DEFAULT_SYSTEM_SWATCH_COLORS,
-} from '../const';
+} from '../../_common/js/color-picker/constants';
 import PanelHeader from './header';
 import LinearGradient from './linear-gradient';
 import SaturationPanel from './saturation';

src/color-picker/panel/linear-gradient.tsx

@@ -2,7 +2,7 @@ import {
   computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch,
 } from '@vue/composition-api';
 import cloneDeep from 'lodash/cloneDeep';
-import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../const';
+import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../_common/js/color-picker/constants';
 import { genGradientPoint, gradientColors2string, GradientColorPoint } from '../utils';
 import { InputNumber as TInputNumber } from '../../input-number';
 import { useBaseClassName } from '../hooks';

src/color-picker/panel/saturation.tsx

@@ -1,7 +1,10 @@
 import {
   computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref,
 } from '@vue/composition-api';
-import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../const';
+import {
+  SATURATION_PANEL_DEFAULT_HEIGHT,
+  SATURATION_PANEL_DEFAULT_WIDTH,
+} from '../../_common/js/color-picker/constants';
 import { Select as TSelect, Option as TOption } from '../../select';
 import { Draggable, Coordinate } from '../utils';
 import { useBaseClassName } from '../hooks';

src/color-picker/panel/slider.tsx

@@ -1,7 +1,7 @@
 import {
   computed, defineComponent, onBeforeUnmount, onMounted, PropType, reactive, ref,
 } from '@vue/composition-api';
-import { SLIDER_DEFAULT_WIDTH } from '../const';
+import { SLIDER_DEFAULT_WIDTH } from '../../_common/js/color-picker/constants';
 import { Select as TSelect, Option as TOption } from '../../select';
 import { Draggable, Coordinate } from '../utils';
 import { useBaseClassName } from '../hooks';