packageDocumentation module import "./Swatch.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { ColorDef } from "@itwin/core-common" ; import { CommonProps } from "@itwin/core-react" ; import { getCSSColorFromDef } from "./getCSSColorFromDef" ; beta export interface ColorSwatchProps extends React . ButtonHTMLAttributes < HTMLButtonElement > , CommonProps { /** color specification */ colorDef : ColorDef ; /** function to run when user selects color swatch */ onColorPick ? : ( ( color : ColorDef , e : React . MouseEvent ) => void ) | undefined ; /** Show swatches as squares unless round is set to true */ round ? : boolean ; } beta export function ColorSwatch ( props ) { const rgbaString = getCSSColorFromDef ( props . colorDef ) ; const colorStyle = { backgroundColor : rgbaString , ... props . style } ; const handleClick = ( e ) => { if ( props && props . onColorPick ) props . onColorPick ( props . colorDef , e ) ; } ; const classes = classnames ( "components-color-swatch" , props . round && "round" , props . className ) ; const { onColorPick , colorDef , round , ... otherProps } = props ; return < button { ... otherProps } style = { colorStyle } className = { classes } onClick = { handleClick } / > ; }