diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 79ba314c..09d176c3 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -14,6 +14,6 @@ jobs: node-version: "20.x" registry-url: "https://registry.npmjs.org" - run: yarn - - run: yarn publish --tag latest + - run: sh bin/publish --tag latest env: YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }} diff --git a/CHANGELOG.md b/CHANGELOG.md index 7356f2fa..1cc29398 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,15 @@ +# Version 3.5.0 + +**Features** + +- `getTreeLinePrefix` utility for rendering tree connector lines (#324) +- `dndBackend` prop on `Tree` for supplying a custom react-dnd backend (#326, originally #316) +- `selectMulti` now accepts an options argument (`{ align, focus }`) for consistency with `select` (#266) + +**Fixes** + +- `dndManager` prop no longer triggers unnecessary re-renders; `backend`/`options` are only passed to `DndProvider` when no custom manager is supplied (#237) + # Version 3.0.0 **Breaking Changes** diff --git a/README.md b/README.md index 5f4da4b3..4b619833 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,8 @@ const { ref, width, height } = useResizeObserver(); - Interfaces - [Node API](#node-api-reference) - [Tree API](#tree-api-reference) +- Utilities + - [getTreeLinePrefix](#gettreelineprefix) ## Tree Component Props @@ -303,7 +305,7 @@ interface TreeProps { padding?: number; /* Config */ - childrenAccessor?: string | ((d: T) => T[] | null); + childrenAccessor?: string | ((d: T) => readonly T[] | null); idAccessor?: string | ((d: T) => string); openByDefault?: boolean; selectionFollowsFocus?: boolean; @@ -343,7 +345,11 @@ interface TreeProps { dndRootElement?: globalThis.Node | null; onClick?: MouseEventHandler; onContextMenu?: MouseEventHandler; - dndManager?: DragDropManager; + dndBackend?: Extract< + DndProviderProps, + { backend: unknown } + >["backend"]; + dndManager?: ReturnType; } ``` @@ -648,17 +654,17 @@ _tree_.**isSelected**(_id_) : _boolean_ Returns true if the node with _id_ is selected. -_tree_.**select**(_id_) +_tree_.**select**(_id_, _[opts]_) -Select only the node with _id_. +Select only the node with _id_. Accepts an optional options object: `{ align?: "auto" | "smart" | "center" | "end" | "start"; focus?: boolean }`. `align` is forwarded to the scroll behavior; passing `focus: false` suppresses the focus change and the `onFocus` callback. _tree_.**deselect**(_id_) Deselect the node with _id_. -_tree_.**selectMulti**(_id_) +_tree_.**selectMulti**(_id_, _[opts]_) -Add to the selection the node with _id_. +Add to the selection the node with _id_. Accepts the same options object as `select`. _tree_.**selectContiguous**(_id_) @@ -740,6 +746,43 @@ _tree_.**root** : _NodeApi_ Returns the root _NodeApi_ instance. Its children are the Node representations of the _data_ prop array. +## Utilities + +### getTreeLinePrefix + +Generates a tree-line prefix string (using Unix `tree`-style box-drawing characters like `├`, `└`, `│`) for a given node. Useful when you want ASCII/Unicode connector lines in a custom node renderer. + +```ts +function getTreeLinePrefix( + node: NodeApi, + chars?: Partial +): string; + +type TreeLineChars = { + last: string; // default: "└ " + middle: string; // default: "├ " + pipe: string; // default: "│ " + blank: string; // default: "\u3000 " +}; +``` + +Wrap the prefix in a monospace span so the connectors line up: + +```tsx +import { Tree, getTreeLinePrefix } from "react-arborist"; + +function Node({ node, style }) { + return ( +
+ {getTreeLinePrefix(node)} + {node.data.name} +
+ ); +} +``` + +Pass a partial `chars` object to override any of the default characters (e.g. for an ASCII-only style). + ## Author [James Kerr](https://twitter.com/specialCaseDev) at [Brim Data](https://brimdata.io) for the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A). diff --git a/modules/react-arborist/package.json b/modules/react-arborist/package.json index 9ab9a2d9..e2a70f36 100644 --- a/modules/react-arborist/package.json +++ b/modules/react-arborist/package.json @@ -1,6 +1,6 @@ { "name": "react-arborist", - "version": "3.4.3", + "version": "3.5.0", "license": "MIT", "source": "src/index.ts", "main": "dist/main/index.js",