IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix an issue where clear color is not reflecting in color picker. #4392 (#5425)

Browse Source
This commit is contained in:
Aditya Toshniwal 2022-10-12 16:34:54 +05:30 committed by GitHub
parent 3c52139ce5
commit ae82a4b279
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/pgadmin/static/js/helpers/withColorPicker.js
View File

@ -29,9 +29,11 @@ export function withColorPicker(Component) {
}; };
const eleRef = useRef(); const eleRef = useRef();
const pickrObj = useRef(); const pickrObj = useRef();
const onChangeRef = useRef(onChange);
const onSaveRef = useRef(onSave);
const setColor = (newVal) => { const setColor = (newVal, silent) => {
pickrObj.current?.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal); pickrObj.current?.setColor((_.isUndefined(newVal) || newVal == '') ? pickrOptions.defaultColor : newVal, silent);
}; };
const destroyPickr = () => { const destroyPickr = () => {
@ -95,9 +97,9 @@ export function withColorPicker(Component) {
} }
}); });
}).on('clear', () => { }).on('clear', () => {
onChange?.(''); onChangeRef.current?.('');
}).on('change', (color) => { }).on('change', (color) => {
onChange?.(color.toHEXA().toString()); onChangeRef.current?.(color.toHEXA().toString());
}).on('show', (color, instance) => { }).on('show', (color, instance) => {
const { palette } = instance.getRoot().palette; const { palette } = instance.getRoot().palette;
palette.focus(); palette.focus();
@ -106,10 +108,10 @@ export function withColorPicker(Component) {
button.focus(); button.focus();
}).on('save', (color, instance) => { }).on('save', (color, instance) => {
if(color) { if(color) {
color.toHEXA().toString() != fullHexColor(value) && onSave?.(color.toHEXA().toString()); color.toHEXA().toString() != fullHexColor(value) && onSaveRef.current?.(color.toHEXA().toString());
instance?.hide(); instance?.hide();
} else { } else {
onSave?.(''); onSaveRef.current?.('');
} }
}); });
@ -126,10 +128,10 @@ export function withColorPicker(Component) {
}, [...Object.values(pickrOptions)]); }, [...Object.values(pickrOptions)]);
useEffect(() => { useEffect(() => {
if (pickrObj.current && !pickrOptions.allowSave) { if (pickrObj.current) {
setColor(value); setColor(value, true);
} }
}, [value, pickrOptions.allowSave]); }, [value]);
return <Component ref={eleRef} {...props}/>; return <Component ref={eleRef} {...props}/>;
}; };