@tendaui/components 1.0.0 → 1.0.2

package/color-picker/helpers.ts

@@ -0,0 +1,53 @@
+import tinycolor from "tinycolor2";
+import { ColorObject, ColorPickerChangeTrigger, TdColorContext } from "./type";
+
+export const DEFAULT_COLOR = "#0052D9";
+
+export const normalizeColorValue = (value?: string | null): string => {
+  if (!value) return DEFAULT_COLOR;
+  const color = tinycolor(value);
+  if (!color.isValid()) {
+    return DEFAULT_COLOR;
+  }
+  return color.toHexString();
+};
+
+export const buildColorObject = (value: string): ColorObject => {
+  const color = tinycolor(value || DEFAULT_COLOR);
+  const rgb = color.toRgb();
+  const hsv = color.toHsv();
+  const hsl = color.toHsl();
+
+  const rgbString = color.toRgbString();
+  const rgbaString = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${Number(rgb.a.toFixed(2))})`;
+  const hslString = `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;
+  const hslaString = `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${Number(
+    rgb.a.toFixed(2)
+  )})`;
+  const hsvString = `hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s * 100)}%, ${Math.round(hsv.v * 100)}%)`;
+  const hsvaString = `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s * 100)}%, ${Math.round(hsv.v * 100)}%, ${Number(
+    rgb.a.toFixed(2)
+  )})`;
+
+  return {
+    alpha: rgb.a,
+    css: rgbString,
+    hex: color.toHexString(),
+    hex8: color.toHex8String(),
+    hsl: hslString,
+    hsla: hslaString,
+    hsv: hsvString,
+    hsva: hsvaString,
+    rgb: rgbString,
+    rgba: rgbaString,
+    saturation: hsv.s,
+    value: hsv.v,
+    isGradient: false,
+    linearGradient: undefined
+  };
+};
+
+export const buildChangeContext = (value: string, trigger: ColorPickerChangeTrigger): TdColorContext => ({
+  color: buildColorObject(value),
+  trigger
+});

package/color-picker/hooks/useClassNames.ts

@@ -0,0 +1,9 @@
+import useConfig from "../../hooks/useConfig";
+
+const useClassNames = () => {
+  const { classPrefix } = useConfig();
+  const baseClassName = `${classPrefix}-color-picker`;
+  return baseClassName;
+};
+
+export default useClassNames;

package/color-picker/hooks/useStyles.ts

@@ -0,0 +1,39 @@
+import { CSSProperties, useEffect, useState, MutableRefObject } from "react";
+import type { Color } from "../utils/color-picker/color";
+
+export interface TdColorSliderStyleParams {
+  color: Color;
+  value: number;
+  maxValue: number;
+  type: "hue" | "alpha";
+}
+
+const useStyles = (params: TdColorSliderStyleParams, panelRectRef: MutableRefObject<{ width: number }>) => {
+  const { color, value, maxValue, type } = params;
+  const [styles, setStyles] = useState<CSSProperties>({ left: "", color: "" });
+
+  useEffect(() => {
+    const { width } = panelRectRef.current;
+    if (!width) return;
+
+    const left = Math.round((Number(value) / Number(maxValue)) * 100);
+
+    let thumbColor = "";
+    if (type === "hue") {
+      thumbColor = `hsl(${color.hue}, 100%, 50%)`;
+    } else if (type === "alpha") {
+      thumbColor = color.rgba;
+    }
+
+    setStyles({
+      left: `${left}%`,
+      color: thumbColor
+    });
+  }, [color.hue, color.rgba, maxValue, type, value]);
+
+  return {
+    styles
+  };
+};
+
+export default useStyles;

package/color-picker/index.ts

@@ -0,0 +1,12 @@
+import _ColorPickPanel from "./ColorPickPanel";
+import _ColorPicker from "./ColorPicker";
+
+import "./style";
+
+export type { ColorPickerProps } from "./type";
+export * from "./type";
+
+export const ColorPickerPanel = _ColorPickPanel;
+export const ColorPicker = _ColorPicker;
+
+export default ColorPicker;

package/color-picker/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/color-picker/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/color-picker/_index.scss";

package/color-picker/type.ts

