@wix/design-system
Version:
@wix/design-system
47 lines • 1.96 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { safeColor } from './utils';
import ToggleButton from '../ToggleButton';
import { Pipette } from '@wix/wix-ui-icons-common';
import { DataHooks } from './constants';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
export const EyeDropper = ({ eyeDropperLabel, allowEmpty, onChange, }) => {
const [eyeDropperActive, setEyeDropperActive] = useState(false);
const icons = useIcons('ColorPickerEyeDropper', {
Pipette,
});
const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
if (!supportsEyeDropper) {
return null;
}
const handleEyeDropper = useCallback(async () => {
try {
setEyeDropperActive(true);
const eyeDropper = new window.EyeDropper();
const result = await eyeDropper.open();
if (result && result.sRGBHex) {
const _color = safeColor(result.sRGBHex, allowEmpty);
if (_color) {
onChange(_color);
}
}
}
catch (error) {
if (error instanceof DOMException) {
if (error.name === 'AbortError') {
// User cancelled - this is expected behavior, no action needed
return;
}
console.error('EyeDropper error:', error.name, error.message);
}
else {
console.error('Unexpected error:', error);
}
}
finally {
setEyeDropperActive(false);
}
}, [allowEmpty, onChange, setEyeDropperActive]);
return (React.createElement(ToggleButton, { size: "medium", onClick: handleEyeDropper, dataHook: DataHooks.eyeDropper, labelValue: eyeDropperLabel, selected: eyeDropperActive },
React.createElement(icons.Pipette, null)));
};
//# sourceMappingURL=ColorPickerEyeDropper.js.map