moony/themer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve performance of color type input

Browse Source
This commit is contained in:
Matt Swensen 2020-07-21 09:02:19 -06:00
parent 6faf457ff3
commit eedc30f583
No known key found for this signature in database
GPG Key ID: 3F9E482BFC526F35
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/ColorInput.js
View File

@ -16,6 +16,10 @@ export default ({ className, style, colorKey, help }) => {
getActiveContrastFromBackground,
} = useContext(ThemeContext);
const debouncedLogEvent = useCallback(debounce(window.__ssa__log, 1000), []);
const debouncedSetActiveRawColor = useCallback(
debounce(setActiveRawColor, 100),
[setActiveRawColor],
);
const contrast = colorKey === 'shade0'
? null
: numeral(getActiveContrastFromBackground(colorKey)).format('0.00');
@ -68,7 +72,7 @@ export default ({ className, style, colorKey, help }) => {
className={ styles.colorInput }
value={ getActiveColorOrFallback([colorKey], colorKey === 'shade0') }
onChange={ evt => {
setActiveRawColor(colorKey, evt.target.value);
debouncedSetActiveRawColor(colorKey, evt.target.value);
debouncedLogEvent('change raw color', { inputType: 'color' });
} }
tabIndex="-1"