@@ -0,0 +1,143 @@
+import { MouseEvent } from "react";
+import { StyledProps } from "../common";
+import { InputProps } from "../input";
+import { PopupProps } from "../popup";
+import { SelectInputProps } from "../select-input";
+import type { Color } from "./utils/color-picker/color";
+export interface TdColorPickerProps {
+  /**
+   * 无边框模式
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
+
+  /**
+   * 是否禁用组件
+   */
+  disabled?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
+  /**
+   * 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色
+   * @default true
+   */
+  enableMultipleGradient?: boolean;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
+   * @default RGB
+   */
+  format?: "HEX" | "HEX8" | "RGB" | "RGBA" | "HSL" | "HSLA" | "HSV" | "HSVA" | "CMYK" | "CSS";
+  /**
+   * 透传 Input 输入框组件全部属性
+   */
+  inputProps?: InputProps;
+  /**
+   * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等
+   */
+  popupProps?: PopupProps;
+  /**
+   * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”
+   * @default []
+   */
+  recentColors?: Array<string> | boolean | null;
+  /**
+   * 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”，非受控属性
+   * @default []
+   */
+  defaultRecentColors?: Array<string> | boolean | null;
+  /**
+   * 透传 SelectInputProps 筛选器输入框组件全部属性
+   */
+  selectInputProps?: SelectInputProps;
+  /**
+   * 是否展示颜色选择条右侧的颜色预览区域
+   * @default true
+   */
+  showPrimaryColorPreview?: boolean;
+  /**
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+   */
+  swatchColors?: Array<string> | null | undefined;
+  /**
+   * 色值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
+  /**
+   * 清空按钮点击时触发
+   */
+  onClear?: (context: { e: MouseEvent<SVGElement> }) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
+  /**
+   * 最近使用颜色发生变化时触发
+   */
+  onRecentColorsChange?: (value: Array<string>) => void;
+}
+
+export type ColorPickerChangeTrigger =
+  | "palette-saturation-brightness"
+  | "palette-saturation"
+  | "palette-brightness"
+  | "palette-hue-bar"
+  | "palette-alpha-bar"
+  | "input"
+  | "preset"
+  | "recent";
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  saturation: number;
+  value: number;
+  isGradient: boolean;
+  linearGradient?: string;
+}
+
+export interface ColorPickerProps extends TdColorPickerProps, StyledProps {}
+
+export interface TdColorContext {
+  color: ColorObject;
+  trigger: ColorPickerChangeTrigger;
+}
+
+export type TdColorSaturationData = {
+  saturation: number;
+  value: number;
+};
+
+export interface TdColorBaseProps {
+  disabled: boolean;
+  color: Color;
+  onChange?: (options?) => void;
+  baseClassName: string;
+}
+
+export type TdColorModes = keyof typeof import("./utils/color-picker/constants").COLOR_MODES;

package/color-picker/utils/color-picker/cmyk.ts

@@ -0,0 +1,89 @@
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export const rgb2cmyk = (red: number, green: number, blue: number) => {
+  let computedC = 0;
+  let computedM = 0;
+  let computedY = 0;
+  let computedK = 0;
+
+  const r = parseInt(`${red}`.replace(/\s/g, ''), 10);
+  const g = parseInt(`${green}`.replace(/\s/g, ''), 10);
+  const b = parseInt(`${blue}`.replace(/\s/g, ''), 10);
+
+  if (r === 0 && g === 0 && b === 0) {
+    computedK = 1;
+    return [0, 0, 0, 1];
+  }
+
+  computedC = 1 - r / 255;
+  computedM = 1 - g / 255;
+  computedY = 1 - b / 255;
+
+  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = (computedC - minCMY) / (1 - minCMY);
+  computedM = (computedM - minCMY) / (1 - minCMY);
+  computedY = (computedY - minCMY) / (1 - minCMY);
+  computedK = minCMY;
+
+  return [computedC, computedM, computedY, computedK];
+};
+
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export const cmyk2rgb = (cyan: number, magenta: number, yellow: number, black: number) => {
+  let c = cyan / 100;
+  let m = magenta / 100;
+  let y = yellow / 100;
+  const k = black / 100;
+
+  c = c * (1 - k) + k;
+  m = m * (1 - k) + k;
+  y = y * (1 - k) + k;
+
+  let r = 1 - c;
+  let g = 1 - m;
+  let b = 1 - y;
+
+  r = Math.round(255 * r);
+  g = Math.round(255 * g);
+  b = Math.round(255 * b);
+  return {
+    r,
+    g,
+    b,
+  };
+};
+
+const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
+
+const toNumber = (str: string) => Math.max(0, Math.min(255, parseInt(str, 10)));
+
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export const cmykInputToColor = (input: string) => {
+  if (/cmyk/i.test(input)) {
+    const str = input.replace(/\s/g, '');
+    const match = str.match(REG_CMYK_STRING);
+    const c = toNumber(match[1]);
+    const m = toNumber(match[2]);
+    const y = toNumber(match[3]);
+    const k = toNumber(match[4]);
+    const { r, g, b } = cmyk2rgb(c, m, y, k);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  return input;
+};