react complex tree
2.4.6
Непредвзятый доступный компонент дерева с множественным выбором и перетаскиванием
Загляните в официальную документацию, чтобы увидеть больше примеров и более полную документацию. Многие распространенные проблемы или вопросы описаны на странице часто задаваемых вопросов.
Журнал изменений доступен по адресу https://rct.lukasbach.com/docs/changelog. Ознакомьтесь с примечаниями к выпуску версии 2 при переходе с версии 1.x на версию 2.x.
Разработка реагирования-комплекса-дерева поддерживается сообществом. Особая благодарность:
Узнайте, как поддержать разработку реагирующего сложного дерева.
Чтобы начать использовать React Complex Tree, установите его в свой проект как зависимость через
npm install react-complex-tree
yarn add react-complex-tree
затем импортируйте его и добавьте древовидную структуру с помощью
import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;
< UncontrolledTreeEnvironment
dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
getItemTitle = { item => item . data }
viewState = { { } }
>
< Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;Более подробная информация представлена в Руководстве по началу работы. Руководство по интеграции данных с поставщиком данных статического дерева также является хорошей отправной точкой для понимания того, как интегрировать данные с React Complex Tree.
самоуверенный
React Complex Tree не делает никаких предположений относительно эстетики вашего веб-дизайна или любых технологий, которые вы используете. Рендеринг полностью зависит от вас, и каждый узел, записанный в DOM, можно настроить. Для облегчения интеграции предусмотрены разумные значения по умолчанию, стилизованные с помощью легко настраиваемых классов CSS.
Доступный
Древовидная структура соответствует спецификации W3C для доступных деревьев. Он поддерживает программы чтения с экрана и реализует все распространенные взаимодействия с клавиатурой, поэтому любое взаимодействие, от перемещения фокуса до перетаскивания элементов, возможно без использования мыши.
Мощное перетаскивание
Дерево предоставляет ожидаемые возможности, которые опытные пользователи ожидают от расширенных инструментов. Выберите столько элементов, сколько хотите, и перетащите их в любое место того же или любого другого дерева! React Complex Tree включает в себя множество параметров настройки перетаскивания, таких как запрет изменения порядка или разрешение перетаскивания только определенных элементов.
Полное управление с клавиатуры
Дерево полностью управляется с помощью клавиатуры. Он реализует все элементы управления, предложенные W3C, для обеспечения доступности деревьев, а также предоставляет дополнительные элементы управления для перетаскивания, поиска или переименования элементов.
Нулевые зависимости
Мы знаем, как раздражает добавление пакета и получение сотен одноранговых зависимостей. Поскольку React Complex Tree не делает никаких предположений относительно ваших зависимостей, нам также не нужно загромождать ваш проект дополнительными пакетами. Добавляя React Complex Tree в свой пакет, вы добавляете только это и никаких других зависимостей.
Множественный выбор
В отличие от других более простых древовидных библиотек, React Complex Tree позволяет вам выбирать столько элементов, сколько вы хотите, и перемещать их все одновременно, перетаскивая в другое место. Зачем предоставлять пользователям меньшую функциональность, если вы можете без дополнительных усилий предложить мощные возможности дерева? Попробуйте это на демо-версии выше и выберите несколько элементов одновременно, удерживая клавишу управления на клавиатуре, нажимая на элементы, а затем перетаскивая все сразу в другое место.
Переименование встроенного
React Complex Tree обеспечивает переименование как встроенную функцию со своими возможностями. Выберите любой элемент и нажмите F2, чтобы начать переименование элемента. Это обеспечивает более интуитивный способ переименования элементов для пользователей без реализации настраиваемых диалоговых решений, которые более мешают рабочему процессу ваших пользователей.
Функциональность поиска
Вы когда-нибудь пытались найти этот единственный файл в огромном хаотическом дереве файлов, который, как вы знаете, существует, но понятия не имеете, где именно? Просто начните вводить текст, фокусируясь на дереве, и появится первый элемент, соответствующий вашему запросу. Это также улучшает доступность дерева, поскольку пользователям, использующим только клавиатуру, легче перемещаться по древовидной структуре.
Среды с несколькими деревьями
В своем веб-приложении вы можете использовать несколько деревьев, которые имеют общее состояние и могут взаимодействовать друг с другом. Элементы состояния и дерева предоставляются общему компоненту поставщика реагирования, и можно легко интегрировать столько деревьев, сколько вы хотите, просто добавив компоненты дерева под поставщиком. Деревьям не нужно предоставлять свое собственное состояние, им нужен только идентификатор и корневой элемент, вся остальная логика обрабатывается провайдером.
Контролируемые и неконтролируемые интерфейсы
Самый простой способ использования React Complex Tree — это использование неконтролируемой среды дерева, которая сама поддерживает состояние дерева, т. е. какие элементы выбираются, расширяются и т. д. Вам нужно только предоставить поставщика данных, который определяет, как элементы асинхронно загружаются, а все остальное сделает среда. Однако, если вам нужен больший контроль, вы можете вместо этого использовать контролируемую среду для полной настройки.
Создано на React и TypeScript.
React Complex Tree основан на React (да) и легко интегрируется в существующие проекты React, просто импортируя и используя предоставленные компоненты. Исчерпывающая информация о типах предоставляется в виде интерфейсов TypeScript, которые упрощают интеграцию и обеспечивают дополнительную безопасность типов независимо от того, используете ли вы TypeScript в своем проекте или нет.
Если вы хотите разработать RCT локально, вот несколько советов:
yarn , чтобы установить зависимостиyarn build один раз локально, прежде чем запускать какие-либо команды разработки.yarn start , чтобы запустить docusaurus и пакет в режиме просмотра, и/или yarn storybook чтобы запустить сборник рассказов.
