eda-kuda-ui v0.5.7
Описание
Данная либа (ui-lib) была скомпонована с помощью пакета tsdx (https://github.com/jaredpalmer/tsdx).
Название пакета - eda-kuda-ui.
Для корректного добавления компонентов (чтобы собрался пакет) в библиотеку нужно:
- сделать экспорт этого компонента внутри src/index.tsx;
Ниже приведен пример:
файл: src/components/button/Button.tsx
const Button = () => <button></button>;
export default Button;
файл: src/index.tsx
export { default as Button } from './components/button/Button';
Использование
Ниже приведен пример использования
import { Button } from 'eda-kuda-ui';
Компоненты
Ниже приведено краткое описание параметров, которые принимают компоненты.
Button
size
(необязательный параметр) - задает размер шрифта, внутренние отступы и радиус скругления границы кнопки (в rem-единицах измерения). Принимает элемент enum ButtonSize (например, ButtonSize.SMALL);
variant
(необязательный параметр) - задает вариант отображения кнопки (варианты:
- ButtonVariant.SOLID - с заливкой заднего фона и границей, их цвета совпадают,
- ButtonVariant.GHOST - заливка отсутствует, цвета имеют граница и цвет текста,
ButtonVariant.TEXT - заливка и граница отсутствует, цвет имеет только текст);
icon
(необязательный параметр) - позволяет добавить иконку в кнопку. Принимает в качестве значения элемент из enum ICONS;
color
(необязательный параметр) - задает цвет иконке (значения аналогичны CSS-цветам);
reverse
(необязательный параметр) - меняет местами текст кнопки и иконку (по умолчанию иконка расположена слева - false);
liquid
(необязательный параметр) - будет ли кнопка отображаться как блочный элемент (по умолчанию false);
justifyContent
(необязательный параметр) - как будет выравниваться содержимое (текст + иконка) кнопки. Принимает элемент enum JustifyContent (например,JustifyContent.START);
buttonColor
(необязательный параметр) - задает цветовую схему кнопки (цвет границы + заливка + текст). Принимает элемент кнопки ButtonColorSchemeType (например, ButtonColorSchemeType.PRIMARY).
CheckBox
checked
- является ли чекбокс нажатым;
onChange
- принимает функцию, которая при клике выполняется;
label
(необязательный параметр) - добавляет описание чекбокса (по умолчанию пустая строка);
id
- задает идентификатор для чекбокса (по умолчанию пустая строка);
labelLeft
(необязательный параметр) - данное значение задает, находится ли подпись к чекбоксу слева (по умолчанию false).
CheckBoxSwitch
checked
- является ли чекбокс нажатым;
onChange
- принимает функцию, которая при клике выполняется;
id
- задает идентификатор для чекбокса (по умолчанию пустая строка);
label
(необязательный параметр) - добавляет описание чекбокса (по умолчанию пустая строка);
labelLeft
(необязательный параметр) - данное значение задает, находится ли подпись к чекбоксу слева относительно чекбокса (по умолчанию false).
DatePicker
icon
(необязательный параметр) - задает, будет ли отображаться иконка календаря в input;
maxWidth
(необязательный параметр) - задает максимальную ширину инпута календаря. По умолчанию пустая строка;
value
- задает объект выбранной даты (имеет поле date типа Date и isDateSelected - булево значение);
onDateChange
(необязательный параметр) - функция, которая выполняется при выборе даты.
Dropdown
optionItems
- массив элементов, из которых будет формироваться выпадающий список. Элемент этого массива представляет собой объект с полями name (текст элемента) и onClick() - функция, выполняющаяся при нажатии на элемент списка;
referenceRef
- ссылка на элемент, при нажатии на который выпадаюший список раскрывается.
GeneralTable
Компонент принимает в себя columns
и data
.
columns
- данные, которые описывают структуру таблицы( в частности, колонки). По своей структуре это массив объектов:
Header
- разметка(текст или компонент), которая будет отображаться внутри заголовка колонки. Если внутри заголовка будет компонент то нужно задать свойствоCell
внутри этого же объекта.accessor
- поле (строка), по которому компонент GeneralTable будет понимать, какое поле из переданного объекта внутриdata
должно быть в этой колонке.align
(необязательный параметр) - задает выравнивание заголовку(center
,left
,right
).Cell
(необязательный параметр) - компонент, который будет рендерится внутри ячейки;maxWidth
(необязательный параметр) - задает максимальную ширину столбца;disableSortBy
(необязательный параметр) - отключает сортировку по мин/макс значению в колонке;
Эти данные (columns
) нужно мемоизировать (например, использовать const memoizedColumns = useMemo(() => columns),[]
).
data
- данные(ряды в таблице, которые будут отображаться). Структура представляет массив с полями, названия которых зависят от значений accessor
внутри массива columns
. Например, если columns будет иметь такую структуру,
const columns = [
{
Header: "Имя",
accessor: "name"
},
{
Header: "Телефон",
accessor: "phone"
},
{
Header: "Почта",
accessor: "email"
}
]
то data
будет массив из объектов со следующими полями:
const data = [
{
name: "Sergio",
email: "user1@mail.ru",
phone: "+5436232"
},
{
name: "Pedro",
email: "user3@mail.ru",
phone: "+555555"
},
....
]
Icon
name
- задает, какая иконка будет отображаться. Принимает элемент enum ICONS;
color
(необязательный параметр) - задает цвет иконки (по умолчанию #000);
size
(необязательный параметр) - задает размер иконки (строка, по умолчанию 2rem);
className
(необязательный параметр) - добавляет классы иконке (по умолчанию пустая строка);
alt
(необязательный параметр) - добавляет подпись к иконке, если иконка не загрузилась (по умолчанию пустая строка).
Indicator
color
(необязательный параметр) - задает цвет индикатора. Принимает элемент enum IndicatorColors, по умолчанию IndicatorColors.ACTIVE;
size
(необязательный параметр) - задает размер индикатора. Строка, по умолчанию равна 0.5rem.
Input
color
(необязательный параметр) - задает цвет иконки и текста внутри инпута. По умолчанию пустая строка;
label
(необязательный параметр) - добавляет подпись сверху инпута. По умолчанию пустая строка;
value
(необязательный параметр) - Задает значение инпута. По умолчанию пустая строка;
icon
(необязательный параметр) - позволяет добавить иконку слева от значения. По умолчанию не установлена, принимает элемент enum ICONS;
fontSize
(необязательный параметр) - устанавливает размер иконки. По умолчанию 1rem;
maxWidth
(необязательный параметр) - ограничивает максимальную ширину инпута. По умолчанию пустая строка(размер не ограничен);
id
- задает идентификатор инпута;
readOnly
(необязательный параметр) - задает, можно ли вводить текст в инпут. По умолчанию false;
reverse
(необязательный параметр) - задает порядок расположения текста и иконки. По умолчанию false(иконка расположена слева от текста);
bgColor
(необязательный параметр) - задает цвет заливки инпута. По умолчанию цвет #f5f5f5;
onInputChange
(необязательный параметр) - функция, которая выполняется при изменении значения инпута.
Примечание: в случае передачи свойства type
со значением "password"
добавляется кнопка для скрытия/отображения вводимого пароля.
InputImg
id
- задает идентификатор инпута;
onChange
- функция,которая выполняется при изменении значения инпута;
value
(необязательный параметр) - задает изображение, которое будет отображаться в инпуте;
width
(необязательный параметр) - задает ширину инпута. По умолчанию 250px.
InputSelect
icon
(необязательный параметр) - позволяет выбрать, какая иконка будет отображаться в правом углу. По умолчанию иконка не задана, принимает элемент enum ICONS;
fontSize
(необязательный параметр) - устанавливает размер иконки. По умолчанию 1rem;
color
(необязательный параметр) - задает цвет иконки. Принимает строку;
children
- дочерние элементы (теги <option>
), из которых формируется компонент;
maxWidth
(необязательный параметр) - задает максимальную ширину выпадающего инпута. По умолчанию пустая строка (ширина не ограничена).
InputTextArea
maxWidth
(необязательный параметр) - задает макс ширину инпута. По умолчанию пустая строка (ширина не ограничена);
height
(необязательный параметр) - задает макс высоту инпута. По умолчанию 7.75rem;
onTextChange
- функция, которая вызывается при изменении значения инпута;
value
- задает значение инпута.
Modal
onClose
- функция, которая вызывается при закрытии модального окна;
children
- теги или компоненты, которые отображаются при открытии модального окна;
open
- задает, открыто ли по умолчанию модальное окно.
Tag
variant
(необязательный параметр) - задает цвета отображения тега. Принимает элементы TagColorScheme, по умолчанию установлено TagColorScheme.NEUTRAL;
text
- задает текст тега.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago