<commit_before>import React, { useState, useEffect } from 'react';
import { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next';

const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
    return (
        <div className='palette'>
            {themeColors.map((row, rowIndex) => {
                return(
                    <div key={`tc-row-${rowIndex}`} className='row'>
                        {row.map((effect, index) => {
                            return(
                                <a key={`tc-${rowIndex}-${index}`}
                                   className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
                                   style={{ background: `#${effect.color}`}}
                                   onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                ></a>
                            )
                        })}
                    </div>
                )
            })}
        </div>
    )
};

const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
    return (
        <div className='palette'>
            {standartColors.map((color, index) => {
                return(
                    index === 0 && options.transparent ?
                        <a key={`sc-${index}`}
                           className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
                           onClick={() => {onColorClick('transparent')}}
                        ></a> :
                        <a key={`sc-${index}`}
                           className={curColor && curColor === color ? ' active' : ''}
                           style={{ background: `#${color}` }}
                           onClick={() => {onColorClick(color)}}
                        ></a>
                )
            })}
        </div>
    )
};

const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
    const colors = customColors.length > 0 ? customColors : [];
    const emptyItems = [];
    if (colors.length < options.customcolors) {
        for (let i = colors.length; i < options.customcolors; i++) {
            emptyItems.push(<a className='empty-color'
                                key={`dc-empty${i}`}
                                onClick={() => {onColorClick('empty')}}
            ></a>)
        }
    }
    return (
        <div className='palette'>
            {colors && colors.length > 0 && colors.map((color, index) => {
                return(
                    <a key={`dc-${index}`}
                       className={curColor && curColor === color ? 'active' : ''}
                       style={{background: `#${color}`}}
                       onClick={() => {onColorClick(color)}}
                    ></a>
                )
            })}
            {emptyItems.length > 0 && emptyItems}
        </div>
    )
};

const ThemeColorPalette = props => {
    const {t} = useTranslation();
    const _t = t('Common.ThemeColorPalette', {returnObjects: true});
    const options = {
        customcolors: props.customcolors || 10,
        standardcolors: props.standardcolors || 10,
        themecolors: props.themecolors || 10,
        effects: props.effects || 5,
        //allowReselect: props.allowReselect !== false,
        transparent: props.transparent || false,
        value: props.value || '000000',
        cls: props.cls || ''
    };
    const curColor = props.curColor;
    const themeColors = [];
    const effectColors = Common.Utils.ThemeColor.getEffectColors();
    let row = -1;
    effectColors.forEach((effect, index) => {
        if (0 == index % options.themecolors) {
            themeColors.push([]);
            row++;
        }
        themeColors[row].push(effect);
    });
    const standartColors = Common.Utils.ThemeColor.getStandartColors();
    // custom color
    let customColors = props.customColors;
    if (customColors.length < 1) {
        customColors = localStorage.getItem('mobile-custom-colors');
        customColors = customColors ? customColors.toLowerCase().split(',') : [];
    }

    return (
        <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
            <List>
                <ListItem className='theme-colors'>
                    <div>{ _t.textThemeColors }</div>
                    <ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
                <ListItem className='standart-colors'>
                    <div>{ _t.textStandartColors }</div>
                    <StandartColors options={options} standartColors={standartColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
                <ListItem className='dynamic-colors'>
                    <div>{ _t.textCustomColors }</div>
                    <CustomColors options={options} customColors={customColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
            </List>
        </div>
    )
};

const CustomColorPicker = props => {
    //Function to convert rgb color to hex format
    const hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
    const hex = x => {
        return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    };
    const rgb2hex = rgb => {
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    };

    let currentColor = props.currentColor;
    if (props.autoColor) {
        currentColor = rgb2hex(props.autoColor);
    }
    if (currentColor === 'transparent') {
        currentColor = 'ffffff';
    }
    const countDynamicColors = props.countdynamiccolors || 10;
    const [stateColor, setColor] = useState(`#${currentColor}`);
    useEffect(() => {
        if (document.getElementsByClassName('color-picker-wheel').length < 1) {
            const colorPicker = f7.colorPicker.create({
                containerEl: document.getElementsByClassName('color-picker-container')[0],
                value: {
                    hex: `#${currentColor}`
                },
                on: {
                    change: function (value) {
                        setColor(value.getValue().hex);
                    }
                }
            });
        }
    });<commit_msg>[common mobile] Added check for existence of current color into Custom color component<commit_after>import React, { useState, useEffect } from 'react';
import { f7, ListItem, List, Icon } from 'framework7-react';
import { useTranslation } from 'react-i18next';

const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
    return (
        <div className='palette'>
            {themeColors.map((row, rowIndex) => {
                return(
                    <div key={`tc-row-${rowIndex}`} className='row'>
                        {row.map((effect, index) => {
                            return(
                                <a key={`tc-${rowIndex}-${index}`}
                                   className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
                                   style={{ background: `#${effect.color}`}}
                                   onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                ></a>
                            )
                        })}
                    </div>
                )
            })}
        </div>
    )
};

const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
    return (
        <div className='palette'>
            {standartColors.map((color, index) => {
                return(
                    index === 0 && options.transparent ?
                        <a key={`sc-${index}`}
                           className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
                           onClick={() => {onColorClick('transparent')}}
                        ></a> :
                        <a key={`sc-${index}`}
                           className={curColor && curColor === color ? ' active' : ''}
                           style={{ background: `#${color}` }}
                           onClick={() => {onColorClick(color)}}
                        ></a>
                )
            })}
        </div>
    )
};

const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
    const colors = customColors.length > 0 ? customColors : [];
    const emptyItems = [];
    if (colors.length < options.customcolors) {
        for (let i = colors.length; i < options.customcolors; i++) {
            emptyItems.push(<a className='empty-color'
                                key={`dc-empty${i}`}
                                onClick={() => {onColorClick('empty')}}
            ></a>)
        }
    }
    return (
        <div className='palette'>
            {colors && colors.length > 0 && colors.map((color, index) => {
                return(
                    <a key={`dc-${index}`}
                       className={curColor && curColor === color ? 'active' : ''}
                       style={{background: `#${color}`}}
                       onClick={() => {onColorClick(color)}}
                    ></a>
                )
            })}
            {emptyItems.length > 0 && emptyItems}
        </div>
    )
};

