@wix/design-system/dist/types/Swatches/index.d.ts

@wix/design-system

import * as React from 'react';
import Color from 'color';
import { PopoverCommonProps } from '../common';

export interface SwatchesProps {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Defines an array of colors to be shown as swatches. */
  colors?: (object | string)[];
  /** Specifies which color from the list is in a selected state. */
  selected?: string;
  /** Defines a callback function for  user click on a swatch. Returns color HEX string representation. */
  onClick?: string | object;
  /** Size of swatches */
  size?: 'small' | 'medium';
  /** Specifies whether to display a 'No color' option as a first item on a list or not. */
  showClear?: boolean;
  /** Defines a message to display on 'No color' option hover. `showClear` must be set to true. */
  showClearMessage?: React.ReactNode;
  /** Defines a callback function for 'Add' button click. Returns color HEX string representation once user selects a color to be added. */
  onAdd?: (hexColor: string) => void;
  /** Defines a callback function for color change. Returns color HEX string representation. */
  onChange?: (hexColor: string) => void;
  /** Defines a callback function for color picker popover 'Cancel' action (user closes it without picking color). */
  onCancel?: () => void;
  /** Specifies whether New color' button is displayed or not. Add button opens up a color picker. */
  showAddButton?: boolean;
  /** Specifies a message to display on 'Add' button hover. If not provided, the tooltip won't be displayed. */
  addButtonMessage?: string;
  /** Controls the size of a plus icon inside of the add button. */
  addButtonIconSize?: 'small' | 'medium';
  /** Specifies a number of columns in a single row. Default value is 6.
   * @default 6
   */
  columns?: number;
  /** Specifies a gap between swatches in pixels. Default value is 12px.
   * @default 12
   */
  gap?: number;
  /** Props that get passed to New color popover. */
  popoverProps?: PopoverCommonProps;
  /**
   * Custom render function for the color picker.
   * Provides full control over the color picker UI and behavior.
   *
   * @example
   * // Using default ColorPicker with custom props
   * renderColorPicker={({ cancel, confirm, setColor, currentColor }) => (
   *   <ColorPicker
   *     value={currentColor}
   *     showInput={true}
   *     showConverter={true}
   *     onCancel={cancel}
   *     onConfirm={confirm}
   *     onChange={setColor}
   *   />
   * )}
   */
  renderColorPicker?: (params: {
    cancel: () => void;
    confirm: () => void;
    setColor: (color: Color) => void;
    currentColor: Color;
  }) => React.ReactNode;
}

export default class Swatches extends React.PureComponent<SwatchesProps> {}