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 "../color/getCSSColorFromDef" ; public export interface LineWeightSwatchProps extends React . ButtonHTMLAttributes < HTMLButtonElement > , CommonProps { /** color specification */ weight : number ; /** color specification */ colorDef ? : ColorDef ; /** hide the weight label */ hideLabel ? : boolean ; /** Disabled or not */ disabled ? : boolean ; /** Readonly or not */ readonly ? : boolean ; /** function to run when user selects a line weight swatch */ onClick ? : ( ) => void ; } public export class LineWeightSwatch extends React . PureComponent < LineWeightSwatchProps > { internal constructor ( props ) { super ( props ) ; } public override componentDidMount ( ) { } public override render ( ) { const { onClick , colorDef , weight , hideLabel , className , disabled , readonly , ... otherProps } = this . props ; let rgbaString = "" ; if ( colorDef ) { rgbaString = getCSSColorFromDef ( colorDef ) ; } const buttonStyle = colorDef ? { ... this . props . style , color : rgbaString } : { ... this . props . style } ; const svgStyle = colorDef ? { height : `${ weight }px` , background : rgbaString } : { height : `${ weight }px` } ; const handleClick = ( _e ) => { if ( onClick ) onClick ( ) ; } ; const classes = classnames ( "components-lineweight-swatch" , hideLabel && "hide-label" , readonly && "readonly" , className ) ; return ( < button { ... otherProps } style = { buttonStyle } className = { classes } onClick = { handleClick } disabled = { disabled } > { ! hideLabel && < span > { weight . toFixed ( 0 ) } < /span>} < div style = { svgStyle } / > < /button>); } }