feat(color-picker): support input-less trigger

packages/components/color-picker/ColorPicker.tsx

@@ -13,7 +13,7 @@ import type { ColorPickerProps, TdColorContext } from './interface';
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, colorModes, ...rest } =
+  const { popupProps, clearable, disabled, borderless, inputProps, isInput, onChange, onClear, colorModes, ...rest } =
     useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
@@ -55,6 +55,7 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
           disabled={disabled}
           borderless={borderless}
           inputProps={inputProps}
+          isInput={isInput}
           value={innerValue}
           onChange={setInnerValue}
           onClear={onClear}

packages/components/color-picker/components/trigger.tsx

@@ -11,15 +11,22 @@ import type { TdColorContext } from '../interface';
 
 export interface ColorTriggerProps extends Pick<
   TdColorPickerProps,
-  'disabled' | 'inputProps' | 'borderless' | 'clearable' | 'onClear'
+  'disabled' | 'inputProps' | 'isInput' | 'borderless' | 'clearable' | 'onClear'
 > {
   value?: string;
   onChange?: (v?: string, context?: TdColorContext) => {};
 }
 
 const ColorPickerTrigger = (props: ColorTriggerProps) => {
   const baseClassName = useClassName();
-  const { disabled = false, borderless = false, inputProps = { autoWidth: true }, clearable, onClear } = props;
+  const {
+    disabled = false,
+    borderless = false,
+    inputProps = { autoWidth: true },
+    isInput = true,
+    clearable,
+    onClear,
+  } = props;
 
   const handleChange = (input: string) => {
     if (input !== props.value) {
@@ -31,7 +38,11 @@ const ColorPickerTrigger = (props: ColorTriggerProps) => {
   };
 
   return (
-    <div className={`${baseClassName}__trigger--default`}>
+    <div
+      className={classNames(`${baseClassName}__trigger--default`, {
+        [`${baseClassName}__trigger--default--no-input`]: !isInput,
+      })}
+    >
       <Input
         borderless={borderless}
         clearable={clearable}

packages/components/color-picker/defaultProps.ts

@@ -12,6 +12,7 @@ export const colorPickerDefaultProps: TdColorPickerProps = {
   enableAlpha: false,
   enableMultipleGradient: true,
   format: 'RGB',
+  isInput: true,
   defaultRecentColors: [],
   showPrimaryColorPreview: true,
   swatchColors: undefined,

packages/components/color-picker/type.ts

@@ -4,10 +4,10 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
-import { PopupProps } from '../popup';
-import { SelectInputProps } from '../select-input';
-import { MouseEvent } from 'react';
+import { InputProps } from "../input";
+import { PopupProps } from "../popup";
+import { SelectInputProps } from "../select-input";
+import { MouseEvent } from "react";
 
 export interface TdColorPickerProps {
   /**
@@ -24,7 +24,7 @@ export interface TdColorPickerProps {
    * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色
    * @default ["monochrome", "linear-gradient"]
    */
-  colorModes?: Array<'monochrome' | 'linear-gradient'>;
+  colorModes?: Array<"monochrome" | "linear-gradient">;
   /**
    * 是否禁用组件
    */
@@ -43,11 +43,26 @@ export interface TdColorPickerProps {
    * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
    * @default RGB
    */
-  format?: 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS';
+  format?:
+    | "HEX"
+    | "HEX8"
+    | "RGB"
+    | "RGBA"
+    | "HSL"
+    | "HSLA"
+    | "HSV"
+    | "HSVA"
+    | "CMYK"
+    | "CSS";
   /**
    * 透传 Input 输入框组件全部属性
    */
   inputProps?: InputProps;
+  /**
+   * 是否显示颜色值输入框
+   * @default true
+   */
+  isInput?: boolean;
   /**
    * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等
    */
@@ -88,7 +103,10 @@ export interface TdColorPickerProps {
   /**
    * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
    */
-  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
+  onChange?: (
+    value: string,
+    context: { color: ColorObject; trigger: ColorPickerChangeTrigger }
+  ) => void;
   /**
    * 清空按钮点击时触发
    */
@@ -104,14 +122,14 @@ export interface TdColorPickerProps {
 }
 
 export type ColorPickerChangeTrigger =
-  | 'palette-saturation-brightness'
-  | 'palette-saturation'
-  | 'palette-brightness'
-  | 'palette-hue-bar'
-  | 'palette-alpha-bar'
-  | 'input'
-  | 'preset'
-  | 'recent';
+  | "palette-saturation-brightness"
+  | "palette-saturation"
+  | "palette-brightness"
+  | "palette-hue-bar"
+  | "palette-alpha-bar"
+  | "input"
+  | "preset"
+  | "recent";
 
 export interface ColorObject {
   alpha: number;