wix-style-react/dist/es/src/Swatches/Swatches.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import AddColor from './AddColor';
import Tooltip from '../Tooltip';
import parseColor from 'color';
import { Layout } from '../Layout';
import FillPreview from '../FillPreview';
import { dataHooks } from './constants';
import { PopoverCommonProps } from '../common/PropTypes/PopoverCommon';
const MINIMUM_GRID_GAP = 6;
/** Color swatches */
const Swatches = ({ colors = [], onClick = () => { }, selected = '', dataHook, showClear, showClearMessage = '', showAddButton, addButtonMessage, addButtonIconSize, onAdd, onChange, onCancel, columns = 6, gap = 12, popoverProps, }) => {
    const hexColors = colors.map(color => {
        const maybeColor = parseColor(color);
        return maybeColor ? maybeColor.hex() : color;
    });
    const uniqueColors = Array.from(new Set(hexColors));
    return (React.createElement(Layout, { dataHook: dataHook, cols: columns, gap: `${Math.max(MINIMUM_GRID_GAP, gap)}px` },
        showAddButton && (React.createElement(AddColor, { tooltip: addButtonMessage, iconSize: addButtonIconSize, onAdd: onAdd, onChange: onChange, onCancel: onCancel, popoverProps: popoverProps })),
        showClear && (React.createElement(Tooltip, { dataHook: dataHooks.emptyTooltip, disabled: !showClearMessage, appendTo: "window", size: "small", content: showClearMessage },
            React.createElement(FillPreview, { dataHook: dataHooks.empty, onClick: () => onClick(''), selected: selected === '' }))),
        uniqueColors.map((color, index) => (React.createElement(FillPreview, { dataHook: dataHooks.swatch, key: `${color}-${index}`, fill: color, onClick: () => onClick(color), selected: selected === color })))));
};
Swatches.propTypes = {
    /** Defines an array of colors to be shown as swatches. */
    colors: PropTypes.array,
    /** Specifies which color from the list is in a selected state. */
    selected: PropTypes.string,
    /** Applies a data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** Defines a callback function for  user click on a swatch. Returns color HEX string representation. */
    onClick: PropTypes.func,
    /** Size of swatches */
    size: PropTypes.oneOf(['small', 'medium']),
    /** Specifies whether to display a ‘No color’ option as a first item on a list or not. */
    showClear: PropTypes.bool,
    /** Defines a message to display on ‘No color’ option hover. `showClear` must be set to true. */
    showClearMessage: PropTypes.node,
    /** Defines a callback function for ‘Add’ button click. Returns color HEX string representation once user selects a color to be added. */
    onAdd: PropTypes.func,
    /** Defines a callback function for color change. Returns color HEX string representation. */
    onChange: PropTypes.func,
    /** Defines a callback function for color picker popover ‘Cancel’ action (user closes it without picking color). */
    onCancel: PropTypes.func,
    /** Specifies whether New color’ button is displayed or not. Add button opens up a color picker. */
    showAddButton: PropTypes.bool,
    /** Specifies a message to display on ‘Add’ button hover. If not provided, the tooltip won’t be displayed. */
    addButtonMessage: PropTypes.string,
    /** Controls the size of a plus icon inside of the add button. */
    addButtonIconSize: PropTypes.oneOf(['small', 'medium']),
    /** Specifies a number of columns in a single row. Default value is 6. */
    columns: PropTypes.number,
    /** Specifies a gap between swatches in pixels. Default value is 12px. */
    gap: PropTypes.number,
    /** Props that get passed to New color popover. */
    popoverProps: PropTypes.shape(PopoverCommonProps),
};
export default Swatches;
//# sourceMappingURL=Swatches.js.map