@tendaui/components 1.0.0 → 1.0.2

package/color-picker/components/panel/format/inputs.tsx

@@ -0,0 +1,119 @@
+import React, { useRef, useEffect } from "react";
+import { throttle } from "lodash-es";
+import { Color, getColorFormatInputs, getColorFormatMap } from "../../../utils/color-picker";
+import type { TdColorFormatProps } from ".";
+import Input from "../../../../input";
+import InputNumber from "../../../../input-number";
+
+const FormatInputs = (props: TdColorFormatProps) => {
+  const { format, enableAlpha, inputProps, disabled, onInputChange, color } = props;
+  const modelValueRef = useRef<Record<string, number | string>>({});
+  const lastModelValue = useRef<Record<string, number | string>>({});
+  const inputKey = useRef<number>(0);
+
+  const updateModelValue = () => {
+    const value = getColorFormatMap(color, "encode")[format];
+    if (!value || typeof value === "string") return;
+
+    const valueObj = value as Record<string, number | string>;
+    if (enableAlpha && "a" in valueObj) {
+      valueObj.a = Math.round(color.alpha * 100);
+    }
+
+    const changedFormatValue: Record<string, number | string> = {};
+    Object.keys(valueObj).forEach((key) => {
+      if (valueObj[key] !== modelValueRef.current[key]) {
+        changedFormatValue[key] = valueObj[key];
+      }
+      lastModelValue.current[key] = valueObj[key];
+    });
+
+    if (Object.keys(changedFormatValue).length > 0) {
+      modelValueRef.current = valueObj;
+    }
+  };
+
+  const handleInputChange = (key: string, v: number | string, max: number) => {
+    inputKey.current = performance.now();
+
+    if (v.toString().trim() === "") {
+      const lastValue = lastModelValue.current[key];
+      color.update(lastValue as string);
+      onInputChange();
+      return;
+    }
+
+    if (!v || v === lastModelValue.current[key] || Number(v) < 0 || Number(v) > max) return;
+    lastModelValue.current[key] = v;
+
+    const newFormatValue = {
+      ...modelValueRef.current,
+      [key]: v
+    };
+    modelValueRef.current = newFormatValue;
+    if (key === "a") {
+      color.alpha = (v as number) / 100;
+    } else if (key === "hex" || key === "css") {
+      color.update(v as string);
+    } else {
+      color.update(Color.object2color(newFormatValue, format));
+    }
+    onInputChange();
+  };
+
+  updateModelValue();
+  useEffect(() => {
+    const throttleUpdate = throttle(updateModelValue, 100);
+    throttleUpdate();
+    return () => throttleUpdate.cancel();
+  }, [color.saturation, color.hue, color.value, color.alpha, format]);
+
+  return (
+    <div className="input-group">
+      {getColorFormatInputs(format, enableAlpha).map((config) => {
+        const currentValue = modelValueRef.current[config.key];
+        const commonProps = {
+          ...inputProps,
+          disabled,
+          title: currentValue,
+          align: "center" as const,
+          size: "small" as const,
+          onBlur: (v: string) => handleInputChange(config.key, v, config.max),
+          onEnter: (v: string) => handleInputChange(config.key, v, config.max)
+        };
+
+        return (
+          <div
+            className="input-group__item"
+            key={config.key}
+            style={{
+              flex: config.flex || 1
+            }}
+          >
+            {config.type === "input" ? (
+              <Input
+                {...commonProps}
+                defaultValue={currentValue as string}
+                key={`${inputKey.current}-${currentValue}`}
+                maxlength={format === "HEX" ? 9 : undefined}
+              />
+            ) : (
+              <InputNumber
+                {...commonProps}
+                min={config.min}
+                max={config.max}
+                format={config.format as (value: number) => string}
+                step={1}
+                value={currentValue as number}
+                onChange={(v) => handleInputChange(config.key, v ?? (config.min as number), config.max)}
+                theme="normal"
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default React.memo(FormatInputs);

package/color-picker/components/panel/header.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { COLOR_MODES } from "../../utils/color-picker";
+import Radio, { RadioValue } from "../../../radio";
+import { TdColorModes, TdColorPickerProps } from "../../type";
+
+export interface ColorPanelHeaderProps extends TdColorPickerProps {
+  mode?: TdColorModes;
+  colorModes?: Array<TdColorModes>;
+  onModeChange?: (value: RadioValue, context: { e: React.ChangeEvent<HTMLInputElement> }) => void;
+  baseClassName?: string;
+}
+
+const Header = (props: ColorPanelHeaderProps) => {
+  const { baseClassName = "", mode = "monochrome", colorModes, onModeChange } = props;
+
+  const isSingleMode = colorModes?.length === 1;
+
+  if (isSingleMode) {
+    return null;
+  }
+
+  return (
+    <div className={`${baseClassName}__head`}>
+      <div className={`${baseClassName}__mode`}>
+        <Radio.Group variant="default-filled" size="small" value={mode} onChange={onModeChange}>
+          {Object.keys(COLOR_MODES).map((key) => (
+            <Radio.Button key={key} value={key}>
+              {COLOR_MODES[key as keyof typeof COLOR_MODES]}
+            </Radio.Button>
+          ))}
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Header);

package/color-picker/components/panel/hue.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { TdColorBaseProps } from "../../type";
+import ColorSlider from "./slider";
+
+const HueSlider = (props: TdColorBaseProps) => {
+  const { color, baseClassName, disabled, onChange } = props;
+  return (
+    <ColorSlider
+      disabled={disabled}
+      baseClassName={baseClassName}
+      className={`${baseClassName}__hue`}
+      color={color}
+      value={color.hue}
+      type="hue"
+      onChange={onChange}
+    />
+  );
+};
+
+export default React.memo(HueSlider);

package/color-picker/components/panel/index.tsx

@@ -0,0 +1,191 @@
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import {
+  Color,
+  DEFAULT_COLOR,
+  DEFAULT_SYSTEM_SWATCH_COLORS,
+  getColorObject,
+  initColorFormat,
+  type ColorFormat
+} from "../../utils/color-picker/index";
+import useCommonClassName from "../../../hooks/useCommonClassName";
+import useControlled from "../../../hooks/useControlled";
+import useDefaultProps from "../../../hooks/useDefaultProps";
+import { useLocaleReceiver } from "../../../locale/LocalReceiver";
+import { colorPickerDefaultProps } from "../../defaultProps";
+import useClassName from "../../hooks/useClassNames";
+import type { ColorPickerProps, TdColorSaturationData } from "../../type";
+import type { ColorPickerChangeTrigger } from "../../type";
+import AlphaSlider from "./alpha";
+import HueSlider from "./hue";
+import SaturationPanel from "./saturation";
+import SwatchesPanel from "./swatches";
+
+const Panel = forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
+  const baseClassName = useClassName();
+  const { STATUS } = useCommonClassName();
+  const [local, t] = useLocaleReceiver("colorPicker");
+  const {
+    className,
+    disabled,
+    enableAlpha,
+    format,
+    style,
+    swatchColors,
+    showPrimaryColorPreview,
+    onChange,
+    onPaletteBarChange
+  } = useDefaultProps(props, colorPickerDefaultProps);
+  const [innerValue, setInnerValue] = useControlled(props, "value", onChange);
+
+  const [, setUpdateId] = useState(0); // 确保 UI 同步更新
+
+  const defaultEmptyColor = DEFAULT_COLOR;
+
+  const colorInstanceRef = useRef<Color>(new Color(innerValue || defaultEmptyColor));
+  const formatRef = useRef<ColorFormat>(initColorFormat(format, enableAlpha));
+
+  const baseProps = {
+    color: colorInstanceRef.current,
+    disabled,
+    baseClassName
+  };
+
+  const updateColor = (value: string) => {
+    colorInstanceRef.current.update(value);
+    setUpdateId(window.performance.now());
+  };
+
+  const emitColorChange = useCallback(
+    (trigger?: ColorPickerChangeTrigger) => {
+      const value = colorInstanceRef.current.getFormattedColor(formatRef.current, enableAlpha);
+      setInnerValue(value, {
+        color: getColorObject(colorInstanceRef.current),
+        trigger: trigger || "palette-saturation-brightness"
+      });
+      setUpdateId(window.performance.now());
+    },
+    [enableAlpha, setInnerValue]
+  );
+
+  useEffect(() => {
+    const currentColor = colorInstanceRef.current.getFormattedColor(formatRef.current, enableAlpha);
+    if (innerValue === currentColor) return;
+    // 根据颜色自动切换模式
+    updateColor(innerValue);
+  }, [innerValue]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const [previewBackground, setPreviewBackground] = useState("");
+
+  useEffect(() => {
+    const inst = colorInstanceRef.current;
+    const next = inst.rgba;
+    setPreviewBackground(next);
+  }, [innerValue]);
+
+  /**
+   * 饱和度亮度变化
+   */
+  const handleSatAndValueChange = ({ saturation, value }: TdColorSaturationData) => {
+    const { saturation: sat, value: val } = colorInstanceRef.current;
+    let changeTrigger: ColorPickerChangeTrigger = "palette-saturation-brightness";
+    if (value !== val && saturation !== sat) {
+      changeTrigger = "palette-saturation-brightness";
+      colorInstanceRef.current.saturation = saturation;
+      colorInstanceRef.current.value = value;
+    } else if (saturation !== sat) {
+      changeTrigger = "palette-saturation";
+      colorInstanceRef.current.saturation = saturation;
+    } else if (value !== val) {
+      changeTrigger = "palette-brightness";
+      colorInstanceRef.current.value = value;
+    } else {
+      return;
+    }
+
+    emitColorChange(changeTrigger);
+  };
+
+  /**
+   * 色相变化
+   */
+  const handleHueChange = (hue: number) => {
+    colorInstanceRef.current.hue = hue;
+    emitColorChange("palette-hue-bar");
+    onPaletteBarChange?.({
+      color: getColorObject(colorInstanceRef.current)
+    });
+  };
+
+  /**
+   * 透明度变化
+   */
+  const handleAlphaChange = (alpha: number) => {
+    colorInstanceRef.current.alpha = alpha;
+    emitColorChange("palette-alpha-bar");
+    onPaletteBarChange?.({
+      color: getColorObject(colorInstanceRef.current)
+    });
+  };
+
+  // 渐变与色块区域的派生数据（不直接访问 ref）
+
+  // 系统预设颜色
+  let systemColorsDerived = swatchColors;
+  if (systemColorsDerived === undefined) {
+    systemColorsDerived = [...DEFAULT_SYSTEM_SWATCH_COLORS];
+  }
+
+  const showSystemColors = Array.isArray(systemColorsDerived);
+
+  const handleSwatchSetColor = (value: string, trigger: ColorPickerChangeTrigger) => {
+    // 确保在渐变模式下选择纯色块，能切换回单色模式
+    updateColor(value);
+    emitColorChange(trigger);
+  };
+
+  return (
+    <div
+      className={classNames(`${baseClassName}__panel`, disabled ? STATUS.disabled : false, className)}
+      onClick={(e) => e.stopPropagation()}
+      style={{ ...style }}
+      ref={ref}
+    >
+      <div className={`${baseClassName}__body`}>
+        <SaturationPanel {...baseProps} onChange={handleSatAndValueChange} />
+        <div className={`${baseClassName}__sliders-wrapper`}>
+          <div className={`${baseClassName}__sliders`}>
+            <HueSlider {...baseProps} onChange={handleHueChange} />
+            {enableAlpha && <AlphaSlider {...baseProps} onChange={handleAlphaChange} />}
+          </div>
+          {showPrimaryColorPreview ? (
+            <div className={classNames([`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`])}>
+              <span
+                className={`${baseClassName}__sliders-preview-inner`}
+                style={{
+                  background: previewBackground
+                }}
+              />
+            </div>
+          ) : null}
+        </div>
+
+        {showSystemColors && (
+          <div className={`${baseClassName}__swatches-wrap`}>
+            {showSystemColors && (
+              <SwatchesPanel
+                {...baseProps}
+                title={t(local.swatchColorTitle)}
+                colors={systemColorsDerived}
+                onSetColor={(color: string) => handleSwatchSetColor(color, "preset")}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+Panel.displayName = "Panel";
+export default React.memo(Panel);

package/color-picker/components/panel/saturation.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from "../../utils/color-picker";
+import useMouseEvent, { type MouseCoordinate } from "../../../hooks/useMouseEvent";
+import type { TdColorBaseProps } from "../../type";
+
+const Saturation = (props: TdColorBaseProps) => {
+  const { color, disabled, onChange, baseClassName } = props;
+  const panelRef = useRef<HTMLDivElement>(null);
+  const panelRectRef = useRef({
+    width: SATURATION_PANEL_DEFAULT_WIDTH,
+    height: SATURATION_PANEL_DEFAULT_HEIGHT
+  });
+
+  const styles = () => {
+    const { saturation, value, rgb } = color;
+    const { width, height } = panelRectRef.current;
+    const top = Math.round((1 - value) * height);
+    const left = Math.round(saturation * width);
+    return {
+      color: rgb,
+      left: `${left}px`,
+      top: `${top}px`
+    };
+  };
+
+  const getSaturationAndValue = (coordinate: MouseCoordinate) => {
+    const { width, height } = panelRectRef.current;
+    const { x, y } = coordinate;
+    const saturation = Math.round((x / width) * 100);
+    const value = Math.round((1 - y / height) * 100);
+    return {
+      saturation,
+      value
+    };
+  };
+
+  const handleDrag = useCallback(
+    ({ x, y }: MouseCoordinate) => {
+      if (disabled) return;
+      const { saturation, value } = getSaturationAndValue({ x, y });
+      onChange?.({
+        saturation: saturation / 100,
+        value: value / 100
+      });
+    },
+    [disabled, onChange]
+  );
+
+  useMouseEvent(panelRef, {
+    onDown: () => {
+      if (disabled) return;
+      panelRectRef.current.width = panelRef.current?.offsetWidth || panelRectRef.current.width;
+      panelRectRef.current.height = panelRef.current?.offsetHeight || panelRectRef.current.height;
+    },
+    onMove: (_, ctx) => {
+      handleDrag(ctx.coordinate);
+    },
+    onUp: (_, ctx) => {
+      handleDrag(ctx.coordinate);
+    }
+  });
+
+  useEffect(() => {
+    panelRectRef.current.width = panelRef.current?.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;
+    panelRectRef.current.height = panelRef.current?.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;
+  }, [handleDrag]);
+
+  return (
+    <div
+      ref={panelRef}
+      className={`${baseClassName}__saturation`}
+      style={{
+        background: `hsl(${color.hue}, 100%, 50%)`
+      }}
+    >
+      <span className={`${baseClassName}__thumb`} role="slider" tabIndex={0} style={styles()} />
+    </div>
+  );
+};
+
+export default React.memo(Saturation);

package/color-picker/components/panel/slider.tsx

@@ -0,0 +1,76 @@
+import React, { CSSProperties, useEffect, useRef } from "react";
+import classNames from "classnames";
+import { SLIDER_DEFAULT_WIDTH } from "../../utils/color-picker";
+import useMouseEvent, { type MouseCoordinate } from "../../../hooks/useMouseEvent";
+import useStyles from "../../hooks/useStyles";
+import type { TdColorBaseProps } from "../../type";
+
+export interface TdColorSliderProps extends TdColorBaseProps {
+  className?: string;
+  value?: number;
+  maxValue?: number;
+  railStyle?: CSSProperties;
+  type: "hue" | "alpha";
+}
+
+const ColorSlider = (props: TdColorSliderProps) => {
+  const {
+    color,
+    className = "",
+    value = 0,
+    railStyle = {},
+    maxValue = 360,
+    baseClassName,
+    disabled,
+    onChange,
+    type
+  } = props;
+  const panelRef = useRef<HTMLDivElement>(null);
+  const panelRectRef = useRef({
+    width: SLIDER_DEFAULT_WIDTH
+  });
+  const { styles } = useStyles({ color, value, maxValue, type }, panelRectRef);
+
+  const handleDrag = (coordinate: MouseCoordinate) => {
+    if (disabled) return;
+    const { width } = panelRectRef.current;
+    const { x } = coordinate;
+    const nextValue = Math.round((x / width) * Number(maxValue) * 100) / 100;
+    console.log(nextValue);
+    onChange?.(nextValue);
+  };
+
+  useMouseEvent(panelRef, {
+    onDown: (_, ctx) => {
+      if (disabled) return;
+      panelRectRef.current.width = panelRef.current?.offsetWidth || panelRectRef.current.width;
+      handleDrag(ctx.coordinate);
+    },
+    onMove: (_, ctx) => {
+      handleDrag(ctx.coordinate);
+    },
+    onUp: (_, ctx) => {
+      handleDrag(ctx.coordinate);
+    }
+  });
+
+  useEffect(() => {
+    panelRectRef.current.width = panelRef.current?.offsetWidth || SLIDER_DEFAULT_WIDTH;
+  }, []);
+
+  const paddingStyle = {
+    background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${props.color.rgb} 93%, ${props.color.rgb} 100%)`
+  };
+
+  return (
+    <div className={classNames(`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`)}>
+      {type === "alpha" && <div className={`${baseClassName}__slider-padding`} style={paddingStyle} />}
+      <div className={classNames(`${baseClassName}__slider`, className)} ref={panelRef}>
+        <div className={`${baseClassName}__rail`} style={railStyle} />
+        <span className={`${baseClassName}__thumb`} role="slider" tabIndex={0} style={styles} />
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ColorSlider);

package/color-picker/components/panel/swatches.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import classNames from "classnames";
+import { IconDelete as TdDeleteIcon, IconPlus as TdAddIcon } from "@tendaui/icons";
+import Color from "../../utils/color-picker/color";
+import useGlobalIcon from "../../../hooks/useGlobalIcon";
+import { TdColorBaseProps } from "../../type";
+import useCommonClassName from "../../../hooks/useCommonClassName";
+
+export interface TdColorSwatchesProps extends TdColorBaseProps {
+  colors?: string[];
+  title?: string;
+  editable?: boolean;
+  onSetColor?: (color: string) => void;
+  handleAddColor?: () => void;
+}
+
+const Swatches = (props: TdColorSwatchesProps) => {
+  const { baseClassName, colors = [], editable = false, title, onChange, disabled, onSetColor, handleAddColor } = props;
+  const { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon });
+  const swatchesClass = `${baseClassName}__swatches`;
+  const { STATUS: statusClassNames } = useCommonClassName();
+  const isEqualCurrentColor = (color: string) => Color.compare(color, props.color.css);
+
+  const selectedColorIndex = () => colors.findIndex((color) => isEqualCurrentColor(color));
+  const handleRemoveColor = () => {
+    const selectedIndex = selectedColorIndex();
+    if (selectedIndex > -1) {
+      const newColors = colors.filter((_, index) => index !== selectedIndex);
+      onChange?.(newColors);
+    }
+  };
+
+  const handleClick = (color: string) => onSetColor?.(color);
+
+  return (
+    <div className={swatchesClass}>
+      {title ? (
+        <h3 className={`${swatchesClass}--title`}>
+          <span>{title}</span>
+          {editable && (
+            <div className={`${swatchesClass}--actions`}>
+              <span role="button" className={`${baseClassName}__icon`} onClick={() => handleAddColor?.()}>
+                <AddIcon />
+              </span>
+              {colors.length > 0 ? (
+                <span role="button" className={`${baseClassName}__icon`} onClick={() => handleRemoveColor()}>
+                  <DeleteIcon />
+                </span>
+              ) : null}
+            </div>
+          )}
+        </h3>
+      ) : null}
+      <ul className={classNames(`${swatchesClass}--items`, "narrow-scrollbar")}>
+        {colors.map((color) => (
+          <li
+            className={classNames(
+              `${swatchesClass}--item`,
+              isEqualCurrentColor(color) && editable ? statusClassNames.active : ""
+            )}
+            key={color}
+            onClick={() => {
+              if (disabled) {
+                return;
+              }
+              handleClick(color);
+            }}
+          >
+            <div className={classNames(`${swatchesClass}--item__color`, `${baseClassName}--bg-alpha`)}>
+              <span
+                className={`${swatchesClass}--item__inner`}
+                style={{
+                  background: color
+                }}
+              />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default React.memo(Swatches);

package/color-picker/components/trigger.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import classNames from "classnames";
+import { Color, getColorObject } from "../utils/color-picker/color";
+import { Input } from "../../input";
+import { TdColorPickerProps } from "../type";
+import useClassName from "../hooks/useClassNames";
+import { TdColorContext } from "../type";
+import noop from "../../utils/noop";
+
+export interface ColorTriggerProps
+  extends Pick<TdColorPickerProps, "disabled" | "inputProps" | "borderless" | "clearable" | "onClear"> {
+  value?: string;
+  onChange?: (v?: string, context?: TdColorContext) => void;
+}
+
+const ColorPickerTrigger = (props: ColorTriggerProps) => {
+  const baseClassName = useClassName();
+  const { disabled = false, borderless = false, inputProps = { autoWidth: true }, clearable, onClear } = props;
+
+  const handleChange = (input: string) => {
+    if (input !== props.value) {
+      props.onChange?.(input, {
+        color: getColorObject(new Color(input)),
+        trigger: "input"
+      });
+    }
+  };
+
+  return (
+    <div className={`${baseClassName}__trigger--default`}>
+      <Input
+        borderless={borderless}
+        clearable={clearable}
+        {...inputProps}
+        value={props.value}
+        disabled={disabled}
+        label={
+          <div className={classNames(`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`)}>
+            <span className={"color-inner"} style={{ background: props.value }}></span>
+          </div>
+        }
+        onChange={handleChange}
+        onClear={onClear || noop}
+      />
+    </div>
+  );
+};
+
+export default React.memo(ColorPickerTrigger);

package/color-picker/defaultProps.ts

@@ -0,0 +1,7 @@
+import { TdColorPickerProps } from "./type";
+
+export const colorPickerDefaultProps: TdColorPickerProps = {
+  borderless: false,
+  clearable: false,
+  disabled: false
+};