wix-style-react
Version:
121 lines (105 loc) • 4.18 kB
JavaScript
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';
var MINIMUM_GRID_GAP = 6;
/** Color swatches */
var Swatches = function Swatches(props) {
var colors = props.colors,
_onClick = props.onClick,
selected = props.selected,
dataHook = props.dataHook,
showClear = props.showClear,
showClearMessage = props.showClearMessage,
showAddButton = props.showAddButton,
addButtonMessage = props.addButtonMessage,
addButtonIconSize = props.addButtonIconSize,
onAdd = props.onAdd,
onChange = props.onChange,
onCancel = props.onCancel,
columns = props.columns,
gap = props.gap;
var hexColors = colors.map(function (color) {
var maybeColor = parseColor(color);
return maybeColor ? maybeColor.hex() : color;
});
var uniqueColors = Array.from(new Set(hexColors));
return /*#__PURE__*/React.createElement(Layout, {
dataHook: dataHook,
cols: columns,
gap: "".concat(Math.max(MINIMUM_GRID_GAP, gap), "px")
}, showAddButton && /*#__PURE__*/React.createElement(AddColor, {
tooltip: addButtonMessage,
iconSize: addButtonIconSize,
onAdd: onAdd,
onChange: onChange,
onCancel: onCancel
}), showClear && /*#__PURE__*/React.createElement(Tooltip, {
dataHook: dataHooks.emptyTooltip,
disabled: !showClearMessage,
appendTo: "window",
size: "small",
content: showClearMessage
}, /*#__PURE__*/React.createElement(FillPreview, {
dataHook: dataHooks.empty,
onClick: function onClick() {
return _onClick('');
},
selected: selected === ''
})), uniqueColors.map(function (color, index) {
return /*#__PURE__*/React.createElement(FillPreview, {
dataHook: dataHooks.swatch,
key: "".concat(color, "-").concat(index),
fill: color,
onClick: function onClick() {
return _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
};
Swatches.defaultProps = {
colors: [],
onClick: function onClick() {},
selected: '',
showClearMessage: '',
columns: 6,
gap: 12
};
export default Swatches;