src/added-tools/ColorPicker/ColorPicker.jsx - master - DevDenzo/ERP

src/added-tools/ColorPicker/ColorPicker.jsx
62 строки3 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React
import React from 'react';
// Подключаем дополнительный функционал шаблонных строк
import classNames from "classnames";
// Подключаем библиотеку проверки параметров компонента
import PropTypes from "prop-types";
// Подключаем библиотеку генерации случайного id
import { v4 as uuidv4 } from 'uuid';

// Компонент выбора цвета
const ColorPicker = (props) => {
    // Получаем параметры компонента из объекта props
    const { title, type } = props;

    // Создаем массив доступных цветов для выбора
    const colors = [
        { id: uuidv4(), name: 'blue', className: 'color-button--blue' },
        { id: uuidv4(), name: 'indigo', className: 'color-button--indigo' },
        { id: uuidv4(), name: 'purple', className: 'color-button--purple' },
        { id: uuidv4(), name: 'yellow', className: 'color-button--yellow' },
        { id: uuidv4(), name: 'orange', className: 'color-button--orange' },
        { id: uuidv4(), name: 'green', className: 'color-button--green' },
        { id: uuidv4(), name: 'teal', className: 'color-button--teal' },
        { id: uuidv4(), name: 'cyan', className: 'color-button--cyan' },
        { id: uuidv4(), name: 'gray', className: 'color-button--gray' },
        { id: uuidv4(), name: 'dark', className: 'color-button--dark' },
        { id: uuidv4(), name: 'white', className: 'color-button--white' }
    ];

    // отображаем представление компонента
    return (
        <div className={classNames('color-choice')}>
            <div className={classNames('color-choice-title')}>
                { title }
            </div>
            <div className={classNames('color-picker', `color-picker-${type}`)}>
                {colors.map((color, index) => (
                    <button
                        key={index}
                        type="button"
                        className={classNames(
                        'btn',
                            'btn-light',
                            'color-button',
                            color.className,
                        )}
                    />
                ))}
            </div>
        </div>
    );
};

// Определение пропсов компонента выбора цвета
ColorPicker.propTypes = {
    // Определяем обязательный заголовок цветового пикера
    title: PropTypes.string.isRequired,
    // Определяем обязательный тип цветового пикера
    type: PropTypes.string.isRequired,
};

export default ColorPicker;