/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/tree-dnd/src/components/TreeDropBetweenIndicator/TreeDropBetweenIndicator.tsx
56 строк
1 KB
Pavel Uryadyshev
feat(tree-dnd): реализован новый компонент Tree с поддержкой drag-and-drop
09 июл 2025, 13:07
09 июл 2025, 13:07
a06fe68
Код
Авторство
О чём код?
'use client' import * as React from 'react' import { createUseStyles } from '@v-uik/theme' import { useClassList } from '@v-uik/hooks' import { useTreeContext } from '@v-uik/tree' import { TreeClasses } from '../../classes' export type TreeDropBetweenIndicatorClasses = { /** * Стиль, применяемый к индикатору, отображаемому при перемещении узла между двумя другими узлами. * * @inner */ dropBetweenIndicatorLine?: string } type TreeDropBetweenIndicatorProps = { indent?: number } const useStyles = createUseStyles({ dropBetweenIndicator: { display: 'flex', height: 10, width: '100%', position: 'absolute', }, dropBetweenIndicatorContainer: { display: 'flex', width: '100%', }, }) export const TreeDropBetweenIndicator = ({ indent, }: TreeDropBetweenIndicatorProps): React.ReactElement | null => { const classesList = useStyles() const { classesMap: classesMapContext } = useTreeContext() const classesMap = useClassList( classesList, classesMapContext ) as Required<TreeClasses> & ReturnType<typeof useStyles> return ( <span className={classesMap.dropBetweenIndicator}> <span className={classesMap.dropBetweenIndicatorContainer} style={{ marginLeft: indent }} > <span className={classesMap.dropBetweenIndicatorLine} /> </span> </span> ) }