105 lines
2.2 KiB
JavaScript
105 lines
2.2 KiB
JavaScript
|
import PropTypes from "prop-types";
|
||
|
|
import Icons from "./icons";
|
||
|
|
import { __ } from "@wordpress/i18n";
|
||
|
|
const { Component, Fragment } = wp.element;
|
||
|
|
const { Button, Popover, Dashicon, ColorIndicator, Tooltip, Icon } =
|
||
|
|
wp.components;
|
||
|
|
// /**
|
||
|
|
// * WordPress dependencies
|
||
|
|
// */
|
||
|
|
// import { site, Icon } from '@wordpress/icons';
|
||
|
|
|
||
|
|
export const SwatchesControl = ({
|
||
|
|
colors,
|
||
|
|
isPalette,
|
||
|
|
onClick = () => {},
|
||
|
|
circleSize,
|
||
|
|
circleSpacing,
|
||
|
|
}) => {
|
||
|
|
const handleClick = (color, swatch) => {
|
||
|
|
onClick(
|
||
|
|
{
|
||
|
|
hex: color,
|
||
|
|
},
|
||
|
|
swatch
|
||
|
|
);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
paddingBottom: "15px",
|
||
|
|
}}
|
||
|
|
className="kadence-swatches-wrap"
|
||
|
|
>
|
||
|
|
{colors.map((colorObjOrString) => {
|
||
|
|
const c =
|
||
|
|
typeof colorObjOrString === "string"
|
||
|
|
? { color: colorObjOrString }
|
||
|
|
: colorObjOrString;
|
||
|
|
const key = `${c.color}${c.slug || ""}`;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={key}
|
||
|
|
style={{
|
||
|
|
width: circleSize,
|
||
|
|
height: circleSize,
|
||
|
|
marginBottom: 0,
|
||
|
|
transform: "scale(1)",
|
||
|
|
transition: "100ms transform ease",
|
||
|
|
}}
|
||
|
|
className="kadence-swatche-item-wrap"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
className={`kadence-swatch-item ${
|
||
|
|
isPalette === c.slug
|
||
|
|
? "swatch-active"
|
||
|
|
: "swatch-inactive"
|
||
|
|
}`}
|
||
|
|
style={{
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
border: "1px solid rgb(218, 218, 218)",
|
||
|
|
borderRadius: "50%",
|
||
|
|
color:
|
||
|
|
c.slug === "palette10"
|
||
|
|
? "var(--global-palette10)"
|
||
|
|
: `${c.color}`,
|
||
|
|
boxShadow: `inset 0 0 0 ${circleSize / 2}px`,
|
||
|
|
transition: "100ms box-shadow ease",
|
||
|
|
}}
|
||
|
|
onClick={() => handleClick(c.color, c.slug)}
|
||
|
|
tabIndex={0}
|
||
|
|
>
|
||
|
|
{/* <Icon
|
||
|
|
className="dashicon"
|
||
|
|
icon={ site }
|
||
|
|
/> */}
|
||
|
|
<Icon className="dashicon" icon={Icons.globe} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
SwatchesControl.defaultProps = {
|
||
|
|
circleSize: 26,
|
||
|
|
circleSpacing: 15,
|
||
|
|
};
|
||
|
|
|
||
|
|
SwatchesControl.propTypes = {
|
||
|
|
colors: PropTypes.arrayOf(
|
||
|
|
PropTypes.oneOfType([
|
||
|
|
PropTypes.string,
|
||
|
|
PropTypes.shape({
|
||
|
|
color: PropTypes.string,
|
||
|
|
slug: PropTypes.string,
|
||
|
|
name: PropTypes.string,
|
||
|
|
}),
|
||
|
|
])
|
||
|
|
).isRequired,
|
||
|
|
isPalette: PropTypes.string,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SwatchesControl;
|