Npm-vrit-custom-uikit NPM

Краткое описание данного npm пакета:

Данный пакет представляет из себя библиотеку из 12 кастомизируемых(10 шт.) и некастомизируемых(2шт.) React компонентов.

Список компонентов:

1) BottomButton - кастомизируемый; 2) Checkbox - кастомизируемый; 3) Counter - кастомизируемый; 4) Dropdown - кастомизируемый; 5) Searchbar - кастомизируемый; 6) NavigateHeader - кастомизируемый; 7) CustomSwiper - кастомизируемый; 8) ModalWindow - кастомизируемый; 9) Input - некастомизируемый; 10) CustomIMG - некастомизируемый, сложная модель; 11) Favorite - кастомизируемый, сложная модель; 12) Table - кастомизируемый, сложная модель.

Также компоненты делятся еще на 2 типа: 1) со сложными моделями(требуют большие массивы данных(Table), либо связь с сервером (CustomIMG, Favorite)), 2) с простыми моделями(можно использовать в приложениях, не использующих сеть/большие массивы данных).

Для установки требуется прописать в терминале команду: "npm i npm-vrit-custom-uikit".

Для подключения в ваш реакт проект элементы необходимо заимпортировать. Для импорта библиотечных компонентов в ваш компонент необходимо сделать импорт: import "name" from "npm-vrit-custom-uikit"; , где "name" - название необходимого компонента из библиотеки.

Описание компонентов и особенности их использования:

1)Кастомизируемые компоненты:

BottomButton, Checkbox, Counter, Dropdown, Searchbar, NavigateHeader, CustomSwiper, Favorite, ModalWindow, Table.

Все кастомизируемые компоненты можно стилизовать, закидывая в пропсы атрибуты, которые начинаются на "style_". Подраздел "Подключение" гласит о том, что базово требуют компоненты при использовании в вашем компоненте.

BottomButton:

1) style_wrapper - обертка 2) style_main - содержимое

Checkbox:

Подключение:

const [checked,setChecked] = useState(false);

1) style_image_container - контейнер 2) style_checkbox_label - стилизация надписи рядом с чекбоксом 3) style_checkbox_input - стилизация инпута (?) 4) style_image - стилизация картинки

Counter:

Подключение:

const [counterValue,setCounterValue] = useState(0);

1) style_wrapper - обертка 2) style_images - стилизация картинок плюса и минуса 3) style_p - стилизация числа-счетчика 4) picPlusSrc - путь к кастомной картинке плюса 5) picMinusSrc - путь к кастомной картинке минуса

Dropdown:

Подключение:

interface IDDoptions{
key:string;
name:string;
visible?: boolean;
}

const [shop,setShop] = useState("1");

const DDoptions:IDDoptions[] =[{key:"2",name:"two"},{key: "3",name: "three"}];
<Dropdown
    options={DDoptions}
    value={shop}
    valueSetter={setShop}
    ...
/>

1) style_container - контейнер; 2) style_dropDownDisplay - стилизация главного поля; 3) style_arrow_image - стилизация картинки стрелки; 4) style_list - стилизация выпадающего списка; 5) style_list_elem - стилизация элемента выпадающего списка; 6) dropDownIconSrc - путь к кастомной картинке со стрелкой; 7) errorIconSrc - путь к кастомной картинке с иконкой ошибки;

NavigateHeader:

1) style_wrapper - обертка; 2) style_title - стилизация названия хедера; 3) style_trash - стилизация картинки мусорки; 4) style_arrow - стилизация картинки стрелки "обратно";

CustomSwiper:

Подключение:

items - массив из JSX элементов

1) withDynamicDots - с динамическими точками; 2) withClickableDots - на точки можно нажимать; 3) withPagination - с точкамии; 4) withLoop - с петлей (бесконечный свайпер); 5) slidesPerView - сколько слайдов уместится в поле зрения; 6) spaceIncrement - то, на сколько будет увеличиваться расстояние между слайдами при увеличении разрешения экрана; 7) spaceBetween - расстояние между блоками; 8) withTitle - с заголовком; 9) RouteIntoTitle - если в заголовке должен быть путь-маршрутизатор, то его вставить в этот атрибут; 10) style_title_div - стилизует контейнер заголовка; 11) style_title - стилизует сам заголовок; 12) style_swiper_slide - стилизация слайда; 13) style_swiper - главный стилизатор, также работает с глобальными переменными свайпера:

    "--swiper-pagination-color": "#e707ba", - цвет точек;
    "--swiper-pagination-bullet-inactive-color": "#1328b9", - цвет неактивных точек;
    "--swiper-pagination-bullet-inactive-opacity": "1", - прозрачность неактивных точек;
    "--swiper-pagination-bullet-size": "16px", - размер точек;
    "--swiper-pagination-bullet-horizontal-gap": "6px" - расстояние между точками;

Table:

Подключение:

interface IRowElement{
    visible:boolean[];
    filter:any[];
    content: any;
}

1) style_table_container - обертка самой таблицы; 2) style_header_container - обертка хедера таблицы; 3) style_header_color - только цветовые значения хедера; 4) style_header_lines - вертикальные линии в хедере;

Favorite:

Подключение:

Необходимо иметь функцию по типу Promise: WatchListSwitch: (id: string)=>any;

style_main - размер сердца;

ModalWindow:

Подключение:

const [openModal,setOpenModal] = useState(false);

const OpenModalHandler = () => {
    setOpenModal(true);
}
const CloseModalHandler = () => {
    setOpenModal(false);
}
<div onClick={OpenModalHandler}>
{openModal && <ModalWindow onClose={CloseModalHandler} ... />}
</div>

1) onlyConfirm - опция чтобы бло только "OK"; 2) textToOnlyConfirm - текст для одной опции (что вместо "OK"); 3) textForYes - текст для согласия; 4) textForNo - текст для отрицания; 5) style_close_wrapper - стилизация всей области экрана кроме модального окна(то, что затемняется); 6) style_modal_wrapper - обертка; 7) style_modal_container - контейнер с модальным окном; 8) style_modal_title - стилизация контейнера с заголовком; 9) style_modal_text - стилизация контейнера с текстом; 10) style_modal_horiz_line - стилизация горизонтальной линии, которая отделяет опции от основной части модального окна; 11) style_modal_onlyConfirm_button - стилизация контейнера с "OK"; 12) style_modal_close_container - стилизация контейнера для картинки с крестиком; 13) style_modal_close_icon - стилизация картинки с крестиком; 14) style_modal_agree - стилизация контейнера с согласием; 15) style_modal_disagree - стилизация контейнера с отрицанием; 16) style_modal_vert_line - стилизация вертикальной линии между "да" и "нет";

Searchbar:

1) style_wrapper - обертка; 2) style_SearchbarInner - стилизация контейнера, который хранит поле ввода (как бы border); 3) style_SearchbarLogo - картинка поиска; 4) style_SearchbarInput - стилизация поля ввода;

2)Некастомизируемые компоненты:

Input, CustomIMG

Input:

Подключение:

const [input,setInput] = useState("");
onChange={(event) => setInput(event.target.value)}

типы масок на инпут: 1) "text" - обычный текст; 2) "number" - только числа; 3) "telephone" - номер телефона; 4) "inputMask" - кастом маска; 5) "password" - пароль, скрывается точками;