smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
977 lines (915 loc) • 40.1 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var index = require('./index-6d498b59.js');
var ColorHelper = require('./ColorHelper-27ee3c7d.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Div = require('./element/Div.js');
var Svg = require('./element/Svg.js');
var CSSTransition = require('./CSSTransition-5a3ab124.js');
var Button = require('./Button-0d381a87.js');
var DEFAULT_LANGUAGE = {
save: "Save",
cancel: "Cancel"
};
const INITIAL = 1;
const PARENT = 2;
const BUTTON = 4;
const INPUT = 8;
const DRAGGING = 16;
const DRAGGING_END = 32;
var size = {
small: {
width: 200,
majorPickerWidth: 125,
majorPickerHeight: 125,
majorDraggerSize: 18,
minorPickerWidth: 20,
minorPickerHeight: 125,
minorDraggerSize: 14,
paletteItemElementSize: 28
},
default: {
width: 275,
majorPickerWidth: 175,
majorPickerHeight: 175,
majorDraggerSize: 18,
minorPickerWidth: 30,
minorPickerHeight: 175,
minorDraggerSize: 14,
paletteItemElementSize: 23
},
large: {
width: 350,
majorPickerWidth: 250,
majorPickerHeight: 250,
majorDraggerSize: 18,
minorPickerWidth: 30,
minorPickerHeight: 250,
minorDraggerSize: 14,
paletteItemElementSize: 32
},
space: {
default: 10,
small: 5
},
radius: {
default: 8,
small: 4
},
icon: {
width: 18,
height: 18
}
};
var MajorPickerElement = styled__default.div `
> div {
border-top-left-radius: ${size.radius.default + 3}px !important;
}
.src-color-picker-gradient-light {
background: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));
}
.src-color-picker-gradient-dark {
background: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0));
}
`;
var MajorDraggerElement = styled__default.span(({ theme }) => `
&:after {
content: "";
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
border: solid 4px ${theme.src.colorPicker.colorLight};
border-radius: 100%;
}
`);
var MinorPickerElement = styled__default.div `
background: linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red);
`;
var OpacityPickerElement = styled__default.div ``;
var MinorDraggerElement = styled__default.span ``;
const customKeys = {
size: v => `
width: ${size[v].width}px;
${MajorPickerElement} {
width: ${size[v].majorPickerWidth}px;
height: ${size[v].majorPickerHeight}px;
${MajorDraggerElement} {
width: ${size[v].majorDraggerSize}px;
height: ${size[v].majorDraggerSize}px;
}
}
${MinorPickerElement},
${OpacityPickerElement} {
width: ${size[v].minorPickerWidth}px;
height: ${size[v].minorPickerHeight}px;
}
${MinorDraggerElement} {
width: ${size[v].minorDraggerSize}px;
height: ${size[v].minorDraggerSize}px;
}
.src-color-picker-palette-item {
width: ${size[v].paletteItemElementSize}px;
height: ${size[v].paletteItemElementSize}px;
}
`
};
var ColorPickerElement = styled__default(Div).attrs({ customKeys })(({ theme }) => `
box-sizing: border-box;
padding: ${size.space.default}px;
border-radius: ${size.radius.default}px;
background: ${theme.src.colorPicker.colorLight};
${MajorPickerElement},
${MinorPickerElement},
${OpacityPickerElement} {
position: relative;
overflow: hidden;
flex: 0 0 auto;
cursor: pointer;
touch-action: none;
&,
div {
border-radius: ${size.radius.default}px;
}
div {
height: 100%;
}
}
${MajorDraggerElement},
${MinorDraggerElement} {
position: absolute;
display: inline-block;
box-sizing: border-box;
border-radius: 100%;
border: solid 2px ${theme.src.colorPicker.colorLight};
box-shadow: ${theme.src.colorPicker.draggerBoxShadow};
&[data-src-is-dark="true"] {
&,
&:after {
border-color: ${theme.src.colorPicker.colorDark};
}
}
}
div.src-color-picker-picker-shadow {
box-shadow: ${theme.src.colorPicker.pickerBoxShadow};
}
.src-color-picker-bg-transparent {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
}
`);
class ColorPickerHelper {
/**
* Calculates new position of the dragger.
*
* @param e
* @param pickerEl
* @param draggerSize
*/
static getDraggerNewPosition(e, pickerEl, draggerSize) {
const pickerRect = pickerEl.getBoundingClientRect();
const draggerHalfSize = draggerSize / 2;
const eX = e.clientX || e.pageX - window.pageXOffset;
const eY = e.clientY || e.pageY - window.pageYOffset;
let x = eX - (pickerRect.left + draggerHalfSize);
let y = eY - (pickerRect.top + draggerHalfSize);
if (x < -draggerHalfSize)
x = -draggerHalfSize;
else if (x > (pickerRect.width - draggerHalfSize))
x = pickerRect.width - draggerHalfSize;
if (y < -draggerHalfSize)
y = -draggerHalfSize;
else if (y > (pickerRect.height - draggerHalfSize))
y = pickerRect.height - draggerHalfSize;
return {
left: x,
top: y,
x: x + draggerHalfSize,
y: y + draggerHalfSize
};
}
/**
* Checks if the given color is light.
*
* @param color
* @param opacity
*/
static isLight(color, opacity = true) {
const isLight = color.isLight();
return opacity ? (isLight || color.valpha < .4) : isLight;
}
}
const MajorPicker = ({ breakpoint, rgba, processStart, processEnd, majorPickerProcess, majorPickerBgEl, majorPickerDraggerEl, onRef }) => {
const pickerEl = React__default.useRef(null);
/**
* Adds mouse and touch events.
* Calls the process methods.
*
* @param e
*/
const start = (e) => {
DOMHelper.DOMHelper.addEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.addEventListener(document, ["mouseup", "touchend"], end);
processStart();
process(e);
};
/**
* Calls the process method.
*
* @param e
*/
const move = (e) => process(e);
/**
* Removes mouse and touch events.
* Calls the end process method.
*/
const end = () => {
DOMHelper.DOMHelper.removeEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.removeEventListener(document, ["mouseup", "touchend"], end);
processEnd();
};
/**
* Sets position of the major picker dragger.
* Calls the set value method.
*
* @param e
*/
const process = (e) => {
const { left, top, x, y } = ColorPickerHelper.getDraggerNewPosition(e, pickerEl.current, size[breakpoint].majorDraggerSize);
majorPickerDraggerEl.current.style.left = `${left}px`;
majorPickerDraggerEl.current.style.top = `${top}px`;
setValue(x, y);
};
/**
* Sets value by the given coordinators.
*
* @param x
* @param y
*/
const setValue = (x, y) => {
const rgb = [rgba.current[0], rgba.current[1], rgba.current[2]];
const width = size[breakpoint].majorPickerWidth;
const height = size[breakpoint].majorPickerHeight;
for (let i in rgb) {
const v = rgb[i];
let netVal;
if (v == 255)
netVal = Math.abs(Math.round(((255 / height) * y) - 255));
else {
const topNetVal = Math.round((height - y) * (v / height));
const leftVal = Math.round((width - x) * ((255 - v) / width));
const leftNetVal = Math.abs(Math.round((height - y) * (leftVal / width)));
netVal = topNetVal + leftNetVal;
}
rgb[i] = netVal;
}
majorPickerProcess(`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${rgba.current[3]})`, rgb);
};
React__default.useEffect(() => {
onRef({ setValue });
}, []);
return (React__default.createElement(MajorPickerElement, { ref: pickerEl, onMouseDown: start, onTouchStart: start },
React__default.createElement("div", { ref: majorPickerBgEl },
React__default.createElement("div", { className: "src-color-picker-gradient-light" },
React__default.createElement("div", { className: "src-color-picker-gradient-dark src-color-picker-picker-shadow" },
React__default.createElement(MajorDraggerElement, { ref: majorPickerDraggerEl }))))));
};
const MinorPicker = ({ breakpoint, processStart, processEnd, minorPickerStart, minorPickerProcess, minorPickerDraggerEl }) => {
const pickerEl = React__default.useRef(null);
/**
* Adds mouse and touch events.
* Calls the process methods.
*
* @param e
*/
const start = (e) => {
DOMHelper.DOMHelper.addEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.addEventListener(document, ["mouseup", "touchend"], end);
minorPickerStart();
processStart();
process(e);
};
/**
* Calls the process method.
*
* @param e
*/
const move = (e) => process(e);
/**
* Removes mouse and touch events.
* Calls the end process method.
*/
const end = () => {
DOMHelper.DOMHelper.removeEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.removeEventListener(document, ["mouseup", "touchend"], end);
processEnd();
};
/**
* Sets position of the minor picker dragger.
*
* @param e
*/
const process = (e) => {
const { left, top, y } = ColorPickerHelper.getDraggerNewPosition(e, pickerEl.current, size[breakpoint].minorDraggerSize);
minorPickerDraggerEl.current.style.left = `${left}px`;
minorPickerDraggerEl.current.style.top = `${top}px`;
const height = size[breakpoint].minorPickerHeight;
const h = Math.round(y * (360 / height));
minorPickerProcess(h);
};
return (React__default.createElement(MinorPickerElement, { className: "src-color-picker-picker-shadow", ref: pickerEl, onMouseDown: start, onTouchStart: start },
React__default.createElement(MinorDraggerElement, { ref: minorPickerDraggerEl })));
};
const OpacityPicker = ({ breakpoint, processStart, processEnd, opacityPickerProcess, opacityPickerBgEl, opacityPickerDraggerEl }) => {
const pickerEl = React__default.useRef(null);
/**
* Adds mouse and touch events.
* Calls the process methods.
*
* @param e
*/
const start = (e) => {
DOMHelper.DOMHelper.addEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.addEventListener(document, ["mouseup", "touchend"], end);
processStart();
process(e);
};
/**
* Calls the process method.
*
* @param e
*/
const move = (e) => process(e);
/**
* Removes mouse and touch events.
* Calls the end process method.
*/
const end = () => {
DOMHelper.DOMHelper.removeEventListener(document, ["mousemove", "touchmove"], move);
DOMHelper.DOMHelper.removeEventListener(document, ["mouseup", "touchend"], end);
processEnd();
};
/**
* Sets position of the opacity picker dragger.
*
* @param e
*/
const process = (e) => {
const { left, top, y } = ColorPickerHelper.getDraggerNewPosition(e, pickerEl.current, size[breakpoint].minorDraggerSize);
opacityPickerDraggerEl.current.style.left = `${left}px`;
opacityPickerDraggerEl.current.style.top = `${top}px`;
const height = size[breakpoint].minorPickerHeight;
const a = Math.round((100 / height) * y) / 100;
opacityPickerProcess(a);
};
return (React__default.createElement(OpacityPickerElement, { className: "src-color-picker-bg-transparent", ref: pickerEl, onMouseDown: start, onTouchStart: start },
React__default.createElement("div", { className: "src-color-picker-picker-shadow", ref: opacityPickerBgEl },
React__default.createElement(MinorDraggerElement, { ref: opacityPickerDraggerEl }))));
};
const PickerContainerElement = styled__default.div `
display: flex;
justify-content: space-between;
padding-bottom: ${size.space.default}px;
`;
const PickerContainer = ({ allowOpacity, breakpoint, value, setValue, onRef }) => {
const breakpointInit = React__default.useRef(false);
const rgba = React__default.useRef(null);
const majorPickerBgEl = React__default.useRef(null);
const majorPickerDraggerEl = React__default.useRef(null);
const majorPickerDraggerPosition = React__default.useRef(null);
const majorPicker = React__default.useRef(null);
const minorPickerDraggerEl = React__default.useRef(null);
const opacityPickerBgEl = React__default.useRef(null);
const opacityPickerDraggerEl = React__default.useRef(null);
React__default.useEffect(() => {
if (!breakpointInit.current)
breakpointInit.current = true;
else
setPosition(value.current, value.current ? ColorHelper.ColorHelper.getColor(value.current) : null);
}, [breakpoint]);
/**
* Sets positions of the draggers
*/
const setPosition = (value, color) => {
const majorDraggerHalfSize = size[breakpoint].majorDraggerSize / 2;
const minorDraggerHalfSize = size[breakpoint].minorDraggerSize / 2;
if (value) {
const rgb = color.rgb().color;
const hsl = color.hsl().color;
const [r, g, b] = rgb;
const [h] = hsl;
const a = color.valpha;
const rgbaString = `hsl(${h}, 100%, 50%)`;
const rgbaColor = ColorHelper.ColorHelper.getColor(rgbaString);
rgba.current = [...rgbaColor.rgb().color, a];
// major picker
majorPickerBgEl.current.style.background = rgbaString;
majorPickerDraggerEl.current.setAttribute(`data-src-is-dark`, ColorPickerHelper.isLight(color, false).toString());
const majorPickerWidth = size[breakpoint].majorPickerWidth;
const majorPickerHeight = size[breakpoint].majorPickerHeight;
const maxColor = Math.max(r, g, b);
const minColor = Math.min(r, g, b);
const topNetVal = Math.abs(Math.round(((majorPickerHeight / 255) * maxColor) - majorPickerHeight));
const leftVal = Math.abs(Math.round(((majorPickerWidth / 255) * minColor) - majorPickerWidth));
const leftNetVal = leftVal - Math.abs(Math.round((topNetVal / maxColor) * minColor));
majorPickerDraggerEl.current.style.left = `${leftNetVal - majorDraggerHalfSize}px`;
majorPickerDraggerEl.current.style.top = `${topNetVal - majorDraggerHalfSize}px`;
// minor & opacity picker
const minorPickerHeight = size[breakpoint].minorPickerHeight;
// minor picker
minorPickerDraggerEl.current.style.left = `calc(50% - ${minorDraggerHalfSize}px)`;
minorPickerDraggerEl.current.style.top = `${Math.round((minorPickerHeight / 360) * h) - minorDraggerHalfSize}px`;
// opacity picker
if (allowOpacity) {
opacityPickerBgEl.current.style.background = `linear-gradient(to top, rgba(${r}, ${g}, ${b}, 1), rgba(${r}, ${g}, ${b}, 0))`;
opacityPickerDraggerEl.current.setAttribute(`data-src-is-dark`, ColorPickerHelper.isLight(color).toString());
opacityPickerDraggerEl.current.style.left = `calc(50% - ${minorDraggerHalfSize}px)`;
opacityPickerDraggerEl.current.style.top = `${Math.round((minorPickerHeight / 100) * (a * 100)) - minorDraggerHalfSize}px`;
}
}
else {
rgba.current = [255, 0, 0, 1];
majorPickerBgEl.current.style.background = "rgb(255, 0, 0)";
majorPickerDraggerEl.current.setAttribute(`data-src-is-dark`, "true");
majorPickerDraggerEl.current.style.left = `-${majorDraggerHalfSize}px`;
majorPickerDraggerEl.current.style.top = `-${majorDraggerHalfSize}px`;
minorPickerDraggerEl.current.style.left = `calc(50% - ${minorDraggerHalfSize}px)`;
minorPickerDraggerEl.current.style.top = `-${minorDraggerHalfSize}px`;
if (allowOpacity) {
opacityPickerBgEl.current.style.background = `linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))`;
opacityPickerDraggerEl.current.setAttribute(`data-src-is-dark`, "true");
opacityPickerDraggerEl.current.style.left = `calc(50% - ${minorDraggerHalfSize}px)`;
opacityPickerDraggerEl.current.style.top = `${size[breakpoint].minorPickerHeight - minorDraggerHalfSize}px`;
}
}
};
/**
* It's called when the moving process is started.
*/
const processStart = () => document.body.setAttribute("data-src-color-picker-dragging", "true");
/**
* It's called when the moving process is ended.
* Calls setValue method.
*/
const processEnd = () => {
document.body.removeAttribute("data-src-color-picker-dragging");
setValue(value.current, null, DRAGGING_END);
};
/**
* Sets position and background of the opacity picker and dragger.
* Sets value.
*
* @param val
* @param rgb
*/
const majorPickerProcess = (val, rgb) => {
const color = ColorHelper.ColorHelper.getColor(val);
majorPickerDraggerEl.current.setAttribute(`data-src-is-dark`, ColorPickerHelper.isLight(color, false).toString());
if (allowOpacity) {
opacityPickerBgEl.current.style.background = `linear-gradient(to top, rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1), rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0))`;
opacityPickerDraggerEl.current.setAttribute(`data-src-is-dark`, ColorPickerHelper.isLight(color).toString());
}
setValue(val, color, DRAGGING);
};
/**
* Saves position of the major picker dragger for later use.
*/
const minorPickerStart = () => {
const halfMajorDraggerSize = size[breakpoint].majorDraggerSize / 2;
majorPickerDraggerPosition.current = {
x: majorPickerDraggerEl.current.offsetLeft + halfMajorDraggerSize,
y: majorPickerDraggerEl.current.offsetTop + halfMajorDraggerSize
};
};
/**
* Sets rgba and background of the major picker.
*
* @param h
*/
const minorPickerProcess = (h) => {
const val = `hsl(${h}, 100%, 50%)`;
const rgb = ColorHelper.ColorHelper.getColor(val).rgb().color;
rgba.current = [rgb[0], rgb[1], rgb[2], rgba.current[3]];
majorPickerBgEl.current.style.background = val;
majorPicker.current.setValue(majorPickerDraggerPosition.current.x, majorPickerDraggerPosition.current.y);
};
/**
* Sets value.
*
* @param a
*/
const opacityPickerProcess = (a) => {
rgba.current[3] = a;
const color = ColorHelper.ColorHelper.getColor(value.current).alpha(a);
opacityPickerDraggerEl.current.setAttribute(`data-src-is-dark`, ColorPickerHelper.isLight(color).toString());
setValue(color.toString(), color, DRAGGING);
};
React__default.useEffect(() => {
onRef({ setPosition });
}, []);
return (React__default.createElement(PickerContainerElement, null,
React__default.createElement(MajorPicker, { breakpoint: breakpoint, rgba: rgba, processStart: processStart, processEnd: processEnd, majorPickerProcess: majorPickerProcess, majorPickerBgEl: majorPickerBgEl, majorPickerDraggerEl: majorPickerDraggerEl, onRef: e => majorPicker.current = e }),
React__default.createElement(MinorPicker, { breakpoint: breakpoint, processStart: processStart, processEnd: processEnd, minorPickerStart: minorPickerStart, minorPickerProcess: minorPickerProcess, minorPickerDraggerEl: minorPickerDraggerEl }),
allowOpacity && React__default.createElement(OpacityPicker, { breakpoint: breakpoint, processStart: processStart, processEnd: processEnd, opacityPickerProcess: opacityPickerProcess, opacityPickerBgEl: opacityPickerBgEl, opacityPickerDraggerEl: opacityPickerDraggerEl })));
};
const InputElement = styled__default.input `
padding: ${size.space.small}px;
background: transparent;
font-family: "Open Sans",Source Sans,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
&,
&:active,
&:focus {
border: 0;
outline: 0;
}
`;
const Input = React__default.forwardRef(({ setValue }, ref) => {
const keyDown = (e) => {
if (e.keyCode == 13)
e.target.blur();
};
return React__default.createElement(InputElement, { ref: ref, spellCheck: false, onKeyDown: keyDown, onBlur: e => setValue(e.target.value, null, 8) });
});
var ClearIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M960 1408l336-384h-768l-336 384h768zm1013-1077q15 34 9.5 71.5t-30.5 65.5l-896 1024q-38 44-96 44h-768q-38 0-69.5-20.5t-47.5-54.5q-15-34-9.5-71.5t30.5-65.5l896-1024q38-44 96-44h768q38 0 69.5 20.5t47.5 54.5z" }),
viewBox: "0 0 2048 1792"
}) ``;
var ConsoleElement = styled__default.div(({ theme }) => `
padding-top: ${size.space.default}px;
> div {
> div {
position: relative;
overflow: hidden;
display: flex;
border-radius: ${size.radius.small}px;
> div {
flex: 0 0 auto;
}
> input {
flex: 1 1 auto;
}
${InputElement} {
color: ${theme.src.colorPicker.colorLight};
}
${ClearIcon} {
fill: ${theme.src.colorPicker.colorLight};
}
&[data-src-is-dark="true"] {
${InputElement} {
color: ${theme.src.colorPicker.colorDark};
}
${ClearIcon} {
fill: ${theme.src.colorPicker.colorDark};
}
}
}
}
`);
var ConsoleButtonElement = styled__default(Div)(({ theme, isDark }) => `
display: flex;
align-items: center;
padding: ${size.space.small}px;
cursor: pointer;
svg {
display: block;
width: ${size.icon.width}px;
height: ${size.icon.height}px;
fill: ${theme.src.colorPicker[isDark ? "colorDark" : "colorLight"]};
}
`);
var InitialIcon = styled__default(Svg).attrs({
children: React__default.createElement(React__default.Fragment, null,
React__default.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }),
React__default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" })),
viewBox: "0 0 24 24"
}) ``;
const InitialButton = ({ value, setValue }) => {
const getIsDark = () => {
try {
return value ? ColorPickerHelper.isLight(ColorHelper.ColorHelper.getColor(value)) : true;
}
catch (ignored) {
return true;
}
};
const [isDark, setIsDark] = React__default.useState(() => getIsDark());
React__default.useEffect(() => setIsDark(getIsDark()), [value]);
const setColor = () => setValue(value, null, BUTTON);
return (React__default.createElement("div", { "data-src-transparent-bg": true },
React__default.createElement(ConsoleButtonElement, { isDark: isDark, height: "100%", style: { background: value }, onClick: setColor },
React__default.createElement(InitialIcon, null))));
};
const ClearButton = ({ setValue }) => {
const setColor = () => setValue(null, null, BUTTON);
return (React__default.createElement(ConsoleButtonElement, { onClick: setColor },
React__default.createElement(ClearIcon, null)));
};
const Console = ({ initialColor, setValue, onRef }) => {
const consoleEl = React__default.useRef(null);
const inputEl = React__default.useRef(null);
/**
* Sets console style.
*
* @param value
* @param color
* @param changeType
*/
const setStyle = (value, color, changeType) => {
if (value) {
consoleEl.current.style.background = value;
consoleEl.current.setAttribute("data-src-is-dark", ColorPickerHelper.isLight(color).toString());
}
else {
consoleEl.current.style.background = "transparent";
consoleEl.current.setAttribute("data-src-is-dark", "true");
}
if (changeType != INPUT)
inputEl.current.value = value || "";
};
React__default.useEffect(() => {
onRef({ setStyle });
}, []);
return (React__default.createElement(ConsoleElement, null,
React__default.createElement("div", { className: "src-color-picker-bg-transparent" },
React__default.createElement("div", { ref: consoleEl },
React__default.createElement(InitialButton, { value: initialColor, setValue: setValue }),
React__default.createElement(Input, { ref: inputEl, setValue: setValue }),
React__default.createElement(ClearButton, { setValue: setValue })))));
};
var SaveIcon = styled__default(Svg).attrs({
children: React__default.createElement(React__default.Fragment, null,
React__default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
React__default.createElement("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" })),
viewBox: "0 0 24 24"
}) ``;
var CancelIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" }),
viewBox: "0 0 1792 1792"
}) ``;
const ButtonContainer = styled__default.div `
display: flex;
padding-top: ${size.space.default}px;
margin: -${size.space.small}px;
> a {
flex: 1 1 calc(50% - ${size.space.small * 2}px);
justify-content: center;
margin: ${size.space.small}px;
white-space: nowrap;
svg {
flex: 0 0 auto;
width: ${size.icon.width}px;
height: ${size.icon.height}px;
margin-right: ${size.space.small}px;
}
}
`;
const Buttons = ({ type, save, cancel, lang }) => {
return (React__default.createElement(ButtonContainer, null,
React__default.createElement(Button.Button, { type: type, size: "small", elementProps: { onClick: save } },
React__default.createElement(SaveIcon, null),
lang.save),
React__default.createElement(Button.Button, { type: type, size: "small", elementProps: { onClick: cancel } },
React__default.createElement(CancelIcon, null),
lang.cancel)));
};
var DEFAULT_PALETTE = ["#FFFFB5", "#FBBD87", "#F45151", "#7AEA89", "#91C8E7", "#8EB4E6", "#B0A7F1"];
var ArrowDownIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1395 864q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23zm0-384q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" }),
viewBox: "0 0 1792 1792"
}) ``;
const PaletteArrowElement = styled__default(ArrowDownIcon)(({ theme }) => `
display: block;
width: ${size.icon.width}px;
height: ${size.icon.height}px;
margin: auto;
fill: ${theme.src.colorPicker.paletteIconColor};
`);
const PaletteArrow = ({ status, setStatus }) => {
const toggle = () => setStatus(!status);
return React__default.createElement(PaletteArrowElement, { onClick: toggle });
};
var AddIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z" }),
viewBox: "0 0 1792 1792"
}) ``;
const Hr = styled__default.hr(({ theme }) => `
margin: ${size.space.default}px -${size.space.default}px;
border: solid 1px ${theme.src.colorPicker.paletteBorderColor};
`);
const PaletteListElement = styled__default.ul `
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: -${size.space.small}px;
`;
const PaletteItemElement = styled__default.li(({ theme, add }) => `
overflow: hidden;
flex: 0 0 auto;
box-sizing: border-box;
margin: ${size.space.small}px;
border-radius: ${size.radius.small}px;
${add ? `
display: flex;
justify-content: center;
align-items: center;
border: solid 1px ${theme.src.colorPicker.paletteBorderColor};
` : `
> div {
width: 100%;
height: 100%;
}
`}
`);
const PaletteAddElement = styled__default(AddIcon)(({ theme }) => `
display: block;
width: ${size.icon.width}px;
height: ${size.icon.height}px;;
fill: ${theme.src.colorPicker.paletteIconColor};
`);
const Palette = ({ value, setValue, allowAddColorPalette, palette, setPalette }) => {
/**
* Adds value to the palette, if it already is not in the palette.
*/
const addColor = () => {
if (palette.indexOf(value) == -1)
setPalette([value, ...palette]);
};
/**
* Sets the given color as current color.
*/
const setColor = (val) => setValue(val, null, BUTTON);
return (React__default.createElement("div", null,
React__default.createElement(Hr, null),
React__default.createElement(PaletteListElement, null,
allowAddColorPalette && (React__default.createElement(PaletteItemElement, { add: true, className: "src-color-picker-palette-item" },
React__default.createElement(PaletteAddElement, { onClick: addColor }))),
palette.map(item => (React__default.createElement(PaletteItemElement, { key: item, add: false, className: "src-color-picker-palette-item src-color-picker-bg-transparent", onClick: () => setColor(item) },
React__default.createElement("div", { style: { background: item } })))))));
};
const PaletteContainerElement = styled__default.div `
padding-top: ${size.space.default}px;
`;
const PaletteContainer = ({ value, setValue, colorFormat, allowAddColorPalette, addDefaultPaletteColors, palette, setPalette }) => {
/**
* Converts palette colors to the given color format and removes duplicate colors.
*
* @param arr
*/
const convertPaletteColors = (arr) => {
const result = [];
arr.forEach(item => {
try {
const color = ColorHelper.ColorHelper.getColor(item);
const colorVal = (colorFormat == "hex" && color.valpha < 1) ? color.rgb().toString() : color[colorFormat]().toString();
if (result.indexOf(colorVal) == -1)
result.push(colorVal);
}
catch (ignored) { }
});
return result;
};
const init = React__default.useRef(false);
/**
* Local palette (pallette$) holds the palette data if palette data is not given as props to ColorPicker.
*/
const [palette$, setPalette$] = React__default.useState(() => convertPaletteColors(addDefaultPaletteColors ? DEFAULT_PALETTE : []));
const [status, setStatus] = React__default.useState(false);
React__default.useEffect(() => {
if (palette)
setPalette(convertPaletteColors((!init.current && addDefaultPaletteColors) ? [...palette, ...DEFAULT_PALETTE] : palette));
else if (init.current)
setPalette$(convertPaletteColors(palette$));
if (!init.current)
init.current = true;
}, [colorFormat]);
return (React__default.createElement(PaletteContainerElement, null,
React__default.createElement(PaletteArrow, { status: status, setStatus: setStatus }),
React__default.createElement(CSSTransition.CSSTransition, { status: status, className: "src-fade" },
React__default.createElement(Palette, { value: value, setValue: setValue, allowAddColorPalette: allowAddColorPalette, palette: palette || palette$, setPalette: setPalette || setPalette$ }))));
};
const GlobalStyle = styled.createGlobalStyle `
body[data-src-color-picker-dragging] {
user-select: none !important;
}
`;
const ColorPicker = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, elementProps = index.DV.JSX_ELEMENT_PROPS, type = "primary", value, setValue, colorFormat = "hex", allowOpacity = true, showConsole = true, showButtons = true, showPalette = true, allowAddColorPalette = true, addDefaultPaletteColors = true, palette, setPalette, lang = DEFAULT_LANGUAGE, onChange, onSave, onCancel }) => {
const theme = React__default.useContext(styled.ThemeContext).src;
const getBreakpoint = () => DOMHelper.DOMHelper.getBreakpointKey({ size, sizeSm, sizeMd, sizeLg, sizeXl }, theme);
const [breakpoint, setBreakpoint] = React__default.useState(() => DOMHelper.DOMHelper.isServer ? size : getBreakpoint());
const [initialColor, setInitialColor] = React__default.useState(() => value);
const valueInit = React__default.useRef(false);
const value$ = React__default.useRef(null);
const pickerContainer = React__default.useRef(null);
const console$ = React__default.useRef(null);
/**
* Sets breakpoint.
*/
const resize = () => setBreakpoint(getBreakpoint());
/**
* Converts value to the given color format and returns it
*/
const convertValue = (val, col) => {
let isChanged = false; // if value is changed
try {
if (!col)
col = ColorHelper.ColorHelper.getColor(val);
}
catch (ignored) {
if (val != null) {
val = null;
isChanged = true;
}
}
if (val) {
if (!allowOpacity && col.valpha < 1) {
col = col.alpha(1);
isChanged = true;
}
const _val = (colorFormat == "hex" && col.valpha < 1) ? col.rgb().toString() : col[colorFormat]().toString();
if (val != _val)
isChanged = true;
val = _val;
}
return {
value: val,
color: col,
isChanged
};
};
/**
* According to changeType, sets value and calls onchange method.
*
* @param val
* @param col
* @param changeType - 1:initial, 2:parent, 4:button, 8:input, 16:dragging, 32:draggingEnd
*
*/
const setValue$ = (val, col, changeType) => {
if (changeType != DRAGGING_END) {
const oldValue = value$.current;
const cv = convertValue(val, col); // converted new value
value$.current = cv.value;
const color = cv.color;
if ((value$.current == oldValue && changeType == DRAGGING) ||
(value$.current == value && changeType & (BUTTON | INPUT)))
return;
if (changeType != DRAGGING)
pickerContainer.current.setPosition(value$.current, color);
if (console$.current)
console$.current.setStyle(value$.current, color, changeType);
}
if (!(changeType & (INITIAL | DRAGGING_END)) && onChange)
onChange(value$.current);
if (changeType & (BUTTON | INPUT | DRAGGING_END))
setValue(value$.current);
};
/**
* Sets color as initial color.
*/
const save = () => {
setInitialColor(value);
if (onSave)
onSave();
};
/**
* Sets initial color as color.
*/
const cancel = () => {
setValue$(initialColor, null, BUTTON);
if (onCancel)
onCancel();
};
React__default.useEffect(() => {
DOMHelper.DOMHelper.addEventListener(window, ["resize"], resize);
return () => {
DOMHelper.DOMHelper.removeEventListener(window, ["resize"], resize);
};
}, []);
React__default.useEffect(() => {
if (!valueInit.current || value != value$.current) {
const cv = convertValue(value);
if (cv.isChanged) {
if (!valueInit.current)
setInitialColor(cv.value);
setValue(cv.value);
}
else {
const type = valueInit.current ? PARENT : INITIAL;
valueInit.current = true;
setValue$(cv.value, cv.color, type);
}
}
}, [value]);
return (React__default.createElement(ColorPickerElement, Object.assign({}, elementProps, { size: size, sizeSm: sizeSm, sizeMd: sizeMd, sizeLg: sizeLg, sizeXl: sizeXl }),
React__default.createElement(GlobalStyle, null),
React__default.createElement(PickerContainer, { allowOpacity: allowOpacity, breakpoint: breakpoint, value: value$, setValue: setValue$, onRef: e => pickerContainer.current = e }),
showConsole && React__default.createElement(Console, { initialColor: initialColor, setValue: setValue$, onRef: e => console$.current = e }),
showButtons && React__default.createElement(Buttons, { type: type, save: save, cancel: cancel, lang: lang }),
showPalette && React__default.createElement(PaletteContainer, { value: value, setValue: setValue$, colorFormat: colorFormat, allowAddColorPalette: allowAddColorPalette, addDefaultPaletteColors: addDefaultPaletteColors, palette: palette, setPalette: setPalette })));
};
exports.ColorPicker = ColorPicker;