ColorPickerButton Variable

ColorPickerButton component

Type

ForwardRefExoticComponent<>

Default Value

```typescript React.forwardRef<HTMLButtonElement, ColorPickerProps>( function ColorPickerButton(props, ref) { const target = React.useRef(null); const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor. const [showPopup, setShowPopup] = React.useState(false); const [colorDef, setColorDef] = React.useState(props.initialColor);

const defaultColors = React.useRef(
  [
    ColorDef.create(ColorByName.red),
    ColorDef.create(ColorByName.orange),
    ColorDef.create(ColorByName.yellow),
    ColorDef.create(ColorByName.green),
    ColorDef.create(ColorByName.blue),
    ColorDef.create(ColorByName.indigo),
    ColorDef.create(ColorByName.violet),
    ColorDef.create(ColorByName.black),
    ColorDef.create(ColorByName.white),
    ColorDef.create(ColorByName.cyan),
    ColorDef.create(ColorByName.fuchsia),
    ColorDef.create(ColorByName.tan),
    ColorDef.create(ColorByName.gray),
    ColorDef.create(ColorByName.brown),
    ColorDef.create(ColorByName.purple),
    ColorDef.create(ColorByName.olive),
  ]);

const closePopup = React.useCallback(() => {
  setShowPopup(false);
}, []);

const togglePopup = React.useCallback(() => {
  setShowPopup(!showPopup);
}, [showPopup]);

const handleColorPicked = React.useCallback((color: ColorDef) => {
  closePopup();

  if (!color.equals(colorDef)) {
    setColorDef(color);

    // istanbul ignore else
    if (props.onColorPick)
      props.onColorPick(color);
  }
}, [closePopup, colorDef, props]);

const { b, g, r, t } = colorDef.colors;
const rgbaString = `rgb(${r},${g},${b},${(255 - t) / 255})`;

const buttonStyle = { backgroundColor: rgbaString, ...props.style } as React.CSSProperties;
const buttonClassNames = classnames("components-colorpicker-button",
  props.round && "round",
  props.readonly && "readonly",
  props.className,
);

const colorOptions = props.colorDefs && props.colorDefs.length ? props.colorDefs : defaultColors.current;
return (
  <>
    <button data-testid="components-colorpicker-button" onClick={togglePopup} className={buttonClassNames} style={buttonStyle} disabled={props.disabled} ref={refs} />
    <Popup
      className="components-colorpicker-popup"
      isOpen={showPopup}
      position={RelativePosition.BottomLeft}
      onClose={closePopup}
      target={target.current} >
      <ColorOptions handleColorPicked={handleColorPicked} options={colorOptions} numColumns={props.numColumns ? props.numColumns : 4} round={!!props.round} title={props.dropDownTitle} />
    </Popup>
  </>
);

})```

Beta

Defined in

Last Updated: 13 August, 2020