import * as React from 'react';
import { useEffect, useRef } from 'react';
import './App.css';
import JqxColorPicker from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcolorpicker';
import JqxDropDownButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxScrollView from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
function getTextElementByColor(color: any): string {
if (color === 'transparent' || color.hex === "") {
return 'transparent
';
}
const nThreshold = 105;
const bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
const foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
return `#${color.hex}
`;
}
const App = () => {
const myDropDown = useRef(null);
useEffect(() => {
if (myDropDown.current) {
myDropDown.current.setContent(getTextElementByColor({ hex: "FFAABB" }));
}
}, []);
const colorPickerEvent = (event: any) => {
if (myDropDown.current) {
myDropDown.current.setContent(getTextElementByColor(event.args.color));
}
const scrollView = document.getElementsByClassName('jqx-scrollview')[0] as HTMLElement;
if (scrollView) {
scrollView.style.borderColor = '#' + event.args.color.hex;
}
};
return (
);
};
export default App;