Module: Swatch

Allows users to select from a pallete of swatches, or add their own using a color picker

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`allowNew`	boolean	Whether to display an icon to add new swatches to the palette.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`i18n`	object	Translated strings for the UI.
`id`	string	The ID for the component.
`labelAttributes`	object	Custom attributes to apply to the label for each swatch.
`name`	string	The name of the component.
`palette`	Array	An array of hex color values to display as default palette options.
`paletteCustom`	Array	An array of hex color values to display as custom/editable palette options.
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`value`	string	The initial hex value to select.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: modules/Swatch/index.js, line 10

Returns:

The Swatch component.

Type:: JSX.Element

Example

import Swatch from '@gravityforms/components/react/admin/modules/Swatch';

return (
    <Swatch customClasses={ [ 'example-class' ] } palette={ [ '#000', '#111' ] } />
);

Methods

(inner) handleColorChange(event) → {void}

Handler for the color change event.

Parameters:

Name	Type	Description
`event`	object	Event object.

Since: 1.1.15
Source: modules/Swatch/index.js, line 132

Returns:

Type:: void

(inner) handlePickerCancel() → {void}

Handler for the cancel event on the swatch.

Since: 1.1.15
Source: modules/Swatch/index.js, line 82

Returns:

Type:: void

(inner) handlePickerDelete(index) → {void}

Handler for the delete event on the swatch.

Parameters:

Name	Type	Description
`index`	number	Index of the swatch palette.

Since: 1.1.15
Source: modules/Swatch/index.js, line 94

Returns:

Type:: void

(inner) handlePickerSave(swatch) → {void}

Handler for the save event on the swatch.

Parameters:

Name	Type	Description
`swatch`	string	The swatch value.

Since: 1.1.15
Source: modules/Swatch/index.js, line 109

Returns:

Type:: void

(inner) renderAddNewSwatchOption() → {JSX.Element}

Render the add new swatch option.

Since: 1.1.15
Source: modules/Swatch/index.js, line 239

Returns:

The add new swatch option.

Type:: JSX.Element

(inner) renderSwatchOption(swatch, index, isCustom) → {JSX.Element}

Render the swatch option.

Parameters:

Name	Type	Description
`swatch`	string	The swatch value.
`index`	number	The index of the swatch palette.
`isCustom`	boolean	Whether the swatch is custom or not.

Since: 1.1.15
Source: modules/Swatch/index.js, line 146

Returns:

The swatch option.

Type:: JSX.Element