@wix/design-system
Version:
@wix/design-system
24 lines • 1.75 kB
JavaScript
import React from 'react';
import AddColor from './AddColor';
import Tooltip from '../Tooltip';
import parseColor from 'color';
import { Layout } from '../Layout';
import FillPreview from '../FillPreview';
import { dataHooks } from './constants';
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, renderColorPicker, }) => {
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, renderColorPicker: renderColorPicker })),
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.displayName = 'Swatches';
export default Swatches;
//# sourceMappingURL=Swatches.js.map