const ThemeColorPalette = props => {
    const {t} = useTranslation();
    const _t = t('Common.ThemeColorPalette', {returnObjects: true});
    const options = {
        customcolors: props.customcolors || 10,
        standardcolors: props.standardcolors || 10,
        themecolors: props.themecolors || 10,
        effects: props.effects || 5,
        //allowReselect: props.allowReselect !== false,
        transparent: props.transparent || false,
        value: props.value || '000000',
        cls: props.cls || ''
    };
    const curColor = props.curColor;
    const themeColors = [];
    const effectColors = Common.Utils.ThemeColor.getEffectColors();
    let row = -1;
    effectColors.forEach((effect, index) => {
        if (0 == index % options.themecolors) {
            themeColors.push([]);
            row++;
        }
        themeColors[row].push(effect);
    });
    const standartColors = Common.Utils.ThemeColor.getStandartColors();
    // custom color
    let customColors = props.customColors;
    if (customColors.length < 1) {
        customColors = localStorage.getItem('mobile-custom-colors');
        customColors = customColors ? customColors.toLowerCase().split(',') : [];
    }

    return (
        <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
            <List>
                <ListItem className='theme-colors'>
                    <div>{ _t.textThemeColors }</div>
                    <ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
                <ListItem className='standart-colors'>
                    <div>{ _t.textStandartColors }</div>
                    <StandartColors options={options} standartColors={standartColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
                <ListItem className='dynamic-colors'>
                    <div>{ _t.textCustomColors }</div>
                    <CustomColors options={options} customColors={customColors} onColorClick={props.changeColor} curColor={curColor}/>
                </ListItem>
            </List>
        </div>
    )
};

const CustomColorPicker = props => {
    //Function to convert rgb color to hex format
    const hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
    const hex = x => {
        return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    };
    const rgb2hex = rgb => {
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    };

    let currentColor = props.currentColor;
    if (props.autoColor) {
        currentColor = rgb2hex(props.autoColor);
    }
    if (currentColor === 'transparent' || !currentColor) {
        currentColor = 'ffffff';
    }
    const countDynamicColors = props.countdynamiccolors || 10;
    const [stateColor, setColor] = useState(`#${currentColor}`);
    useEffect(() => {
        if (document.getElementsByClassName('color-picker-wheel').length < 1) {
            const colorPicker = f7.colorPicker.create({
                containerEl: document.getElementsByClassName('color-picker-container')[0],
                value: {
                    hex: `#${currentColor}`
                },
                on: {
                    change: function (value) {
                        setColor(value.getValue().hex);
                    }
                }
            });
        }
    });
{'fraction_non_alphanumeric': 0.15411011133140157, 'fraction_numerical': 0.00793045600122007, 'mean_word_length': 1.6651087177402968, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '672775', 'n_tokens_mistral': 3613, 'n_tokens_neox': 3554, 'n_words': 667}