mirror of
https://github.com/maputnik/editor.git
synced 2025-12-27 16:40:00 +00:00
Some perf improvements when updating the layers list, also throttled color picker.
This commit is contained in:
@@ -2,6 +2,7 @@ import React from 'react'
|
||||
import Color from 'color'
|
||||
import ChromePicker from 'react-color/lib/components/chrome/Chrome'
|
||||
import PropTypes from 'prop-types'
|
||||
import lodash from 'lodash';
|
||||
|
||||
function formatColor(color) {
|
||||
const rgb = color.rgb
|
||||
@@ -23,6 +24,15 @@ class ColorField extends React.Component {
|
||||
pickerOpened: false
|
||||
}
|
||||
|
||||
constructor () {
|
||||
super();
|
||||
this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
|
||||
}
|
||||
|
||||
onChangeNoCheck (v) {
|
||||
this.props.onChange(formatColor(v));
|
||||
}
|
||||
|
||||
//TODO: I much rather would do this with absolute positioning
|
||||
//but I am too stupid to get it to work together with fixed position
|
||||
//and scrollbars so I have to fallback to JavaScript
|
||||
@@ -82,7 +92,7 @@ class ColorField extends React.Component {
|
||||
}}>
|
||||
<ChromePicker
|
||||
color={currentColor}
|
||||
onChange={c => this.props.onChange(formatColor(c))}
|
||||
onChange={c => this.onChangeNoCheck(formatColor(c))}
|
||||
/>
|
||||
<div
|
||||
className="maputnik-color-picker-offset"
|
||||
|
||||
Reference in New Issue
Block a user