You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -127,8 +121,6 @@ export default class Tree extends Component {
127
121
| scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`. |
128
122
| nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](./src/node-renderer-default.tsx)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.tsx` to use as a base, and customize as needed. |
129
123
| placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](./src/placeholder-renderer-default.tsx)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead. |
130
-
| virtuosoProps | object | Properties to set directly on the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component.
131
-
| virtuosoRef | ref | A [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) via which to access the underlying [Virtuoso](https://virtuoso.dev/virtuoso-api-reference/) component's methods.
132
124
133
125
## Data Helper Functions
134
126
@@ -154,19 +146,6 @@ Check out the helper functions exported from [`tree-data-utils.ts`](./src/utils/
154
146
-**`isDescendant`**: Check if a node is a descendant of another node.
155
147
-**`getDepth`**: Get the longest path in the tree.
156
148
157
-
## Themes
158
-
159
-
Using the `theme` prop along with an imported theme module, you can easily override the default appearance with another standard one.
**Help Wanted** - As the themes feature has just been enabled, there are very few (only _two_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/nosferatu500/theme-file-explorer) as a template to plug in your own stuff.
170
149
171
150
## Browser Compatibility
172
151
@@ -175,16 +154,10 @@ Using the `theme` prop along with an imported theme module, you can easily overr
175
154
| Chrome | Yes |
176
155
| Firefox | Yes |
177
156
| Safari | Yes |
178
-
|IE 11| Yes |
157
+
|Edge | Yes |
179
158
180
159
## Troubleshooting
181
160
182
-
### If it throws "TypeError: fn is not a function" errors in production
183
-
184
-
This issue may be related to an ongoing incompatibility between UglifyJS and Webpack's behavior. See an explanation at [create-react-app#2376](https://github.com/facebookincubator/create-react-app/issues/2376).
185
-
186
-
The simplest way to mitigate this issue is by adding `comparisons: false` to your Uglify config as seen here: https://github.com/facebookincubator/create-react-app/pull/2379/files
187
-
188
161
### If it doesn't work with other components that use react-dnd
189
162
190
163
react-dnd only allows for one DragDropContext at a time (see: https://github.com/gaearon/react-dnd/issues/186). To get around this, you can import the context-less tree component via `SortableTreeWithoutDndContext`.
@@ -206,22 +179,19 @@ After cloning the repository and running `yarn install` inside, you can use the
206
179
```sh
207
180
# Starts a webpack dev server that hosts a demo page with the component.
208
181
# It uses react-hot-loader so changes are reflected on save.
209
-
yarn start
182
+
npm start
210
183
211
184
# Start the storybook, which has several different examples to play with.
212
185
# Also hot-reloaded.
213
-
yarn run storybook
214
-
215
-
# Runs the library tests
216
-
yarn test
186
+
npm run storybook
217
187
218
188
# Lints the code with eslint
219
-
yarn run lint
189
+
npm run lint
220
190
221
191
# Lints and builds the code, placing the result in the dist directory.
222
192
# This build is necessary to reflect changes if you're
223
193
# `npm link`-ed to this repository from another local project.
0 commit comments