[DE] fix open palette console error

This commit is contained in:
Maxim Kadushkin 2020-12-27 16:27:38 +03:00
parent d43d9d61d2
commit c60cc871c0

View file

@ -8,13 +8,13 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
<div className='palette'> <div className='palette'>
{themeColors.map((row, rowIndex) => { {themeColors.map((row, rowIndex) => {
return( return(
<div className='row'> <div key={`tc-row-${rowIndex}`} className='row'>
{row.map((effect, index) => { {row.map((effect, index) => {
return( return(
<a key={'tc-' + rowIndex + '-' + index} <a key={`tc-${rowIndex}-${index}`}
className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''} className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''}
data-effectvalue={effect.effectValue} data-effectvalue={effect.effectValue}
style={{ background: '#' + effect.color}} style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId)}} onClick={() => {onColorClick(effect.color, effect.effectId)}}
></a> ></a>
) )
@ -31,16 +31,16 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
<div className='palette'> <div className='palette'>
{standartColors.map((color, index) => { {standartColors.map((color, index) => {
return( return(
index === 0 && options.transparent ? index === 0 && options.transparent ?
<a key={'sc-' + index} <a key={`sc-${index}`}
className={'transparent' + ('transparent' === curColor ? ' active' : '')} className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
onClick={() => {onColorClick('transparent')}} onClick={() => {onColorClick('transparent')}}
></a> : ></a> :
<a key={'sc-' + index} <a key={`sc-${index}`}
className={curColor && curColor === color ? ' active' : ''} className={curColor && curColor === color ? ' active' : ''}
style={{ background: '#' + color}} style={{ background: `#${color}` }}
onClick={() => {onColorClick(color)}} onClick={() => {onColorClick(color)}}
></a> ></a>
) )
})} })}
</div> </div>
@ -52,9 +52,9 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
const emptyItems = []; const emptyItems = [];
if (dynamicColors.length < options.dynamiccolors) { if (dynamicColors.length < options.dynamiccolors) {
for (let i = dynamicColors.length; i < options.dynamiccolors; i++) { for (let i = dynamicColors.length; i < options.dynamiccolors; i++) {
emptyItems.push(<a key={'dc-empty' + i} emptyItems.push(<a className='empty-color'
style={{background: '#ffffff'}} key={`dc-empty${i}`}
onClick={() => {onColorClick('empty')}} onClick={() => {onColorClick('empty')}}
></a>) ></a>)
} }
} }
@ -62,7 +62,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
<div className='palette'> <div className='palette'>
{dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => { {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => {
return( return(
<a key={'dc-' + index} <a key={`dc-${index}`}
className={curColor && curColor === color ? 'active' : ''} className={curColor && curColor === color ? 'active' : ''}
style={{background: '#' + color}} style={{background: '#' + color}}
onClick={() => {onColorClick(color)}} onClick={() => {onColorClick(color)}}